CSS 常用技巧总结

1.左右布局

用浮动来实现：

<div id="father" class="clearfix">
　　　　<div id="child1"></div>
　　　　<div id="child2"></div>
</div>

然后，CSS这样写

div#child1,
div#child2, {
　　　　float:left;
　　}

浮动的元素会破坏文档流不占据页面空间，这样会引起一写bug,所以在其父元素进行修改

div.clearfix::after{
content:' ';
clear:both;
display:block;
}

2.左中右布局

利用定位属性进行布局 ，或者bootstrap 中的栅格系统进行布局..

3.文字的水平居中

将一段文字置于容器的水平中点，设置父元素的text-align属性即可：

text-align:center;

4.容器的水平居中

把里面的容器display:inline-block 外层容器tac
指定容器明确的宽度，在设置margin水平值为auto

div#container {
　　　　width:500px;
　　　　margin:0 auto;
　　}

5. 文字的垂直居中

单行文字的垂直居中，只要将行高与容器高设为相等即可。

比如，容器中有一行数字。

<div id="container">Hello world</div>

然后CSS这样写：

div#container {height: 30px; line-height: 30px;}

如果是n行文字，就设置line-height为"高度乘1/n"

6.容器的垂直居中

比如，有一大一小两个容器，如何将小容器垂直居中？

<div id="big">
　　　　<div id="small">
　　　　</div>
</div>

首先，将大容器设置为相对定位。

div#big{
　　　　position:relative;
　　　　height:480px;
　　}

然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。

div#small {
　　　　position: absolute;
　　　　top: 50%;
　　　　height: 240px;
　　　　margin-top: -120px;
　　}

水平居中同理。

７．获得焦点的表单元素

当一个表单元素获得焦点时，可以将其突出显示：

input:focus { border: 2px solid green; }

8.如何让一个元素相对其父元素居中显示？

image.png

父元素相对定位，子元素绝对定位，设置子元素的top bottom left right 为0，margin为auto即可

9.border-radius

如果一个元素的宽高相等， 如果border-radius是宽 高的1/2 的话， 那么会是一个圆形。
也就是说 如果一个元素的 border-radius为10px，那么等同于 一个10px为半径的圆防止在角上

属性
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

10.聚焦选择器

button:focus {
  outline: none;
}