text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
- 将块级元素的中行内元素居中。作用在行内元素上,让行内元素居中。
IE 盒模型和W3C盒模型有什么区别?
- W3C标准中padding、border所占的空间不在width、height范围内,大家俗称的IE的盒模型width包括content尺寸+padding+border
*{ box-sizing: border-box;}的作用是什么?
- 使用css3新样式box-sizing
- box-sizing: content-box:w3c标准盒模型(默认)
- box-sizing: border-box:“IE盒模型”
line-height: 2和line-height: 200%有什么区别?
- line-height用于设置单行文本的行高。块级元素的paddind是使容器和内部内容有一定的间距,当我们把一段文字放到div里,希望它与容器之间有一定的距离,又希望每行字之间有距离,就需要用padding来设置内边距,同时对div的line-height属性设置一定的值。
- line-height:2的意义是将行高设置为文本本身高度的两倍
line-height:200%的意义是使其行高为其父元素中文本高度的两倍
百分比是相对而言的,是有参照对象的。可以使用height=line-height达到垂直居中的效果
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
- 既呈现inline特性(不占据一整行,宽度由内容宽度决定),又呈现block特性(可设置宽高,内外边距)
- 将元素的display设置为inline-block之后,元素和元素之间会由于空白字符或代码的换行产生缝隙,可以删去元素之间的字符或取消换行来去除缝隙,也可以用一个div包裹住这些需要处理缝隙的元素,将div元素的font-size设置为0,原理是使容器中的字符大小为0,字符相当于不存在,然后将需要展示的元素的font-size设置为非0值(指定一个合适的大小)这样就达到了去除缝隙的效果
- inline-block使元素具有了行内元素的特性,元素与元素在同一行显示时会以元素内的文本基线作为一个基准点进行对其,将想要顶端对其的元素组合成一个同一类(把它们的class值设为同一个),然后设置其vertical-align为top,就能达到顶端对其的目的。vertical-align是与行内元素和表格绑定在一起的,对块级元素不作用
CSS sprite 是什么?
- 指将不同的图片/图标合并在一张图上。使用css sprite可以减少网络请求,提高网页加载性能
让一个元素"看不见"有几种方式?有什么区别?
-
display:none
让元素消失 -
opacity:0
透明度为0 -
visibility:hidden
隐藏元素 -
background-color:rgba(0, 0, 0, 0)
针对背景色,设置其为透明
display:none对浏览器来说这个元素是不存在的,在打开页面时浏览器不会加载元素。而opacity:0和visibility:hidden相当于隐藏了元素,但还是存在于页面上,虽然不显示但浏览器会加载