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;
}
网友评论