CSS 雜談
文檔流 Normal Flow
- 流動是默認的網(wǎng)頁布局形式捡遍。也就是說在默認狀態(tài)下的HTML網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的
- 流動布局模型具有兩個比較典型的特征：
- 塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布厌均，每個元素另起一行
- 內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)自左到右水平分布顯示走搁，寬度不夠就換行
寬高如何確定
-
內(nèi)聯(lián)元素 inline
- 占的寬：內(nèi)容担败、左右padding磁滚、左右margin
- 占的高：line-height兰怠、font-size垃僚。如果設(shè)置了上下的填充、間距错妖，對行內(nèi)元素的邊框绿鸣、背景色會有影響，但不影響布局
<style type="text/css">
body {
font-size: 0;
}
span {
/*
內(nèi)聯(lián)元素之間的間距問題：當行內(nèi)元素之間有“回車”站玄、“tab”枚驻、“空格”時就會出現(xiàn)空隙
解決辦法：
1. 寫在一行濒旦，之間不要有空格之類的符號
2. 使用 font-size株旷。設(shè)置內(nèi)聯(lián)元素的父元素字體大小為 0，然后設(shè)置內(nèi)聯(lián)元素字體大小
*/
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
- 內(nèi)容寬度：父元素的內(nèi)容區(qū)域的寬度 - 自己的左右邊框 border - 自己的左右填充 padding - 自己的左右 margin尔邓；可以通過 white-space 控制是否換行
- 內(nèi)容高度：它內(nèi)部文檔流中元素的高度的總和
<style type="text/css">
div {
border: 10px solid red;
}
.contain {
width: 300px;
border-color: lightgreen;
}
.contain > div:nth-child(1) {
/* 寬度 %：定義基于包含塊（父元素）寬度的百分比寬度／高度 */
width: 100%;
/*
不要設(shè)置 width: 100%; 很容易出問題
widtd 的默認值為 auto晾剖，它會自動計算的
*/
}
</style>
</head>
<body>
<div class="contain">
<div>文字文字文字文字文字文字</div>
<div>文字文字文字文字文字文字</div>
<div>文字文字文字文字文字文字</div>
</div>
</body>
-
內(nèi)聯(lián)塊狀元素 inline-block
- 寬：內(nèi)容決定寬度，也可以設(shè)置 width梯嗽〕菥。可以通過 white-space 控制是否換行
- 高：它內(nèi)部文檔流中元素的高度的總和。也受 line height灯节、font size 的影響
- 在實際工作中循头，使用 block 或 float（注意要清除浮動） 或 flex，不要使用 inline-block
<style type="text/css">
/*
使用 inline-block 元素的時候炎疆，常會遇到兩個 bug：
1. 兩個inline-block 元素之間如果有空格卡骂、回車、tab形入，那么在頁面上就有一個空隙
解決辦法：將父元素的 font-size 設(shè)置為 0全跨，然后在 inline-block 元素中將 font-size 設(shè)置為需要的大小
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>
居中（水平浓若、垂直）
文檔流中的元素
水平居中
內(nèi)聯(lián)元素：在父元素身上加
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 {
/* 通過設(shè)置 margin 來居中 */
margin: 0 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<span style="border: 1px solid black;">行內(nèi)元素行內(nèi)元素行內(nèi)元素</span>
<div>塊狀元素塊狀元素塊狀元素</div>
</div>
</body>
垂直居中
- 內(nèi)聯(lián)元素：
- 在父元素上加 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;">行內(nèi)元素行內(nèi)元素行內(nèi)元素</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
