##css笔记
1.css盒模型
用来装页面的元素的矩形区域
content(元素) padding(内边距) border(边框) margin(外边距)
1.IE盒子模型
box-sizing:border-box
宽高加上了border和padding
2.标准的W3C盒子模型
box-sizing:content-box
宽高都指content的宽高
2.link标签和@import标签的区别
link属于html标签,而@import是css提供的
页面加载时link同时被加载,@import要页面加载结束后才加载
link没有兼容性,@import要IE5以上才支持
link方式样式的权重高于@import
3.想要修改一个DOM元素的字体颜色,又不对其本身进行操作
更改父元素的color
4.css3新属性
布局上:flex布局
选择器:first-of-type,nth-child等
盒模型:box-sizing来改变盒模型
动画:animation,2D变换,3D变换
颜色:添加透明,rgba
字体:允许嵌入字体和设置字体阴影
媒体查询
5.用得最多的css属性
flex,灵活但兼容性方面不强
6.line-height/height
line-height:布局里一段文字上下行之间的高度
height:容器的整体高度
7.设置一个背景颜色,会填充哪些区域
元素的content、padding、border
8.属性选择器和伪类选择器的优先级
优先级相同
9.inline-block、inline、block区别
1.block
块级元素,前后都有换行符,能设置宽高,margin padding都有效
2.inline
前后无换行符,设置宽高无效,margin在竖直上无效,padding都有效
3.inline-block
前后无换行符,能设置宽高,margin padding都有效
10.重绘和重排,怎么减少,如何让文档脱离文档流
DOM变化影响几何属性,浏览器重新计算,其他元素也会受到影响,这时需要重新构造渲染:重排
重绘:浏览器将受到影响的部分重新绘制到屏幕上的过程称为重绘
原因：
1.添加或者删除可见的DOM元素
2.元素尺寸位置发生改变
3.浏览器页面初始化
4.浏览器窗口大小发生改变
减少方法
1.不在布局信息改变时做DOM查询
2.使用csstext,className一次性改变属性
3.使用fragment
对于多次重排的元素,比如说动画,使用绝对定位脱离文档流,使其不影响其他元素
11.overflow的原理
BFC块级格式化上下文,是css可视化渲染的一部分,它是一块区域,规定了内部块盒的渲染方式
以及浮动相互的联系,当元素设置了overflow样式且值部位visible时,该元素就构建了一个BFC,
BFC在计算高度时,内部浮动元素的高度也要计算在内,也就是说BFC只有一个浮动元素,高度也不会发生坍塌
所以达到了清除浮动的目的
12.清除浮动的方法
1.使用带clear属性的空元素
在浮动元素后面使用一个空元素
并在css中赋予.clear{clear:both};属性即可清理浮动
2.使用css的after伪元素
伪元素和IEhack,可以完美兼容当前主流的各大浏览器,IEhack指的是触发hasLayout
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:
after伪元素实现元素末尾添加一个看不见的块元素清理浮动
3.overflow:hidden或者overflow:auto
浮动元素回到容器层,把容器的高度撑起来
4.给浮动元素的容器添加浮动
使得整体浮动,影响布局,不推荐使用
5.使用邻接元素
什么都不做,给浮动元素后面的元素添加clear属性
13.元素消失的方法
visibility:hidden不改变页面布局，不可以触发点击事件
display:none删除了一样
opacity:0不改变页面布局，可以触发点击事件
14.BFC
BFC(块级格式化上下文,用于清除浮动,防止margin重叠)
块级格式化上下文,是一个独立的渲染区域,并且有一定的布局规则
BFC区域不会与float box重叠
BFC是页面上的一个独立容器,子元素不会影响到外面
计算BFC高度时,浮动元素也会参与计算
以下元素会生成BFC:
float不为none的元素
position为fixed absolute
overflow不为visible
display为flex inline-flex inline-block table-cell table-caption
15.两个嵌套的div,position都是absolute,子div设置top属性,top相对于哪个位置定位
margin的外边缘
16.display
none/block/inline-block/inline/flex
17.相对布局、绝对布局
18.flex布局
弹性布局,用来为盒状模型提供最大的灵活性
布局的传统解决方案,基于盒状模型,依赖于display属性+position属性+float属性
对于那些特殊的布局非常不方便,比如垂直居中不太容易实现
19.css布局
1.圣杯布局
从上到下分为header container footer
container部分定位三栏布局同样分为header container footer
缺陷:center在container的padding中,宽度较小时会出现混乱
2.双飞翼布局
给center部分包裹了一个main通过设置margin主动将页面撑开
3.flex布局:css3提供
4.绝对定位布局
container设置position:relative和overflow:hidden
因为绝对定位的元素的参照物为第一个positon不为static的祖先元素
left左浮动 right右浮动
center使用绝对定位,通过设置left和right将吧两边撑开
center使用top:0;bottom:0;将其高度撑开
5.表格布局
好处在于可以使得三栏布局的高度统一
6.网格布局
兼容性不太好
将页面分割成多个区域
20.position属性比较
1.固定定位:fixed
元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的,它也不会移动
fixed定位使元素的位置与文档流无关,因此不占据空间,和其他元素发生重叠
2.相对定位:relative
一个元素相对定位,可以设置垂直或水平位置,让这个元素相对于它的起点发生移动
无论是否进行移动,都会占据原来的空间,覆盖其他元素
3.绝对定位:absolute
绝对定位的元素相对于已定位父元素,如果没有已定位的父元素,那么相对于
绝对定位使元素的位置与文档流无关,不占据空间,与其他元素发生重叠
4.粘性定位:sticky
元素先按照普通文档流进行定位,然后相对于该元素在流中的BFC和最近的块级祖先元素定位
而后元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位
5.默认定位:static
默认值,没有定位,元素出现在正常的流中
6.inherit:
从父元素继承position属性的值
21.垂直居中
1.margin:auto
定位为上下左右为0,margin:0可以实现脱离文档流的居中
2.margin负值法
margin-top:-190px;高的一半
margin-left:-240px;宽的一半
补充:
transform:translateX(-50%)
transform:translateY(-50%)
3.未脱离文档流 table-cell
为父元素设置diaplay:table-cell,vertical-align:middle
子元素就可以实现垂直居中
4.利用flex
父元素设置diaplay:flex,align-items:center,justify-content:center
22.transition和animation的区别
大部分属性是相同的,都是随时间改变元素的属性值
transition需要触发一个事件才能改变属性,2帧
animation不需要触发任何事件的情况下才会随时间改变属性值,可以一帧一帧
23.js动画和css3动画的差异
渲染线程分为main thread和compositor thread
如果css动画只改变transfrom和opacity,这时css动画得以在compositor thread完成
js动画会在main thread执行,然后出发compositor thread进行下一步操作
如果改变transfrom和opacity是不会layout或者paint的
区别:
功能涵盖面,js更大
实现重构上:CSS3更加简单,性能跳优方向固定
对帧速表现不好的低版本浏览器,css3可以实现自然降级
css动画有天然事件支持
css3有兼容性问题
24.块元素和行内元素
1.块元素:独占一行,并且自动填满父元素,可以设置margin padding以及宽高
2.行内元素:不会独占一行,宽和高失效,在垂直方向上的padding和margin也会失效
25.外边距折叠
多个相邻普通流的块元素垂直方向margin会重叠
两个相邻的外边距都是正数时,折叠结果为较大的值
两个相邻的外边距都是负数时,折叠结果为绝对值较大的值
两个相邻的外边距一正一负时,折叠结果为两者相加的和
26.css3新特性
1.css3边框
1.border-radius圆角边框
2.box-shadow边框阴影
3.border-image边框图片
2.css3背景
1.background-size规定背景图片的尺寸
2.background-origin背景图片的定位区域,比如content-box padding-box border-box
3.css3文字效果
1.text-shadow文本应用阴影
2.word-wrap允许对长单词进行拆分,换行到下一行p{word-wrap:break-word};
4.css3 2D转换
transfrom:通过css3转换,我们可以对元素进行移动、缩放、转动、拉长、拉伸
1.translate()从当前位置移动,根据给定的left/top位置参数
transform: translate(50px,100px);
2.rotate()旋转给定的角度,负值则为逆时针旋转
transform: rotate(30deg);
3.scale()元素的尺寸会增加或减少,根据给定的宽度和高度
transform: scale(2,4);
4.skew()转动给定的角度,根据给定的水平线和垂直线
transform: skew(20deg,30deg);
5.matrix:
将所有2D转换方法组合在一起,需要六个参数,包含数学函数
5.css3 3D转换
rotateX()元素围绕其X轴给定的度数进行旋转
rotateY()元素围绕其Y轴给定的度数进行旋转
6.css3过渡
当从一个样式转换为另一种样式时元素添加的效果
7.css3动画
可以取代动画图片,Flash动画以及js
8.css3多列
column-count:规定元素应该被分列的列数
column-gap:列之间的间隔
column-rule:列之间的宽度、样式和颜色规则
9.css3用户界面
resize:属性规定用户是否可以自己调整元素大小
box-sizing:以确切的方式定义适应某个区域的具体内容
outline-offset:属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓
27.css选择器和其优先级
ID选择器、class选择器、标签选择器、伪元素选择器、伪类选择器
同一元素引用了多个样式时,排在后面的样式属性的优先级更高
样式选择器的类型不同时,优先级顺序为:ID选择器>class选择器>标签选择器
标签之间存在层级包含关系,后代元素会继承祖先元素的样式
后代元素定义了与祖先元素相同的样式,则祖先元素的样式属性会被覆盖
继承的样式的优先级比较低,至少比标签选择器的优先级低
带有!import标记的样式属性的优先级最高
样式表的来源不同时:内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
28.css动画
1.创建动画序列,需要使用animation属性及其子属性,该属性允许配置动画时间、时长、以及其他动画细节
但是该属性不能配置动画的实际表现,动画的实际表现由@keyframes规则实现
2.transition也可以实现动画,强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果
同一个元素通过两个不同的途径获取样式,而当第二个途径当某种改变发生时才能获取样式
这样就会产生过渡动画
29.css3对溢出的处理
text-overflow:
clip:修剪文本
ellipsis:替换为省略符号
string:用指定字符串来表示
30.三栏布局的实现方式
三列布局又分为两种:
1.两列定宽一列自适应
2.两侧定宽中间自适应
1.两列定宽一列自适应
1.使用float+margin
2.使用float+overflow
3.使用position
4.使用table
5.使用flex
6.使用grid
2.两侧定宽中间自适应
31.calc
用户动态计算长度
32.display:table 和 table的区别
相对应,diaplay:table的css声明能够让一个html元素和它的子节点像table元素一样,基于表格的css布局
能够轻松定义一个单元格的边界、背景等样式,而不会因为使用table制表标签而出现语义化问题
之所以淘汰了table系表格元素,因为使用div+css编写出来的文件比用table写出来的文件小
而且table必须在页面完全加载后才显示,div是逐行显示
33.z-index的定位方法
z-index属性设置元素的堆叠顺序,拥有更好堆叠顺序的元素会处于较低顺序元素之前
z-index可以为负,且z-index只能在定位元素上奏效
该属性设置一个定位元素沿z轴的位置
为正离用户越近,为负,离用户越远
默认值auto,堆叠顺序与父元素相等
