使用CSS做出常用布局
2019-03-19 本文已影响13人
陈光展_Gz
以下用CSS介绍如何做出
- 左右布局
- 左中右布局
- 水平居中
- 垂直居中
- 其他小技巧
一、左右布局
方法一：对于块元素采用给爸爸元素加clearfix,给儿子元素加float: left;。
html
<div class="father clearfix"> /* 爸爸元素添加clearfix */
<div class="son">龟儿子1</div>
<div class="son">龟儿子2</div>
<div class="son">龟儿子3</div>
</div>
CSS
.clearfix::after {
content: '';
display: block;
clear: both;
}
.son {
float: left; /* 儿子元素添加float: left; */
}
运行结果
左右布局
方法二：对于块元素设置display: inline-block；（display属性规定元素该生成的框类型。inline-block是让定义元素作为行内块元素。），这样会出现行距上下不平均的BUG，故还要添加vertical-align: top;解决这个BUG，然后给父元素加入text-align: center;可以实现块状子元素水平居中。
html
<div class="father">
<div class="son">龟儿子1</div>
<div class="son">龟儿子2</div>
<div class="son">龟儿子3</div>
</div>
CSS
.father {
text-align: center;
}
.son {
display: inline-block;
vertical-align: top; /* 为了解决bug */
}
运行结果
左右布局
二、左中右布局
方法一：在左右布局中添加margin实现左中右布局；并采用伪类。
思路示意图：
image.png
html
<div class="father clearfix"> /* 爸爸元素添加clearfix */
<div class="son">龟儿子1</div>
<div class="son">龟儿子2</div>
<div class="son">龟儿子3</div>
</div>
CSS
.clearfix::after {
content:'';
display:block;
clear:both;
}
.son {
float:left;
border:1px solid green
}
.son:nth-child(even) { /* 此处不能有空格 */
margin-left:20px;
margin-right:20px;
}
运行结果
左中右.png
方法二：给爸爸元素postion: relative;，儿子元素postion: absolute;
思路示意图：
image.png
html
<div class="father"> /* 爸爸元素添加clearfix */
<div class="son">龟儿子1</div>
<div class="son">龟儿子2</div>
<div class="son">龟儿子3</div>
</div>
CSS
.father {
postion: relavtive;
}
.son {
postion: absloute;
display:inline-block;
border: 1px solid red;
}
.son:nth-child(even) {
postion: absloute;
display:inline-block;
margin-left: 20px;
margin-right: 20px;
}
运行结果
左中右
三、水平居中
-
通用方法
方法一：CSS3 transform
CSS
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
方法二：Flex布局
CSS
.father {
display: flex;
justify-content: center;
}
Tips:适用于子元素为浮动，绝对定位，内联元素，均可水平居中。
-
居中的元素为常规文档流中的内联元素(display: inline)
常见的内联元素有：span, a, img, input, label 等等。
CSS
.father {
text-align: center;
}
Tips:此方法同样适用于 display: inline-block 的元素。
-
居中的元素为常规文档流中的块元素(display: block)
常见的块元素：div, h1~h6, table, p, ul, li 等等.
方式一：设置 margin
CSS
.parent {
width: 100%;
}
.child {
width: 600px;
height: 50px;
margin: 0 auto;
background: #999;
}
Tips:此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
方式二：修改为 inline-block 属性
CSS
.father {
text-align: center;
}
.son {
display: inline-block;
}
- 居中的元素为浮动元素
CSS
.son {
width: 100px;
float: left;
position: relative;
left: 50%;
margin-left: -50px;
}
- 居中的元素为绝对定位元素
方式一：
.father {
position: relative;
}
.son {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
}
方式二：
.father {
position: relative;
}
.child {
position: absolute;
width: 100px;
left: 0;
right: 0;
margin: 0 auto;
}
四、垂直居中
- 居中的元素为单行文本
.text {
line-height: 200px;
height: 200px;
}
TIips:把文字的 line-height 设为文字父容器的高度，适用于只有一行文字的情况。
-
已知元素宽高
方式一：
.father {
position: relative;
}
.son {
position: absolute;
top: 0;
bottom: 0;
height: 100px;
margin: auto 0;
方式二：
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
其他小技巧
- box-shadow可以给块设置阴影，看起来更立体，谷歌搜索css shadow generator可以自己调整样式。
- transition: all 0.3s;动画属性，可以给所有变化加入过渡动画和过渡时间。
- cursor: pointer;鼠标悬停时I型可以变成手指点击形状
- border: 1px solid red; border边框可以用来调试标签的所占位置。
- 当设置display: inline-block; 需要加上vertical-align: top; 来去除底层多出的空间。
- background-image: url(../img/girl.jpg); 设置背景图片background-position: center
center;可以使背景图片垂直水平居中， background-size: cover;使背景图片可以按比例缩放。 - 文字间距
写页面时，经常遇到需要扩大文字间间距的情况，尤其是标题，如果用空格去填充那就太麻烦了，代码也不够优雅。好在css提供了扩大文字间距的属性letter-spacing。
image
但是由于最后一个字符后也跟了一个间距，导致文字并没有完全居中。那么现在要使用css提供的第二个间距相关的属性text-indent，可以控制首行文本前的间距。设置与letter-spacing的值相同即可。
image
代码如下：
letter-spacing: 0.5em;
text-indent: 0.5em;
