CSS盒模型

2021-01-12 本文已影响0人 HGS

一，CSS盒模型定义

CSS盒模型：将页面所有元素表示为一个个矩形的盒子，CSS决定这些盒子的大小，位置以及属性。

二，块级盒子和内联盒子

1. 块级盒子

1.1 特征：

盒子会在水平方向上扩展并占据父容器在该方向上所有可用空间
每个盒子都会换到新行
width和height属性有效
内边距，外边距和边框会将其他元素从当前盒子周围推开
可通过display属性改变显示类型

1.2 常见的块级标签

2.内联盒子

2.1 特征

盒子不会产生换行
width和height属性将不起作用
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开
水平方向的内边距，外边距以及边框会被应用会把其他处于inline状态的盒子推开；
可通过display属性改变显示类型

2.2 常见的行级标签

3. 块级盒子和内联盒子的区别

块级盒子可以包含文本，块级，行内元素，而内联盒子只能包含文本和行内元素；
块级盒子可以单独占据一整行，内联盒子占据的位置只有自身文本宽度的空间；

块级不换行，内联主要是靠内容占据宽度
块级盒子可以设置宽高，内联盒子设置宽高无效，由内容决定；

块级宽高有效，内联宽高无效
块级盒子的padding，margin值设置有效，内联盒子padding，margin上下的值设置无效，但左右有效；

块级margin, paidding有效，内联margin,padding只有左右有效，上下没有生效。

4. inline-block css常见样式二

1. 写法：display: inline-block
2. 特性：

既有块级特性也有行内特性
设置的宽高属性有效
margin，padding以及border会推开其他元素
不会跳转到新行
多个并排会产生缝隙

3. inline-block缝隙 css常见样式二

4. display的值

none ：隐藏元素
block：块级特性
inline-block：行内块级特性
inline：行内特性
flex：采取flex布局
inline-flex：flex布局采取行内特性
grid：采取grid布局
inline-grid：grid布局采取行内特性
table：
table-cell
...

三，盒子的组成

1. 盒模型组成

盒模型组成成分

内容Content:这个区域是用来显示内容，大小可以通过设置width和height。
内边距Padding:包围在内容区域外部的空白区域；大小通过padding相关属性设置，内边距的颜色一般默认是和内容一样的。
边框Border：边框包裹内容和内边距，大小通过border相关属性设置
外边距Margin：这是最外面的区域，是盒子和其他元素之间的空白区域，大小通过margin相关属性设置，一般默认是透明。

1.1 内边距和外边距分别可以通过padding属性, margin属性来设置宽度。

指定一个宽度，它将会作用于元素四周（上、右、下、左）

div{
     padding: 10px;  /*四个padding值都相同的缩写*/
}
div{
     margin: 10px;  /*四个margin值都相同的缩写*/
}

指定两个宽度，第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边

div{
     padding: 10px 20px;  /*上下padding相同为10px，左右padding相同为20px*/
}
div{
     margin: 10px 20px;  /*上下margin相同为10px，左右margin相同为20px*/
}

按照顺序指定四个宽度：上、右、下、左。

div{
     padding: 6px 8px 10px 12px;
}
div{
     margin: 6px 8px 10px 12px;
}

1.2 margin外边距会有和页面合并的现象。

相邻元素合并
①：块级元素的上外边距和下外边距有时会合并（或折叠）外一个外边距，其大小取其中的最大者，左右外边距不会合并。

②：浮动元素和绝对定位元素的外边距不会折叠。

外边距相邻合并

父子元素合并

父子元素合并
空的块级合并
如果一个块级元素中不包含任何内容，并且在其margin-top与margin-bottom之前没有边框，内边距，行内内容、height、min-height将两者分开，则该元素上下边距会折叠。

PS:

如果参与折叠外边距包含负值，折叠后的外边距的值为最大的正边距与最小的外边距的和。
如果所有参与折叠外边距都为负，折叠后的外边距的值为最小的负边距的值。（适用于相邻元素和嵌套元素）
消除合并方法
①：在父元素加一个padding: 1px; 即可；
②：或者加一个和背景色一样的边框，或者透明的边框
③：创建块级格式化上下文
④：改变盒子特性（浮动，绝对定位，改变display）

PS：通过设置margin让元素居中

margin居中

1.3 边框border

1.3.1 设置边框的值

div{
     border-top:1px;
     border-right: 1px;
     border-bottom: 1px;
     border-left: 1px;
}

1.3.2 边框常用属性

border- style边框样式
border- width边框宽度
border- color边框颜色

div{
     border: 1px solid #000;  /*分别对应粗细，样式，颜色*/
}

border-radius边框半径，也有4个值，分别对应4个角。顺序是左上，右上，右下，左下。

html
<body>
<div class="layout">
  <h1>hello</h1>
</div>
</body>

css
.layout {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  background: red;
  border:4px solid black;
  border-radius: 100px; 
}

实现效果：

直角变为圆角

1.4 content文本内容区域，可以用width和height设置区域大小。

1.5 width、heigth

width: 100%是代表当自己的content等于父亲的content，如果还有border或padding和margin溢出父容器可以设置box-sizing: border;为ie盒模型即可。
height（一般需要固定高度才设置），height:100%代表自己的直接父亲必须也要有一个height值，直接父亲height值也是百分比的时候，直到html必须也要有height才会生效。
案例：满屏的效果

满屏

四、标准盒模型与IE盒模型的区别

1.标准盒模型

chrome,ie9+,ie678(添加doctype)使用标准盒模型
设置的width和height指的是Content

.box {
    width: 350px;
    height: 150px;
    margin: 10px;
    padding: 25px;
    border: 5px solid black;
}

标准盒宽高=content box

margin不计入实际大小，但会影响盒子实际占用空间,但是影响的盒子外部空间。盒子的范围到边框为止，不会延伸到margin。

IE盒模型

IE盒模型是指在ie678怪异模式（不添加doctype）下使用ie盒模型，
设置的width和height包含内边距和边框

.box {
    width: 350px;
    height: 150px;
    margin: 10px;
    padding: 25px;
    box-sizing: border-box; //浏览器默认标准模型，box-sizing: border-box;就是ie模型，box-sizing: content-box; 就是标准模型。
}

IE盒模型宽高=padding+border+content box

让页面的全部元素使用IE盒模型

//页面所有元素都是使用ie盒模型
* {
    box-sizing: border-box;
}

//孩子继承父亲的样式，可以单独设置效果会比较好
*, *::before, *::after {
box-sizing: inherit;
}

PS: 两种盒模型的宽度计算是不一样的：

标准盒模型宽度：宽度=内容宽度；
IE盒的模型宽度：宽度=内边距+边框+内容宽度。

参考：
https://static.xiedaimala.com/xdml/file/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-11-6-10-45-8.pdf
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model