前端进阶之路(二)CSS
1. CSS样式规则
- 选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
- 属性和属性值以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
- 属性和属性值之间用英文 “ : ” 连接。
- 多个“键值对”之间用英文 “ ; ” 进行区分。
2. CSS书写规范
- 空格规范:
- 选择器与 { 之间必须包含空格,示例:
div {
- 属性名与之后的 : 之间不允许包含空格,: 与属性值之间必须包含空格 ,示例:
font-size: 12px;
- 选择器与 { 之间必须包含空格,示例:
- 选择器规范:
当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。
示例:
.post,
.page,
.comment {
line-height: 1.5;
}
建议:选择器的嵌套层级应不大于三级,位置靠后的限定条件应尽可能精确。
- 属性规范:
- 属性定义必须另起一行。
- 属性定义后必须以分号结尾。
3. CSS注释
/*需要注释的内容*/
4. CSS字体样式属性
4.1 font-size:字号大小
font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
相对长度单位 | 说明 |
---|---|
em | 相对于当前对象内文本的字体尺寸 |
px | 像素,最常用,推荐使用 |
绝对长度单位 | 说明 |
---|---|
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
4.2 font-family:字体
p {font-family:"微软雅黑";}
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
- 现在网页中普遍使用14px+。
- 尽量使用偶数的数字字号。IE6等老式浏览器支持奇数会有bug。
- 各种字体之间必须使用英文状态下的逗号隔开。
- 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
- 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如
font-family:"Times New Roman";
。- 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
4.3 CSS Unicode字体
在CSS中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8等)不匹配时会产生乱码的错误。xp系统不支持类似微软雅黑的中文。
方案一:可以使用英文代替。比如font-family:"Microsoft Yahei"
。
方案二:在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称,浏览器是可以正确的解析的。font-family:"\5FAE\8F6F\96C5\9ED1"
,表示设置字体为“微软雅黑”。
字体名称 | 英文名称 | Unicode编码 |
---|---|---|
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
宋体 | SimSun | \5B8B\4F53 |
4.4 font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外,可以用CSS来实现,但是CSS是没有语义的。
font-weight 属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100-900(100的整数倍)。
数字 400 等价于 normal ,而 700 等价于 bold 。
4.5 font-style:字体风格
字体倾斜除了用 i 和 em 标签之外,可以使用CSS来实现,但是CSS是没有语义的。
font-style 属性用于设定字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。
4.6 font:综合设置字体样式
font 属性用于对字体样式进行综合设置,其基本语法格式如下:
选择器 {font:font-style font-weight font-size/line-height font-family;}
使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
注意:其中不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用。
例:p {font:14px "微软雅黑";}
5. 选择器
5.1 标签选择器(元素选择器)
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:
标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
或者
元素名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。
5.2 类选择器
类选择器使用“ . ”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:
.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3; }
HTML中用
class="类名"
即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
CSS命名规范:
- 长名称或词组可以使用中横线来为选择器命名。
- 不建议使用“
_
”下划线来命名CSS选择器。
-浏览器兼容问题(比如使用_tips的选择器命名,在IE6是无效的)
-能良好区分JavaScript变量命名(JS变量命名是用“_
”)- 不要纯数字、中文等命名,使用英文字母来表示。
5.3 多类名选择器
- 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
- 各个类名中间用空格隔开。
5.4 id选择器
id选择器使用“ # ”进行标识,后面紧跟id名,其基本语法如下:
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。
5.5 通配符选择器
通配符选择器用“ * ”表示,他是所有选择器中作用范围最广,能匹配页面中所有的元素。其基本语法格式如下:
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
5.6 伪类选择器
伪类选择器用于向某些选择器添加特殊效果。
5.6.1 链接伪类选择器
:link /*未访问的链接*/
:visited /*已访问的链接*/
:hover /*鼠标移动到链接上*/
:active /*选定的链接(鼠标按下未弹起的链接)*/
注意写的时候,他们的顺序不要颠倒,按照 lvha 的顺序。
因为
a
链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
常用写法:
- HTML:
<a href="#">链接</a>
- CSS:
a{
font-size:14px;
color:gray;
font-weight:700;
}
a:hover{
color:red;
}
5.6.2 结构(位置)伪类选择器(CSS3)
:first-child /*选取属于其父元素的首个子元素的指定选择器*/
:last-child /*选取属于其父元素的最后一个子元素的指定选择器*/
:nth-child(n) /*匹配属于其父元素的第N个子元素,不论元素的类型。odd可以选择所有的奇数子元素,even可以选择所有的偶数子元素*/
:nth-last-child(n) /*选择器匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数*/
n 可以是数字、关键词或者公式,如果用公式 n 从 0 开始
- HTML:
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
</ul>
- CSS:
/*偶数项*/
li:nth-child(2n){
color:pink;
}
5.6.3 目标伪类选择器
:target /*目标伪类选择器可用于选取当前活动的目标元素*/
- HTML
<a href="#movie">电影</a>
…
<h3 id="movie">电影</h3>
- CSS
:target{
color:red;
}
5.6.4 focus 伪类选择器
focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 <input>
类表单元素才能获取,因此这个选择器也主要针对表单元素来说。
input:focus {
background-color: yellow;
}
6. 外观属性
6.1 color:文本颜色
color属性用于定义文本的颜色,其取值方式有如下3种:
- 预定义的颜色值,如 red,green,blue等。
- 十六进制,如 #FF0000,#FF6600 , #29D794 等。实际工作中,十六进制是最常用的定义颜色的方式。
- RGB代码,如红色可以表示为 rgb(255,0,0) 或 rgb(100%,0%,0%)。需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为 0% 。
现在常用的黑色:#3c3c3c
6.2 line-height:行间距
line-height 属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height 常用的属性值单位有三种,分别为像素 px,相对值 em 和百分比 %,实际工作中使用最多的是像素px。
一般情况下,行距比字号大7、8像素左右就可以了。
6.3 text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐,相当于HTML中的 align 对齐属性。其可用属性值如下:
- left:左对齐(默认值)
- right:右对齐
- center:居中对齐
6.4 text-indent:首行缩进
text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值。
text-indent:2em;
建议使用em作为设置单位。(1em就是一个字的宽度)
6.5 letter-spacing:字间距
letter-spacing属性用于定义字间距,所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值,允许使用负值,默认为 normal。
6.6 word-spacing:单词间距
word-spacing 属性用于定义英文单词之间的间距,对中文字符无效。和 letter-spacing 一样,其属性值可为不同的数值,允许使用负值,默认为normal。
word-spacing 和 letter-spacing 均可对英文进行设置。不同的是 letter-spacing 定义的为字母之间的间距,而 word-spacing 定义的为英文单词之间的间距。
6.7 颜色半透明(CSS3)
文字颜色到了CSS3可以采取半透明的格式,其语法格式如下:
color:rgba(r,g,b,a)
a是alpha(透明)的意思,取值为 0-1
color:rgba(0,0,0,0.3)
6.8 文字阴影(CSS3)
添加阴影效果语法格式如下:
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
6.9 文本的装饰
text-decoration 通常用于给链接修改装饰效果
值 | 描述 |
---|---|
none | 默认,定义标准的文本(可用于取消链接的下划线) |
underline | 定义文本下的一条线 |
overline | 定义文本上的一条线 |
line-through | 定义穿过文本下的一条线 |
7. 引入CSS样式表(书写位置)
7.1 行内式(内联样式)
是通过标签的 style 属性来设置元素的样式,其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ">内容</标签名>
词法中 style 是标签的属性,实际上任何HTML标签都拥有 style 属性,用来设置行内式。其中属性和值的书写规范和CSS样式规则相同,行内式只对其中所在的标签及嵌套在其中的子标签起作用。
7.2 内部样式表(内嵌式)
内嵌式是将CSS代码集中写在HTML文档中的 head 头部标签中,并且用 style 标签定义,其基本语法格式如下:
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
</style>
</head>
语法中,style 标签一般位于 head 标签之后,也可以把他放在HTML文档的任何地方。
7.3 外部样式表(外链式)
链入式是将所有的样式放在一个或多个以 .css 为拓展名的外部样式表文件中,通过 link 标签将外部样式表文件链接到HTML文件中,其基本语法格式如下:
<head>
<link href="css文件的路径" type="text/css" rel="stylesheet" />
</head>
link 是个单标签
该语法中,link标签需要放在 head 头部标签中,并且必须指定 link 标签的三个属性,具体如下:
- href:定义所链接外部样式表文件的url,可以是相对路径,也可以是绝对路径。
- type:定义所链接文档的类型,在这里需要指定为
"text/css"
,表示链接的外部文件为CSS样式表。- rel:定义当前文档与被链接文档之间的关系,在这里需要指定为
"stylesheet"
,表示被链接的文档是一个样式表文件。
8. 标签显示模式
8.1 块级元素
每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
常见的块元素有
<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>
等,其中<div>
是典型的块元素。
块级元素的特点:
- 总是从新行开始
- 高度、行高、外边距以及内边距都可以控制。
- 宽度默认是容器的100%。
- 可以容纳内联元素和其他块元素。
8.2 行内元素
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
等,其中<span>
标签是最典型的行内元素。
行内元素的特点:
- 和相邻行内元素在一行上。
- 高、宽无效,但水平方向的 padding 和 margin 可以设置,垂直方向的无效。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或者其他行内元素。(a 特殊)
注意:
- 只有文字才能组成段落,因此
<p>
里面不能放块级元素,同理还有这些标签<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<dt>
,他们都是文字类块级标签,里面不能放其他块级元素。- 链接里面不能再放链接。
8.3 行内块元素
在行内元素中有几个特殊的标签<img />、<input />、<td>
,可以对它们设置宽、高和对齐属性,有些资料可能会称它们为行内块元素。
行内块元素的特点:
- 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
- 默认宽度就是它本身内容的宽度。
- 高度、行高、外边距以及内边距都可以控制。
8.4 标签现实模式转换
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块:display:inline-block;
9. CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精确的目标元素标签。
9.1 交集选择器
交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为 class选择器,两个选择器之间不能有空格,如 h3.special
。
9.2 并集选择器
并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器、id选择器等)都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。
9.3 后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
9.4 子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。
9.5 属性选择器
选取标签带有某些特殊属性的选择器
示例 | 含义 |
---|---|
input[type] | 存在type属性即可 |
input[type=text] | 属性值完全等于text |
input[type*=text] | 属性值里包含text字符并且在任意位置 |
input[type^=text] | 属性值里包含text字符并且在开始位置 |
input[type$=text] | 属性值里包含text字符并且在结束位置 |
9.6 伪元素选择器(CSS3)
示例 | 含义 |
---|---|
p::first-letter | 文本的第一个单词或字 |
p::first-line | 文本第一行 |
p::selection | 可改变选中文本的样式 |
E::before
、E::after
,在E元素内部的开始位置或结束位置创建一个元素,该元素为行内元素,且必须要结合 content 属性使用。
div::before {
content:"开始";
}
div::after {
content:"结束";
}
10. CSS背景
10.1 背景颜色、背景图片及背景图片平铺
/* 背景颜色 */
background-color: #666;
/* 背景图片 */
background-image: url(img/a1.jpg);
/* 背景图片不平铺 */
background-repeat: no-repeat;
/* 背景图片水平平铺 */
background-repeat: repeat-x;
/* 背景图片垂直平铺 */
background-repeat: repeat-y;
10.2 背景图片位置
方位名词 例:
/* 默认位置 */
background-position: left top;
background-position: right top;
background-position: right bottom;
background-position: center center;
background-position: center;
注意:
- 两个方位名词没有顺序
- 如果两个方位名词只写一个,那么另一个默认为 center
精确单位 例:
background-position: 10px 30px;
注意:
- 第一个值一定是 x 坐标,第二个值一定是 y 坐标
搭配使用 例:
background-position: 10px center;
注意:
- 第一个是 x 轴方向,第二个是 y 轴方向
10.3 背景附着
设置或检索背景图像是随对象内容滚动还是固定的。
background-attachment: scroll;(默认,滚动的)
background-attachment: fixed;(固定的)
10.4 背景简写
background 属性的值的书写顺序官方并没有强制标准。为了可读性,建议以如下方式如下书写:
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
10.5 背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是 alpha 透明度,取值范围 0-1 之间。
同样,可以给文字和边框透明,都是 rgba 的格式来写。
10.6 背景缩放(CSS3)
通过 background-size 设置背景图片的尺寸,就像我们设置 img 的尺寸一样,在移动web开发中做屏幕适配应用非常广泛。
其参数设置如下:
- 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)。
- 设置为 cover 时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会自动被隐蔽。
- 设置为 contain 会自动调整缩放比例,保证图片始终完整显示在背景区域。
/* 顺序为:宽度 高度 */
background-size: 100px 200px;
/* 设置宽度,高度等比例缩放 */
background-size: 100px;
/* 百分比相对于包含元素的尺寸 */
background-size: 50%;
background-size: cover;
background-size: contain;
10.7 多背景(CSS3)
以逗号分隔可以设置多背景,可用于自适应布局,书写方式:以逗号隔开。
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住,背景色通常都定义在最后一组上。
background: url(img/a1.jpg) no-repeat left top,
url(img/a2.jpg) no-repeat right bottom #000;
11. CSS三大特性
11.1 CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。
11.2 CSS继承性
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。
注意:
- 恰当的使用继承可以简化代码,降低CSS样式的复杂性。但是,如果在网页中所有的元素都大量继承样式,那么判断样式的来源就会很困难,所以对于字体、文本属性等网页中通用的样式可以使用继承。例如:字体、字号、颜色、行距等可以在body元素中统一设置,然后通过继承影响文档中所有文本。
- 并不是所有的CSS属性都可以继承,例如:边框、外边距、内边距、背景、定位、元素高度属性等。
11.3 CSS优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
- 继承样式的权重为0,即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
- 行内样式优先。应用 style 属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
- 权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
- CSS定义了一个
!important
命令,被命令赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important
都具有最大优先级。
11.3.1 CSS特殊性(Specificity)
关于CSS权重,我们需要一套计算公式去计算,这个就是 CSS Specificity,我们称为CSS特殊性或非凡性,它是一个衡量CSS值优先级的一个标准,具体规范如下:
specificity 用一个四位的数字串(CSS2是三位)来表示,更像四个级别,值从左到右,左边的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
继承或者 * 的贡献值 | 0,0,0,0 |
---|---|
每个元素(标签)选择器的贡献值 | 0,0,0,1 |
每个类、伪类选择器的贡献值 | 0,0,1,0 |
每个id选择器的贡献值 | 0,1,0,0 |
每个行内样式的贡献值 | 1,0,0,0 |
每个 !important 的贡献值 | 无穷大 |
权重是可以叠加的,例如:
<nav>
<ul>
<li>典韦</li>
<li>刘邦</li>
<li>亚瑟</li>
</ul>
</nav>
/* 0,0,0,1 */
li {
color: red;
}
/* 0,0,0,2 */
ul li {
color: blue;
}
/* 0,0,0,3 */
nav ul li {
color: yellow;
}
12. 盒模型
12.1 盒子边框
语法:
border: border-width border-style border-color;
border-style 边框样式,常用属性值如下:
none | 没有边框,即忽略所有边框的宽度(默认值) |
---|---|
solid | 边框为单实线(最常用的) |
dashed | 边框为虚线 |
dotted | 边框为点线 |
double | 边框为双实线 |
12.1.1 表格的细线边框
table {
/* 表示边框合并在一起 */
border-collapse: collapse;
}
12.1.2 圆角边框(CSS3)
语法:
border-radius: 左上角 右上角 右下角 左下角;
/* 作用于四个角 */
border-radius: 50%;
/* 作用于四个角 */
border-radius: 100px;
/* 左上角和右下角是10px,右上角和左下角是40px(对角线) */
border-radius: 10px 40px;
/* 左上角10px,右上角、左下角40px,右下角80px */
border-radius: 10px 40px 80px;
/* 分开写 */
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
12.1.3 盒子内边距
/* 上下左右都是20 */
padding: 20px;
/* 上下10,左右30 */
padding: 10px 30px;
/* 上面10,左右30,下面50 */
padding: 10px 30px 50px;
/* 上面10,右面20,下面30,左面40 */
padding: 10px 20px 30px 40px;
padding 影响了盒子的实际大小。
如果盒子本身没有指定 width/height 属性,则此时 padding 不会撑开盒子大小。
12.1.4 盒子外边距
/* 上下左右都是20 */
margin: 20px;
/* 上下10,左右30 */
margin: 10px 30px;
/* 上面10,左右30,下面50 */
margin: 10px 30px 50px;
/* 上面10,右面20,下面30,左面40 */
margin: 10px 20px 30px 40px;
让盒子(块级元素)实现水平居中:
- 必须是块级元素
- 盒子必须指定了宽度
width: 960px;
margin: 30px auto;
让行内元素或者行内块元素水平居中:
给其父元素添加 text-align: center;
12.1.5 清除内外边距
*{
padding: 0;
margin: 0;
}
注意:行内元素只有左右外边距,没有上下外边距。
尽量不要给行内元素指定内外的上下边距。
12.1.6 外边距合并
使用 margin 定义块元素的垂直边距时,可能会出现外边距的合并。
1. 相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距 margin-bottom
,下面的元素有上外边距 margin-top
,则他们之间的垂直间距不是 margin-bottom
与 margin-top
之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
2.嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。
解决方案:
- 可以为父元素定义1像素的上边框或上内边距。例:
border: 1px solid transparent;
或者:padding: 1px;
- 可以为父元素添加
overflow:hidden
。
12.2 CSS3 盒模型
box-sizing:content-box;
盒子大小为:width + padding + border,此值为默认值。box-sizing:border-box;
盒子大小为 width,也就是说 padding 和 border 是包含到 width 里面的。
12.3 盒子阴影
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 说明 |
---|---|
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |
默认为外阴影,但是不能写
outset
盒子阴影不占用空间,不会影响其他盒子排列。
12.4 文字阴影
语法:
text-shadow: h-shadow v-shadow blur color;
值 | 说明 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值 |
v-shadow | 必需。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
13. 浮动
CSS的定位机制有3种:普通流(标准流、文档流)、浮动和定位。
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
浮动脱离标准流,不占位置,会影响标准流。浮动只有左右浮动。
- 浮动首先创建包含块的概念(包裹)。就是说,浮动的元素总是找离它最近的父级元素对齐,但是不会超出内边距的范围。
- 浮动的元素排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。
- 一个父盒子里面的子盒子,如果其中一个子级有浮动,则其他子级都需要浮动。这样才能一行对齐显示。
- 元素添加浮动后,元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。
在CSS中,通过 float
属性来定义浮动,其基本语法如下:
选择器 {float:属性值;}
属性值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动(默认值) |
13.1 清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
其实本质叫做闭合浮动更好一些,记住,清除浮动就是把浮动的盒子圈到里面,让父盒子闭合出口和入口不让他们出来影响其他元素。
在 CSS 中,clear 属性用于清除浮动,其基本语法格式如下:
选择器{clear:属性值;}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响) |
13.1.1 额外标签法
W3C 推荐的做法是通过在浮动元素末尾添加一个空的标签,例如 <div style="clear:both"></div>
,或其他标签 br
等亦可。
13.1.2 父级添加 overflow 属性方法
可以通过触发 BFC 的方式,可以实现清除浮动效果。
可以给父级添加:overflow
为 hidden|auto|scroll
都可以实现。
13.1.3 使用 after 伪元素清除浮动
:after
方式为空元素的升级版,好处是不用单独添加标签了。
使用方法:
<!-- html -->
<div class="box1 clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"></div>
/* CSS */
.clearfix:after {
content: ".";
/* 内容为小点,尽量加,不要空,防止旧版本浏览器有空隙 */
display: block;
/* 转换为块级元素 */
height: 0;
visibility: hidden;
/* 隐藏盒子 */
clear: both;
/* 清除浮动 */
}
/* IE6、7浏览器的处理方式 */
.clearfix{
*zoom: 1;
/* *代表IE6、7能识别的特殊符号,带有这个*的属性只有IE6、7才执行
zoom就是IE6、7清除浮动的方法 */
}
13.1.4 使用 before 和 after 双伪元素清除浮动
<!-- html -->
<div class="box1 clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"></div>
/* CSS */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* IE6、7浏览器的处理方式 */
.clearfix {
*zoom: 1;
/* *代表IE6、7能识别的特殊符号,带有这个*的属性只有IE6、7才执行
zoom就是IE6、7清除浮动的方法 */
}
14. 定位
定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
---|---|---|---|
静态 static | 不脱标,正常模式 | 不可以 | 正常模式 |
相对定位 relative | 不脱标,占有位置 | 可以 | 相对自身位置移动 |
绝对定位 absolute | 完全脱标,不占有位置 | 可以 | 相对于定位父级移动位置 |
固定定位 fixed | 完全脱标,不占有位置 | 可以 | 相对于浏览器移动位置 |
14.1 元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
14.1.1 边偏移
边偏移属性 | 描述 |
---|---|
top | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
14.1.2 定位模式
在 CSS 中,position 属性用于定义元素的定位模式,其基本语法格式如下:
选择器{position:属性值;}
position属性的常用值:
值 | 描述 |
---|---|
static | 自动定位(默认值) |
relative | 相对定位,相对于其原文档流的位置进行定位 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位 |
子绝父相
14.2 静态定位(static)
静态定位是所有元素的默认定位方式,当 position 属性的取值为 static 时,可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。(就是网页中所有元素都默认的是静态定位)。
在静态定位状态下,无法通过边偏移属性(top、bottom、left或right)来改变元素的位置。
14.3 相对定位(relative)
对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留。
14.4 绝对定位(absolute)
对元素设置绝对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置不保留。(绝对定位完全脱标,不占有位置)。
- 父级没有定位
若所有父元素都没有定位,以浏览器为准对齐(document文档)。 - 父级有定位
父亲有定位,则以父亲为基准点对齐
子绝父相
14.4.1 绝对定位的盒子水平 / 垂直居中
普通的盒子是左右 margin 改为 auto 就可以了,但是对于绝对定位就无效了。
绝对定位的盒子水平 / 垂直居中的方法(以水平居中为例):
- 首先 left 设为父盒子一半的大小。例如:
left:50%;
- 然后设置外边距为自己宽度的负的一半。例如:
margin-left:-20px;
14.5 固定定位(fixed)
当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。
固定定位的元素跟父亲没有任何关系,只认浏览器。
固定定位的盒子一定要写宽和高,除非有内容撑开不用写。
14.6 叠放次序(z-index)
当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。
在 CSS 中,要想调整重叠定位元素的堆叠顺序,可以对定位元素应用 z-index 层叠等级属性,其取值可为正整数、负整数和0。
- z-index 的默认属性值是0,取值越大,定位元素在层叠元素中越居上。
- 如果取值相同,则根据书写顺序,后来居上。
- 后面数字一定不能加单位。
- 只有相对定位、绝对定位、固定定位有此属性,其余标准流、浮动、静态定位都无此属性,亦不可指定此属性。
14.7 定位模式转换
跟浮动一样,元素添加了绝对定位和固定定位后,元素模式也会发生转换,都转换为行内块模式。
因此比如行内元素如果添加了绝对定位或者固定定位后,可以不用转换模式,直接给高度和宽度就可以了。