css学习笔记
简介
- CSS是什么?
CSS是Cascading Style Sheets的简称,中文称为层叠样式表。
- 引入方式
- 行内式
行内式是在标签的style属性中设定CSS样式1
<div style="..."></div>
- 嵌入式
嵌入式是将CSS样式集中写在网页的标签的标签对中。1
2
3
4
5
6<head>
...
<style type="text/css">
...此处写CSS样式
</style>
</head>
- 链接式
将一个独立的.css文件引入到HTML文件中,使用标记写在标记中。
链接式会以网页文件主体装载前装载CSS文件。1
2
3
4<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
样式的应用顺序 :
- 行内>嵌入>链接
- 相同样式并且相同属性,呈现方式在<head>中的顺序决定,后面会覆盖前面属性
- !important 指定样式规则应用最优先
常用选择器(Selector)
- 通用元素选择器
*表示应用到所有的标签。1
*{color: yellow}
- 标签选择器
匹配所有使用 div 标签的元素(可以匹配所有标签)1
div {color: yellow}
类选择器
匹配所有class属性中包含Mycolor的元素。
语法:.类名{样式}(类名不能以数字开头,类名要区分大小写。)1
2.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>注意 : 一个元素的class可以有多个,每个class之间用空格隔开,如果后面的class力的样式与前面的有重复,那后面的会把前面的覆盖了
- ID选择器
使用id属性来调用样式,在一个网页中id的值都是唯一的
语法:#ID名{样式}(ID名不能以数字开头)
1 | #Mycolor {color: yellow} |
- 伪类选择器:
- link、hover、active、visited
- a:link(未访问的链接状态),用于定义了常规的链接状态。
- a:hover(鼠标放在链接上的状态),用于产生视觉效果。
- a:active(在链接上按下鼠标时的状态)。
- a:visited(已访问过的链接状态),可以看出已经访问过的链接。
1 | a:link{color: black} |
----------
2. before、after
- P:before在每个p元素的内容之前插入内容
- P:after 在每个p元素的内容之后插入内容。
1 | p { |
6. 群组选择器
通过逗号的方式选择元素(选择到的是一组元素)1
2
3h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
只要任意一个元素有相同的样式,那就可以用群组选择器放在一起,不过要用逗号隔开,不管他是id选择器,class选择器,标签选择器都可以
组合选择器
后代元素选择器
1
2
3
4
5
6
7
8div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>子元素选择器
匹配所有div标签里嵌套的子P标签,之间用>分隔。1
2
3
4
5
6div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>
3. 毗邻元素选择器
匹配所有紧随div标签之后的同级标签P,之间用+分隔(只能匹配一个)。
1 | div + p {color: yellow;} |
4. 属性选择器:
`.[title] & P[title]`
设置所有具有title属性的标签元素
设置所有具有title属性的P标签元素1
2
3
4
5
6
7
8
9
10
11 [title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>
选择器优先级
- 优先级 按代码执行的顺序
- 选择器的优先级一致的情况下,谁在后谁的优先级就高
- 选择器的优先级不一致的情况下,会选择优先级高的
- 行间样式>id选择器>class(类)选择器>标签选择器>通配符选择器(*)
包含选择器的优先级
- 包含选择器的优先级取决与位置,谁靠后谁的优先级就高,会把前面的样式给覆盖了
属性(Selector)
- 语法
通过选择器选择要添加样式的元素,定义它的文字属性,属性的值为红色(特定属性的值可以是多个以一个空格隔开) - 继承
子元素会从父元素继承属性1
2h1 {color:red;}
div {border: 1px solid #000000;}
盒模型(Box Model)
盒子模型图示:
1 | #box { |
标准盒模型大小计算: border+width/height+padding
- 内填充(padding): 用于控制内容与边框之间的距离;
父子级元素之间的距离,可以通过给父级加padding来设置 外边距(margin): 用于控制元素与元素之间的距离;
同级元素之间的距离,通过添加margin来设置- 一个参数,应用于四边。
- 两个参数,第一个用于上、下,第二个用于左、右。
- 三个参数,第一个用于上,第二个用于左、右,第三个用于下。
- margin的问题
- margin传递(只有上下会传递左右不会传递)
子级会把自己的margin-top与margin-bottom传递给父级
解决办法:给父级加上一个边框(其中一个方法) - margin上下叠压(只有上下会叠压,左右不会叠压)
上边元素的margin-bottom与下边元素的margin-top叠在了一起(他会取大的值)
解决办法:只用给一个元素设置margin就可以 (给一个设置为0就可以)
怪异盒模型
怪异盒模型出现的原因?
ie6,ie7,ie8下文档头缺失(DOCTYPE)会触发怪异模式。怪异盒模型大小计算: width/height+margin((即width已经包含了padding和border值))
浮动(float)
- 定义 使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来.
- 值 left right none
- 特征
- 块元素可以在一行显示
- 按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来
- 可以让行内元素支持宽高
- 脱离文档流
- 块元素的默认宽度会改变(包裹性)
块元素不设置宽度,那宽度会自动变成内容所撑开的宽度。 - 父级高度塌陷(破环型)
子元素有浮动后,那父级元素的高度不会自动撑开了。 - 换行符不会被解析成空格
浮动后的元素就会脱离文档流了,那他就不属于文档流里的结构了,所以换行/空格都跟父级没关系了;
清除浮动
- clear 元素的某个方向上不能有浮动的元素
left 元素的左边不能有浮动元素
right 元素的右边不能有浮动的元素
both 元素的两边都不能有浮动的元素 - 给父级添加高度
有的时候是不能给父级添加高度的,所以这个方法用不了(父级没有高度的情况下) - inline-block
具有与上一个的清除浮动一样的总是,同时加了以后这个元素就没有办法居中了 - overflow:hidden;
如果子级有定位的话,并且这个定位超出了父级的范围,那样的话就看不到了,所以不能加这个命令
- after伪类清除浮动
- 空标签
空标签是没有内容的,但是他的作用是用来清除浮动的,所以不复合行为,样式.结构相分离的标准
ie6下标签是由个最小高度19px.解决后也会有2像素的偏差 - br清除浮动
和上面的问题一样,不复合标准 - after伪类清除浮动(现在最主流的方法)没有不良问题
1
2
3
4
5
6.clearfix:after{
content:``;
display:block;
clear:both;
}
<div 类 :"clearfix">
定位(position)
默认值 statc 不定位
相对定位
position 定位- relative 相对定位
通过以下四种属性进行定位: top right bottom left - 特点
- 只加相对定位,不设置元素移动的位置,元素和之前是没有变化
- 更具之间原来的位置计算移动的位置
- 不脱离文档流,元素移走以后,原来的位置还会被保留
- 加上相对定位后对原来的元素本身的特征没有影响
- 提升层级
- relative 相对定位
绝对定位
absolute 绝对定位
- 特点
- 完全脱离文档流
- 行内元素支持所有样式(与加上浮动或者inline-block以后的效果是一样的)
- 如果父级有定位,那位置会根据父级移动.如果父级没有定位,那位置根据可视区移动
(一般情况下,要用到绝对定位的时候,都会给父级来一个相对定位)**
- 特点
固定定位
fixed 固定定位- 特点
- 完全脱离文档流
- 行内元素支持所有样式
- 相对可视区来移动位置
- 提升层级
- 触发BFC
层级
在正常情况下层级的大小由顺序决定,后面的元素要比前面的元素的层级要高
有定位元素的层级要比没有定位元素层级要高
在都有定位的情况下,层级还是取决与书写顺序z-index 层级
它的值是一个数字,数字越大层级越高(在同一个层里)
参考一: w3school
参考二: cnblogs/suoning