CSS面试问题

1.什么是盒子模型？

CSS 盒子模型就是在CSS技术中使用的一种思维模型。

盒模型=content+padding+border+margin

盒模型有两种形式：标准盒子模型(content-box)【默认】，怪异盒子模型(border-box)

两种模式的区别：

先来看看如下代码：

.box{ 
 box-sizing:border-box; //没有添加时，按照标准模式计算， 添加时按照怪异模式解析 
 width:200px; 
 height:200px; 
 border:2px solid black; 
 padding:50px; 
 margin:50px; 
 } 

标准模式：盒子总(实际)宽度/高度=content+padding+border+margin

css图片1.png

怪异模式：盒子总(实际)高度/宽度=width/height+margin

css图片2.png

我的理解：

1. 由上面两个公式发现：怪异模式时，width/height=content+padding+border

2. 标准盒子模式是盒子的content的宽和高固定，但是实际的宽和高会通过padding，border,margin向外拓展空间,从而增大宽和高；而怪异盒子模型是向内拓展空间，导致宽和高固定，但是压缩了内容(content)的空间【通过padding和border】

2.display的几种取值

1. none: 元素不会显示，不占据页面空间
2. inline:行内元素
3. block:块级元素
4. inline-block:行内块级元素
5. flex:多栏多列布局

• 对上面取值的解释如下：

  • none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。

  • inline 行内元素 元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。(行内元素都是)

    示例元素：span, label, b , i(倾斜) , a , u , sub , sup ,strong ,em

  • block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。

    示例元素：div,h1-h6,ul,ol,dl,p

  • inline-block 行内块元素 与行内元素一样可以在一行内显示，而且可以设置宽高，可以设置margin和padding。

    示例元素：input,button,img

  • flex 多栏多列布局，火狐可以直接使用，谷歌和欧朋需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。

    一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。

    伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。

    实例：

    HTML代码：

    < div class='container'>

    < div class='left'>左

< div class='center'>中

< div class='right'>右