左右布局
假如有以下的情况（示例），可以使用浮动来达成左右布局的目的。
HTML如下：
<body>
<div class="father clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
CSS可以这么写：
<style type="text/css">
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: "";
clear: both;
height: 0;
}
.father{
width: 600px;
height: 600px;
color: black;
}
.left{
width: 200px;
height: 200px;
color: yellow;
float: left;
}
.right{
width: 200px;
height: 200px;
color: red;
float: left;
margin-left: 100px;
}
</style>
清除浮动可以使用clearfix类。
左中右布局
和左右布局类似，左中右布局也可以通过浮动以及微调几个块之间的间距来实现。
HTML如下：
<body>
<div class="father clearfix">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
CSS如下：
<style type="text/css">
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: "";
clear: both;
height: 0;
}
.father{
width: 600px;
height: 600px;
color: black;
}
.left{
width: 150px;
height: 200px;
color: yellow;
float: left;
}
.middle{
width: 150px;
height: 200px;
color: red;
float: left;
margin-left: 50px;
}
.right{
width: 150px;
height: 200px;
color: red;
float: left;
margin-left: 50px;
}
</style>
水平居中
水平居中有很多种方法，下面可以列举其中几种。
通过margin: 0 auto; text-align: center实现CSS水平居中。
下为例子：
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>
注意：这种方法父元素必须指定高度和宽度！
<style>
.out{
height: 200px;
width: 200px;
color: black;
}
.inner{
height: 200px;
width: 200px;
color: black;
margin: 0 auto;
text-align: center;
}
</style>
通过display:inline-block和text-align:center实现CSS水平居中。
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>
<style>
.out{
height: 200px;
width: 200px;
color: black;
display: inline-block;
}
.inner{
height: 200px;
width: 200px;
color: black;
margin: 0 auto;
text-align: center;
}
</style>
通过display:flex实现CSS水平居中。
父元素加上display:flex;flex-direction:column
而子元素align-self:center;
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>
<style>
.out{
height: 200px;
width: 200px;
color: black;
display: flex;
flex-direction: column
}
.inner{
height: 200px;
width: 200px;
color: black;
align-self: center;
}
</style>
这些是我所想到的方法。更多的可以参考CSS水平居中的9种方法
垂直居中
可参考一下链接CSS垂直居中的8种方法
其他小技巧
1.块级元素的高度由其内部文档流元素的高度的总和决定
2.文档流：文档内元素的流动方向
a.内联元素inline：从左往右流动，若遇到阻碍（宽度不够）则换行继续从左往右
word-break：break-all/break-world
文字分割，break-all是所有字符可以换行，break-world是每个单词才能分开
b.块级元素block：每一个块都占一行，从上往下流动
display：inline-block将块级元素变成行内元素
3.内联元素的高度：
玄学
font-size比line-height小时，字体自动居中；但字体比line-height大时，内联元素但高度不可预测
xscope
4.position：fixed 固定在屏幕上，跳出流，元素聚拢
5.绝对定位，脱离流
子元素position：abusolute
父元素position：relative
6.display：inline-block的外边距不合并
网友评论