1.标签语义化
顾名思义，合理的标签干合适的事情
2.行内标签、块状标签、行内块标签
区别
- 行内元素与块级元素可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。
- 行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
- 行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
- 块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
常见标签
- 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot
- 行级（display：inline）：a、span、small、strong、em、i、code、
- 行内块（display：inline-block）：img、input
其他
- display还有none（隐藏dom）、flex（弹性）、table（表）
3.display：none和visibility：hidden区别
display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留，而
visibility还有以下特点：
- visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
- visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
<body>
<div>
<strong>给元素设置visibility:hidden样式</strong>
<ol>
<li>元素1</li>
<li style="visibility:hidden;">元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
</div>
<div>
<strong>给元素设置display:none样式</strong>
<ol>
<li>元素1</li>
<li style="display:none;">元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
</div>
</body>
效果：
- CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。
4.盒子水平垂直居中
- 定位的三种方式：
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
- 子元素有固定宽高
<style>
#box1 {
position: relative;
width: 500px;
height: 500px;
background: yellowgreen;
}
#box2 {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
background: red;
}
</style>
- 需要父亲有宽高限定
<style>
#box1 {
position: relative;
width: 500px;
height: 500px;
background: yellowgreen;
}
#box2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50px;
height: 50px;
background: red;
}
</style>
- position + transform (没有宽高限定)
<style>
#box1 {
position: relative;
width: 500px;
height: 500px;
background: yellowgreen;
}
#box2 {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
background: red;
}
</style>
- flex布局
<style>
#box1 {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
background: yellowgreen;
}
#box2 {
width: 50px;
height: 50px;
background: red;
}
</style>
- 固定宽高的父级 display：table-cell 子级inline-block
<style>
#box1 {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 500px;
height: 500px;
background: yellowgreen;
}
#box2 {
display: inline-block;
width: 50px;
height: 50px;
background: red;
}
</style>
5.盒模型
- 标准盒模型
- 怪异(ie)盒模型
- 弹性盒模型
- 多列布局
6.三栏布局(圣杯，双飞翼，弹性)
左右定宽中间自适应的典型布局
- 圣杯布局
<style>
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#container {
height: 100%;
padding: 0 200px;
overflow: hidden;
}
.center {
float: left;
width: 100%;
min-height: 400px;
background: yellow;
}
.left {
float: left;
width: 200px;
background-color: aquamarine;
margin-left: -100%;
/* 文档流向左移动一整行 */
position: relative;
left: -200px;
min-height: 200px;
}
.right {
float: right;
width: 200px;
background-color: coral;
margin-right: -200px;
min-height: 400px;
}
</style>
<body>
<div id="container">
<div class="center">
中间中间中间中间中间中间中间中间中间中间中间中间中间
</div>
<div class="left">
左边左边左边左边左边左边左边左边左边左边左边左边左边
</div>
<div class="right">
右边右边右边右边右边右边右边右边右边右边右边右边右边
</div>
</div>
</body>
效果：
- 双飞翼布局
<style>
* {
margin: 0;
padding: 0;
}
.main > div {
float: left;
height: 100px;
}
.left {
width: 200px;
background: red;
margin-left: -100%;
}
.right {
width: 200px;
background: lawngreen;
margin-left: -200px;
}
.middle {
width: 100%;
background: yellow;
}
.content {
margin-left: 200px;
margin-right: 200px;
}
</style>
<div class="main">
<div class="middle">
<div class="content">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
效果：
弹性
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.left {
background-color: aquamarine;
width: 100px;
min-height: 200px;
}
.right {
background-color: coral;
width: 200px;
min-height: 400px;
}
.main {
flex: 1;
background-color: yellowgreen;
}
</style>
<div class="container">
<div class="left">
左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边
</div>
<div class="main">
中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间
</div>
<div class="right">
右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边
</div>
</div>
效果：
2108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
