一、CSS的三大特性（续）
3.CSS三大特性之优先级
（1）
示例
<title>CSS三大特性之优先级</title>
<style>
div {
/* 没有！important的时候 行内样式style=""优先级别最大 */
color: pink !important;
}
#demo {
color: green;
}
.test {
color: red;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>
（2）优先级注意的问题
示例
<title>CSS权重注意点</title>
<style>
/* 父亲的权重是100 */
#father {
color: red;
}
/* p继承的权重为0 red后面加了!important也是一样的 */
/* 所以以后我们看标签到底执行哪个样式，就先看这个标签有没有直接被选出来 */
p {
color: pink;
}
body {
color: red;
}
/* a链接浏览器默认制定了一个样式 蓝色的 有下划线 a {color: blue;} */
/* 所以想要给a修改颜色 只能是单独给a修改样式 */
a {
color: green;
}
</style>
</head>
<body>
<div id="father">
<p>一张板凳</p>
</div>
<a href="#">我是单独的样式</a>
</body>
（3）CSS权重的叠加
示例
<title>CSS权重的叠加</title>
<style>
/* 复合选择器会有权重叠加的问题 */
/* ul li 权重 0,0,0,1+0,0,0,1=0,0,0,2 */
/* 如果有10个标签选择器，那么它的权重是0,0,0,10 */
/* 权重虽然会叠加，但是永远不会有进位 */
ul li {
color: green;
}
/* li 的权重是0,0,0,1 */
li {
color: red;
}
/* .nav li 权重 0,0,1,0+0,0,0,1=0,0,1,1 */
.nav li {
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
（4）权重的两个练习题
<title>CSS权重练习1</title>
<style>
.nav {
color: red;
}
li {
/* 继承的权重是0 */
color: pink;
}
</style>
</head>
<body>
<ul>
<li>人生四大悲</li>
<li>家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>学校没wifi</li>
</ul>
</body>
<title>CSS权重练习2</title>
<style>
.nav li {
color: red;
}
/* 需要把第一个小li 颜色改为 粉色加粗 */
/* .pink 权重是10 .nav .pink 20 */
/* .pink {
color: pink;
font-weight: 700;
} */
.nav .pink {
color: pink;
font-weight: 700;
}
</style>
</head>
<body>
<ul class="nav">
<li class="pink">人生四大悲</li>
<li>家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>学校没wifi</li>
</ul>
</body>
二、CSS盒子模型
目标
1.盒子模型导读
2.看透网页布局本质
3.盒子模型组成部分
4.盒子模型边框border
（1）
示例
<title>盒子模型之边框</title>
<style>
div {
width: 300px;
height: 200px;
/* border-width 边框的粗细 一般情况下都用 px */
border-width: 5px;
/* border-style 边框的样式 solid实线边框 dashed虚线边框 dotted点线边框*/
border-style: solid;
/* border-style: dashed; */
/* border-style: dotted; */
/* border-color 边框的颜色 */
border-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
（2）边框的复合写法
<title>边框的复合写法</title>
<style>
div {
width: 300px;
height: 200px;
/* 边框的复合写法 简写： */
/* border: 5px solid pink; */
/* 上边框 */
border-top: 5px solid pink;
/* 下边框 */
border-bottom: 10px dashed purple;
}
</style>
</head>
<body>
<div></div>
</body>
（3）表格细线边框
示例
<title>表格细线边框-今日小说排行榜案例</title>
<style>
table {
width: 500px;
height: 249px;
}
th {
height: 35px;
}
table,
td,
th {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>傻妃出墙了</td>
<td><img src="../img/2.png"></td>
<td>999</td>
<td>231</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>2</td>
<td>倾世囧妃</td>
<td><img src="../img/2.png"></td>
<td>333</td>
<td>231</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>纨绔世子妃</td>
<td><img src="../img/2.png"></td>
<td>116</td>
<td>333</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>4</td>
<td>梦回大清</td>
<td><img src="../img/2.png"></td>
<td>222</td>
<td>233</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
（4）边框会影响盒子实际大小
示例
<title>边框会影响盒子的实际大小</title>
<style>
/* 我们需要一个200*200的盒子，但是这个盒子有10像素的红色边框 */
div {
width: 180px;
height: 180px;
background-color: pink;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
（5）边框的练习
<title>边框的练习</title>
<style>
/* 请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色 */
div {
width: 200px;
height: 200px;
/* border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue; */
/* border包含了四条边 */
border: 1px solid blue;
/* 层叠性 只是层叠了 上边框 */
border-top: 1px solid red;
/* 不可以把border和border-top调换位置 因为就近原则 border会把border-top给覆盖掉 */
}
</style>
</head>
<body>
<div></div>
</body>
5.盒子模型内边距padding
（1）
<title>盒子模型之内边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
/* 内边距复合写法（简写） */
/* padding: 5px; */
/* padding: 5px 10px; */
/* padding: 5px 10px 20px; */
padding: 5px 10px 20px 30px;
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
（2）padding复合属性
（3）padding会影响盒子实际大小
示例
<title>内边距会影响盒子实际大小</title>
<style>
div {
width: 160px;
/* 200px*/
height: 160px;
/*200px*/
background-color: pink;
padding: 20px;
}
</style>
</head>
<body>
<div>
padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小
</div>
</body>
（4）padding应用-新浪导航栏
示例
<title>padding应用-新浪导航栏</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
/* font-size: 12px;
color: #4c4c4c; 不会变颜色！*/
}
.nav a {
/* 发现height并没有起作用 因为a属于行内元素 此时必须要转换成行内块元素 */
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
6.小米侧边栏修改
示例
<title>小米侧边栏修改</title>
<style>
/* 1. 把a转换为块级元素 */
a {
display: block;
/* 盒子的宽度因为padding撑开了30px，所以我们把宽度减去30px */
/* width: 230px; */
width: 200px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
/* ti2em */
/* text-indent: 2em; 在开发里我们不能通过text-indent来调整文字与边的距离，而是通过padding来给的*/
padding-left: 30px;
line-height: 40px;
}
/* 2. 鼠标经过链接变换背景颜色 */
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
1249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
