css常见基础面试题

1.标准盒子+怪异盒子

标准盒子模型:		盒子宽度=width内容宽度（content）+border+padding+margin
怪异盒子模型：		盒子宽度=width内容宽度（content+padding+border）+ margin

拓展提问：

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 区别？

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

4.src和href的区别

• href:

表示超文本引用,用来建立当前元素和文档之间的链接。常用的有：link、a。
<link href=“common.css” rel=“stylesheet”/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

• src:

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
<script src=“js.js”>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部

5.link 与 @import 的区别

功能范围不同：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

加载顺序不同：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

兼容性：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持，@import只有在IE5以上的才能识别。

控制样式时的差别：link支持使用Javascript控制DOM去改变样式；而@import不支持。
使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”

适用范围不同： @import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。

6.rgba()和opacity的透明效果有什么不同？

• rgba() 和 opacity 都能实现透明效果.
• 但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度.
• 而rgba() 只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

7.display:none和visibility:hidden两者的区别

1.visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

4.display:none是会有回流，但是visibility: hidden; 是不会有回流的

5.visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

8.css实现一个正方形、三角形、扇形

参考：css3实现三角形、扇形和特殊的形状等

9.获取盒子宽高的方式有哪六种？

方式一：dom.style.width/height （仅取出内联样式的宽高，有单位）
方式二：dom.clientWidth/Height（包括元素宽度、内边距，不包括边框和外边距）
方式三：dom.scrollWidth/Height（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距）
方式四：dom.offsetWidth/Height（包括元素宽度、内边距和边框，不包括外边距）
方式五：window.getComputedStyle(dom).width/height
方式六：dom.gitBoundingClientRect().width/height