一、三大特性
1、层叠性
样式冲突的情况下，遵循就近原则。
比如下面，颜色显示为粉色，但是字体大小为14px。
div { color: red; font-size: 14px; } div { color: pink; }
2、继承性
继承父元素的某些样式，（包括font-/text-/line-以及color）但并不是全部样式。
行高的继承：
body { color: pink; /* font: 12px/24px "Microsoft YaHei"; */ font: 12px/1.5 "Microsoft YaHei"; /* 1.5意思为行高是当前字体大小的1.5倍 */ } div { /* 子元素继承父元素的行高，即14*1.5 */ font-size: 14px; } /* li没有指定行高和字体大小，则继承ul的，ul继承body的，顾故li也继承body的 */
3、优先级
选择器权重：
/* !important>行内样式style>id选择器>类选择器>元素选择器>继承或者* */ div { /* 元素选择器 */ color: red!important; /* 若加上!important则权重最大 */ } .test { /* 类选择器 */ color: pink; } #demo { /* id选择器 */ color: blue; }
案例：
1、
#father {
/* id选择器权重为100 */
color: red;
}
p {
/* p继承过来的权重为0 */
/* p本身元素选择器的权重为1，所以最后显示pink */
color: pink;
}
2、a标签的特殊性
body {
color: red;
}
/* 但是此时a标签的内容还是蓝色 */
/* 这是因为浏览器给a标签默认了一个样式a {color:blue} */
/* 所以要想改变a的样式就需要在单独给a指定样式 */
3、复合选择器权重：
.nav li {
/*类选择器+元素选择器=10+1=11 */
color: green;
}
ul li {
/* 复合选择器权重：ul+li=元素选择器权重1+1=2 */
color: red;
}
li {
/* li权重为1 */
color: pink;
}
4、
.nav {
/* 类选择器权重为10 */
color: blue;
}
li {
/* 但是li继承的权重为0，li本身的权重为1，故最后显示为红色 */
color: red;
}
5、若想把第一个Li改为粉色，怎么办呢
<ul class="nav">
<li>哈哈</li>
<li>你好</li>
<li>嗯呐</li>
</ul>
显然，用li直接定义样式是不可行的，可以在第一个li标签加上class标签，这样组成复合选择器的权重就是20。
.nav .pink {
/* 权重为10+10=20 */
color: pink;
}
二、盒子模型
1、盒子模型
（1）边框border
border-width: 5px; /* 设置边框粗细 */ border-style: dotted; /* 设置边框样式 solid实线 dashed虚线 dotted圆点虚线 */ border-color: black; /* 设置边框颜色 */复合写法：
border: 2px solid red; /* 顺序可以乱 */设置一个上边框2px，虚线，红色，其他为3px.实线绿色的盒子
border: 3px solid green; border-top: 2px dashed red;表格细线边框
table, td, th { border: 2px solid red; border-collapse: collapse; /* 合并相邻的边框 */ }要注意的是，边框会影响盒子的大小。
（2）内边距 padding
要注意的是，padding也会影响盒子的大小。
如果没有指定盒子的width/height，那么设置padding则不会撑开盒子。
案例1，新浪导航栏
代码
.nav { line-height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; background-color: #fcfcfc; } .nav a { text-decoration: none; display: inline-block; /* a为行内元素没有高度，先转换为行内块元素 */ height: 41px; font-size: 12px; padding: 0 20px; /* 设置左右边距 */ color: #4c4c4c; } .nav a:hover { background-color: #eee; color: #ff8500; }
（3）外边距margin
复合方式写法与padding一样。
外边距可以让盒子水平居中，写法如下：但是让块级元素居中的前提是必须指定宽度。
margin: 0 auto; /* 水平居中 */ margin: auto; /* 写法2 */ margin-left: auto; margin-right: auto; /* 写法3 */行内元素或者行内块元素居中可以给父元素设置text-algin:center;
塌陷问题：
如图若想将小的盒子移到大盒子左侧中间，直接给小盒子加上margin-top:100px;会发现大盒子也跟着塌陷，而小盒子依旧在大盒子顶部。有三种解决办法：
border: 1px solid red; /* 方法一给父元素添加边框 */ padding: 1px; /* 方法二添加内边距 */ overflow: hidden; /* 方法三常用，不会增加宽度 */清除内外边距，也是CSS样式的第一句。
* { margin: 0; padding: 0; }但是尽量不要给行内元素设置上下边距，可以将其转换为块元素或者行内块元素在设置。
3、综合案例
（1）产品模块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { /* 先设置内外边距为0清除格式 */ margin: 0; padding: 0; } body { background-color: gray; /* 先设置整体背景样式 */ } a { text-decoration: none; color: black; } .box { width: 260px; height: 400px; margin: 100px auto; /* 设置整个盒子居中 */ background-color: #fff; } .box img { width: 100%; /* 设置图片宽度为盒子的100% */ } .box p { height: 70px; font-size: 14px; padding: 0 28px; /* 因为没有设置width所以用padding不会被撑开 */ margin-top: 30px; /* 不用padding设置上边距是因为本身有高度 */ } .apprise { font-size: 14px; color: #b0b0b0; margin-top: 20px; padding: 0 28px; } .info { font-size: 14px; margin-top: 15px; padding: 0 28px; } .info h4 { display: inline-block; font-weight: 400; /* 设置不加粗 */ } .info span { color: #ff6700; } .info em { font-style: normal; color: red; margin: 0 6px 0 15px; } </style> </head> <body> <div class="box"> <a href="#"><img src="../img/top1.png" alt=""></a> <a href="#"><p>小米手机，用了都说好，无线蓝牙耳机</p></a> <div class="apprise">来自123456的真实评价</div> <div class="info"><a href="#"><h4>小米蓝而二级</h4></a><em>|</em><span>99+</span></div> </div> </body> </html>效果图
案例2：快报模板布局
效果图
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style: none; /* 去掉列表里面的圆点 */ } .total { width: 248px; height: 163px; border: 1px solid #ccc; margin: 100px auto; /* 把盒子放在页面中间 */ } .header { height: 32px; border-bottom: 1px solid #ccc; font-size: 14px; font-weight: 400; /* 不加粗正常显示 */ line-height: 32px; /* 让文字垂直居中，设置行高等于盒子的高度 */ padding-left: 15px; /* 如果设置margin-left则下面的虚线也会右移，所以设置内边距 */ } .total ul li a { text-decoration: none; color: #666; font-size: 12px; } .total ul li a:hover { text-decoration: underline; /* 设置经过时有下划线 */ } .total ul li { height: 23px; line-height: 23px; /* 文字垂直居中行高等于盒子的高度 */ padding-left: 20px; /* 设置左边距也可以用外边距 */ } .total ul { margin-top: 7px; } </style> </head> <body> <div class="total"> <h4 class="header">品优购快报</h4> <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>
4、圆角边框
语法：
border-radius: 10px;
/* 数值越大弧度越明显 */
使用方法：
border-radius: 50%;
/* 表示宽度的一半，形成一个圆形，前提是是一个正方形 */
border-radius: 100px;
/* 圆角矩形，把数值设置为高度的一半 */
border-radius: 10px 20px 30px 40px;
/* 可以设置四个数值，代表左上，右上，右下，左下 */
/* 两个数值代表对角线的弧度 */
border-top-left-radius: 10px;
/* 代表左上角弧度，依次推理 */
5、盒子阴影
语法：
box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
/* rgba代表半透明颜色 */
含义：
鼠标经过盒子时出现阴影：
div:hover {
box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
/* 代表鼠标经过盒子时会出现阴影 */
}
注意：
6、文字阴影
语法：
text-shadow: 1px 1px 1px rgba(0,0,0,.3);含义：
实际开发中文字阴影用的不多，可以了解。
扫一扫
2351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
