ThoughtWork实验室前端暑假第一次小测验题

1.选择器权重
！important > 行内样式 > id > class / 属性选择器 > 标签选择器 > 通配符选择器！
2.display常见的值，包括的标签
display常见的值，标签
inline ：span, a, strong, em,i
block ：div, ul , li, p, form
inline-block：img
none
3.标准盒模型和IE和模型的区别
w3c标准盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。
IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border
4.position: 属性，relative与absolute的区别
属性：
position: absolute（绝对定位） | relative（相对定位） | fixed（相对浏览器窗口是固定位置） | sticky（粘性定位）
区别：
relative相对定位元素的定位是相对其正常位置。移动相对定位元素，原来空间不会改变，一般作为绝对定位元素的父元素。
absolute绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html >，absolute 定位使元素的位置与文档流无关，因此不占据空间，absolute 定位的元素和其他元素重叠。
5.水平居中/垂直居中/水平垂直居中的办法
水平居中：
*行内块状元素：text-align: center;
*行内内联元素：父元素先display:block;,然后再给父元素设置text-align: center;
*定宽度块级元素：margin: 0 auto;
*不定宽度块级元素：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;
*块级元素使用定位属性：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);
垂直居中：
*单行的行内元素： line-height=盒子高度；
*多行的行内元素：使用给父元素设置display:table-cell;和vertical-align: middle;
*块级元素使用定位：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);
水平垂直居中：
*设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
*设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;
*设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
6.Margin塌陷/合并，解决方法：
*塌陷：父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值。正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位。但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样。
*合并：
原理:两个兄弟结构的元素在垂直方向上的margin是合并的
*解决办法：触发BFC
改变父级的渲染规则有以下四种方法,给父级盒子添加
(1)position:absolute/fixed
(2)display:inline-block;
(3)float:left/right
(4)overflow:hidden
7.什么是浮动，清除浮动的方法：
*浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
清除方法：
（1）在最后一个浮动标签后，新加一个标签，给其设置clear：both；
（2）父级添加overflow属性（父元素添加overflow:hidden）；
（3）使用after伪元素清除浮动

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

8.引入外部字体的方法

@font-face{
font-family: myFont;
src: url('myFont.ttf')；
}

9.px、em、rem
*px像素。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
*em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
*rem是一个相对单位。相对的只是HTML根元素。
10.display:none和visibility:hidden的区别：
（1）display:none 不占页面空间，visiblity:hidden 占据原先页面空间。
（2）display:none 的子元素也一定无法显示，visiblity:hidden 的子元素可以设置显示。