float flex grid 选择思路
- 个人项目，不太考虑兼容性，grid
- 公司项目，适度考虑兼容性，flex
- 政府项目，非常考虑兼容性，float
!important
- 如果同一个元素被两处不同的描述方式的selector所选中，时，且都有
color:red!important,那么就需要比较选择器权重了
CSS的语法中一共只有两种写法
- selector{}
- @xxx{} @font-face(...); @media(...); @import(...); 注意分号是一定要有的
如何学写CSS布局
- 第一遍先听课抄一遍大致记住思路
- 第二遍，忘记一切，只记住思路，自己写一遍
- 第三遍，对比一下区别，再手写一遍完美的，加深理解
body的backgorund会扩散至整个网页
- 即使body的宽高没有到全屏，body的backgorund依旧会扩散至整个网页
initial,inherit,unset,
initial inherit
- 使用 initial 来完全消除任何样式继承
- inherit 确保元素在它一整条父元素链上找最近的父元素上来继承样式。
- 因为当下的这个element很可能被其他写法的css给覆盖
- 类似下面，前者广泛作用于tr，后者更细节作用于某一个tr
body tr{...}
tr:nth-child(1){...}
initial inherit 例子 initial inherit 终极理解
- 不是所有的css属性都具有继承性
- initial 关键字用于设置 CSS 属性为它的默认值，由浏览器默认设定来定义
- 假设是一个父->wrapper-子的结构
- 如果父上设置了可继承的属性，那么这样的属性正常情况下也会作用于warapper和子元素
- 但如果在wrapper上对父上的属性(具有继承性的)设置initial，则wrapper与子元素都会不受父属性的影响
unset
- unset表示如果该属性为可继承属性，则值为inherit；否则值为initial。实际上，设置unset相当于不设置。没什么用 unset例子
选择器中的坑
:last-of-type
- type指的是element type 比如 p h2 div其实就是tagName
- 根据selector先找到element
- 根据element去找他最近的父元素
- 从这个父元素往里找最后一个element即可
- 直接看实例，没上面那个坑
一道考题:
flex
三句话让div中仅有的一个物体垂直且水平居中
三句话让单个元素水平居中
平均布局
最好的平均布局写法(不一定要加wrapper)
最好的平均布局写法
- 结构:父元素>wrapper>子元素
- wrapper设置flex
- wrapper设置flex换行，不然所有item挤一行
- 一行之中，item与item之间的间距需要自己去算
- 中间包的这一层的负margin-right，值为item之间间距
简化版本(用于一行item数小于等于2）
- 结构:父元素>子元素
- 可使用space-between
外边距合并
之前有总结过
width:100%的注意事项
- width:100% 在实际使用过程中很可能会不如你意
提问，一个元素身上的width100%究竟是取父元素什么数值的100%？
- 结论如下
- 给子元素写上width100%后，一定是从父元素的cW拿值
- 如果子元素盒模型是CB 那么父元素的cW百分百作用于子元素的cW
- 如果子元素盒模型是BB 那么父元素的cW百分百作用于子元素的cW+pW+bW 在线示例深度分析
width auto 与 100%之前的区别是什么
line-height通常用1.2 而不是120% 百分数形式
- 两者对于子元素的继承影响是不同的
- 如果line-height:1.2仅仅写在父元素身上，且子元素有自己的font-size:20px
- 前者会让子元素的line-height为1.2*20=24px
- 而后者会让子元素的line-height为父元素的line-height计算后的结果（父元素font-size*120%）,而不是根据子元素自身去动态调整
- line-height通常用1.2 而不是120% 百分数形式
css div border 绘制三角形 梯形
渐变 padding 画渐变边框的圆形
水平居中的最简单方式margin: 0 auto
first-child nth-child 彻底理解
先理解选择器1 :first-child 与 选择器1 :nth-child(n)
- 选择器1 所有后代中的 第1个 第n个
然后同等理解
选择器1>:first-child与选择器1>:nth-child(n)
- 选择器1 直系后代中的 第1个 第n个
再理解选择器1 选择器2:first-child 与 选择器1 选择器2:nth-child(n)
- 选择器1 所有后代中的 第1个 第n个位置 还必须是满足 选择器2
然后同等理解
选择器1>选择器2:first-child与选择器1>选择器2:nth-child(n)
- 选择器1 直系后代中的 第1个 第n个位置 还必须是满足 选择器2
再理解选择器1:first-child 与 选择器1:nth-child(n)
- 连父元素都不指定了，表示所有结构下的第1个 第n个元素 还必须是满足选择器1的
.box :nth-of-type(2){
- 先找.box类
- 空格表示全结构扫描
- nth-of-type表示需要对标签名进行归类
- 归类完成之后在每个类之中寻找第二项
如何制作图标外有一层圆形
- 对外层元素 display：block
- text-align:center;
- line-height
- border-radius 如何制作图标外有一层圆形
左定宽,右auto,中间拿剩余所有的常用栏目布局
flex
如何制作这样一个flex，用到margin-right:auto
// 父
display: flex;
justify-content: space-between;
align-content: center;
/ 子， 用了flex布局的item还是可以设置margin的
margin-right: auto; // 用这个比用flex-grow:1 好得多
max-width: 40vw; // 以下几句用于设置文字过长显示省略号
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
grid
列表样式优化
list-style-position:inside把圆点子塞到里面去margin-left: 1em;向右移一个字(推荐这种)列表样式优化
