基础与盒模型
css 书写位置
内嵌式
在 head
标签对中,添加 style
标签对,然后在里面书写 css
样式
外链式
单独创建 css
文件,在head
标签中,通过 link
引入
<link rel="stylesheet" href="index.css" />
导入式
- 导入式是最不常见的样式表导入方法
- 使用导入式引入的样式表,不会等待
CSS
文件加载完毕,而是会立即渲染HTML
结构 - 必须写在
style
标签的最开始
<style>
@import url(style.css);
</style>
行内式
<div style="color:red"></div>
CSS 选择器
通配符选择器
通配符选择器使用“*”来定义,表示选区页面中所有的标签
标签选择器
标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅
a {
/* 去掉超级链接的下划线 */
text-decoration: none;
}
ID 选择器
id
的名称只能由字母、数字、下划线、短横构成,且不能以数字开头,字母区分大小写,但习惯上一般为小写字母同一个页面上不能有相同
id
的标签(js)使用井号
#
前缀,选择指定id
的标签
class 选择器
类名的命名规范和
id
的命名规范相同使用点
.
前缀选择指定class
的标签多个标签可以为相同类名
同一个标签可以同时属于多个类,类名用空格隔开
复合选择器
选择器名称 | 示例 | 示例的意义 |
---|---|---|
后代选择器 | .box .spec | 选择类名为 box 的标签内部的类名为 spec 的标签 |
交集选择器 | li.spec | 选择既是 li 标签,也属于 spec 类的标签 |
并集选择器 | ul,ol | 选择所有 ul 和 ol 标签 |
伪类选择器
伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,典型的a
标签拥有 4 个特殊状态:
伪类 | 意义 |
---|---|
a:link | 没有被访问的超级链接 |
a:visited | 已经被访问过的超级链接 |
a:hover | 正被鼠标悬停的超级链接 |
a:active | 正被激活的超级链接 (按下按键但是还没有松开按键) |
a
标签的伪类书写,要按照“爱恨 准则"的顺序,否则会有伪类不生效: LOVE HATE
其他常用伪类选择器:
举例 | 意义 |
---|---|
:first-child | 第 1 个子元素 |
:last-child | 最后 1 个子元素 |
:nth-child(3) | 第 3 个子元素 |
:nth-of-type(3) | 第 3 个某类型子元素 |
:nth-last-child(3) | 倒数第 3 个子元素 |
:nth-last-of-type(3) | 倒数第 3 个某类型子元素 |
注意
这种写法是错误的:
/* ❌ */
.box1:first-child {
color: red;
}
first-child
只是一个修饰词语,还需要在前面指定具体是那种标签或元素
/* √ 表示选中.box1下第一个p */
.box1 p:first-child {
color: red;
}
:nth-child(even)
表示选中所有序号为偶数的子元素,:nth-child(odd)
表示选中所有序号为奇数的子元素 除此之外还可以这样写:nth-child(an+b)
,表示从 b 开始每 a 个选一个
其他伪类见:css 伪类
元素关系选择器
名称 | 举例 | 意义 |
---|---|---|
子选择器 | div>p | div 的子标签 p |
相邻兄弟选择器 | img+p | 图片后面紧跟着的段落将被选中 |
通用兄弟选择器 | p~span | p 元素之后的所有同层级 span 元素 |
属性选择器
举例 | 意义 |
---|---|
img[alt] | 选择有 alt 属性的 img 标签 |
img[alt='故宫'] | 选择 alt 属性是故宫的 img 标签 |
img[alt^='北京'] | 选择 alt 属性以北京开头的 img 标签 |
img[alt$='夜景'] | 选择 alt 属性以夜景结尾的 img 标签 |
img[alt*='美'] | 选择有 alt 属性中含有美字的 img 标签 |
img[alt~='手机拍摄'] | 选择有 alt 属性中有空格隔开的手机拍摄字样的 img 标签 |
img[alt|='参赛作品'] | 选择有 alt 属性以"参赛作用-”开头的 img 标签 |
伪元素选择器
CSS3
新增了“伪元素”特性,顾名思义,表示虚拟动态创建的元素
伪元素用双冒号表示
::before,::after
::before
创建一个伪元素,其将成为匹配选中的元素的第一个子元素,必须设置content
属性表示其中的内容
div::before {
content: '★';
}
::after
创建一个伪元素,其将成为匹配选中的元素的最后一个子元素,必须设置content
属性表示其中的内容
::selection
::selection
css
伪元素应用于文档中被用户高亮的部分(使用鼠标圈选的部分)
<style>
#box1::selection {
background-color: green;
}
</style>
<body>
<div id="box1">====>用鼠标选择我看看,我的背景颜色是绿色吗?<====</div>
</body>
::first-letter,::first-line
::first-letter
会选中某元素中(必须是块级元素)第一行的第一个字母::first-line
会选中某元素中(必须是块级元素)第一行全部文字
<style>
#box2::first-letter {
font-size: 30px;
}
</style>
<body>
<div id="box2">没错,这是一句话</div>
</body>
层叠性和优先级
推荐阅读
层叠性
CSS 处理冲突的一种能力,称之为层叠性
在多个选择器选择同一个标签,然后又设置了相同的属性,才会发生层叠
当发生层叠时,哪个选择器设置的属性起作用,是由优先级来确定
优先级
浏览器通过优先级来判断哪些属性值与一个元素最为相关,从而在该元素上应用这些属性值
优先级就是分配给指定的 CSS 声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,在 CSS 中靠后的那个声明将会被应用到元素上
权重的理解
每一个 css 的选择器都有一个相对的重要程度值,也就是权重的值,简称“权值”
css 通过 css 选择器的权重占比,来计算 css 选择规则的总权值,从而确定 CSS 声明的优先级次序
- css 选择规则的权值不同时,权值高的优先
- css 选择规则的权值相同时,后定义的规则优先
- css 属性后面加 !important 时,无条件绝对优先
权值的计算
权值等级划分, 一般来说是划分 4 个等级:
第一等级:代表 内联样式,如 style="",权值为 1,0,0,0;
第二等级:代表 ID 选择器,如 #id="", 权值为 0,1,0,0;
第三等级:代表 calss | 伪类 | 属性选择器,如 .class | :hover,:link,:target | [type], 权值 0,0,1,0;
第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;
此外,通用选择器(*),元素关系选择器不在 4 等级之内,所以它们的权值都为 0,0,0,0。另外继承的样式没有权值
特殊的: :not()伪类不参与优先级计算,但:not() 里边的 “选择器” 是参与优先级计算,eg:选择器 div.outer p 和选择器 div:not(.outer) p 的优先级是相同的,:not 被忽略掉了,:not(.outer)中的.outer 按照规则处理
权值计算 公式:权值 = 第一等级选择器 x 个数,第二等级选择器 x 个数,第三等级选择器 x 个数,第四等级选择器 x 个数
比较规则:
- 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较,前一等级相等才往后比。
- 无论是行间、内部和外部样式,都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式;ID>class>元素。之所以有这样的错觉,是因为确实行间为第一等的权重,所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后,所以覆盖掉了之前的。
- 在权重相同的情况下,后面的样式会覆盖掉前面的样式。
- 通用选择器(*),元素关系选择器,虽然权值为 0,0,0,0,但是也比继承的样式优先,0 权值比无权值优先。
继承性
继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代
并不是所有的属性都可以被继承,
在继承的情况下,选择器权重计算失效,而是就近原则:
<style>
/* 远 */
#box1 #box2 {
color: red;
}
/* 近,所以文字是蓝色的 */
.box1 .box3 {
color: blue;
}
</style>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>我是文字</p>
</div>
</div>
</div>
</body>
和上面的代码同样的结构,文字的颜色依然是蓝色:
<style>
/* 继承 */
#box1 #box2 #box3 {
color: red;
}
/* 选中 */
p {
color: blue;
}
</style>
- 常见的可继承和不可继承的属性
不可继承:
分类 | 属性 |
---|---|
display | - |
文本系列属性 | vertical-align,text-decoration,text-shadow,white-space |
盒模型属性 | width,height,margin,padding,border |
背景属性 | - |
定位属性 | float,clear,position,top,right,bottom,left,min-width,min-height,max-width,max-height,overflow,clip,z-index |
可继承:
分类 | 属性 |
---|---|
字体系列属性 | font-family,font-weight,font-size,font-style |
文本系列属性 | Text-indent,text-align,line-height,word-spacing,letter-spacing,text-transform,color |
元素可见性 | visibility |
光标属性 | cursor |
盒模型
hight 和 width
行内元素的宽度就是它内容的宽度
当块级元素(div,h,li)没有设置
width
属性的时候,默认为父元素的宽度块级元素的
height
属性如果不设置,他将自动被内容撑开,如果没有内容,则 height 默认为 0
min 和 max
CSS 属性 max-height
设置元素的最大高度。它防止height
属性的应用值大于 max-height
的指定值
CSS 属性 min-height
能够设置元素的最小高度。这样能够防止 height
属性的应用值小于 min-height
的值
padding
内边距:盒子边框内壁到文字的距离
写法
- 四数值写法:上 右 下 左
- 三数值写法:上 左右 下
- 二数值写法:上下 左右
注:margin 写法和 padding 一样
margin
外边距:盒子与盒子之前的距离
margin 的塌陷
注意
水平方向没有 margin
塌陷
在垂直方向如果有两个元素的外边距有相遇,在浏览器中加载的真正的外边距不是两个间距的加和,而是两个边距中值比较大的,边距小的塌陷到了边距值大的值内部
两种情况
- 同级元素塌陷:上面的元素有下边距,下面的元素有上边距,两个边距相遇,取
margin
取最大值 - 父子元素塌陷:父子元素之间也会出现
margin
塌陷:
(1)父元素和子元素都设置了同方向的 margin-top
值,两个属性之间没有其他内容进行隔离,导致两个属性相遇,发生 margin
塌陷 (2)本身父元素与上一个元素的距离是 0,子元素如果设置了垂直方向的上边距,会带着父级元素一起掉下来(父元素的上边距 0 塌陷到了子元素的上边距 50 里面)
解决方法
(1)同级元素:如果两个元素垂直方向有间距,只需要设置给一个元素,不要进行拆分 (2)父子元素:让两个边距不要相遇,中间可以使用父元素 border
或 padding
将边距分隔开;更加常用的方法,父子盒模型之间的距离就不要用子元素的 margin
去设置,而是用父元素的 padding
挤出来。给父级元素添加overflow:hidden
(BFC),也可以解决这个问题
默认 margin
一些元素(body,ul,p)有默认的 margin,开始要清除
* {
margin: 0;
padding: 0;
}
盒子的水平居中
margin:0 auto 在不同场景下生效条件
块级元素:给定要居中的块级元素的宽度。
行内元素:① 设置 display:block;② 给定要居中的行内元素的宽度。(行内元素设置成块级元素后可以对其宽高进行设置)
行内块元素:设置 display:block。(如 input、button、img 等元素,自带宽度可以不用设置其宽度)
.box {
margin: 0 auto;
}
盒模型种类和 box-sizing 属性
content-box
W3C
标准的盒子模型(标准盒模型)
border-box
IE
标准的盒子模型(怪异盒模型)
区别
- content-box
width
= content
(内容的宽度)
标准盒模型下盒子的大小 = content
+ border
+ padding
- border-box
width
= content
(内容的宽度)+ padding
+ border
怪异盒模型下盒子的大小=width
总结
标准盒模型在定义
width
宽度后,后面写padding
和border
是会改变盒子实际大小。如果需要保持固定大小,需要进行计算怪异盒模型在定义
width
宽度后,不管怎么写padding
和border
宽度都固定在书写时的width
。但是有可能导致内容被压缩,导致布局异常
box-sizing 属性
将盒子添加了 box-sizing:border-box
之后,盒子的 width
,height
就表示盒子实际占有的宽高,即 padding
,border
变为“内缩”,不在“外扩”
行内元素与块级元素
区别
行内元素
- 可以和其他元素处于一行,不用必须另起一行。
- 元素的高度、宽度及顶部和底部边距不可设置。可以设置
padding-left
,padding-right
,margin-left
,margin-right
(水平方向有效,竖直方向无效),可以设置行高line-height
- 元素的宽度就是它包含的文字、图片的宽度。
常见的行内元素有:a
、input
、img
、span
注意
行内元素的 margin-top
、margin-bottom
和 padding-top
、padding-bottom
属性设置是无效的,但是必须注意的是,对于 padding-top
和 padding-bottom
的设置,从显示效果上来看是增加的,但其实设置是无效的,并不会对周围的元素产生影响
块级元素
- 每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。
- 元素的高度、宽度、行高和顶底边距都是可以设置的。
- 元素的宽度如果不设置的话,默认为父元素的宽度。
常见的块级元素有 div
、p
、h1
...h6
、ol
、ul
、dl
、li
、table
、form
行内块
img
和表单元素是特殊的行内块元素,默认宽度是由其包含的内容决定的,它们可以设置宽度高度,也能并排显示
相互转换
使用 dispaly
属性
/* 转换为块级元素 */
display: block;
/* 转换为行内元素 */
display: inline;
/* 转换为行内块元素 */
dispaly: inline-block;
元素的隐藏
- 使用
display:none;
可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样 - 使用
visibility:hidden;
可以也可以将元素隐藏,但是元素不会放弃自己的位置