文章目录
一、CSS选择器（接上篇的基础选择器和复合选择器）
1、属性选择器
1、E[att]：选择具有att属性的元素
2、E[att="val"]：选择具有att属性,并且att属性值等于val的元素
3、E[att~="val"]：选择具有att属性,并且att属性值是用空格隔开的单词,其中一个单词等于val
4、E[att^="val"]：选择具有att属性,并且att属性值是以val开头的字符串
5、E[att$="val"]：选择具有att属性,并且att属性值是以val结尾的字符串
6、E[att*="val"]：选择具有att属性,并且att属性值中包含val的字符串
7、E[att|="val"]：选择具有att属性,并且att属性值是以val开头、以'-'分隔的字符串
2、结构化的伪类选择器(伪类选择器带冒号）
1、html:root：根元素选择器。html文档中的根只有一个。样式应用于页面的每个元素
html:root{
样式属性：值;
}
2、E:not(选择器)：不包含给定选择器的元素
3、E:only-child ：匹配父元素仅有一个子元素E
4、E:first-child ：匹配父元素的第一个子元素E
5、E:last-child : 匹配父元素的最后一个子元素E
6、E:nth-child(n)：匹配父元素中第(n)个子元素E
7、E:nth-last-child(n)：匹配父元素中倒数第(n)个子元素E
8、E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E。
9、E:empty ：匹配没有任何子元素的元素E
10、E:checked : 匹配用户界面上处于选中状态的元素E
11、E:enabled ：匹配用户界面上处于可用状态的元素E。
12、E:disabled ：匹配用户界面上处于禁用状态的元素E。
3、伪对象选择器
1、E:before(CSS2)
E::before(CSS3)
设置在对象前（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用
2、E:after(CSS2)
E::after(CSS3)
设置在对象后（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用
4、超链接的伪类选择器
1、E:link ：设置超链接a在未被访问前的样式。
2、E:visited ：设置超链接a在被访问后的样式
3、E:hover ： 设置元素在其鼠标悬停时的样式
4、E:active ： 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
二、盒子模型
1、盒子模型的属性
1、border：边框线
2、padding：内填充(内补白)
3、margin：边界
4、background-color：背景颜色
5、background-image：背景图像
6、background-repeat：背景的平铺属性
7、background-position：背景图像的位置(图像左上角的坐标)。取值可以是数值、预设值、百分比
综合设置背景图像：
background:背景色 url("图像") 平铺 定位 固定;
8、盒子的宽度和高度的计算
(1)实际宽度= width + 左右内边距(padding)之和 + 左右边框线(border)之和 + 左右外边距(margin)之和
(2)实际高度= height + 上下内边距(padding)之和 + 上下边框线(border)之和 + 上下外边距(margin)之和
9、CSS3增加的新属性：
(1)rgba(r,g,b,alpha);设置颜色及透明度的函数,参数r、g、b表示三个颜色分量，每个颜色的取值在0~255之间
参数alpha表示透明度,它的取值在0.0~1.0之间
(2)opacity：设置背景和图片的透明度。取值在0~1之间
(3)border-radius：圆角边框
(4)box-shadow：阴影效果
box-shadow: 5px 5px 10px 2px #999 inset;
<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
<color>： 设置对象的阴影的颜色。
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
(5)渐变效果(background-image)
a、线性渐变：linear-gradient()
background:linear-gradient(方向,颜色1,颜色2 [stop],颜色3...);
渐变方向：
to left： 从右向左
to right: 从左向右
to top：从下到上
to bottom：从上到下
渐变方向(通过角度表示)：角度单位为deg
0deg <==> to top：从下到上
90deg <==>to right: 从左向右
180deg <==> to bottom：从上到下(默认值)
270deg <==> to left： 从右向左
例如：
background: linear-gradient(to right,blue,green 20%,yellow 50%,purple 80%,red);
/*
渐变方向：从左到右
起始颜色：blue
green 20%：当过渡到20%时，颜色是绿色
yellow 50%：当过渡到50%时，颜色是黄色
purple 80%：当过渡到80%时，颜色是紫色
*/
b、径向渐变：radial-gradient()
background:radial-gradient(圆心位置,渐变形状,渐变的大小,渐变的颜色及颜色位置)
c、重复的线性渐变：repeating-linear-gradient()
/*
渐变方向：默认值(180deg,即从上到下)
#f00 0,#f00 10%：表示0~10%为#f00
#ff0 10%, #ff0 20%：表示10%~20%为#ff0
*/
background: repeating-linear-gradient(45deg,#f00 0,#f00 10%,#ff0 10%, #ff0 20%);
d、重复的径向渐变：repeating-radial-gradient()
(6)图像属性：
a、background-size：图像的大小.取值(普通数值、百分比、预定义的关键字--auto、cover、contain)
b、background-origin：背景图像在容器中的相对位置(显示区域)
border-box：相对于边框进行定位(背景图像会延伸到边框线的下面)
padding-box：相对于内边距的区域来定位(默认。背景图像延伸到padding区域)
content-box：相对于内容框来进行定位(有内容的地方就有背景)
c、background-clip：设置背景图像的裁剪区域
border-box：默认值，从边框区域向外裁剪背景。
padding-box：从内边距区域向外裁剪背景。
content-box：从内容区域向外裁剪背景。
案例1：
<style>
.nav {
height: 37px;
background-color: #fcfcfc;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
color: #4c4c4c;
}
.nav a {
/* a 是行内元素 应先转换为行内块元素再设置高度 */
display: inline-block;
height: 41px;
line-height: 37px;
padding: 0 20px;
font-size: 12px;
text-decoration: none;
color: #4c4c4c;
}
.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>
案例2：
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 248px;
height: 163px;
border: 1px solid #ccc;
margin: 100px auto;
}
li {
list-style: none;
}
.box h3 {
height: 32px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
padding-left: 15px;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}
.box ul li a:hover {
text-decoration: underline;
}
.box ul li {
height: 23px;
line-height: 23px;
padding-left: 20px;
}
.box ul {
padding-top: 7px;
}
</style>
</head>
<body>
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">【特惠】爆款耳机5折秒！</a> </li>
<li><a href="#">【特惠】母亲节，健康好礼低至5折！</a> </li>
<li><a href="#">【特惠】爆款耳机5折秒！</a> </li>
<li><a href="#">【特惠】9.9元洗100张照片！</a> </li>
<li><a href="#">【特惠】长虹智能空调立省1000</a> </li>
</ul>
</div>
</body>
2、外边距合并
①相邻块元素垂直外边距合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是取两个值中的较大者
这种现象被称为相邻块元素垂直外边距的合并。
解决方案：尽量只给一个盒子添加margin值
②嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow：hidden
注意： 浮动的盒子加外边距不会引起塌陷问题
3、清除内外边距
网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一样，因此我们在布局前，首先要清除网页的内外边距
- {
margin ：0；
padding ：0；
}
注意： 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级元素和行内块元素就可以了。
案例3：
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
a {
text-decoration: none;
color: black;
}
.box {
width: 298px;
height: 415px;
background-color: #fff;
/* 让块级盒子水平居中对齐 */
margin: 0 auto;
}
.box img {
/* 图片宽度和父亲一样宽 */
width: 100%;
}
.box p {
height: 70px;
font-size: 14px;
/* 应为这个段落没有width属性，所以使用padding不会撑大盒子的宽度 */
padding: 0 28px;
margin-top: 30px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.info {
margin-top: 20px;
padding: 0 28px;
}
.info h4 {
display: inline-block;
font-weight: 400;
font-size: 14px;
text-decoration: none;
color: black;
}
.info em {
font-style: normal;
color: #ebece0;
margin: 0 6px 0 15px;
}
.info span {
color: #ff6700;
}
</style>
</head>
<body>
<div class="box">
<img src="images/img.jpg" alt="">
<p class="review">快递牛，整体不错蓝牙可以说秒连接。红米给力</p>
<div class="appraise">来自于 177384232 的评价</div>
<div class="info">
<h4>
<a href="#">Redmi Airdot真无线蓝...</a>
</h4>
<em>|</em>
<span> 99.9元</span>
</div>
</div>
</body>
三、HTML中元素类型的转换
1、标签的等级
①块元素
常见的块元素有 h1~h6、p、div、ul、ol、li 等，其中div标签是最典型的块元素。
块级元素的特点：
- 比较霸道，自己独占一行
- 高度、宽度。外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
注意：
- 文字类的元素内不能使用块级元素
- p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div
- 同理，h1~h6等都是文字类块级标签，里面也不能放其他块级元素
②行内元素
常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等。其中span是最典型的行内元素。有的地方也将行内元素成为内联元素。
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
- 链接里面不能再放链接
- 特殊情况链接a里面可以放块级元素，但是给a转换成块级模式最安全
③行内块元素
img、input、td同时具有块级元素和行内元素的特点，称为行内块元素
特点：
一行可多个，默认宽度是它本身内容的宽度（行内元素特点）；行高，高度，外边距以及内边距都可控制（块级元素特点）。
2、元素类型的转换
- 转换为块元素：display ：block ；
- 转换为行内元素：display ：inline ；
- 转换为行内块：display ：inline-block ；
案例4：
<style>
a {
width: 320px;
height: 35px;
background-color: plum;
/* 将行内元素转换为块级元素 */
display: block;
}
div {
width: 200px;
height: 200px;
background-color: purple;
/* 将块级元素转换为行内元素 */
display: inline;
}
span {
width: 200px;
height: 200px;
background-color: skyblue;
/* 将行内元素转换为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<!-- <a> 是一个行内元素 -->
<a href="#">这是一个链接</a>
<a href="#">这是一个链接</a>
<!-- <div>是一个块级元素 -->
<div>我是一个块级元素</div>
<div>我是一个块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body>
四、CSS属性书写顺序
建议遵循以下顺序：
- 布局定位属性：
display/position/float/clear/visibility/overflow
(建议display第一个写，毕竟关系到模式） - 自身属性:`width/height/margin/padding/border/background
- 文本属性:
color/font/text-decoration/text-align/vertical-align/white-space/break-word - 其他属性（CSS3）:
contentr/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient
五、页面布局整体思路
为了提高网页制作的效率，布局通常有以下整体思路：
- 必须确定页面的版心(可视区)，我们测量可得知
- 分析页面中的行模块，以及每个行模块中的列模块(页面布局第一准则)
- 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置(页面布局第二准则)
- 制作HTML结构，遵循先结构后样式的原则
- 先理清楚布局结构，再写代码尤为重要
本节主要讲了CSS盒子模型的属性、添加外边距后需要注意引起的塌陷问题以及元素显示模式转换知识点，塌陷问题在浮动的盒子中不会出现，因此下节将梳理浮动的相关知识。
扫一扫
2971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
