CSS 试题
(必考)说说盒模型。
HTML文档中的每个元素在渲染的时候都会被描绘成一个矩形盒子,而盒模型(box model)正是用来表示每个元素盒子所占用空间大小的模型。
一个盒模型由 content,padding,border 和 margin 组成。
可以使用 box-sizing 来决定元素宽度和高度的计算方式。
box-sizing 属性有两个常用的取值 content-box 和 border-box。
content-box: 宽度和高度是 content 的宽度和高度。
border-box: 宽度和高度是 content,padding,border 相加的宽度和高度。
css reset 和 normalize.css 有什么区别?
HTML标签在浏览器中都有默认的样式,不同的浏览器的默认样式之间存在差别。
CSS reset 会抛弃默认样式。
Normalize.css 是一种 CSS reset 的替代方案,在 HTML 元素的默认样式中提供更好的跨浏览器一致性。它保留有用的默认值。
(必考)如何居中?
水平居中:
内联:爸爸身上写 text-align: center;
块级:margin-left: auto; margin-right: auto;
垂直居中:
如果 .parent 的 height 不写,你只需要 padding: 10px 0; 就能将 .child 垂直居中;
如果 .parent 的 height 写死了,就很难把 .child 居中,以下是垂直居中的方法。
忠告:能不写 height 就千万别写 height。
https://github.com/mokunshao/vertical-centering
-
table 自带功能
-
padding 实现居中
-
100% 高度的 afrer before 加上 inline block
-
div 装成 table
-
margin-top -50%
-
translate -50%
-
absolute margin auto
-
flex
选择器优先级如何确定?
选择器越具体,优先级越高。例如 #xxx
大于 .yyy
。
同样优先级,写在后面的覆盖前面的。
给元素添加的内联样式会覆盖外部样式表的任何样式。
!important
优先级最高。
以下选择器的优先级是递增的:
-
元素,伪元素
-
类,伪类,属性
-
ID
BFC 是什么?
举例:
overflow: hidden;
清除浮动。(方方总是用 .clearfix
清除浮动,坚决不用 overflow: hidden;
清除浮动)
overflow: hidden;
取消父子 margin 合并。(方方用 padding-top: 1px;
)
如何清除浮动?
方法一:
overflow: hidden;
(方方反对)
overflow: auto;
方法二:
.clearfix
清除浮动写在爸爸身上。
.clearfix::after{
content: '';
display: block;
clear: both;
}
.clearfix{
content: '';
display: block;
clear: both;
zoom: 1; /* IE 兼容 */
}
方法三:
在父元素上加上 display: flow-root;
。