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

落日映苍穹つ 2023-03-02 04:53 18阅读 0赞

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 的子元素可以设置显示。