一.行高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值和边框宽度无关