CSS知识点个人整理

选择器

单一选择器

#id

.class

元素

*通配

复合选择器

交集(ABCD)

并集(,)

关系选择器

后代 (空格)

子元素 (>)

​ 可叠加

相邻同胞(A+B)

​ 同父亲，A后紧挨着的第一个B

普通同胞(A~B)

​ 同父亲，A后所有B

选择器权重

!important>行内1000>id100>class10>tag1>*>继承

交集则相加 并集各算各的

!important:(能不用就不用)

margin:0 !important;

属性选择器

h1[title][id]{  
}//既有title 又有id


h1[title=""]{	
}//指定值


h1[title^="x"]{
}	//以x开头


h1[title$="x"]{
}	//以x结束


h1[title*="abc"]{
}	//含有abc(不连续完整也可以)


h1[title~="abc"]{
}	//含有abc(完整连续单词)


h1[title|="abc"]{
}	//以abc开始，且用-连接后面

伪类选择器 单冒号

​ 的四种状态

LoVe HAte

link visited hover active（按下瞬间） （顺序 h必须在lv之后，a必须在h之后）

<a href="http://www.baidu.com" target="_Blank">百度</a>
_Blank是新窗口
_Self是自身
_Parent是父窗口
_Top是顶层窗口

伪元素 双冒号

::first-letter
::first-line
::before
::after

目标与根

:empty{
}令空元素消失

首尾元素

​

div:first-child{
}//div中，所有是第一个子节点的元素

div h22:first-child{
}//div中，所有是第一个子节点的h2

div h1:first-of-type{
}//div中第一个h1

唯一子元素

div:only-child{
}


div>h1:only-of-type{
}div的唯一h1子元素(不包含孙)


A:B{
}
从A集合里开始找

:last-of-type与:last-child

​ last-child 先找最后一个子节点，再与选择器进行匹配

​ last-of-type找选择器匹配的最后一个子节点

div及其后代的所有第二个子元素

div:nth-child(2){
}

前两个

div:nth-child(-n+2){
}

倒着来

div:nth-last-child(){
}

浏览器私有属性前缀

-moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属

white-space属性

.p{

white-space : nowrap

}

<p style="white-space: pre-line;">{{ message }}</p>

 标签。

box-sizing属性

水平垂直居中

​ inline元素：text-align：center

​ line-height

​ block： marign：auto

​ absolute： left50%+margin-left负值自身宽度一半

​ top50%+margin-top负值自身高度一半

​ 必须已知自身宽度，因为margin百分比值是根据父元素宽度

​ absolute： left50%+top50%+transform：translate(-50%,-50%)

​ absolute： top,left,bottom,right = 0+margin:auto

414

盒模型

content-box经典盒模型 :width = content

border-box怪异（IE）盒模型:width = content+padding2+border2

vertical-align

vertical-align：行内元素垂直对齐方式

针对于基线（baseline）而言

基线的位置并不是固定的：

• 在文本之类内联元素中，基线是字符x的下边缘位置
• 在像img元素中基线就是下边缘。
• 在inline-block元素中，也分两种情况
  1. 如果该元素中有内联元素，基线就是最后一行内联元素的基线。
  2. 如果该元素内没有内联元素或者设置了非默认的overflow，其基线就是margin的底边缘。

相对父元素的值

这些值使元素相对其父元素垂直对齐：

• baseline

  使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如`` ，这意味着这些元素使用此值的表现因浏览器而异。

• sub

  使元素的基线与父元素的下标基线对齐。

• super

  使元素的基线与父元素的上标基线对齐。

• text-top

  使元素的顶部与父元素的字体顶部对齐。

• text-bottom

  使元素的底部与父元素的字体底部对齐。

• middle

  使元素的中部与父元素的基线加上父元素x-height的一半对齐。

相对行的值

下列值使元素相对整行垂直对齐：

• top

  使元素及其后代元素的顶部与整行的顶部对齐。

• bottom

  使元素及其后代元素的底部与整行的底部对齐。

没有基线的元素，使用外边距的下边缘替代。

数字值

• 具体的长度值：是正值基线就向上移动，如果是负值基线向下移动。

• 百分比值：正负情况和长度值一样，需要知道的值是相对于行高（line-height）的百分比。

布局 定位 图文样式 响应式 css3

盒模型宽度计算

offsetWidth=内容+外边距+边框

如果border-boxing= border-box

则offsetWidth=width

margin纵向重叠

空白内容p标签均会重叠

相邻元素上下margin重叠为大的

解决办法：BFC

margin负值

左上负值自身移动，其余跟着移动

右下负值，右下的元素移动，自身不动

BFC

一块独立渲染区域

如何创建：

​ float 不是none

​ overflow 非visible

​ position： 非relative和static

​ display： inline-block、table-cell、flex、table-caption或者inline-flex

作用

阻止外边距重叠

​ 两个不同的BFC之间外边距不会重叠

清除浮动

​ BFC计算高度的时候会把浮动元素也算上

自适应布局

​ BFC中元素不会被浮动元素遮盖

布局

圣杯

float+中心padding+左右margin负值+position

双飞翼

float+中心margin+左右margin负值

清除浮动

1.触发BFC

2.clear：both （可以使用标签也可以使用before after伪元素）

flex

关键属性

容器：

flex direction 主轴方向 row/column

flex wrap 是否换行

justify-content 左对齐/右对齐/居中两端

align-items 交叉轴上如何对齐

项目：

aligh-self： 覆盖aligh-items 允许单个项目选择自己的对齐方式

order： 数字越小越前

aligh-grow: 放大比例，121的话2比1多占1倍空间

可以用来圣杯？

css定位

relative：根据自身定位

absolute：根据最近上一层非absolute的已定位元素定位

fixed：相对于浏览器窗口

line-height如何继承？

具体值 继承具体值

比例 继承比例 line-height = 比例*自身font-size

百分比 继承计算后的line-height=百分比*父元素font-size

rem

px:绝对长度

em:相对于父元素

rem:相对于根元素

响应式布局:

media-query 根据不同屏幕宽度设置根元素font-size

meidia-query