CSS(二) ● 垂直居中的方法 ● 关于js动画和css3动画的差异性 ● 说一下块元素和行元素 ● 多行元素的文本省略号 ● visibility=hidden, opacity=0,display:none ● 双边距重叠问题(外边距折叠) ● position属性 比较 ● 浮动清除 ● CSS选择器有哪些,优先级呢 ● CSS3中对溢出的处理 ● float的元素,display是什么 ● calc属性 ● z-index的定位方法


(1)margin:auto法

css:
div{
 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>

定位为上下左右为0,margin:0可以实现脱离文档流的居中.

(2)margin负值法

.container{
 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/

margin-left: -240px; /*width的一半*/

}

补充:其实这里也可以将marin-top和margin-left负值替换成,transform:translateX(-50%)和transform:translateY(-50%)

(3)利用flex

将父元素设置为display:flex,并且设置align-items:center;justify-content:center;

css:
.container{
 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}

● 关于js动画和css3动画的差异性

渲染线程分为main threadcompositor thread,如果css动画只改变transform和opacity,这时整个CSS动画得以在compositor trhead完成(而js动画则会在main thread执行,然后出发compositor thread进行下一步操作),特别注意的是如果改变transform和opacity是不会layout或者paint的。
区别:

  1. 功能涵盖面,js比css大
  2. 实现/重构难度不一,CSS3比js更加简单,性能跳优方向固定
  3. 对帧速表现不好的低版本浏览器,css3可以做到自然降级
  4. css动画有天然事件支持
  5. css3有兼容性问题

● 说一下块元素和行元素

块元素:独占一行,并且有自动填满父元素,可以设置margin和pading以及高度和宽度
行元素:不会独占一行,width和height会失效,并且在垂直方向margin会失效。

● 多行元素的文本省略号

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden

● visibility=hidden, opacity=0,display:none

  1. opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的
  2. visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事
  3. display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样。

● 双边距重叠问题(外边距折叠)

多个相邻(兄弟或者父子关系)普通流的块元素垂直方向marigin会重叠

折叠的结果为:

  • 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时,折叠结果是两者的相加的和。

● position属性 比较

固定定位fixed:

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。 Fixed定位的元素和其他元素重叠。

相对定位relative:

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

绝对定位absolute:

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于。 absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。

默认定位Static:

默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)。

inherit:

规定应该从父元素继承position 属性的值。

● 浮动清除

方法一:使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" /><hr class="clear" />来进行清理。

方法二:使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。

方法三:给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。

方法四:使用邻接元素处理

什么都不做,给浮动元素后面的元素添加clear属性。

方法五:使用CSS的:after伪元素

结合:after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。

● CSS选择器有哪些,优先级呢

id 选择器,class 选择器,标签选择器,伪元素选择器,伪类选择器等
同一元素引用了多个样式时,排在后面的样式属性的优先级高;

样式选择器的类型不同时,优先级顺序为:id 选择器 > class 选择器 > 标签选择器;

标签之间存在层级包含关系时,后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式,则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低,至少比标签选择器的优先级低;

带有!important 标记的样式属性的优先级最高;

样式表的来源不同时,优先级顺序为:内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

● CSS3中对溢出的处理

text-overflow属性,

  • clip是修剪文本;
  • ellipsis为显示省略符号来表被修剪的文本;
  • string为使用给定的字符串来代表被修剪的文本。

● float的元素,display是什么

display为block

● calc属性

Calc用户动态计算长度值,任何长度值都可以使用calc()函数计算,需要注意的是,运算符前后都需要保留一个空格,例如: calc(100% - 10px);

● z-index的定位方法

z-index属性设置元素的堆叠顺序,拥有更好堆叠顺序的元素会处于较低顺序元素之前,z-index可以为负,且z-index只能在定位元素上奏效,该属性设置一个定位元素沿z轴的位置,如果为正数,离用户越近,为负数,离用户越远,它的属性值有auto,默认,堆叠顺序与父元素相等,number,inherit,从父元素继承z-index属性的值