内容简介：整理一些最近几天学习CSS的一些知识点，好记性不如烂笔头，写下来敲一遍代码为自己写哈。左右两栏或三栏布局1、常用方法是给div加float浮动方式实现，加了浮动后div不再独占一行。
整理一些最近几天学习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>
以上所述就是小编给大家介绍的《CSS学习部分知识点记录》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
CSS禅意花园
[美] Dave Shea、Molly E. Holzschlag / 陈黎夫、山崺颋 / 人民邮电出版社 / 2007-6 / 49.00元
这本书的作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS禅意花园）。全书分为两个主要部分。第1章为第一部分，讨论网站“CSS禅意花同”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括6章，占据了书中的大部分篇幅。 每章剖析“CSS禅意花园”收录的6件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。通过探索......一起来看看 《CSS禅意花园》 这本书的介绍吧!
