盒子模型

2020-07-01

盒子模型:

基本组成部分

水平布局：

元素在其父元素中水平位置由以下几个属性共同决定，从外到内依次为：margin-left,border-left,padding-left,width,padding-right,border-right,margin-right,且其综合必须等于父元素的内容区的宽度.
当不满足时浏览器会自动帮我们填充，填充规则如下：
1.当七个中没有auto情况下，自动调整margin-right来使等式满足
2.七个值中，width，margin-left，margin-right三个值可设为auto
2.1当某一个值为auto时，则自动调整这个auto的值
2.2如果宽度和一个外边距设为auto，宽度会调整为最大，设置的auto外边距会自动为0
2.3如果三个为auto，外边距都是0
2.4两个边距为auto，宽度固定，则元素居中处理

垂直布局：

垂直布局相对较为简单，默认情况下父元素的高度由内容决定。
我们注意一种特殊情况：当子元素在父元素中排列，如果子元素的大小超过了父元素则会造成溢出的情况，我们要在父元素中定义overflow属性来处理溢出的部分。

overflow:visiable//默认值，超出部分不做处理
overflow:hidden//裁剪，超出的部分会直接被裁减
overflow:scroll//生成下右两侧滚动条，不管是否需要
overflow:hidden//根据需要生成滚动条

垂直方向外边距的重叠：

兄弟元素间相邻垂直外边距会取两者的较大值，不会进行叠加。
父子元素之间，相邻垂直外边距子元素会传递给父元素（上外边距），当你想要子元素与父元素之间设置外边距时，若两条边重合则会同步移动，解决：通过在相邻外边距设置边框，使其分开

水平方向外边距的重叠：

此时，水平方向的外边距将会相加，不会取最大值，不会造成外边距的重叠

行内元素的盒子模型：

1.首先行内元素时不支持设置高度和宽度的，默认时内容决定，无法修改。
2.行内元素是可以设置边框边距的，有可能会发生重叠，但不会影响垂直方向上的布局
3.当我们需要对行内元素设置宽高时我们可以设置display属性，将行内元素转换为块元素

display : inline//行内元素
display : block// 块元素
display : inline-block//即可以设置宽高，也不会独占一行
display : none//不再显示

盒子的大小：

默认情况下，盒子的可见框是有内容区，内边距，边框共同决定的
我们通过设置box-sizing来改变，可选值有content-box和border-box

1
2

box-sizing : content-box//此时width和height来设置内容区的大小，边框边距会增大盒子大小
box-sizing : border-box//此时宽高来设置整个盒子的大小，width和height为内容区和内边距边框的总大小

轮廓和圆角：

1.outline用来设置元素的轮廓线，用法和border一样，不同的是，轮廓线不会影响布局，可能造成重叠
2.阴影：box-shadow设置阴影效果，默认在元素正下方，不可见，通过设置偏移量来设置偏移效果，格式为box-shadow:xxx xxx xxx xxx 水平偏移量，竖直偏移量，模糊效果，颜色
3.圆角：border-radius:border-top-left-radius,同理类推，可得到四个角的圆角，可以设置曲率半径，当border-radius设置为50%，图形会变成圆形

浮动：

通过浮动可以使一个元素向其父元素的左侧或右侧移动，可以用来设置水平布局
设置float属性：none，默认值不一定，left向左移动，right向右移动。
设置float后的元素脱离文档流：
1.块元素不会再独占一行
2.块元素高度和宽度默认为内容的大小，文档流中，宽度默认为父元素的大小，高度默认为内容大小
3.行内元素脱离之后就会变成浮动的块元素
其中在设置float属性后，在移动过程中，同为float属性的元素移动时不会发生覆盖，将会形成对齐效果

高度塌陷问题：

在布局中父元素的高度默认是被子元素撑开的，当子元素浮动后，其完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度导致父元素高度丢失，丢失后以下元素会自动上移造成页面的混乱，这就叫做高度塌陷的问题。
解决的方案通常有两种，第一将父元素高度定死，但这种做法会造成元素大小无法根据内容变化，可能有大部分留白或者溢出的现象，所以通常不提倡这种做法，那么另一种解决方案设置BFC
那么什么是BFC？
BFC块级格式化区域环境：开启后该元素会变成一个独立的布局区域。
1.开启后BFC的元素不会被浮动元素覆盖
2.开启后BFC的元素和父元素外边距不会重叠（可用来解决上面的垂直方向外边距重叠问题）
3.开启后BFC的元素可以包含浮动的子元素（用来解决高度塌陷问题）
BFC开启的方法：
1.将元素设为浮动
2.将元素设为行内块元素
3.设置overflow将默认值改掉

clear属性：

如果我们不希望某个元素因为其他元素浮动而改变位置，可以通过clear属性来清除浮动元素对当前元素的影响。可选值：left，right，both

1
2
3

clear：left//清楚左侧浮动元素对当前元素的影响
clear：right//清楚右侧浮动元素对当前元素的影响
clear：both//清楚两侧中影响最大的那个

用after伪类解决高度塌陷问题：

为了解决同时解决高度塌陷和外边距重叠问题，我们有一个模板,clearfix为要修改的类名

.clearfix::before,
.clearfix::after{
    content:'';
    display:table;
    clear:both
}