CSS阶段总结

CSS布局之左右布局与左中右布局

方法：为子元素设置浮动，然后在其父元素上使用clearfix类来清除浮动。代码示例：

html部分：<div class="parent clearfix"> ?<div class="child">a</div> ?<div class="child">b</div> ?<div class="child">c</div></div>CSS部分：.child{ ?float: left;}.clearfix::after { ???display: block; ???content: ‘‘; ???clear: both;}

水平居中

子元素为内联元素、单个块状及多级块状元素布局方案不同，具体总结如下：

1. 内联元素：对父元素设置text-align: center；
2. 单个块状元素：对子元素设置margin: 0 auto;
3. 多个块状元素：有三种方式
   ?a、子元素全部设置为display: inline-block;，父元素设置为text-align: center；
   ?b、flex布局，父元素display: flex; justify-content: center;
   ?c、如果是在多行各自居中，直接给子元素设置margin: 0 auto;

垂直居中

子元素为单行内联、多行内联及块状元素布局方案不同，具体总结如下：

1. 单行内联元素：父元素高度一定，设置line-height等于height
2. 多行内联元素：父元素设置：display: table-cell; vertical-align: middle;

3. 块状元素：1、固定高度的块级元素：通过绝对定位元素距离顶部50%，并设置margin-top为向上偏移元素高度的一半

   ``` ???????2、未知高度的块级元素：借助CSS3中的`transform`属性向Y轴反向偏移50%的方法来实现```

一些小技巧

• 合理使用伪元素
• a标签去掉其默认样式时，颜色可设置为继承父元素a{color:inherit;}
• 合理使用max-width属性

来源：https://segmentfault.com/a/1190000017482862

CSS阶段总结

原文地址：https://www.cnblogs.com/qixidi/p/10164058.html