前端面试(二)— css篇
(1)css 盒模型
盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟悉的标准盒子模型:
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
IE 盒子模型
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。
CSS3新增box-sizing属性
box-sizing属性,box-sizing:content-box;表示标准的盒子模型,
box-sizing:border-box表示IE盒子模型。
默认的情况下是标准盒子模型。
(2)margin属性与padding属性的作用范围以及条件
1.当一个盒子没有宽度时,margin属性是没有用处的
2.margin-top边距合并问题出现:即想让子元素的顶部距离父元素50px,但是事实上子元素顶部紧贴父元素,并且margin-top好像转移给了父元素,让父元素产生上外边距,相信大家也遇到过类似的情况,出现的条件为:
(1) 父元素的上边距与子元素的上边距之间没有border。
(2) 父元素的上边距与子元素的上边距之间没有非空内容。(3) 父元素的上边距与子元素的上边距之间没有padding。
(4) 父元素和子元素中没有设置定位属性(除static和relative)、overflow(除visible)和display:inline-block等。
(5) 父元素或者子元素都没有浮动。
注意:以上条件必须都要满足才可以。那么解决此中情况的方式也很简单,只要破坏上面的一种情况就可以了。
3.行内元素的不完全适用性
(1) 行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的。
(2) 行内元素的padding-left、padding-right、margin-left、margin-bottom属性设置是有效的。
(3) 行内元素的padding-top、padding-bottom从显示的效果上是增加的,但其实设置的是无效的。并不会对他周围的元素产生任何影响。
注:只要将inline元素设置为inline-block padding与margin就可适用了。
(3) css可以和不可以继承的属性
1.无继承性的属性
1.display:规定元素应该生成的框的类型
2.文本属性:vertical-align:垂直文本对齐;text-decoration:规定添加到文本的装饰;text-shadow:文本阴影效果;white-space:空白符的处理;
3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景属性:background、background-color、background-image、background-repeat、background-position、background-attach ment
5、定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成内容属性:content、counter-reset、counter-increment
7、轮廓样式属性:outline-style、outline-width、outline-color、outline
8、页面样式属性:size、page-break-before、page-break-after
9、声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
2.有继承性的属性
1、字体系列属性:font:组合字体;font-family:规定元素的字体系列;font-weight:设置字体的粗细;font-size:设置字体的尺寸;font-sty le:定义字体的风格;font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体 的字母与其余文本相比,其字体尺寸更小。font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。font-size-adjust:为 某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
2、文本系列属性:text-indent:文本缩进;text-align:文本水平对齐;line-height:行高;word-spacing:增加或减少单词间的空白(即字间 隔);letter-spacing:增加或减少字符间的空白(字符间距);text-transform:控制文本大小写;direction:规定文本的书写方向;color:文 本颜色
3、元素可见性:visibility
4、表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性:list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性:quotes
7、光标属性:cursor
8、页面样式属性:page、page-break-inside、windows、orphans
9、声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-r ange、stress、richness、、azimuth、elevation
(4) css权重
1. 行内样式,指的是html文档中定义的style
2. ID选择器
3. 类,属性选择器和伪类选择器
4. 元素和伪元素
注:权重记忆口诀。从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1。