目录
说一下css的盒子模型
参考视频：https://www.bilibili.com/video/BV13V411z7do
1、浅层的说，每一个html元素都是一个矩形的盒子，通常包括四个区域，从里到外分别是：
① 内容区域：代表盒子的实际内容部分，可用width和height设置；
② 内边距区域： padding
③ 边框区域： border
④ 外边距区域：margin
css盒子模型中盒子的高度和宽度 不包含margin！！！
盒子的宽度=border-left+padding-left+width+padding-right+border-right
盒子尺寸要算宽高的时候，外边距不算在内，只算内容区+内边+边框
2、按尺寸计算，盒子有两种类型：一种是标准盒，一种是IE盒子（怪异盒）
标准盒：width与height控制内容区；box-sizing: content-box; ->默认的值
IE盒（怪异盒）：width与height控制边框+内边+内容区，即盒子的尺寸；box-sizing: border-box;
3、按布局算，盒子有多种类型：块级盒子block，行内盒子inline，inline-block，列表盒子等等
块级盒子（display: block）：div、p、h1-h6、ul、ol
行内盒子（display: inline）：span、i、a、button
列表盒子（display: list-item）: li
display还有其他值，布局的：flex 弹性盒子； grid 栅格盒子
4、替换元素（盒子）：img、iframe、video等
引：设置一个元素的背景颜色，背景颜色会填充哪些区域？
注意：padding和margin是透明的，不能用属性设置改颜色
由下图可知，background-color设置的是内容区和内边区域的颜色，border边框可以有自己设置颜色，margin没办法设置颜色。
使一个盒子水平垂直居中的方法
原版：
1、display的flex属性
justify-content: center; 设置弹性盒的主轴，必须和flex一起连用；
2、display的grid属性
3、父元素display: table-cell；子元素display: inline-block
4、父元素相对定位；子元素绝对定位，并且设置top和left位移，以及margin负偏移
5、父元素相对定位；子元素绝对定位，并且设置四个位移均为0，以及margin为auto
6、父元素相对定位；子元素绝对定位，并且设置四个位移均为0，以及margin为auto
7、父元素利用overflow:hidden 触发BFC，解决包含塌陷问题；子元素使用margin的百分比
注意margin的百分比，是相对于父元素的width的百分比；
margin: 25% auto; 实际上为 margin: 75px auto 75px auto; 这里的75px=25%*300px
8、父元素利用line-height
BFC是什么？怎么创建BFC？BFC有什么用？
参考视频：https://www.bilibili.com/video/BV11h411r71p
参考文章：http://www.itcast.cn/news/20201016/16152387135.shtml
BFC是：独立渲染区域
可以看做是一个与其他盒子隔离了的大箱子，箱子里面的元素怎么设置都不会影响到外部。
创建（触发）BFC的方式：
0、body 根元素里面
1、float属性不为 none（脱离文档流？）
2、position 为 absolute 或者 fixed （脱离文档流？）
3、display 为 inline-block，table-cell，flex （脱离文档流？）
4、overflow 为 hidden auto scroll （除了 visible）
BFC有什么用？
1、解决 盒子的外边距边距塌陷问题
盒子的边距塌陷：讲道理，学过数学的都知道，100+100=200。可是，盒子之间的距离，现在却之后100px。这就是很典型的margin的塌陷，两段margin重叠到了一块，互相影响。
那么，如何利用BFC，让这个问题得到解决呢。回忆下，上文说过，BFC，就是一个与世隔绝的独立区域，不会互相影响。那么，我们可以将这两个盒子，放到两个BFC区域中，即可解决这个问题。
图片来自：http://www.itcast.cn/news/20201016/16152387135.shtml
2、解决 盒子的包含塌陷问题
当父子关系的盒子，给子元素添加margin-top，有可能会把父元素一起带跑。
由于margin的塌陷问题，导致盒子内部的布局影响到了外部。 上图中，本应该效果如下：
那么用BFC将父盒子隔离起来即可解决：
3、清除浮动带来的影响，比如父盒子的高度塌陷问题等
当所有的子元素都浮动了，这个时候，父盒子失去了原有的高度，这就是浮动的影响。这个时候，同样也可用BFC的机制，来清除浮动带来的影响。使用BFC，将所有的浮动元素包裹起来。
4、BFC可以阻止标准流元素被浮动元素覆盖
红色盒子浮动，蓝色盒子是标准流，默认情况下，浮动元素覆盖了标准流元素。但是，如果将蓝色盒子的BFC触发，那么情况将有所变化。
当蓝色盒子触发了BFC之后，浮动元素再也不能覆盖它了，而且还能利用这个特性，来实现蓝色盒子宽度根据红色盒子的宽度来做自动适应
引： 什么是高度塌陷？解决高度塌陷（清除浮动）的几种方法？
参考视频：https://www.bilibili.com/video/BV1XJ411u72L
高度塌陷是指 子元素设置了浮动以后会脱离文档流，如果父元素没有设置高度，而是自适应的话，子元素内容浮上去以后就没有内容，撑不起来，直接塌下去
解决高度塌陷 / 清除浮动的几种方法？
1、clear，是css用来专门清除浮动的。
注意！！这里的清除浮动 并不是把浮动这行代码取消掉，而是处理一下目前浮动产生的糟糕布局。
步骤：1、现在父元素底部加一个块标签；2、在这个新加的标签里添上内容以及 clear: both;
2、BFC方法
加overflow: hidden;等方式
3、伪元素 + clear
伪元素相当于给元素添加了一个虚拟的元素，其他原理和1差不多，就是不用多加个底部标签，而是用的虚拟的伪元素。
画一条0.5px的线
如果直接 .line{height: 0.5px;} 是没用的！chrome表现为1px
解决方案：
利用缩放： transform: scaleY(0.5)
注意：只写这一个缩放的话：很模糊、而且还是两边向中间缩放可能达不到效果。
所以这里设置transform-origin的用处是
① 增加清晰度；
② 50%是把x坐标移到居中，100%是把y坐标移到底部，实现只取1px的下半部分。
引：画0.5px的边框
① 只有底部边框的效果：
这里是先设置一条透明的 底部边框，然后使用 border-image填充1px的上面那一半，就是0.5px了
效果图，这里放大了网页5倍来观察：
② 四周都是0.5px边框的效果：
效果不是很好：
纯css画三角形
首先介绍一下border 边框属性：
平常的细边框以为是正常的矩形，结果是边框实际上是下面这种现状。
因此三角形的雏形就可以看出来了，只要设置内容区的宽高均为 0px，设置左右两边有边框占着，颜色为透明，就可以从下边框截取出一段三角形来了（想要左右两边的三角形，可以用其两边夹着的设置透明即可实现。）：
引：纯css画等边三角形
要计算好边之间的数学关系（sin60° = 二分之根号三）
position定位，absolute是相对于父元素的哪一层？
下图，粉色边框区域的内边边 和内边距padding的外边边交汇处，即background-color可以覆盖到的那一块为定位区，
top 与 left 相对下图的蓝色区域（内容区+内边距区域）的左上顶角为原点
bottom 与 right 相对下图的蓝色区域（内容区+内边距区域）的右下顶角为原点
CSS中 能/不能继承的属性
参考文章：https://www.bilibili.com/read/cv5542432/
继承：子元素继承父元素的属性
有继承性的属性
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-size：设置字体的尺寸
font-weight：设置字体的粗细
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
color：文本颜色
text-align：文本水平对齐
line-height：行高
text-indent：文本缩进
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
3、元素可见性：visibility 如visibility: hidden隐藏元素
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
不会继承给子元素的属性
1、display;
2、盒子模型的属性：width、height、margin系列 、border系列、padding系列;
3、背景属性：background系列、如background-color等等;
4、定位布局属性：float、clear、position、top、right、bottom、left、z-index、min-width、min-height、max-width、max-height、overflow、clip;
5、文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
6、生成内容属性：content、counter-reset、counter-increment
7、轮廓样式属性：outline-style、outline-width、outline-color、outline
8、页面样式属性：size、page-break-before、page-break-after
9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
CSS选择器（id、class，标签、组合选择器）
单个选择器的优先级：
id选择器>class 类选择器>标签名 选择器>通配符 * >默认样式（body的内边距那种等等）
MDN：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors
| 示例 | 选择器 | 作用 |
|---|---|---|
| #box {width: …;} | id选择器 | 单个选择，唯一的 |
| .box {width: …;} | class 类选择器 | 可以批量设置类选择器 |
| div {width: …;} | 标签选择器 | 通过标签名来选择盒子，可以一次性设置一大批 |
| a[title] {…} | 标签属性选择器 | a[title]的意思是选中有title属性的a标签 |
| div p{…} | 后代选择器 | div p的意思是，选中div里面的所有p标签后代(子辈+孙辈以下) |
| div>p{…} | 子代选择器 | div>p的意思是，选中div里面的所有p标签子辈，不要孙辈及以下 |
| div+p {…} | 相邻兄弟选择器 | div+p的意思是，选中与div挨着的同级的下一个p标签，只要这一个 |
| div~p {…} | 通用兄弟选择器 | 选中与div同级（兄弟关系）的所有p标签 |
| p:first-child {…} | 伪类选择器 | 详见 下文 |
| p::first-line {…} | 伪元素选择器 | 详见 下文 |
伪类选择器 div: 和 伪元素选择器 div::
伪类与伪元素 的区别是什么？
1、首先一个明显的区别：伪类是一个冒号div： 伪元素是两个冒号 div::
当然，在css1和css2，伪元素也是一个冒号，在css3为了做出区分，伪元素的书写方式变成了两个冒号。
2、作用方面：
伪类是 能够根据 该元素的某个状态 来改变 元素样式。
伪元素是 选中该元素的某特定部分(最开头::before, 第一个字母::first-letter) ，然后改变（应用）这部分的样式。
常用的伪类 :hover, :focus, :link, :visited, :first-child, :last-child, :nth-child(2n)
① :hover
鼠标覆盖后改变div的样式：
② :focus
一般都是和表单标签一块儿用的，光标聚焦时改变样式：
③ :link :visited :hover :active 简称 lvha
④ :first-child, :last-child
由下面的两个图可知，.son1:first-child被选中需要满足：.son1对应的标签是其父标签div的第一个子元素。像p标签，虽然是p系列的第一个，但是在其父元素下面，排行第3，无法被选中。
p:last-child被选中需要满足：p对应的标签是其父标签div的最后一个子元素。像.son1标签，虽然有系列的最后一个，但是在其父元素下面，排行第2，不是最后一个，无法被选中。
⑤ :nth-child(2n)
都是div组合的第 偶数位
常用的伪元素 ::before, ::after, ::first-line(作用第一行), ::first-letter(作用首字母)
css3才改的双冒号，前期一直都是单冒号来着
每个伪元素必须要有content属性，否则的话浏览器不能识别
① ::before
defore的意思是将这个伪元素 当做div下面的第一个子元素，即需要排在div所有子元素的最开头。
② ::after
after的意思是将这个伪元素 当做div下面的最后一个子元素，即需要排在div所有子元素的最末尾。
::before和 ::after伪元素的主要特点如下：
1、必须要有content属性，否则的话浏览器不能识别；
2、默认是内联元素(display: inline)，所以如果要使得盒模型中的height等属性有效的话，必须要把它转化为块元素；具体就是设置其display属性为block,或者设置为float等；
3、伪元素不属于document，所以js无法操作它；
4、伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件；
5、诸如 <input />、 <iframe />等不能包含子元素的标签，不支持 ::before 和 ::after；
6、:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好。
377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
