CSS 杂谈
文档流 Normal Flow
- 流动是默认的网页布局形式。也就是说在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的
- 流动布局模型具有两个比较典型的特征：
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，每个元素另起一行
- 内联元素都会在所处的包含元素内自左到右水平分布显示，宽度不够就换行
宽高如何确定
-
内联元素 inline
- 占的宽：内容、左右padding、左右margin
- 占的高：line-height、font-size。如果设置了上下的填充、间距，对行内元素的边框、背景色会有影响，但不影响布局
<style type="text/css">
body {
font-size: 0;
}
span {
/*
内联元素之间的间距问题：当行内元素之间有“回车”、“tab”、“空格”时就会出现空隙
解决办法：
1. 写在一行，之间不要有空格之类的符号
2. 使用 font-size。设置内联元素的父元素字体大小为 0，然后设置内联元素字体大小
*/
font-size: 15px;
border: 1px solid green;
}
span:nth-child(1) {
line-height: 100px;
font-size: 30px;
/*padding: 40px 0;*/
}
</style>
</head>
<body>
<span>文字文字文字文字文字文字</span>
<span>文字文字文字文字文字文字</span><br>
<span style="background-color: pink">文字文字文字文字文字文字</span>
</body>
-
块状元素 block
- 内容宽度：父元素的内容区域的宽度 - 自己的左右边框 border - 自己的左右填充 padding - 自己的左右 margin；可以通过 white-space 控制是否换行
- 内容高度：它内部文档流中元素的高度的总和
<style type="text/css">
div {
border: 10px solid red;
}
.contain {
width: 300px;
border-color: lightgreen;
}
.contain > div:nth-child(1) {
/* 宽度 %：定义基于包含块（父元素）宽度的百分比宽度／高度 */
width: 100%;
/*
不要设置 width: 100%; 很容易出问题
widtd 的默认值为 auto，它会自动计算的
*/
}
</style>
</head>
<body>
<div class="contain">
<div>文字文字文字文字文字文字</div>
<div>文字文字文字文字文字文字</div>
<div>文字文字文字文字文字文字</div>
</div>
</body>
-
内联块状元素 inline-block
- 宽：内容决定宽度，也可以设置 width。可以通过 white-space 控制是否换行
- 高：它内部文档流中元素的高度的总和。也受 line height、font size 的影响
- 在实际工作中，使用 block 或 float（注意要清除浮动） 或 flex，不要使用 inline-block
<style type="text/css">
/*
使用 inline-block 元素的时候，常会遇到两个 bug：
1. 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙
解决办法：将父元素的 font-size 设置为 0，然后在 inline-block 元素中将 font-size 设置为需要的大小
2. 两个不同高度的 inline-block 元素无法对齐，或者下面无缘无故多出几像素
解决办法：改变 inline-block 元素的 vertical-align，一般改为 top 或 middle
*/
.box {
font-size: 0;
background-color: lightblue;
}
.box > img {
vertical-align: top;
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<\img src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
<\img style="width: 140px" src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
</div>
</body>
居中（水平、垂直）
文档流中的元素
水平居中
内联元素：在父元素身上加
text-align: center;-
块级元素：
- 固定宽度的div
margin-left: auto;margin-right: auto;
- 不固定宽度的 div
margin: 0 100px;
- 固定宽度的div
<style type="text/css">
.box {
text-align: center;
background-color: lightblue;
}
.box > div {
/* 通过设置 margin 来居中 */
margin: 0 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<span style="border: 1px solid black;">行内元素行内元素行内元素</span>
<div>块状元素块状元素块状元素</div>
</div>
</body>
垂直居中
- 内联元素：
- 在父元素上加 line-height（自己身上加也可以）
- 在父元素上加
padding: 100px 0; - 或两者同时使用
- 块级元素
- 在父元素上加
padding: 100px 0;
- 在父元素上加
<style type="text/css">
.box {
padding: 100px 0;
background-color: lightblue;
/*line-height: 300px;*/
}
.box > span {
line-height: 300px;
}
</style>
</head>
<body>
<div class="box">
<!-- <span style="border: 1px solid black;">行内元素行内元素行内元素</span> -->
<div style="border: 1px solid red;">块状元素块状元素块状元素</div>
</div>
</body>
不在文档流中的元素
-
浮动元素居中 float
- 浮动元素脱离普通流，然后按照指定方向，向左或者向右移动，碰到父级边界或者另外一个浮动元素停止
- 让浮动元素居中这个需求就不太合理
-
绝对定位
- top: 50%; left: 50%; margin-left: - 宽度的一半; margin-top: - 高度的一半
- top: 50%; left: 50%; transform: translate(-50%,-50%) （CSS 3 属性）
- 兼容性最好的垂直居中：table
<style type="text/css">
.parent {
position: relative;
height: 300px;
border: 1px solid red;
}
.parent > .child {
position: absolute;
width: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid lightgreen;
}
table,
.table
{
width: 500px;
height: 300px;
margin-top: 30px;
border: 1px solid red;
}
table .child,
.table .child
{
width: 200px;
margin: 0 auto;
border: 1px solid lightgreen;
}
.table {
display: table;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字
</div>
</div>
<table>
<tr>
<td>
<div class="child">
文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字
</div>
</td>
</tr>
</table>
<div class="table">
<div class="tr">
<div class="td">
<div class="child">
文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字
</div>
</div>
</div>
</div>
</body>
布局（一栏、两栏、三栏）
IE: float
非IE： flex
