1、行高
1.1 行高的定位
行高是基线与基线之间的距离
★ 浏览器的默认文字大小：16px
★ 行高 = 文字高度 + 上下边距 。 文字在行高中默认是垂直居中的。
★ 想要一行文字在盒子中垂直居中，那么只需要设置这行文字的“行号等于盒子的高”即可。
★ 在企业开发中如果一个盒子有多行文字，只能通过设置padding来让文字居中。
1.2 行高的单位
行高的单位有：px em % 具体数值
★ 单位除了px外，行高值都是与文字大小的乘积。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>行高的单位</title>
<style type="text/css">
.box{
font-size: 20px;
line-height: 20px;
}
.box1{
font-size: 20px;
line-height: 2em;
}
.box2{
font-size: 20px;
line-height: 150%;
}
.box3{
font-size: 20px;
line-height: 2;
}
</style>
</head>
<body>
<!--总结：除了px单位外，行高都是font-size 和line-height 的乘积 -->
<!--行高就是定义的20px-->
<div class="box">高薪就业</div>
<!--行高 20*2 = 40px -->
<div class="box1">高薪就业</div>
<!--行高 20*150% = 30px-->
<div class="box2">高薪就业</div>
<!--行高 20 * 2 = 40px-->
<div class="box3">高薪就业</div>
</body>
</html>
★ 当定义父元素的文字大小和行高，只定义子元素的文字大小时（不定义行高），切换父元素行高单位，子元素的行高值怎么计算？
不带单位的时候，子元素行高是和子元素文字大小相乘。
em和%，子元素行高是和父元素文字大小相乘。
px为单位，子元素行高就是父元素的行高。
推荐使用px
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>行高和父元素</title>
<style type="text/css">
.d1{
font-size: 20px;
line-height: 40px;
}
.p1{
font-size: 30px;
}
.d2{
font-size: 20px;
line-height: 2em;
}
.p2{
font-size: 30px;
}
.d3{
font-size: 20px;
line-height: 150%;
}
.p3{
font-size: 30px;
}
.d4{
font-size: 20px;
line-height: 2;
}
.p4{
font-size: 30px;
}
</style>
</head>
<body>
<div class="d1">
<!--行高 40px 行高大小是从父元素继承来的 -->
<p class="p1">高薪就业</p>
</div>
<div class="d2">
<!--行高 40px 行高大小是从父元素继承来的,乘以的是父元素的文字大小。子元素的行高是20px*2=40px -->
<p class="p2">高薪就业</p>
</div>
<div class="d3">
<!--行高 30px 行高大小是从父元素继承来的,,乘以的是父元素的文字大小。子元素的行高是20px*150%=30px -->
<p class="p3">高薪就业</p>
</div>
<div class="d4">
<!--行高 60px 不带单位的时候，继承了2，但是乘以的是子元素的文字大小30*2=60px -->
<p class="p4">高薪就业</p>
</div>
<!--
总结 ：
不定义子元素行高值，定义父元素行高值时：
不带单位的时候，子元素行高值是和子元素的文字大小相乘
em和%的时候，子元素行高值是和父元素的文字大小相乘。
行高以像素为单位，就是父元素定义的行高值
-->
</body>
</html>
2、盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
css中盒子模型由三部分组成:1边框（border） 2 内边距（padding） 3外边距（margin）
2.1边框（border）
border-width 设置边框宽度，单位以px为主
border-style 设置边框样式 solid 实线 | dotted 点线 | dashed 虚线
border-color 设置边框颜色
border-top 设置上边框样式
border-bottom 设置下边框样式
border-left 设置左边框样式
border-right 设置右边框样式
连写：border-top: border-width border-style border-color; 顺序可以变，但是 border-style线型必写。
四个方向一样连写：border: border-width border-style border-color;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒子模型之边框</title>
<style type="text/css">
div{
width: 300px;
height: 400px;
background-color: gold;
/*border-top-color: red;*/
/*border-top-style: solid;*/
/*border-top-width: 2px;*/
/*border-top: 2px solid red;*/
/*border-bottom: 3px dashed green;*/
/*border-left: 4px brown dotted ;*/
/*border-right: brown 4px dotted ;*/
border: 4px dashed brown;
}
</style>
</head>
<body>
<div>高薪就业</div>
</body>
</html>
练习：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单控件</title>
<style type="text/css">
.search{
background: url("search.png") no-repeat right;
}
.email{
/*去掉边框*/
border: 0 none;
/*去掉轮廓线 */
outline-style: none;
border-bottom: 1px dashed red;
}
.box{
/*去掉边框*/
border: 0 none;
/*去掉轮廓线 */
outline-style: none;
border: 1px dashed #999;
background:brown ;
}
/*获取焦点 :focus */
/*.box:focus{*/
/*background:red ;*/
/*}*/
#username:focus{
background:red ;
}
</style>
</head>
<body>
<!--<label for="ID名">-->
<label for="username">用户名：</label><input type="text" class="box" id="username" ><br><br>
<label for="email">邮箱：</label><input type="text" class="email" id="email"><br><br>
<label for="search">搜索一下：</label><input type="text" class="search" id="search"><br><br>
</body>
</html>
轮廓线 |
outline-style:none 取消轮廓线 |
获取焦点 |
:focus 获取鼠标光标状态 |
取消表单边框 |
border:0 none; 兼容性好 |
label标签 |
<label for="ID名"> 友好性 |
2.2 边框合并
主要是table表格。细线表格实现。
border-collapse: collapse;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>细线表格</title>
<style type="text/css">
table{
width: 400px;
height: 300px;
border: 1px solid green;
/*边框合并 collapse 读 kəˈlæps*/
border-collapse: collapse;
}
td{
border: 1px solid green;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
2.3 内边距 padding
padding-left:20px; 左内边距
padding-right:20px; 右内边距
padding-top:20px; 上内边距
padding-bottom:20px; 下内边距
简写：
padding: 20px; 四个方向都是20px
padding: 20px 30px; 上下20px 左右50px
padding: 20px 30px 40px; 上20px 左右30px 下 40px
padding: 20px 30px 40px 50px; 上 右 下 左
2.4 外边距 margin
margin-left:20px; 左
margin-right:20px; 右
margin-top:20px; 上
margin-bottom:20px; 下
简写：
margin: 20px; 四个方向都是20px
margin: 20px 30px; 上下20px 左右50px
margin: 20px 30px 40px; 上20px 左右30px 下 40px
margin: 20px 30px 40px 50px; 上 右 下 左
2.5 垂直方向外边距合并、外边距塌陷（在下面一篇文章中有案例介绍）
练习：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>行业动态</title>
<style type="text/css">
.news{
width: 238px;
height: 166px;
border: 1px solid #D9E0EE;
border-top: 3px solid #FF8400;
margin: 0 auto;
}
.new_title{
/*width: 226px;*/
height: 35px;
border-bottom: 1px solid #D9E0EE;
line-height: 35px;
padding-left: 12px;
}
ul,li{
list-style: none;
/*ul默认有上下margin 和左padding，所以先将padding 和margin清0，以免影响。 li 默认没有margin和padding，保险起见可以也清0*/
margin: 0;
padding: 0;
}
div ul{
margin-top: 14px;
}
ul li{
padding-left: 19px;
background: url("li_bg.jpg") no-repeat 9px 7px;
font-size: 14px;
height: 23px;
}
div ul li a{
text-decoration: none;
color: black;
}
div ul li a:hover{
color: orange;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="news">
<div class="new_title">行业动态</div>
<ul>
<li><a href="#">气质不错气质不错</a></li>
<li><a href="#">气质不错气质不错</a></li>
<li><a href="#">气质不错气质不错</a></li>
<li><a href="#">气质不错气质不错</a></li>
<li><a href="#">气质不错气质不错</a></li>
</ul>
</div>
</body>
</html>