整理一些最近几天学习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>