共计 2512 个字符，预计需要花费 7 分钟才能阅读完成。
整理一些最近几天学习 CSS 的一些知识点，好记性不如烂笔头，写下来敲一遍代码为自己写哈。
左右两栏或三栏布局
1、常用方法是给 div 加 float 浮动方式实现，加了浮动后 div 不再独占一行。
2、还有就是 position 属性实现，通过 position 的话需要额外加一层 div，最外层 div 的 position 设为 relative，子 div 的 position 设为 absolute，然后根据两栏还是三栏去设置中 / 右 div 的 left 值即可。
3、通过 felx 弹性布局。这点就不献丑了，也是才学习。
**float 浮动方式实现 **
<style>
div {float: left;}
.one {
height: 500px;
width: 500px;
background: gray
}
.two {
height: 500px;
width: 500px;
background: rebeccapurple
}
</style>
**position 方式实现 **
<body>
<div class="one"></div>
<div class="two"></div>
</body>
<style>
.father{position:relative;}
.one {
height: 500px;
width: 500px;
background: gray;
position: absolute ;
}
.two {
height: 500px;
width: 500px;
background: rebeccapurple;
position: absolute;
top: 0;
left: 500px;
}
</style>
<body>
<div class="father">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
几种常见的居中方法
块级元素水平 / 垂直居中：
1、不改变 float 和 position 的情况下，设置 margin: 0 auto 即可实现快速水平居中而且不需要知道 div 的具体宽高，但是只能实现水平居中。
body{border: 1px solid black;}
.three {
border: 1px solid green;
height: 500px;
width: 500px;
margin: 0 auto;
}
</style>
<body>
<div class="three"></div>
</body>
2、如果 div 有浮动或 position 情形，可通过设置 left/topd 值为 50%，再配合 transform: translate(?, ?) 实现水平 / 垂直居中，这种方式不需要知道 div 的具体宽高。
<style>
.abc {
height: 500px;
border: 1px solid black;
}
.three {
background: darkgray;
height: 300px;
width: 300px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="abc">
<div class="three"></div>
</div>
</body>
3、如果 div 的宽高已知，则设置 left/topd 值为 50% 后 margin-top/margin-left 分别减去 div 宽高的一半，也可以实现水平 / 垂直居中
.abc {
height: 500px;
border: 1px solid black;
}
.three {
background: darkgray;
height: 300px;
width: 300px;
position: relative;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}
</style>
<body>
<div class="abc">
<div class="three"></div>
</div>
</body> 行内元素水平 / 垂直居中：
1、行内元素设置 text-align: center 实现水平居中，ine-height 值设置为父元素高度可实现垂直居中。不过 ine-height 只能设置单行文本且父元素高度要已知。
<style>
.abc {
height: 200px;
border: 1px solid black;
text-align: center;
line-height: 200px;
}
</style>
<body>
<div class="abc">
<p>1</p>
</div>
</body>
2、多行文本水平 / 垂直居中的话，父元素设置 display: table，文本元素设置 display: table-cell;vertical-align: middle; 可实现垂直居中。
<style>
.abc {
height: 200px;
width: 200px;
border: 1px solid black;
display: table;
text-align: center;
}
.abc>p {
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="abc">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</body>
一些其他的知识点
3、英文单词因不可分割性，div 宽度不够时不会自动换行，word-break 属性可强制换行不过中文不受此限制。
4、脱离文档流的元素（fixed），其高度不再计算到 body 高度内。
5、CSS 尽量不要写死具体高度，宽度不要也高度 100%，容易引发其他问题。div 的宽高应有其内元素撑开。
6、加了 display：inline-block 的话一般都需要加 vertical-lign。
7、span 标签换行和不换行是有区别的。大家仔细看看 html 内，四个 span 前 2 个没换行后 2 个换行，浏览器渲染出的结果明显有一个空格。
<body>
<div>
<span>123</span><span>456</span>
</div>
<div>
<span>123</span>
<span>456</span>
</div>
</body>
