前端面试准备笔记之html和css(04)

01. box-sizing属性

告诉浏览器如何计算一个元素的总宽度和总高度

• content-box 宽度和高度分别应用到元素的内容框。
• border-box 元素设定的宽度和高度决定了元素的边框盒。
• inherit 规定从父元素继承box-sizing属性的值。

02. css中可以继承的属性

• 字体系列 font、font-family、font-weight、font-size、font-style、font-variant(设置小型大写字母的字体显示文本)、font-stretch(对当前font-family进行伸缩变形)、font-size-adjust(为元素规定一个aspect值).
• 文本系列 text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direciton、color
• 元素可见属性 visibility
• 表格布局属性 caption-side、border-collapse、border-spacing、empty-cells、table-layout
• 列表布局属性 list-style-type、list-style-image、list-style-position、list-style
• 生成内容属性 quotes
• 光标属性 cursor
• 页面样式属性 page、page-break-inside、windows、orphans
• 声音样式属性 speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch

所有元素都可以继承的属性： visibility cursor

行内元素可以继承的属性：

• 字体系列属性
• 除了text-indent、text-align之外的文本系列

块级元素可以继承的属性：

• text-indent
• text-align

03. css中无继承属性

• display
• 文本属性： vertical-align、text-decoration、text-shadow、white-space、unicode-bidi
• 盒子模型的属性: 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
• 背景属性： background、background-color、background-image、background-repeat、background-position、background-attachment
• 定位属性： float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
• 生成内容属性: content、counter-reset、counter-increment
• 轮廓样式属性: outline-style、outline-width、outline-color、outline
• 页面样式属性： size、page-break-before、page-break-after
• 声音样式属性: pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

04. css 重绘和回流

重绘: 改变色彩，不影响布局。

• color
• border-style
• border-radius
• visibility
• background
• box-shaodaw

回流: 浏览器为了重绘渲染某个部分或者全部文档而重新计算元素的位置和几何构造。

• 盒子模型相关的属性回触发重新布局
• 改变定位属性及浮动也会触发重布局
• 改变节点内部文字结构也会触发重新布局
• width
• border
• position
• float
• clear
• text-align

05. 出现浮动的原因

• 父元素没有设置高度
• 子元素设置浮动

06. 清除浮动的几种方式

• 父容器设置 overflow:hidden，问题是如果有内容超出父元素，会被隐藏
• clear 属性清除浮动

.clearfix{
    clear:both;
}

• 双伪元素清除浮动

.clearfix:after{
    content:"";
    height:0;
    line-height:0;
    display:block;
    clear:both;
    visibility:hidden;
}
.clearfix{
    zoom:1
}