css常见基础面试题

1.标准盒子+怪异盒子

标准盒子模型: 盒子宽度=width内容宽度（content）+border+padding+margin
//box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

怪异盒子模型： 盒子宽度=width内容宽度（content+padding+border）+ margin
//box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒，也就是为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

拓展提问：

1. 当width：0；padding：0 100px； border：10px solid red； margin：0 50px；的时候，这个给盒子有内容跟没内容有什么区别？在标准盒子和怪异盒子中有什么区别？

标准盒子没有内容时：

//标准盒子模型  没有内容时：盒子总宽度=width+border+padding+margin=0+10*2+100*2+50*2
css：
  #son {
    width: 0;
    padding:0 100px;
    border: 10px solid red;
    margin: 0 50px;
  }
  html：
       <div id="father">
        <div id="son"></div>
    </div>
    

标准盒子有内容时： 盒子总宽度=width+border+padding+margin=0+102+1002+50*2
其中文字竖着排列，盒子高度由文字竖着排列文字高度决定

怪异盒子有内容时： 盒子总宽度=width+margin
但实际上width属性为0，盒子总宽度 = padding+border+margin
其中文字竖着排列，盒子高度由文字竖着排列文字高度决定

css：
    <style>
    #father {
      width: auto;
      border: 1px solid black;
    }
  #son {
    box-sizing: border-box; //怪异盒子
   
    padding:0 10px;
    border: 10px solid red;
    margin: 0 50px;
  }
  </style>
  html：
<div id="fa ther">
        <div id="son">有内容很多很多很多aa很多</div>//有内容时
    </div>

2.CSS三大特性—— 继承、 优先级和层叠。

继承

• 可继承的属性：

		1、字体系列属性

        font：组合字体

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

        font-weight：设置字体的粗细

        font-size：设置字体的尺寸

        font-style：定义字体的风格

        font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为

        大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

        font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。

        font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与

        "font-size" 高度之间的比率被称为一个字体的 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-range、

        stress、richness、、azimuth、elevation

• 无继承的属性

		1、display

        2、文本属性：vertical-align：

        text-decoration：

        text-shadow：

        white-space：

        unicode-bidi：

        3、盒子模型的属性:宽度、高度、内外边距、边框等

        4、背景属性：背景图片、颜色、位置等

        5、定位属性：浮动、清除浮动、定位position等

        6、生成内容属性:content、counter-reset、counter-increment

        7、轮廓样式属性:outline-style、outline-width、outline-color、outline

        8、页面样式属性:size、page-break-before、page-break-after

继承中比较特殊的几点
1、a 标签的字体颜色不能被继承
2、h1-h6标签字体的大下也是不能被继承的
因为它们都有一个默认值

css优先级

• !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
• 同一级别中后写的会覆盖先写的样式
  

理解权重方式：
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

CSS选择器的解析原则：从右到左
1.减少了解析很多css 树的节点
2. 避免对所有元素进行遍历
3. 避免了HTML与CSS没有下载完需要进行等待的情形。（待完善理解？）
推荐：css规范

3.图片中 title 和 alt 区别？

title属性的特点：
通常当鼠标滑动到元素上的时候显示
alt 是 的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

4.src和href的区别

• href:

表示超文本引用,用来建立当前元素和文档之间的链接。常用的有：link、a。
<link href=“common.css” rel=“stylesheet”/>当浏览器解析到这一句的时候会识别该