N.1 <div>盒子语法属性介绍
| 1）盒子边框 border:1px solid red; 2）盒子边距属性（1）外边距属性 margin 简写属性。在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。 其中：margin:(auto ,auto); 第一个表示top和bottom上下关系，第二个表示left和right左右关系 因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中） （2）内边距属性 padding 使用简写属性设置在一个声明中的所有填充属性 padding-bottom 设置元素的底部填充 padding-left 设置元素的左部填充 padding-right 设置元素的右部填充 padding-top 设置元素的顶部填充 3）盒子宽高属性width: 600px; height: 300px; width: 95%; 宽如果设置百分比的话,就以浏览器的窗口大小为100%。 4）盒子背景颜色background-color: green; 5）盒子嵌套处理（1）内部盒子悬浮 常见的有三种方法可以让div横向排列，分别是flex 弹性盒模型、float 浮动 和 通过inline-block 行块标签等。这里讲解 display: flex; |
（2）内部盒子x轴对齐
[1] justify-content : flex-start ; 默认靠右对齐
[2] justify-content : flex-end； 靠左对齐
[3] justify-content : center ； 水平居中
[4] justify-content : space-around；平均分布（左右有间隔）
[5] justify-content : space-between；平均分布（左右无间隔）
[6] 当父元素宽度不够时， flex 默认是不会换行的，而是会等比例压缩，缩放比例 flex-shrink 属性或复合属性 flex 相关。
（3）内部盒子y轴对齐
[1] align-items: flex-start从上到下
[2] align-items: flex-end从下到上
[3] align-items: center; 挤在一起居中(垂直居中)
[4] align-items: fstretch拉伸(默认值)
N.2 操作案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多盒子的布局</title> <style> .box { display: flex; /*盒子内“子盒子”悬浮并列*/ justify-content: center;/*盒子内“子盒子”的x轴盒子居中*/ align-items: center; /*盒子内“子盒子”的y轴盒子居中*/ border:1px solid red;/*边框*/ margin:40px auto;/*外部大盒子左右轴居中，距离上下40px */ width: 99%;/*宽占浏览器窗口的99%*/ height: 200px; } .box1 { background-color: yellow; /*背景颜色*/ margin:10px;/*外边距*/ width: 100px; height: 150px; } .box2 { background-color: green; margin:10px; width: 200px; height: 150px; } .box3 { background-color: red; margin:10px; width: 300px; height: 150px; } </style> </head> <body> <div class="box"> <div class="box1">第一个盒子</div> <div class="box2">第二个盒子</div> <div class="box3">第三个盒子</div> </div> <div class="box"> <div class="box1">第一个盒子</div> <div class="box2">第二个盒子</div> <div class="box3">第三个盒子</div> </div> <div class="box"> <div class="box1">第一个盒子</div> <div class="box2">第二个盒子</div> <div class="box3">第三个盒子</div> </div> </body> </html> |
