HTML布局中css知识汇总

1.单行文本省略号 四个条件
A.给容器一个宽度 width：value；
B.强制文本在一行显示 white-space：nowrap；
C.容器文本溢出隐藏 overflow：hidden；
D.文本溢出显示省略号 text-overflow：ellipsis；
2.2.定位的参照物，区别
A.绝对定位 参照物：距离它最近具有定位属性的父包含块
B.相对定位 参照物：元素偏移前本身的位置
C.绝对定位和相对定位的区别：
1.参照物不同 绝对定位，离它最近具有定位属性的父包含块
相对定位，元素偏移前本身的位置
2.位置是否保留 绝对定位，位置不保留，会被其他元素占据
相对定位，位置保留，不会被其他元素占据
D.固定定位 参照物：屏幕窗口
E.当参照物都是屏幕窗口时，绝对定位和固定定位区别：
绝对定位会随滚动条而滚动
固定定位不会跟随滚动条滚动，位置不保留，会被其他元素占据
3.3.关于居中，屏幕窗口居中，子在父居中
屏幕窗口居中：
已知大小元素
元素{width：value；height：value；position：fixed；left：50%；top：50%；margin-left：-width/2;margin-top：-height/2;}
未知大小元素
A.元素{position：fixed；left：0；top：0；right：0；bottom：0；margin：0 auto；}
B.html,body{height:100%;} body{display：flex；justify-content：center；align-items：center；}
C.元素{position：fixed；left：50%；top：50%；transform：translate（-50%，-50%）}
子在父居中
已知子元素大小
父元素{position：relative；}
子元素{width：value；height：value；position：absolute；left：50%；top：50%；margin-left:-width/2；margin-top：height：-height/2；}
未知大小元素
A.父元素{position：relative；}
子元素{position：absolute；left：0；top：0；right：0；bottom：0；margin：0 auto；}
B.父元素{display：flex；justify-content：center；align-items：center；}

C.父元素{position：relative；}
子元素{position：absolute；left：50%；top：50%；transform：translateX(-50%) translateY(-50%);}
D.父元素{display：table-cell；text-align：center；vertical-align：middle；}

4.4.图片整合概念和优势
概念：图片整合又叫精灵图或者雪碧图或滑动门技术。是指将多张图片整合到一张图片中，使用background-position属性来实现图片不同位置的移动
优势：A.减少了对服务器的请求次数，减轻了服务器的压力
B.加快了图片的加载速度
C.减小了图片体积
D.达到了网站性能的优化
5.border设置三角形
使用border
新加元素{width：0；height：0；border：10px solid transparent; border-top-color:red;(向下的三角形)}
使用伪元素
元素：after{width：0；height：0；border：10px solid transparent; border-top-color:red;(向下的三角形)}
6.6.常见兼容问题（六个重点）
1.IE6不能识别较小高度的容器
Overflow:hidden;
2.a嵌套img时，在某些浏览器有带颜色的边框
Img{border：0；}
3.在IE6中不能识别min-height属性
Min-height :value; _height:value;
4.在IE8以下浏览器中不能识别opacity属性
Filter：alpha（opacity=数值）
5.图片默认有空隙
Img{float：left；}
6.鼠标指针bug
Cursor：pointer；

