css阶段总结
Posted 南风知我意
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css阶段总结相关的知识，希望对你有一定的参考价值。
CSS语言的核心功能就是为特定的属性设定特定的值；
CSS规则集：
选择器：选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明：一个单独的规则，如 color: red; 用来指定添加样式元素的属性
属性：改变 html 元素样式的途径。CSS 中，由编写人员决定修改哪个属性以改变规则。
属性的值：在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值
CSS的引入方式：
内联样式(行内样式)：优先级较高
eg:<div style="color:red">设置文字的颜色为红色</div>
内部样式表:样式与结构分离
注意点:
1.style标签要写在head标签的开始标签和结束标签之间(也就是和title标签是兄弟关系)
2.style标签中的type属性其实可以不用写, 默认就是type="text/css"
3.设置样式时必须按照固定的格式来设置. key: value;其中:不能省略, 分号大多数情况下也不能省略
eg:`<style type="text/css">
p{
color:red;
background-color:yellow; }
</style>`
外部样式表:样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）， 共用，定义好的css文件可以应用到多个页面中。
eg:<link rel="stylesheet" type="text/css" href="文件的路径"/>
@import url()，还可通过import方式导入CSS文件
eg:`<style>
/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/@import url(\'./style.css\');
</style>`
引入方式的优先级
行内样式>内联样式/外部引入
CSS选择器
标签选择器:
注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器
id选择器 :#id名称{
属性:值;
}
注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称是有一定的规范的
id的名称只能由字母/数字/下划线，a-z 0-9 _
id名称不能以数字开头
id名称不能是HTML标签的名称，不能是a h1 img input
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的
类选择器: .类名{
属性:值;
}
注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名
后代选择器: 标签名称1 标签名称2{
属性:值;
}
注意点：
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子，也包括孙子、重孙子，只要在指定标签中的都是后代
3.后代选择器不仅仅可以使用标签，还可以使用其他选择器
4.后代选择器可以通过空格一直延续下去。
子元素选择器：标签名称1>标签名称2{
属性:值;
}
注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
后代选择器和子元素选择器之间的区别?
1.后代选择器使用空格作为连接符号
2.子元素选择器使用>作为连接符号
3.后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特 定标签都会被选中
4.子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
后代选择器和子元素选择器之间的共同点：
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{}
交集选择器：给所有选择器选中的标签中, 相交的那部分标签设置属性
选择器1选择器2{
属性: 值;
}
注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称
3.交集选择器仅仅作为了解, 企业开发中用的并不多
并集选择器：选择器1,选择器2{
属性:值;
}
注意点：
1.并集选择器必须使用，连接
2.选择器可以使用标签名称/id名称/class名称
相邻兄弟选择器：给指定选择器后面紧跟的那个选择器选中的标签设置属性
选择器1+选择器2{
属性:值;
}
注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
通用兄弟选择器：给指定选择器后面的所有选择器选中的所有标签设置属性
选择器1~选择器2{
属性:值;
}
注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
伪类选择器：伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中
序选择器（结构伪类选择器）
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增
例如(3n+1)分别对应1,4,7.....
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效
注意点: 不区分类型
同级别同类型中的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素的特定类型的唯一子元素
动态伪类选择器：
E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接 描点上
E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于 链接描点上
E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持
a标签的伪类选择器：
格式
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式注意点
a标签的伪类选择器可以单独出现也可以一起出现
a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active
编写的顺序必须要遵守爱恨原则 love hate
如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写
否定伪类：可以从已选中的元素中剔除出某些元素
:not(选择器)
伪元素选择器：
::after
表示元素的最后边的部分
一般需要结合content这个样式一起使用，
通过content可以向after的位置添加一些内容::before
表示元素最前边的部分
一般需要结合content这个样式一起使用，
通过content可以向before的位置添加一些内容
::first-letter
为第一个字符来设置一个样式
::first-line
为第一行设置一个样式
属性选择器：
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
-属性的取值是以什么结尾的
[attribute$=value] CSS3
-属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到
通配符选择器：给当前界面上所有的标签设置属性
*{
属性:值;}
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
组合选择器 ：多个选择器组合使用
CSS三大特性：
继承性：给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意点:
1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
3.继承性中的特殊性
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的
层叠性：
注意点:
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
优先级：当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级判断的三种方式：
间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
-相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
-不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
优先级之!important：
注意点:
1.!important只能用于直接选中, 不能用于间接选中
2.通配符选择器选中的标签也是直接选中的
3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
4.!important必须写在属性值得分号前面
5.!important前面的感叹号不能省略
6.但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。
font-style：用于打开和关闭斜体文本
取值:
italic : 倾斜的
normal ： 正常的， 默认就是正常的
font-weight: 为字体设置粗细程度
取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线， 默认就是细线
数字取值：
100-900之间整百的数字
400 等同于 normal
700 等同于 bold
font-size 为文字指定大小
font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体
text-decoration:文本装饰的属性
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
text-align:文本水平对齐的属性
取值:
left 左
right 右
center 中
text-indent:文本缩进的属性
取值:
2em, 其中是em单位, 一个em代表缩进一个文字的宽度
text-transform :允许字体改变，文本变形 ,设置或者取消字体改变,用于使文本显示为全大写或全小写
取值:
none 防止任何改变
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体
text-shadow: h-shadow v-shadow blur color;(字体阴影)
取值:
none:取消所有阴影
h-shadow :必需。水平阴影的位置。允许负值。
v-shadow :必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。
color:可选。阴影的颜色。
list-style-type :设置列表项标志类型
list-style-position :设置列表项标志出现的位置
取值:
outside : 列表项标志出现在主块框的外部
inside : 列表项标志出现在主块框的内部
list-style-image 自定义设置列表项标志
取值:
url() : 指定图标位置
line-height : 设置文本的行高 取值为绝对单位或者相对单位
display :inline 行内显示，宽高无效
block 块级显示，宽高有效
inline-block 行内显示同时宽高有效
none 不显示，不占据屏幕空间
visibility:hidden : 隐藏，占据屏幕空间
visible 显示
overflow : 溢出处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
cursor:指定光标的样式
外边距合并现象:垂直方向上, 外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。水平方向上的外边距会叠加.
内边距:
注意点:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色
内容盒子:
width 属性仅表示盒子内容所占的宽度
height 属性仅表示盒子内容所占的高度
边框盒子:
内容区的宽 ：width-paddingLeft-paddingRight-borderLeft-borderRight
内容区的高 ：height-paddingTop-paddingBottom-borderTop-borderBottom
盒子的宽 ：width
盒子的高 ：height
所占屏幕空间的宽 : width+marginLeft+marginRight
所占屏幕空间的高 :height+marginTop+marginBottom
盒子模型注意点:
1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子(子元素)顶部的外边距, 外面一个盒子(父元素)也会被 顶下来。
原因:
子元素和父元素上边框重合在一起。 因为父元素的第一个子元素的顶部外边距margin-top如果碰不到有效的border或者padding，就会不断一层 一层的找自己父元素的麻烦。只要给父元素设置一个有效的border或padding就可以有效的管制这margin-top，防止它越级，把自己的margin-top当成父元素的margin-top执行。
2.如果外面的盒子不想被一起顶下来,那么可以给外面的盒子添加一个边框属性。
3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑 margin，margin本质上是用于控制兄弟关系之间的间隙的。
4.只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不 会合并。
5.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
margin:0 auto = margin:0 auto 0 auto，表示上下为0，左右为auto；
6.margin: 0 auto; 只对水平方向有效, 对垂直方向无效
background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺属性
取值:
repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
background-position 背景定位属性
取值
具体的方位名词
水平方向: left center right
垂直方向: top center bottom
具体的像素
例如: background-position: 100px 200px;
记住一定要写单位, 也就是一定要写px
记住具体的像素是可以接收负数的
background-attachment:用于修改关联方式
取值：
scroll 默认值， 会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动
浮动流排版方式
1.浮动流是一种"半脱离标准流"的排版方式
2.浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
浮动元素字围现象:
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
-注意点:
1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;
-特点:
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是块级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像
解决高度塌陷
1.所以在开发中一定要避免出现高度塌陷的问题,我们可以将父元素的高度写死，以避免塌陷的问题出 现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
2.可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以 撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度， 基本没有副作用。
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
3.通过after伪类
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个 div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使 用的方式，几乎没有副作用。
.clearfix::after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
BFC的布局规则
- 内部的Box会在垂直方向一个接着一个地放置。
- Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
- 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
- 计算BFC的高度时，浮动子元素也参与计算。
哪些元素会生成BFC
1.根元素
2.float属性不为none
3.position 为absolute或fixed
4.display为inline-block table-cell table-caption flex inline-flex
5.overflow不为visible
BFC的作用
- 解决浮动元素令父元素高度坍塌的问题
方法：给父元素开启BFC
原理：计算BFC的高度时，浮动子元素也参与计算
定位布局
静态定位：所有元素的默认定位方式。意味着将一个元素定位在默认文档流中（position: static;）
相对定位：相对于自己以前在标准流中的位置来移动（position: relative;）
相对定位注意点
- 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- 在相对定位中同一个方向上的定位属性只能使用一个
- 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局
绝对定位：绝对定位就是相对于body来定位（position: absolute;）
绝对定位参考点：
1.规律
默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。
2.1只要是这个绝对定位元素的祖先元素都可以
2.2指的定位流是指绝对定位/相对定位/固定定位
2.3定位流中只有静态定位不行
3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。
-绝对定位水平居中
只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
固定定位：position: fixed;
注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级
粘滞定位：position: sticky;
使用条件：
父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效
z-index：默认取值0
注意点:
1.从父现象
1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。
1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。
以上是关于css阶段总结的主要内容，如果未能解决你的问题，请参考以下文章