Henry前端笔记之CSS常见布局实现及实例

坑

不能继承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区别联系

• https://www.jianshu.com/p/17b1b445ecd4

深入理解 flex 计算（size计算）：

• https://www.w3cplus.com/css3/flexbox-layout-and-calculation.html?from=groupmessage

布局生僻知识：

direction：rtl

align-items 与 align-content 区别：

align-items 是将整体空间划分为N份 每个item占据每份空间的中心
align-content 是把所有item作为一个整体挨着占据整个空间的中心

常见布局及实例分析

二列布局 三列布局 多列布局 网页常见布局实例）

https://juejin.im/post/5aa252ac518825558001d5de#heading-12