CSS的常见样式序(1)

96
熊蛋子17
2017.11.12 21:17* 字数 996

1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

  • text-align作用在块级元素上,可以使块内元素的文字、图片、和行内元素水平居中。但不能使块级元素居中。注意text-align是可继承元素,所以此块级元素的子元素如果是块级元素会继承它的text-align属性,使子块级元素内的文字或图片或内联元素居中,但是子块级元素不会居中。
  • 作用在行内元素以及inline-block元素上
  • 能让行内内容水平居中

2. IE 盒模型和W3C盒模型有什么区别?

盒模型在初学css的时候就会接触到,其实很容易理解,这里也不多废话,但是实际上在布局的时候还是会出现很多问题。对于盒模型的认识不能只停留在知道一个盒模型由哪些部分构成,也要更多的了解如何在不同情况下利用盒模型的特点进行布局。
其实IE的盒模型问题只会出现在IE5.5及其更早的版本中,因为在IE6及更新的版本在标准兼容模式下使用的是W3C的盒模型标准,但事实上不仅IE5.5,连IE6的使用率也很少了,这里对他们进行讨论只是为了更深刻的理解盒模型。
下面是两个盒模型的图


W3C盒模型&IE盒模型图

通过图我们可以知道区别只要是一下两点:

  • IE盒模型:如果设置一个元素的width,那么这个宽度实际上=padding+border+content,height同理
  • W3C盒模型:如果给一个元素设置width,那么这个宽度只是用来描述content的宽度,padding和border并不包含在所设置的width内,height同理
    故此我们可以得到的结论是:

IE中的box换行了,这就是因为IE中的width是包括了padding的,而W3C也就是我们平常使用的盒模型不包括,不管padding加多少内容区域的宽度不会改变,这也十分合理.

避免触发IE盒模型的方法是使用<!DOCTYPE html>声明,告诉IE采用W3C盒子模型即可。

3. { box-sizing: border-box;}的作用是什么?

  • box-sizing: border-box; IE盒模型

  • box-sizing: content-box; 设置使用w3c盒模型

    4. line-height: 2和line-height: 200%有什么区别?

  • line-height: 2; 是将行高设置为元素字体高度的2倍

  • line-height: 200%; 是将行高设置为父元素字体高度的2倍

5. inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

  • 既呈现 inline 的特性,又呈现 block 特性,不占据一整行,占用位置由宽度决定,可以设置宽高,可以设置内外边框。

  • 可以把两个元素挨在一起写,或者把紧挨缝隙的元素放在一个父元素里,再将父元素的font-size设置为0,就可以消除缝隙。

  • 设置 vertical-align 为 top,就可以顶端对齐。

6. CSS sprite 是什么?

指将不同的图片、图标合并到一张图上,以减少页面的网络请求。

7. 让一个元素"看不见"有几种方式?有什么区别?

  • display: none 元素消失,不占用位置
  • visibility: hidden 隐藏,但对浏览器来说还在,占用位置
  • opacity: 0 元素透明,看不见但还是占用位置
  • background-color: rgba(0, 0, 0, 0) 背景透明,只针对背景

代码任务

任务一
任务二

日记本
Gupao