CSS基础之盒模型/BFC/浮动/定位/浏览器渲染页面流程/元素显示与隐藏
10. 盒子模型(content、padding、border、margin)
10.1 边框
- 属性
- border-width
- border-style:none/solid实/dashed虚/dotted点
- border-color
- border-radius 圆角边框
- 设置方式
- 单个属性
border-style:solid; - 连写
border:1px solid #999; - border+上下左右分开设
border-top:1px solid #999
- 单个属性
10.2 内边距padding
- 三个值是上左右下
- 用padding使得字数不确定的导航栏等边距
- 如果body的直接子盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小（此时div继承body的width和height即浏览器的）
10.3 外边距margin
同padding
10.4 常见问题
- 使块级盒子水平居中
- 盒子必须指定了宽度（width）
- 盒子左右的外边距设置auto
- 表格的细线边框
- 合并相邻的边框：
border-collapse:collapse;
- 合并相邻的边框：
- 标准盒子大小 = 内容 + 内边距 + 边框
- 不会撑大盒子的特殊情况(块级元素)
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border不会撑大子盒子p145
- 清除默认内外边距
- 常见的body有默认的margin
- p有默认的上下的margin
- ul有默认的上下的margin和padding-left
10.5 外边距塌陷与合并
垂直布局的块级元素的上下的margin才会有影响
- 外边距合并 上下的盒子,上面的设置margin-bottom,下面的设置margin-top,会合并成数值大的那个外边距,因为小的在大的区域里
只给一个盒子设置外边距即可解决 - 外边距塌陷 嵌套的盒子,子元素设置margin-top会作用在父元素上，即导致父元素一起往下移动
- 给父元素设置border-top:transparent或padding-top或在父元素中子元素之前加上内容(分隔父子元素的margin-top)
- 给父元素设置overflow:hidden(父盒子形成BFC，BFC盒子本身与子元素之间不存在margin的塌陷现象)
- 转换为行内块元素(行内块元素是BFC盒子)
- 设置浮动(浮动的元素是BFC盒子)
- 行内元素的margin和padding生效的情况
- 行内元素水平方向的margin和padding在布局中**有效
- 行内元素垂直方向的margin和padding在布局中**无效
10.6 盒子阴影
- 盒子阴影
box-shadow：h-shadow（必写，水平阴影的位置，允许负值）、v-shadow（必写，垂直阴影的位置，允许负值）、blur（模糊距离(虚实)）、 spread（阴影尺寸）、color（阴影的颜色0,0,0,.3）、inset（将外部阴影outset改为内部）； - 文字阴影
text-shadow:h-shadow(必写，水平阴影的位置，允许负值) 、v-shadow(必写，垂直阴影的位置，允许负值)、 blur(模糊距离（虚实）) 、color(阴影的颜色);
11. 浮动
11.0 传统网页布局的三种方式
- 标准流
- 浮动
- 定位
11.1 标准流(文档/普通流)
- 浏览器在渲染显示页面内容时默认采用的一套排版规则
- 块级元素：从上往下、垂直布局、独占一行
- 行内元素：从左往右、水平布局、一行多个,空间不够自动换行
11.2 浮动的作用
- 早期的作用是实现图文环绕的布局(给图片加浮动)
- 现在的作用是用于网页布局，让本该垂直布局的块级元素变成水平布局(且可以选择浮动的方向)
11.3 如何浮动
给元素加上：
- float:left;
- float:right;
11.4 浮动的特点
- 脱离标准流，不占位置，被其他标准流占有(浮动元素比标准流高半个级别，会覆盖标准流中的元素)
- 浮动元素按照上下顺序挨个浮动
- 浮动元素会受到上面元素边界的影响，要浮一起浮(因为上面的块级元素独占一行)，因此，浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
- 任何元素都可以浮动，不管原来是什么，之后都具有行内块元素的特性
- 浮动元素有特殊的显示效果
- 一行可以显示多个(用于块级元素)
- 可以设置宽高(用于行内元素)
- 注意：浮动的元素不能通过对父元素设置text-align:center或对浮动元素本身设置margin:0 auto让浮动元素本身水平居中(因为浮动元素就是在让元素向左/右浮动，与之矛盾)
11.5 清除浮动
- 清除浮动的作用
- 有些时候未知子元素的个数和高度，需要用子元素撑开父元素而不是去直接设置父元素的高度，当我们给子元素设置浮动时，因为浮动元素脱标的特性它的高度会变成0不占位置，从而父元素就不会被完整撑开。
- 还有布局时浮动的元素遮罩了其他元素，因此需要清除浮动，清除浮动实际是清除浮动产生的影响。
- 清除浮动的方法
- 直接给父元素设置高度(有不能固定父元素高度的情况)
- 给父元素加overflow:hidden;(父元素就形成了BFC，BFC盒子默认包裹住内部子元素)
- 额外标签法
在父元素中添加一个块级标签，然后给添加的块级元素设置clear:both/left/right;(会让html结构变得复杂，于是有了伪元素方式的出现) - 单伪元素
用伪元素代替额外标签
.father一般写成.clearfix 这样需要清除浮动的元素只有加上这个类名就可以不用单独写啦
.father::after {
content:'';
/*伪元素默认是行内元素*/
display:block;
clear:both;
/*补充代码，当content内容为“.”时在网页中不显示伪元素*/
height:0;
visibility:hidden;
}
- 双伪元素
.clearfix::before ,
.clearfix::after {
content:'';
display:table; // 类似于table标签
}
.clearfix::after {
clear:both
}
双伪元素不仅适用于清除浮动，还可以解决外边距塌陷问题
因为给父元素添加相当于添加了伪元素然后把父元素和子元素的margin-top分隔开来了
11.6 display的几个属性
display:none/block 元素显示与隐藏
display:inline/inline-block/block 元素显示模式
display:flex/grid 特殊布局
display:table/inline-table/table-row/list-item
| display属性 | 作用 |
|---|---|
| table | 元素会作为块级表格来显示，类似于table，表格前后带有换行符，配合table-cell使用可实现水平垂直居中 |
| inline-table | 外面时"内联盒子"，里面是"table盒子" |
| table-row | 元素会作为一个表格行显示，类似于tr |
| table-cell | 元素会作为一个表格单元格显示，类似于td和th |
| list-item | 为元素类容生成一个块型盒子，随后再生成一个列表型的行内盒；会把元素作为列表显示，要完全模仿列表的话，还需要加上list-style-position,list-style-type |
12. BFC
12.1 引入
- Box是css布局的基本单位
- Box是CSS布局的对象和基本单位，直观点来说，一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
- Box的类型
- block-level box:
display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context； - inline-level box:
display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context； - run-in box:
css3中才有， 这儿先不讲了。
- block-level box:
- Formatting context是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
- Block level的box会参与形成BFC：例如display值为block/ list-item/ table
- Inline level的box会参与形成IFC：比如 display值为inline/ inline-table/ inline-block
12.2 什么是BFC
块格式化上下文(block formatting context),是web页面的可视css渲染的一部分,一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。
参考
12.3 创建BFC的方法
- html根元素
- 浮动元素是BFC盒子
- 行内块元素是BFC盒子
- overflow属性取值不为visible的所有情况，如：auto、hidden、scroll
- 表格单元格：table-cell
- 定位
- 弹性布局 display:flex
- …
12.4 BFC盒子常见特点
- BFC盒子会默认包裹住内部子元素(标准流、浮动) => 清除浮动
- BFC盒子本身与子元素之间不存在margin的塌陷现象 => 解决外边距塌陷
13. 定位
13.1 为什么要用定位
- 以下的情况不能用标准流和浮动实现：
- 某个元素可以自由地在一个盒子内移动，且能压住其他盒子(层叠)
- 当我们滚动窗口时，盒子是固定在屏幕某个位置或自由移动(固定)
- 浮动和定位的使用区别：
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
- 定位则是可以让盒子*自由**某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子(层叠)
13.2 定位的组成
定位是将盒子在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
- 定位 = 定位模式 + 边偏移(top/bottom/left/right)
- 定位模式
由CSS的position属性来设置，常见的值有四种：- static 静态定位
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- 边偏移
边偏移就是定位的盒子移动到最终位置，有top、bottom、left和right四种属性
如：top:80px;//盒子距离顶部80px
- 定位模式
13.3 定位的类型
- 静态定位static（默认,就是无定位,标准流）
选择器 {
position：static；
}
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在布局时很少用到
- 相对定位relative（重要）
选择器 {
position：relative；
top：100px；
//距离原来的位置的水平坐标沿着y方向走了100px
}
- 必须有边偏移
- 相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
- 和浮动不同,盒子定位离开原本位置之后,位置仍然保留,下面的盒子不会占有而是仍然以标准流的方式对待它（不脱标）
- 绝对定位absolute（重要）
选择器 {
position：absolute；
top：100px；
}
- 必须有边偏移
- 如果没有祖先元素或者祖先元素没有定位，则它移动是以浏览器为准定位
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占用原先的位置，下一个盒子会占有它之前的位置（脱标，脱标之后的块级元素不再有继承宽度等标准流才有的特性！）
- 固定定位fixed(重要)
选择器{
position: fixed;
top: 100px;
}
- 固定定位是元素固定于浏览器可视区的某个位置
- 以浏览器的可视窗口为参照，可视区域会变化，跟父元素无关，不随滚动条滚动
- 固定定位不占用原先位置（脱标）
- 粘性定位sticky
选择器 {
position: sticky;
top: 10;
}
- 粘性定位可以被认为是相对定位和固定定位的混合
- 以浏览器的可视窗口作为参照点移动元素（固定定位的特点）
- 粘性定位占有原先的位置（相对定位的特点）
- 必须添加top、bottom、left、right边偏移中的一个才生效
13.4 子绝父相
- 子绝父相的由来
子级是绝对定位的话，父级要用相对定位
子级绝对定位，不会占有位置，可以放到父盒子里的任意地方，不会影响其他兄弟盒子
父盒子需要加定位限制子级，但父亲不能用绝对定位，因为绝对定位不占位置，所以使用相对定位。
注意：- 浮动只会影响后面的元素
- 定位自由
- 父绝的特殊场景
当父元素已经有绝对定位时，直接写子绝即可，因为绝对定位是以最近一级的有定位的祖先元素为参考 - 子元素在不定宽度的父元素中水平居中
选择器 {
position:;
//先走父元素的50%
left:50%;
//再走版心盒子的50% *如果这里写百分比是相对父
margin-left:子元素宽度的一半;
//相对自己
transform:translateX(-50%);
}
- 子元素在不定宽度的父元素中水平垂直居中
选择器 {
position:;
//先走父元素的50%
left:50%;
//再走版心盒子的50% *如果这里写百分比是相对父
margin-left:子元素宽度的一半;
//相对自己
transform:translate(-50%, -50%%);
}
注意： 不能分开写translateX translateY
13.5 层级问题
- 标准流 < 浮动 < 定位
- 不同的定位类型的层级相同，则按照书写顺序，后来者居上
- 定位叠放次序 z-index
使用定位布局时，可能会出现盒子重叠的情况，此时可以使用z-index来控制盒子的前后次序（z轴）
选择器 {
position:;
top:;
z-index:1;
}
- 数值可以是正整数、负数或者0
- 谁的值越高，谁就靠上
- 如果属性值相同，则按照书写顺序，后来者居上
- 数值不能加单位
- 只有定位的盒子才有z-index属性，标准流和浮动的盒子都没有
13.6 定位的拓展
- 绝对定位的盒子水平居中
加了绝对定位的盒子不能通过margin：auto；实现水平居中
选择器 {
position：absolute；
left：50%； //父容器宽度的一半
margin-left：-50% //盒子宽度的一半
}
- 绝对定位的盒子垂直居中
选择器 {
position：absolute；
top：50%； //父容器高度的一半
margin-top：-50% //盒子高度的一半
}
-
定位特殊特性
绝对定位和固定定位也和浮动类似（类似具有行内块特性:
行内元素添加绝对或者固定定位，可以直接设置高度和宽度（就不需要display）
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容大小 -
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题，都是BFC -
绝对定位（固定定位）会完全压住盒子，浮动元素不同
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
绝对定位（固定定位）会完全压住盒子，即压住下面标准流所有内容
之所以这样，是因为浮动的产生是为了做文字环绕图片效果，文字会围绕浮动的元素
14. 元素的显示与隐藏
14.0 浏览器渲染页面流程
![[渲染流程 3.png]]
（0）渲染引擎首先通过请求获得文档的内容
（1）解析HTML，构建 DOM Tree
（2）解析CSS，构建 CSSOM Tree(CSS规则树)
（3）将 DOM Tree 和 CSSOM Tree合并，构建Render tree(渲染树)
（4）reflow(重排)：根据Render tree进行节点信息计算（Layout）
（5）repaint(重绘)：根据计算好的信息绘制整个页面（Painting）
参考
14.1display显示与隐藏
display：none；隐藏对象（隐藏之后，位置不再保留，会让元素完全从渲染树中消失，渲染时不会占据任何空间）
display：block；除了转换为块级元素之外，还可以显示对象
注意：是不可继承属性，会触发回流(重排)
14.2visibility可见性
visibility：visible；元素可视
visibility：hidden；元素隐藏（隐藏之后，位置仍然保留，不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见）
注意：是可继承属性，不会触发回流(重排)
14.3overflow溢出
对溢出部分：
overflow：visible；（溢出部分仍然显示出来）
overflow：auto；（溢出部分在需要的时候添加滚动条，指比如高不够只添加竖向滚动条）
overflow：hidden；（溢出部分隐藏）
overflow：scroll；（溢出部分显示滚动条，竖向横向都显示，不溢出也显示滚动条）
注意：有定位的盒子请慎用 overflow：hidden；
- 单行文本溢出用省略号表示
/* 1.此时多出来的文字就会溢出啦，不换行 */
/* 默认normal自动换行 */
white-space：nowrap；
/* 2.溢出部分隐藏 */
overflow：hidden；
/* 3.溢出文字用省略号显示 */
text-overflow: ellipsis;
- 多行文本溢出用省略号表示
缺点： 有较大的的兼容问题，适用于webKit浏览器或移动端
注意：严格控制盒子大小
overflow：hidden；
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display：-webkit-box;
/* 限制在一个块元素显示的文本的行数 */
webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;