-
-
- 一.行高line-height
-
- 1.概念
- 2.作用
- 3. 影響行高因素
- 4. 機關
- 二.邊框border
-
- 三.内邊距/内填充(padding)
-
- 1.概念
- 2. 聯寫
- 3. 盒子大小
- 4. 注意
- 5. 嵌套盒子中子盒子padding值對子盒子寬度的影響
- 四.外邊距(margin)
-
- 五.盒子組成模式box-sizing
-
一.行高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，否則看不到效果
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 token string">"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值和邊框寬度無關
![Vue項目 - 單檔案元件和Vue中的路由[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)