导图社区 CSS知识点
- 1.2k
- 132
- 36
- 举报
CSS知识点
干货分享！很多人对于前端中css的学习都很懵懵懂懂，我为大家整理了一些我在学习css前端是的一些知识点，内容包括 三大特性 、选择器 、布局 、补充、常见属性 、基础 等方面的知识，如果有补充的欢迎一起来讨论！
编辑于2019-08-28 13:27:35- 相似推荐
- 大纲
CSS层叠样式表 (Cascading Style Sheets)
用于修改样式
三大特性
继承性
给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
继承性中的特殊性
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的
应用
一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容
层叠性
层叠性就是CSS处理冲突的一种能力
注意
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
优先级
当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
间接选中<直接选中
间接选中
继承，谁离目标标签比较近就听谁的
直接选中
相同选择器
谁写在后面就听谁的
不同选择器
优先级：id>类>标签>通配符>继承>浏览器默认
优先级权重
当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
依次计算并比较:id, 类，标签的个数，每次只要有较大的就选择那个，如果都一样，谁写在后面就听谁的
注意
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
选择器
标签选择器
根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式
标签名称{ 属性:值; }
注意
标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
标签选择器无论标签藏得多深都能选中
id选择器
根据指定的id名称找到对应的标签, 然后设置属性
格式
#id名称{ 属性:值; }
id='id名称'
注意
每个标签都可以设置id，但同一个界面中id的名称是不可以重复的
id的名称遵循标识符规则
id一般留给js使用的
类选择器
根据指定的类名称找到对应的标签, 然后设置属性
格式
.类名{ 属性:值; }
class='类名'
注意
每个标签都可以设置类名，同一个界面中class的名称是可以重复的
专门用来给CSS设置样式的
每个标签可以同时绑定多个类名
<标签名称 class="类名1 类名2 ...">
后代选择器
找到指定标签的所有特定的后代标签, 设置属性
格式
标签名称1 标签名称2{ 属性:值; }
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
注意
后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代,无序
后代选择器必须用空格隔开
无限延伸：可以通过空格一直延续下去
混用：后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
子元素选择器
找到指定标签中所有特定的直接子元素, 然后设置属性
格式
标签名称1>标签名称2{ 属性:值; }
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
注意
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签，顺序
用>符号连接，混用，无限延伸
如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
交集选择器
给所有选择器选中的标签中, 相交的那部分标签设置属性
格式
选择器1选择器2{ 属性: 值; }
注意
选择器和选择器之间没有任何的连接符号
混用
交集选择器仅仅作为了解, 企业开发中用的并不多
并集选择器
给所有选择器选中的标签设置属性
格式
选择器1,选择器2{ 属性:值; }
注意
并集选择器必须使用,来连接
混用
兄弟选择器
相邻兄弟选择器（CSS2）
通用兄弟
给指定选择器后面的所有选择器选中的所有标签设置属性
格式
选择器1~选择器2{ 属性:值; }
注意
通用兄弟选择器必须用~连接
通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
序选择器
选中指定的任意标签然后设置属性
格式
同级别的第几个
:first-child 选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签 :nth-last-child(n) 选中同级别中的倒数第n个标签 :only-child 选中父元素中唯一的标签
同级同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签 :last-of-type 选中同级别中同类型的最后一个标签 :nth-of-type(n) 选中同级别中同类型的第n个标签 :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 :only-of-type 选中父元素中唯一类型的某个标签
其他
:nth-child(odd) 选中同级别中的所有奇数 :nth-child(even) 选中同级别中的所有偶数 :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增 :nth-of-type(odd) 选中同级别中同类型的所有奇数 :nth-of-type(even) 选中同级别中同类型的所有偶数 :nth-of-type(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增
属性选择器
根据指定的属性名称找到对应的标签, 然后设置属性
格式
[attribute]
根据指定的属性名称找到对应的标签, 然后设置属性
[attribute=value]
找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性，用于区分input属性
[attribute^=value]
属性的取值是以什么开头的
[attribute$=value]
属性的取值是以什么结尾的
[attribute*=value]
属性的取值是否包含某个特定的值
通配符选择器
给当前界面上所有的标签设置属性，一般不会使用
格式
*{ 属性:值; }
布局
指浏览器是如何对网页中的元素进行排版的
标准流(文档流/普通流)（默认）
CSS三类元素
块级元素
独占一行
常见块级元素: p div h ul ol dl li dt dd
可以设置宽度, 默认和父元素一样宽
行内元素
不会独占一行
常见行内元素: span buis strong em ins del
不可以设置宽度和高度，默认和内容一样宽
行内块级元素
不独占一行, 并且可以设置宽高
可以设置宽度和高度
排版
垂直排版
如果元素是块级元素, 那么就会垂直排版
水平排版
如果元素是行内元素/行内块级元素, 那么就会水平排版
浮动流
半脱离标准流，只有水平排版. 它只能设置某个元素左对齐或者右对齐
格式
float：
和父元素对齐，right,left
注意
浮动流中没有居中对齐, 也就是没有center这个取值
在浮动流中是不可以使用margin: 0 auto;
不区分三类元素，元素都可以设置宽高，水平排版
特点
脱标
当某一个元素设置浮动之后, 那么这个元素看上去就像被从标准流中删除了一样
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
浮动元素排序规则
相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
浮动元素贴靠
如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
浮动元素字围
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,
应用：图文混排
盒子高度
在标准流中内容的高度可以撑起盒子的高度
在浮动流中浮动元素内容的高不可以撑起盒子的高度
清除浮动
1.给前面的父盒子添加高度
在企业开发中能不写高度就不写高度, 所以这种方式不常用
2.clear:both
clear:none(默认),both,left（在左侧不允许浮动元素）,right，
使用clear:both之后margin属性会失效, 所以不常用
3.在两个有浮动子元素的盒子之间添加一个额外的块级元素
由于需要添加大量无意义的标签, 所以不常用
在外墙法中可以通过设置额外标签的高度来实现margin效果
4.在前面一个盒子的最后添加一个额外的块级元素
内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
在后期维护中将是噩梦，
5.overflow:hidden
给前面一个盒子添加overflow:hidden属性，清除溢出盒子边框外的内容
由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点是和定位结合在一起使用时会有冲突
6.给前面的盒子添加伪元素来清除浮动
本质和内墙法一样，添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
div::after{ content:''; display:block; height:0; visibility:hidden; clear:both;}
7.给前面的盒子添加双伪元素来清除浮动
定位流
相对定位
对定位就是相对于自己以前在标准流中的位置来移动
格式
position: relative;
设置top: , bottom, left,right
同一方向上的定位只能使用一个
注意
相对定位是不脱离标准流的, 相对在标准流中的位置移动，而且相对定位的元素会占用标准流中的位置
区分块级元素/行内元素/行内块级元素
当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局
应用
用于对元素进行微调
绝对定位
相对于body或者某个定位流中的祖先元素来定位
子主题
格式
position: absolute;
设置top: , bottom, left,right
注意
绝对定位的元素是脱离标准流的, 不会占用标准流中的位置
不区分块级元素/行内元素/行内块级元素
以body作为参考点
以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
而相对于body定位会随着页面的滚动而滚动
一个绝对定位的元素会忽略祖先元素的padding
绝对定位参考点
默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
水平居中
当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
可以使用left: 50%; margin-left:-元素宽度一半px 让自身居中
子绝父相
相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流
父元素相对定位，子元素绝对定位进行微调
固定定位
让元素不随着滚动条的滚动而滚动
格式
position: fixed;
固定定位应用场景: 网页对联广告 网页头部通栏(穿透效果)
注意
脱离标准流的, 不会占用标准流中的位置
不区分块级元素/行内元素/行内块级元素
应用
网页对联广告
网页头部通栏(穿透效果)
静态定位
相当于默认的标准流
应用
一般用于配合JS清除定位属性
z-index属性
用于指定定位的元素的覆盖关系
覆盖关系
默认情况下定位的元素一定会盖住没有定位的元素
默认情况下写在后面的定位元素会盖住前面的定位元素
默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面
定位元素的从父现象
父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁
父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁
应用
控制界面上的定位元素的覆盖关系, 例如网页中后面的定位元素不能覆盖前面的导航条通栏
补充
!important
用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
注意
只能用于直接选中, 不能用于间接选中
只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
必须写在属性值的分号前面
div标签
一般用于配合css完成网页的基本布局
特点
独占一行
容器级标签，可以嵌套其它所有的标签
容器级：div h ul ol dl li dt dd ...
span标签
一般用于配合css修改网页中的一些局部信息
特点
不会独占一行
文本级标签，只能嵌套文字/图片/超链接
文本级的标签:span p buis strong em ins del ...
display属性
显示模式
值
block
块级元素
db
inline
行内元素
di
inline-block
行内块级元素
dib
CSS精灵图
CSS精灵图是一种图像合成技术, 全称CSS Sprite
可以减少请求的次数, 以及可以降低服务器处理压力
CSS的精灵图需要配合背景图片和背景定位来使用
line_height属性
行高
文字在行高中垂直居中
将盒子的高度和行高设置一样，则一行垂直居中
padding和 box_sizing 使多行居中
常见属性
文字
font-style
规定文字样式
值
normal
正常的， 默认就是正常的
fsn
italic
倾斜的
fs
font-weight
规定文字粗细
fw
值
lighter
细线， 默认就是细线
bold
加粗
fwb
bolder
比加粗还要粗
fwbr
数字取值
100-900之间整百的数字
font-size
规定文字大小
fz
值
px(像素 pixel)
fz+数字
font-family
规定文字字体
ff
值
各种字体名称，默认宋体，还有宋体/黑体/微软雅黑，"Times New Roman"/Arial
用 ， 设置备选字体
如果取值是中文， 需要用双引号或者单引号括起来 设置的字体必须是用户电脑里面已经安装的字体
中文字体可以处理英文, 而英文字体不能处理中文
font
字体缩写
font: style weight size family;
注意
可省略：sytle，weight
size一定要写在family的前面, 而且size和family必须写在所有属性的最后
文本
text-decoration
给文本添加装饰
值
underline
下划线
tdu
line-through
删除线
tdl
overline
上划线
tdo
none
什么都没有, 最常见的用途就是用于去掉超链接的下划线
td
text-align
设置文本水平对齐方式
值
left
左
ta
right
右
tar
center
中
tac
text-indent
设置文本缩进
ti
值
默认2em, 其中em是单位, 一个em代表缩进一个文字的宽度
ti2e
颜色
color
修改文字颜色
值
英文单词
rgb
三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
rgb(0,0,0)，数字取值0-255，0代表不发光, 255代表发光
值都一样就是灰色，值全0为黑色，值全255为白色
rgba
a代表透明度, 取值是0-1, 取值越小就越透明
十六进制、十六进制缩写
背景
background-color
背景颜色，类似color
bc
background-image
背景图片
bi
值
url()
注意
图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
和插入图片的区别
背景图片仅仅是一个装饰, 不会占用位置，插入图片会占用位置
背景图片有定位属性，插入图片没有定位属性
插入图片的语义比背景图片的语义要强
background-repeat
背景图片的平铺方式
bgr
值
repeat
默认, 在水平和垂直都需要平铺
no-repeat
在水平和垂直都不需要平铺
repeat-x
只在水平方向平铺
repeat-y
只在垂直方向平铺
应用
可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
可以将多张图片拼接成一张图片
注意
背景颜色和背景图片可以共存, 图片会覆盖颜色
background-position
用于控制背景图片的位置
bp
值
具体的方位名词
水平方向: left center right
垂直方向: top center bottom
像素px,可以接收负数的
应用
当图片比较大的时候, 可以通过定位属性保证图片永远居中显示
background
背景连写
bg+
格式
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意
background属性中， 任何一个属性都可以被省略
background-attachment
修改背景关联方式
ba
值
scroll
默认值， 会随着滚动条的滚动而滚动
fixed
不会随着滚动条的滚动而滚动
盒模型
指那些可以设置宽度高度/内边距/边框/外边距的标签
border
边框:环绕在标签宽度和高度周围的线条
格式
border: 边框的宽度 边框的样式 边框的颜色;
bd+
dashed虚线，solid实线，颜色默认黑
按方向连写(分别设置四条边):border-top,border-right,,border-bottom,border-left
bt+,br+,bb+,bl+
按要素连写(分别设置四条边)
border-width,border-style,border-color: 上 右 下 左;
非连写(方向+要素)
注意
同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的
padding
内边距：边框和内容之间的距离
格式
同时设置四条边
padding:上 右 下 左;
单独设置四条边
padding-top...
注意
给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色
margin
外边距：标签和标签之间的距离就是外边距
格式
同时设置四条边
margin: 上 右 下 左
单独设置四条边
注意
外边距的那一部分是没有背景颜色的
水平叠加
垂直合并
默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
外边距合并现象
如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
嵌套盒子，先padding后margin
text-align:center;和margin:0 auto;
text-align: center
让盒子自己水平居中
margin:0 auto
设置盒子中存储的文字/图片水平居中
padding和margin
padding
控制嵌套关系盒子之间的距离
margin
控制兄弟关系之间的间隙的
清空边距
*{marigin:0, padding:0}
不赞成使用
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
width/height
设置内容宽度和高度，也就是盒模型的宽高
相似的宽高
元素宽高
左边框 + 左内边距 + width + 右内边距 + 右边框
元素空间的宽度和高度
左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
box-sizing
保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
值
content-box
默认，元素的宽高 = 边框 + 内边距 + 内容宽高
border-box
设置盒子宽高不变，元素的宽高 = width/height的宽高
基础
格式
<style type="text/css"> 标签名称{ 属性名称: 属性对应的值; } </style>
//style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系) //style标签中的type属性其实可以不用写, 默认就是type="text/css" //设置样式时必须按照固定的格式来设置。key: value;其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略
样式表
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
最高优先权
语法
selector {declaration1; declaration2; ... declarationN }
选择器{一条或多条声明}