重绘(Repaint):重绘是当节点需要更改外观而不会影响布局的,比如改变background-color就叫称为重绘
回流(Reflow):回流是布局或者几何属性需要改变就称为回流。
回流必定会发生重绘,重绘不一定会引发回流
。回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列回流。
导致回流的操作:
改变盒子大小、改变字体、添加或删除样式、字改变、定位或者浮动、盒模型添加删除标签、获取盒子宽高。
减少回流的操作:
使用css3的transform、减少display的使用、Css选择符从右往左匹配查找,避免节点层级过多
优雅降级: 是指一开始就构建完整的 功能,然后再针对低版本浏览器进行兼容
**渐进增强:**是指针对低版本浏览器构建页面 ,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进并追加功能 ,以达到更好的用户体验
两者的区别如下
( 1 )优雅降级从复杂的现状开始,并试图减少用户体验的供给。
( 2)渐进增强则从一个非常基础并且能够起作用的版本开始,并不断扩元,以适应未来环境的需要.
( 3 )降级(功能衰减)意味着往回看,而渐进增强则意味着朝前看 同时保证其根基处于安全地带。
在标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。
BFC(格式化上下文),一个创建了新的BFC的盒子是独立布局的,盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向会发生margin重叠的问题。BFC是值浏览器中创建了一个独立的渲染区域,该区域内所有元素的布局不会影响到区域外元素的布局,这个渲染区域只对块级元素起作用
IFC( Inline Formatting Context )指内联格式化上下文 IFC 的线柜( line box ) 高度由其包含行内元素中最高的实际高度计算而来(不受竖直方向的 padding margin的影响) IFC 中的线框一般左右都贴紧整个 IFC ,但是会被 float 元素扰乱 同一个 IFC
的多个线柜高度不同 IFC 中是不可能有块级元素的,当插入块级元素时(如在 中插入div ,会产生两个匿名块,两者 div 分隔开,即产生两个 IFC 每个 IFC 对外表现为块级元素,与 div 垂直排列。
**GFC **( GridLayout Formatting Context )指网格布局格式化上下文,即当把一个元素的 display 值设为 grid 的时候 ,此元素将会获得 个独立的渲染区域 可以通过在网格容器( grid container )上定义网格定义行( grid definition row )和网格定义列( grid
definition column ),在网格项目( grid item 定义网格行( grid row )和网格列( grid column )来为每一个网格项目定义位置和空间。
**FFC **(Flex Formatting Context )指自适应格式化上下文,即 sp la 值为 flex in line-flex 的元素将会生成自适应容器。伸缩容器中的每 个子元素都是 个伸缩单元伸缩单元可以是任意数量的 伸缩羊元内和伸缩容器外的 切元素都不受影响 简单地说, exbox 定义了伸 缩容器 内伸缩单元的布局。
① 利用定位子绝父相定位的方式来实现
#container{
width:500px;
height:500px;
position:relative;
}
#center{
width:100px;
hight:100px;
position: absolute;
top: 50%;
left: 50%;
margin-top:-50px;
margin-left:-50px;
}
② 利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
#container{
position:relative;
}
#center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
③ ** flex**
#container{
display:flex;
justify-content:center;
align-items: center;
}
#center{
}
为什么要清除浮动,因为浮动的盒子脱离标准流,如果父盒子没有设置高度的话,下面的盒子就会撑上来。
1.额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)
2.父级添加overflow属性(父元素添加overflow:hidden)(不推荐)
3.使用after伪元素清除浮动(推荐使用)
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
4.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
在谷歌下css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px。
解决办法:
(1)可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决,只要加了-webkit-text-size
-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器
已经不再支持-webkit-text-size-adjust样式,所以要使用时候慎用。
(2)还可以使用css3的transform缩放属性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.
75);收缩的是整个元素的大小,这时候,如果是内联元素,必须要将内联元素转换成块元素,可以使用display:block/
inline-block/…;
(3)使用图片:如果是内容固定不变情况下,使用将小于12px文字内容切出做图片,这样不影响兼容也不影响美观。
webkit内核的私有属性:** -webkit-font-smoothing**,用于字体抗锯齿,使用后字体看起来会更清晰舒服。
在MacOS测试环境下面设置**-webkit-font-smoothing:antialiased;但是这个属性仅仅是面向MacOS**,其他操作系统设置后无效。
在css3中使用单冒号来表示伪类,用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法,在一些浏览器中也可以使用单冒号来表示伪元素。伪类一般匹配的是元素的一些特殊状态,如hover、link等,而伪元素一般匹配的特殊的位置,比如after、before等。
伪类用于当已有的元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。
伪元素用于创建一些不在文档树中的元素,并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说,我们可以通过::before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。
/*单行文本溢出*/
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*多行文本溢出*/
p {
position: relative;
line-height: 1.5em;
/*高度为需要显示的行数*行高,比如这里我们显示两行,则为3*/
height: 3em;
overflow: hidden;
}
p:after {
content: '...';
position: absolute;
bottom: 0;
right: 0;
background-color: #fff;
}