1.简述css中的不同盒模型的特性，以及应用，介绍box-sizing属性。
- **1.在css中盒模型分为2种：**
- **1)w3c标准盒子盒模型：**
默认情况下我们使用的都是标准盒子模型，他的计算规则：
元素的实际宽度=width+左右padding+左右border
元素的实际高度=height+上下padding+上下border
width和height指的是内容区的宽度和高度，所以设置了内间距padding和边框线border之后盒子是会被撑大的。
- **2)ie怪异盒子模型**
在ie盒模型中width和height就是元素的实际宽度和高度
计算规则：
元素内容区的宽度=width-左右padding-左右border
元素内容区的高度=height-上下padding-上下border
设置padding和border会使内容区变小。
- **2.我们可以通过box-sizing属性来更改盒子模型**
- 如果box-sizing:content-box;这种模式是w3c标准盒模型
- 如果box-sizing:border-box;这种模式是ie怪异盒模型
2.假设div里面设置overflow:hidden，里面有select框，被遮住怎么办？
- 如果select框用的是原生的一般不会被遮住的。
- 如果用的是插件或者自己写的，那么可能会被遮住，他被遮住的原因就是因为父级元素div里面写了overflow:hidden，导致一旦超出这个盒子就会被隐藏掉，要想解决这个问题，那么我们可以改变这个下拉框的参照物，利用定位给他调整到指定的位置，利用z-index将层级提高，这样就不会受到父元素的限制了。
3.父元素visibility：hidden;子元素设置visibility：visible，子元素显示吗？
· 这时候子元素是显示的，原理如下：
· 当只是给父元素添加visibility：hidden，子元素会继承父元素的visibility：hidden的值，也会跟着父元素隐藏。
· 如果给父元素添加visibility：hidden;同时在给子元素添加visibility：visible，子元素是显示的。原因：添加给子元素visibility：visible是大于父元素添加的visibility：hidden的。所以优先执行子元素的visibility：visible属性。
更多关于“前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。
京公网安备 11010802030320号