css面试题-CSS的盒子模型？

468 08-20

盒子模型有两种：IE 盒子模型(IE5.5及以下)，W3C标准盒子模型。

盒子模型(box model)：

内容(content)、填充(padding)、边框(border)、边界(margin) 。
不同：

W3C标准盒子模型的width和height，是content的宽高；

IE盒模型的width和height，是content、padding、border三部分合起来的宽高。

附加：

outline（轮廓）绘制在元素框之上，其不占据空间（不影响元素大小和定位）【所以如果轮廓线很粗，会遮住其他内容demo，不是很懂轮廓的覆盖顺序，它居然可以盖住下一个元素的内容？轮廓本身是另一次元的吗？会覆盖内容，但后一个轮廓会覆盖前一个轮廓】。

兼容性：IE8以上。

水平居中？

已知宽度, block元素：

添加margin:0 auto属性。
```
div{
	width:200px;
	margin:0 auto;
 }
 
```

已知宽度, 绝对定位的div居中：

div {
	position: absolute;
	width: 300px;
	height: 300px;
	margin: auto; /* 这一步很关键 */
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: pink;	/* 方便看效果 */
}

未知宽度，fit-content：

兼容性很差。

div {
    width: fit-content;
    margin: auto;
    background-color: pink;	/* 方便看效果 */
}

未知宽度，inline-block：

.parent {
    text-align: center;
}
div {
    display: inline-block;
    background-color: pink;	/* 方便看效果 */
}

未知宽度/已知宽度，relative：

参考：三、浮动实现水平居中的方法
- 优点：兼容性强，扩展性强；
- 缺点：实现原理较复杂。
需要两个div，外层left 50%，内层left -50%。

用float或inline-block，使容器大小为内容大小，而非默认的100%。
```
.outter {
    display: inline-block; /* or float: left; */
    position: relative;
    left: 50%;
}
.inner {
    position: relative;
    left: -50%;
}
 
```
- left的值为百分比时，为父容器的宽度的百分比(MDN)。

水平垂直居中

确定容器宽高：

相对或绝对定位, 设置外边距margin。

div {
	position: relative / fixed; /* 相对定位或绝对定位均可 */
	width:500px;
	height:300px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -250px;  /* 外边距为自身宽高的一半 */
	background-color: pink; /* 方便看效果 */
 }

不确定容器宽高：

绝对定位，利用 transform 属性。

div {
	position: absolute/fixed; /* relative会让width变成100%，
                                 所以不行
                               */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: pink; /* 方便看效果 */
}

flex 布局：

宽高可以确定，也可以不确定。

实际使用时应考虑兼容性。

.container {
	display: flex;
	align-items: center; 		/* 垂直居中 */
	justify-content: center;	/* 水平居中 */

}
.container div {
	width: 100px; /* 可省 */
	height: 100px; /* 可省 */
	background-color: pink;	/* 方便看效果 */
}

inline-block：

宽高可以确定，也可以不确定。

水平居中：text-align。

垂直居中：父元素line-height与height同值，子元素 vertical-align。

缺点：内层高度超出外层，无法垂直居中，会和父层同顶部

.container {
    height: 200px; /* 垂直居中 */
    line-height: 200px; /* 垂直居中 */
    text-align: center; /* 水平居中 */
}
.container div {
    display: inline-block; /* 核心：宽度自适应，高度可居中 */
    line-height: 20px; /* 会自动继承，必须设置不同的值来覆盖 */
    vertical-align: middle; /* 垂直居中 */
}

CSS选择符有哪些？

id选择器（ #myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
紧邻同胞选择器 h1 + p（选的是h1后紧跟的那个p）
一般同胞选择器 h1 ~ p（选择所有跟在h1后的p）[css3]
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a:hover, li:nth-child）

伪元素 & 伪类：

所有伪元素:

::after
::before
::first-letter
::first-line
::selection

伪类:

:active, :hover, :visited
:any
:any-link
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:focus-visible
:host
:host()
:host-context()
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid

通配符选择器有一个非常有意思的用法，即用它构成非子选择符，比如：
section * a {font-size:1.3em;}
 
任何是 section 孙子元素，而非子元素的 a 标签都会被选中。至于 a 的父元素是什么，没有关系。

哪些属性可以继承？

所有元素可继承
```
visibility

cursor
 
```

内联元素可继承：

letter-spacing word-spacing

white-space

line-height

color

font font-family font-size font-style font-variant font-weight

text-decoration text-transform

direction

font-variant：把段落设置为小型大写字母字体。

text-transform: 控制文本中的字母的大小写。

块状元素可继承：

//文本块中首行文本的缩进
text-indent 

text-align

列表元素可继承：

list-style
list-style-type
list-style-position
list-style-image

表格元素可继承：

/*
    1. separate	默认值。边框会被分开。
      不会忽略 border-spacing 和 empty-cells 属性。
    2. collapse	如果可能，边框会合并为一个单一的边框。
      会忽略 border-spacing 和 empty-cells 属性。
    3. inherit	规定应该从父元素继承 border-collapse 属性的值。
*/
border-collapse

不可继承的样式：

display

position left right top  bottom z-index

height min-height max-height
width min-width max-width

padding border margin

background

overflow

float clear

vertical-align

/*下面几个都没见过*/

table-layout /*表格宽度是否自适应。值：automatic，fixed，inherit*/

page-break-after page-break-before /*打印时强制分页*/

unicode-bidi /*与direction合用，控制文字方向*/

CSS优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准。

优先级为:

// 同权重下，权限由高到低: 
1.元素标签里（行内样式/内联样式）
2.写在<style>标签里（嵌入样式）
3.写在单独的 CSS 样式表中（链接样式）
4.在样式表中链接其他样式表：@import url(css/styles2.css)

// 不同权重计算
!important >  id > class > tag

// !important优先于一切
!important 比 内联优先级高

权重计算方法：

// 选择器的特殊性值表述为4个部分，用0,0,0,0表示。

行间样式的特殊性是1,0,0,0

ID选择器的特殊性值，加0,1,0,0。

类选择器、属性选择器或伪类，加0,0,1,0。

元素和伪元素，加0,0,0,1。

通配选择器 * 对特殊性没有贡献，即0,0,0,0。

!important，它没有特殊性值，但它的优先级是最高的。
为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。