css的面试题（css面试题一）

1.继承

css的继承：就是给父级设置一些属性    
    
    
 ，子级继承了父级的该属性  


     


     


     ，这就是我们css中的继承 
    
    
    
。官方的解释


 




 




 




，继承是一种规则   

   

   

，它允许样式不仅应用于特定的html标签元素   

     

     

     ，而且应用于其后代元素
     


     


     


 。

a.有继承的属性

1.字体系列属性

font:组合字体

font-family:规定元素的字体系列

font-weight:设置字体的粗细

font-size:设置字体的尺寸

font-style:定义字体的风格

2.文本系列属性

text-index:文本缩进

text-align:文本水平对齐

line-height:行高

word-spacing:增加或减少单词间的空白



  




  




  



，即字间隙

letter-spacing:增加或减少字符间的空白  


  


  


，即字符间距

direction:规定文本的书写方向

color:文本颜色

3.元素的可见性

visibility

4.光标属性

cursor

5.所有元素可以继承的属性

visibility/cursor

6.内联元素可以继承的属性

字体系列属性/除text-indent,text-align之外的文本系列属性

7.块级元素可以继承的属性

text-align/text-indent b.无继承的属性

1.display

2.文本属性

vertical-align:垂直文本对齐

text-shadow:文本阴影效果

white-space:空白符

3.盒子模型属性

width/height/margin/border/padding

4.背景属性

background/background-color/background-image/background-repeat/background-position

5.定位属性

float/clear/position/top/right/bottom/left/z-index/overflow

6.轮廓样式属性

outline

2.css预处理工具

css预处理器是一个能让你通过预处理器自己独特语法生成css的程序

sass 兼容css

扩展名.scss/.sass less

兼容css

扩展名.less stylus

兼容css

扩展名.styl

采用缩进语法

3.行内元素/块级元素

块级元素

1.总是从新的一行开始    
     
     
    ，即各个块级元素独占一行




   




   




   


，默认垂直向下排列

2.高度 



 



 



，宽度                  ，margin




    




    




    

，padding都是可控的















，设置有效

3.宽度没有设置时                 ，默认为100%

4.块级元素中可以包含块级元素和行内元素 行内元素

1.和其它元素在一行 



     



     



     
，即行内元素和其它元素都会在一条水平线上排列

2.高度
















，宽度是不可控    
    
    
 ，设置无效  


     


     


     ，由内容决定

3.根据标签语义化的理念


 




 




 




，行内元素最好只包含行内元素   

   

   

，不包含块级元素 转换

1.display:inline转换为行内元素

2.display:block转换为块状元素

3.display:inline-block转换为行内块状元素 块状元素可以继承的属性

Text-indent

Text-align

Visibility

Cursor

4.盒模型

css盒模型本质是一个盒子   

     

     

     ，封装html元素



  




  




  



，包括margin/border/padding/content

标准模型

width=content ie模型

width=border+padding+content 自定义

Box-sizing:content-box（默认模式）

Box-sizing:border-box（ie模式） js获取盒模型宽高

dom.style.width/height 获取行内样式的宽高

window.getComputedStyle(dom).width/height ie模式下

Dom.getBoundingClientRect().width/height 渲染后的宽高

dom.offsetWidth/offsetHeight 内容+内边距+边框不包括外边距

5.bfc块级格式化上下文

概念：bfc是css布局的一个概念  


  


  


，是一个独立的渲染区域    
     
     
    ，是一个环境




   




   




   


，里面的元素不会影响外部的元素 




 




 




 。 问题：父子元素和兄弟元素边距重叠 



 



 



，重叠原则取最大值                  ，空元素的边距重叠取margin和padding的最大值 css创建bfc




    




    




    

，脱离文档流

1.html元素

2.浮动

3.绝对定位

4.display:inline-block

5.表格元素

6.弹性盒子

7.overflow:hidden 使用场景

1.自适应布局















，避免多列布局由于宽度计算四舍五入换行

2.避免元素被浮动元素覆盖

3.父元素高度包含子浮动元素                 ，清除内部浮动

4.去除边距重叠 



     



     



     
，分别属于不同的bfc

6.ifc行内格式化上下文

1.内部的box会在水平方向
















，一个接一个的放置

2.这些box的水平方向的margin/border/padding都有效

3.对齐方式line-height/vertical-align