一.行高line-height
1.概念
- 標準定義：兩行文字基線中的距離
- 通俗概念：行高=文字大小+上間距+下間距
2.作用
- 設置文字垂直方向有距離
- 設置文字垂直居中
3. 影響行高因素
- 文字大小
- 文字字體
4. 單位
- 4.1如果單獨給一個標籤設置行高
- px：行高=設置的px值，跟文字大小無關
- em：行高=字體大小*em值
- 百分比：行高=字體大小*百分比
- 不帶單位：行高=字體大小*數值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
background-color: pink;
font-size: 20px;
/* 行高=30px */
/*line-height: 30px;*/
/* 行高=2*字體大小=40px */
/*line-height: 2em;*/
/*行高=300%*字體大小=60px*/
/*line-height: 300%;*/
/*行高=4*字體大小=80px*/
/*line-height: 4;*/
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
- 4.2如果給父元素設置行高,子元素行高特點
- 父px：行高=父px值，跟文字大小無關
- 父em：行高=子元素字體大小*父em值
- 父百分比：行高=父元素字體大小*父百分比
- 父不帶單位：行高=子元素字體大小*父數值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
background-color: pink;
font-size: 16px;
/*content的div行高=30px（繼承父容器的行高）*/
/*line-height: 30px;*/
/*content的div行高=父元素行高*2=32px(先計算後繼承)*/
/*line-height: 2em;*/
/*content的div行高=父元素行高*300%=48px(先計算後繼承)*/
/*line-height: 300%;*/
/*content的div行高=子元素行高*4=80px(先繼承後計算)*/
/*line-height: 4;*/
}
.content {
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">文字</div>
</div>
</body>
</html>
二.邊框border
1.屬性
-
border-style 邊框樣式
- none：默認值，無邊框，跟border-width的值無關
- solid：實線
- dashed：虛線
- dotted：點線
-
border-color 邊框顏色
-
border-width 邊框寬度
-
medium: 默認寬度（大概1.5px）,只有border-style設置了非none值默認寬度纔有效
-
像素px：由浮點數字和單位標識符組成的長度值
-
2.聯寫
- border-style、border-color、border-width沒有順序規定
- 除非是要去掉邊框，否則都該設置非none值的border-style，否則看不到效果
border:10px solid green;
- 去掉邊框
border:0 none;
3.擴展
- 去掉輪廓線
- 當標籤聚焦時，會顯示輪廓線
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*把邊框和輪廓線都去掉,以自己的圖片背景作爲輸入框*/
input {
border: 0 none; /* 去掉邊框 */
outline-style: none; /* 去掉輪廓線，輸入框聚焦時就不會顯示原本那個長方形的輪廓線 */
width: 329px;
height: 129px;
font-size: 50px;
padding-left: 90px;
padding-top: 10px;
background: url(1.png) no-repeat; /* 以自己的圖片背景作爲 輸入框*/
}
</style>
</head>
<body>
<input>
</body>
</html>
- 合併表格邊框
- 細線表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table {
/* 把相鄰的邊框合併爲單一的邊框 */
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1" width="300" height="200">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
三.內邊距/內填充(padding)
1.概念
- 內容與邊框的距離
- 只能移動內容的位置，不能移動盒子本身
2. 聯寫
- 10px：上下左右10px
- 10px 20px:上下10px,左右20px
- 10px 20px 30px：上10px,左右20px,下30px
- 10px 20px 30px 40px:上10px,右20px,下30px,左40px
3. 盒子大小
- 寬度=內容寬度+左右padding+左右border-width
- 高度=內容高度+上下padding+上下border-width
4. 注意
- padding-top、padding-bottom對行內元素無效
- padding-left、padding-right對行內元素有效
5. 嵌套盒子中子盒子padding值對子盒子寬度的影響
- 前提：兩個盒子嵌套關係,子盒子沒有設置寬度，根據塊級元素的特點，子盒子寬度=父盒子寬度
- 情形1：當子盒子左右總padding值小於父盒子寬度時，子盒子寬度不會改變
- 情形2：當子盒子左右總padding值大於父盒子寬度時，子盒子會超出父盒子範圍(溢出)
四.外邊距(margin)
1.概念
- 邊框與邊框的距離
- 用於移動盒子，不能改變盒子大小
2.聯寫
- 10px：上下左右10px
- 10px 20px:上下10px,左右20px
- 10px 20px 30px：上10px,左右20px,下30px
- 10px 20px 30px 40px:上10px,右20px,下30px,左40px
3.注意
- margin-top、margin-bottom對行內元素無效
- margin-tleft、pmargin-right對行內元素有效
4.特殊情況
-
垂直外邊距合併
- 條件：上方盒子(盒子1)的底部外邊距與下方相鄰盒子(盒子2)的頂部外邊距都設置了值
- 結果：垂直相鄰的盒子真正上下距離=盒子1的margin-bottom與盒子2margin-top中的最大值
- 舉例：div1在div2的緊鄰上方，div1的margin-bottom=50px,div2的margin-top=100px,最終上下距離是100px
-
垂直外邊距塌陷
- 條件：兩個盒子是嵌套關係，子盒子設置margin-top值(margin-left,margin-right,margin-bottom沒效果)
- 結果：兩個盒子的相對位置沒變，只是兩個盒子一起往下移動了margin-top的距離
- 解決方式
- 給父盒子設置邊框
- 設置overflow:hidden(觸發了bfc)
- 子元素設置浮動float
-
網上資料
- 外邊距特殊情況：http://blog.sina.com.cn/s/blog_601b97ee0101b8xe.html
- BFC詳情: http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
五.盒子組成模式box-sizing
1.介紹
-
content-box
- 實際寬度=內容寬度width+左右padding值+邊框寬度(實際高度計算同理)
-
border-box
- 實際寬度=內容寬度width
- 實際寬度與padding值和邊框寬度無關