css布局盒子模型

盒子模型的组成

1.border:边框
(1)width:边框宽度
(2)color:边框颜色
(3)style:边框样式
①solid:虚线 ②dashed:虚线 ③dotted:点线
border-top:上边框 border-left:左边框 border-right:右边框 border-bottom:下边框

div {
     border: 1px solid #ccc;
    }

2.content内容

3.padding内边距
padding会撑开盒子,如果本身没有设置width属性,则不会撑开盒子

4.margin外边距
典型应用:块级盒子居中对齐,盒子必须指定宽度,左右外边距设置auto
清除内外边距

* {
   margin: 0;
   padding: 0;
  }

外边距合并

对于两个嵌套关系的块元素,父元素有上外边距.同时子元素也有上外边距,此时父元素会塌陷较大的外边距值
解决方案:
1.为父元素定义上边框

div {
     border: 1px solid transparent;
    }

2.为父元素定义上内边距

div {
     padding-top: 1px;
    }

3.为父元素添加overflow: hidden

div {
     overflow: hidden;
    }

盒子实际大小计算公式

注意:①设置width和height是内容的宽高 ②设置border会撑大盒子 ③设置padding会撑大盒子
计算公式：
盒子宽度=左边框+左padding+内容宽度+右padding+右边框
盒子高度=上边框+上padding+内容宽度+下padding+下边框
当盒子被border和padding撑大后,给盒子设置属性 box-sizing:border-box,浏览器会自动计算多余大小,自动在内容中减去

div {
     border: 1px solid transparent;
     box-sizing: border-box;
    }

浮动

典型浮动：可以让多个盒子在一行中无缝对齐,排列显示
float属性用于创建浮动框,将其移动到另一边,直到左右边缘或另一个浮动框的边缘

浮动特性

1.浮动元素会脱离标准流
脱离标准流控制移动到指定位置,浮动的盒子不再保留原先的位置
2.浮动元素会一行内显示,并且元素顶部对齐
3.浮动元素会具有行内块元素特性
如果行内元素添加了浮动属性,则不需要转换为块级元素/行内块元素

清除浮动

本质:清除浮动元素造成的影响
方法:1.额外标签法在最后一个盒子加一个标签

<div class="clearfix">Hello,world</div>
.clearfix {
          clear: both;
        }

2.父级添加overflow属性

div {
     overflow: hidden;
    }

3.父级添加after伪元素

<div class="clearfix">Hello,world</div>
.clearfix::after {
               content: ' ';
               display: block;
               height: 0;
               clear: both;
               visibility: hidden;
              }

4.父级添加双伪元素

<div class="clearfix">Hello,world</div>
.clearfix::after，
.clearfix::before {
                content: ' ';
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
              }

结构伪类选择器

根据元素在HTML中的结构关系查找元素,常用于查找某父级选择器中的子元素
1.E:fist-child { } :匹配父元素中第一个子元素,并且是E元素
2.E:last-child { } :匹配父元素中最后一个子元素,并且是E元素
3.E:nth-child(n) { } :匹配父元素中第n个子元素,并且是E元素
3.E:nth-last-child(n) { } :匹配父元素中倒数第n个子元素,并且是E元素
注:n为0、1、2、3、4、5、6...

通过n组成常见公式
偶数:2n、even
奇数:2n+1、2n-1、odd
前5个:-n+5
从第5个往后:n+5

css-Day3