五大浏览器
谷歌 Chrome Webkit / Blink -webkit-
苹果 Safari Webkit -webkit-
火狐 Firefox Gecko -moz-
微软 IE Trident(Jscript / TypeScript ) -ms-
欧朋 Opera Presto / Webkit -o-
四大内核:Webkit Gecko Presto Trident
基础选择器的优先级
排序的原则:选择范围越大,优先级越低
浏览器的默认样式 < 通配符(0) < 元素选择器(1) < class选择器(10) < id选择器(100) < 行间式 < !important
外边距的问题
- 外边距塌陷(父子关系塌陷)
- 现象:给子标签设置上外边距时,会和父盒子的外边距合并,最终会表现为其中较大的那个值
- 原因:父子盒子共用了一个上外边距区域
- 解决方案:
- 给父元素设置边框线或者是内边距(增加父元素的高度)
- 给父元素设置overflow:hidden属性,触发BFC规则,把父元素渲染成一个独立的区域
- 外边距塌陷(兄弟关系塌陷)
- 现象:上一个盒子的下外边距与下一个盒子的上外边距合并,最终会表现为其中较大的那个值
- 原因:上下两个兄弟关系的盒子共用了一个外边距区域
- 解决方案:
- 给每个盒子各套一个父盒子,给父盒子添加overflow:hidden属性;
- 给其中的某一个盒子设置外边距
基础选择器:通配符选择器 元素选择器 类选择器 id选择器
css三大特性
- 层叠性
-
- 多种css样式的叠加,可以通过多个选择器在同一个元素上添加多个css样式
- 样式不冲突,属性是叠加,不层叠
- 样式冲突,遵循【就近原则】
- 多种css样式的叠加,可以通过多个选择器在同一个元素上添加多个css样式
- 继承性
-
- 是指在书写css样式时,子标签会继承父标签的某些样式
- font-类开头(font-size/ font-style / font-weight / font-family)
- line-开头(line-height)
- text-类开头(text-align / text-decoration / text-indent ) color
- list- 开头
- 恰当的使用继承,可以降低css的复杂性
- 是指在书写css样式时,子标签会继承父标签的某些样式
- 优先级
-
- 定义css样式时,经常会出现两个或更多样式规则应用在同一个标签上,这时就会出现优先级的问题。一般来说,选择器的权值越大,样式的优先级越高
- /* 选择器 权值 通配符选择器 0 元素选择器 1 类选择器 10 id选择器 100 行内样式 1000*/
- 继承样式的权值 0
- 行内样式优先
- css定义了一个!important命令,具有最大优先级
- 权值相同的时候,css遵循【就近原则】
- 复合选择器的权值计算
- 基础选择器的权值的和
- 浮动的问题
-
- 当子元素设置了浮动属性之后,会脱离标准流,导致父元素的高度塌陷(高度为0),影响后续布局。
- 解决浮动的问题
-
- 给父元素设置固定高度(不灵活)
- 给父元素添加overflow:hidden;属性(除了visible值以外,其他的overflow的值都可以实现) (防止内容溢出)
- 在最后一个浮动标签的后面添加一个【空的】【块级】元素,这个标签本身不浮动,并且添加一个属性clear:both;清除浮动(对固定结构标签不友好,代码会冗余)
- 推荐的一个方法:给浮动的父元素使用【伪元素】【创建】一个空的【标签】
- 我们把伪元素创建的标签清除浮动,写成一个公共的类,哪个标签需要,就添加给某个标签
定位的使用技巧
- 定位+margin负间距
- 必须要知道盒子的宽和高
- 然后设置盒子绝对位置
- 距离页面窗口左边设置50%;上边设置50%;
- 最后通过margin左移和上移使整个盒子居中,左移和上移盒子本身宽度和高度的负一半值
BFC(块级格式上下文 Block Formatting Context)
- 什么是bfc
- FC(Formatting Context):指页面中一个渲染区域,并且拥有一套渲染规则,决定其子元素的排列方式以及与其他标签的关系和作用
- BFC(Block Formatting Context):块级格式上下文,指一个独立的块级渲染区域,只有Block-level Box参与,该区域有渲染规则来约束块级盒子的布局,且与区域外无关。
- 怎么生成BFC
- 根目录
- float的值不为none
- position的值是absolute或者是fixed
- display的值为inline-block
- overflow的属性值不为visible的时候
- BFC的特性
- 内部的标签会在垂直方向上一个接一个的放置
- 垂直方向上的距离由margin决定,属于同一个BFC的两个相邻的margin会发生重叠
- 每个标签的左外边距与包含块的左边界相接触(从左到右),即使浮动也是如此
- BFC的区域不会与float的标签区域重叠
- 计算BFC高度时,浮动的子标签也要参与计算
- BFC就是页面上一个独立的容器,容器里面的子元素不会影响到外面的标签,外面的标签也不会影响到容器里面的标签
- BFC解决的问题
- 清除浮动:计算BFC高度时,浮动子标签也参与计算
- 外边距折叠:垂直方向上的距离由margin决定
- 防止字体环绕
- 自适应两栏或三栏布局
HTML5新增的特性
- 智能表单
- 绘图画布
- 多媒体
- 地理定位
- 数据存储
- 多线程
CSS3新增了哪些模块
- 选择器
- 框模型 、 背景和边框、文本效果、2D\3D转换、动画、多列布局、用户界面
过渡动画与关键帧动画的区别
- 触发条件(过渡动画需要触发条件:鼠标悬停,js的事件;关键帧动画不需要触发条件)
- 动画的播放次数(过渡动画需要触发才能执行一次;关键帧动画可以限定次数或无数次)
- 复杂的动画可以使用关键帧动画,过渡动画是用来做简单的动画(一步到位)