7.7.浏览器内核
Google webkit-blink
IE trident
苹果 safari webkit
Firefox gecko
Opera presto -webkit -blink
8.8.h5新增结构标签（10个）
Header
Nav
Article
Section
Aside
Footer
Hgroup
Figure
figcaption
Dialog
9.9.h5表单新增属性
1.新增type属性值
Email，url，number，range，color，search…
2.其他
提示文本 placeholder
必填项 required
加载自动聚焦到某个输入框 autofocus
取消H5的表单验证 novalidate
10.10.音频和视频格式
H5 音频 audio mp3 ogg wav
H5 视频 video mp4 ogg webm
11.11.高度塌陷（常见几种清除浮动的方法）
1.给父元素一个高度
2.给父元素overflow：hidden；
3.在浮动元素后添加一个空div div{height：0；overflow：hidden；clear：both；}
4.万能清除浮动法 父元素：after{content：“”；display：block；height：0；clear：both；overflow：hidden；visibility：hidden；}
12.12.渐进增强优雅降级概念
渐进增强：刚开始针对低版本浏览器构建页面的基本功能，然后再针对高版本浏览器进行动画交互效果的添加，达到更好的用户体验
优雅降级：刚开始就构建网站的完整功能，然后再针对各版本浏览器进行调试和修复
13.13.不同浏览器兼容内核写法
针对webkit内核 -webkit-
针对IE内核 -ms-
针对firefox 内核 -moz-
针对opera内核 -o-
14.14.标准和怪异盒模型相关知识
标准盒模型宽度=width+左右padding+左右border+左右margin
标准和模型高度=height+上下padding+上下border+上下margin
怪异盒模型宽度=width（包含左右padding和border）+左右margin
怪异盒模型高度=height（包含上下padding和border）+左右margin
设置为标准盒模型 box-sizing：content-box设置为怪异盒模型 box-sizing：border-box
15.15.css3结构伪类选择器重点部分
E：first-child
E：last-child
E：nth-child（odd）奇数个
E：nth-child（even）偶数个
E：nth-of-type(n)
16.16.两种动画的区别
Transition和animation区别：
Transition执行需要触发条件，animation页面加载完后自动运行
Transition触发一次执行一次，再次执行需再次触发，animation可以指定播放次数也可以设置无限循环播放
Transform只能设置开始和结束两个状态，animation可以设置中间的关键帧
17.17.常见移动端布局方法及特点
1.百分比布局 流式布局 不管分辨率怎么变，顶部，底部高度和位置都固定不变
2.Rem布局 等比例布局 使用rem为主要单位实现不同设备上页面等比例缩放
3.混合布局
18.18.移动端尺寸相关概念
屏幕尺寸 屏幕对角线的长度，单位为英寸
屏幕分辨率 指横纵方向上的像素点数，单位为px
Ppi屏幕像素密度
Dpr 设备像素比 dpr物理像素（屏幕分辨率）/逻辑像素（设备实际尺寸）
Vw 视图窗口的1%
Em 相对于父元素字体大小放大缩小多少倍
Rem 相对于根元素字体大小放大缩小多少倍
19.19.bfc概念，如何触发等
BFC块级格式化上下文
触发 float：left，right
Overflow：hidden，auto，scroll
Display：table-cell，table-caption，inline-block，flex
Position：absolute，fixed
作用：可以解决上下margin重叠问题
可以解决高度塌陷问题
可用于布局：与浮动元素相邻的BFC元素不能与浮动元素互相覆盖

20.20.样式表优先级
！Important>内联>内部>外部
21.21.选择器权重
内联 1000
Id选择器0100
Class选择器，伪类选择器，属性选择器 0010
标签选择器，伪元素 0001
后代选择器 所有选择器权重之和
22.22.背景图尺寸是否超出
Background-size
1.两个数值和两个百分比，不会超出，有可能变形
2.一个数值和一个百分比，有可能会超出，不会变形
3.Cover有可能会超出，不会变形
4.Contain 不会超出，不会变形
23.23.动画中，无限循环，暂停，匀速运动，保持动画结束时的状态
无限循环：infinite 暂停：paused 匀速运动: linear 保持动画结束时的状态 forwards
24.24.块元素和内联元素的特点
块元素：独占一行，自上而下排列，可以设置宽高和任意方向的margin和padding值
内联元素：逐个在一行显示，不能设置宽高和与高度有关的margin和padding值
内联块元素：逐个在一行显示，可以设置宽高
25.25.左右两边固定，中间自适应 两种方式 bfc和弹性盒
弹性盒
html，body{height：100%；}body{display：flex；}
左元素{width：value；}
中元素{width：100%；flex：1；}
右元素{width：value；}
BFC
结构

.big-box{overflow:hidden;} .left{float:left; width:value;} .right{float:right; width:value;}

26.26.css3新增特性
text-shadow，box-shadow，transform，animation，border-radius，border-image-source，background-clip，background-size，background-origin，box-sizing，transform-style，transform-origin，perspective，flex中的css属性：justify-content，align-items，align-self…
27.27.属性继承性
Font-size,color,font-family,font-style,font-weight
Visibility,cursor
List-style,list-style-type，list-style-image
Line-height,text-align，text-indent，letter-spacing，word-spacing，text-transform
28.28.外部引入的两种方式的区别 link @import
1.老祖宗区别
Link属于HTML标签，除了引入css文件还可以引入其他文件；
@import属于css范畴，只能引入css文件
2.加载顺序区别
Link引入的css文件和页面同时加载；@import引入的css文件在页面加载完成后载入
3.浏览器支持不同
Link没有兼容性问题,所有浏览器都支持
@import部分低版本浏览器不支持
4.是否支持JS
Link是html标签，支持js控制dom改变样式
@import不支持
29.29.css层叠的含义
层叠指的是样式的优先级，当发生冲突时以优先级高的为准
内联样式>内部样式>外部样式（设置了！Important的样式优先级最高）
Id选择器>类选择器>标签选择器
权重相同时取后面定义的样式