认识与深入CSS | 青训营笔记

84 阅读1分钟

认识与深入CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

查漏补缺(仅对我自己而言)

  1. 控制文本的空格和换行的显示write-space

  2. 继承(子元素从父元素里继承相应设置属性,节省重复的赋值)

    对于不可继承属性如box-sizing:通过inherit设置该属性可以通过父类继承

    image-20220726175740253.png

  3. 初始值

    image-20220726180135682.png

  4. width和height属性采用百分比设值时,只有父类元素有确切值(按就近原则里到外一层一层往上找找到为止)才能通过计算得出当前元素属性的确切值,否则就按自身内容撑起高度

  5. border应用:将盒子宽高设成0,设置四条border的宽度,颜色来制作三角形

  6. margin,padding,border的百分比数值计算以父元素确切值width为准

  7. margin: auto 水平居中应用(只处理左右外边距):确切值的计算需要参考父类元素和自身元素的宽度(可以都是百分比计算得来的确切值),即左右外边距=(父类元素w-自身元素w)/2

  8. border-box与content-box区别

    image-20220726173836096.png

  9. IFC

    image-20220726182847448.png

  10. BFC

image-20220726182847448.png