坑
不能继承font-size样式的标签:
<input
>和<textarea
>还有<button
>和<select
>等组件类的不可以继承。另外最重要的一点:表格<td
>也是不可以继承的,
a
标签不可继承color属性
margin详解
详见:https://mp.weixin.qq.com/s/8eAfz_I5xIhh7oFRifxaFw
margin:auto失效场景:
- 未设置宽度
- 绝对定位
- 固定定位
- 开启浮动
- 相对定位有效
详见:https://blog.csdn.net/qq_37621289/article/details/82910652
绝对定位对margin的影响:
当绝对定位块和上层相对定位(或绝对定位)中间夹着一层标准流(或浮动)的块时:**
1、只使用left等定位是按照上层相对定位(或绝对定位)的边界进行定位
2、只使用margin相关属性定位时按照上层标准流(或浮动)块的边界进行定位
3、当同时使用两者时则按照上层相对定位(或绝对定位)的边界进行定位,并且距离值为两者的相加值
4、对于不使用left也没有margin的,自动按照上层标准流进行定位
详见:https://blog.csdn.net/tt_twilight/article/details/72824039
当绝对定位块和上层相对定位(或绝对定位)中间没有夹着一层标准流(或浮动)的块时:
1、margin:auto会失效 但是值为具体数值margin: 50%
;有效 相对于relative父元素定位偏移
2、当左右偏移均设置后 有效 可实现左右居中:
left: 0;
right: 0;
margin: 0 auto;
3、
left: 20%;
right: 0;
margin: 0 auto;
可得出margin是相对与left边界于right边界进行定位的
布局基础知识:
BFC浅析:
https://www.cnblogs.com/giggle/p/5236770.html、
flex相关:
一篇就够:https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html
优质总结:
https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb
flex-basis 与 flex-grow flex-shrink详解:
https://www.w3cplus.com/css3/flexbox-layout-and-calculation.html?from=groupmessage()
flex布局基础:
https://www.runoob.com/css3/css3-flexbox.html
自我总结:
flex属性汇总:
flex-basis与width区别联系
深入理解 flex 计算(size计算):
布局生僻知识:
direction:rtl
align-items 与 align-content 区别:
align-items 是将整体空间划分为N份 每个item占据每份空间的中心
align-content 是把所有item作为一个整体挨着占据整个空间的中心