面試答案

時間 2019-11-08

標籤面試答案欄目快樂工作简体版

原文原文鏈接

1.css盒子模型css

2.子元素寬高固定，css水平居中html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#parent {

background: gray;

width: 400px;

height: 400px;

display: flex;

}

#children {

background: red;

width: 200px;

height:200px;

margin: auto;

}

</style>

</head>

<body>

</div>

</body>

</html>

1、子元素設置 margin-left:auto;margin-right:auto;

#children{

background: red;

width: 200px;

height:200px;

margin-left:auto;

margin-right:auto;

}

2、子元素設置 position: absolute和margin負值

#children {

background: red;

width: 200px;

height: 200px;

position: absolute;//父元素設置position：relative

left: 50%;

margin-left: -100px;

}

3、子元素設置position: absolute和margin:auto

#children {

background: red;

position: absolute;//注意父元素要加position：relative

width: 200px;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

4、子元素position: absolute和transform: translateX(-50%);

#children {

background: red;

width: 200px;

height: 200px;

position: absolute;//父元素設置position：relative

left: 50%;

transform: translateX(-50%);

}

5、父元素設置dispaly:flex

#parent {

background: gray;

width: 400px;

height: 400px;

display: flex;

justify-content: center;

align-content: center;

}

6、父元素設置dispaly:flex子元素設置margin:auto

#parent {

background: gray;

width: 400px;

height: 400px;

display: flex;

}

#children {

background: red;

width: 200px;

height:200px;

margin: auto;

}

3vue

浮動產生的緣由是由於元素使用了float：left；或者position：absolute；position：fixed。致使元素脫離標準文檔流。而向上浮動。react

爲了避免讓父元素髮生高度坍塌，佈局不混亂，須要清除浮動。瀏覽器

常見的清除浮動方法:cookie

<style>
.topDiv {
width: 500px;
border: 2px solid black;
}

.floatDiv {
width: 100p
height: 100px;
border: 2px dotted red;
color: red;
margin: 4px;
float: left;
}
.bottomDiv {
width: 500px;
height: 100px;
margin: 5px 0;
border: 2px dotted black;
}
 
.textDiv {
color: blue;
border: 2px solid blue;
}
</style>
<div class="topDiv">
 
<div class="textDiv">...省略若干文字</div>
<div class="floatDiv">float left</div>
<!-- <div style="clear: both;"></div> -->
</div>

<div class="bottomDiv">....省略若干文字.</div>

1、父元素添加僞元素
.topDiv::after {
content: "";
display: block;
clear: both;
}
2、父元素結束標籤以前插入清除浮動的塊級元素

<div class="topDiv">
<div class="textDiv">...省略若干文字</div>
<div class="floatDiv">float left</div>
<div style="clear: both;"></div>
</div>
3、父元素利用overflow非visible清除浮動
.topDiv {
width: 500px;
border: 2px solid black;
overflow: auto; //只要能構建出建構出BFC均可以

}
其餘一些方法根據實際條件環境處理（主要仍是在須要清除浮動的元素上加clear:both/left/right）：
1.若是子元素都浮動，那麼父級設置固定高度可不發生高度坍塌
2.父元素也一塊兒浮動

4.session

display的取值,常見有
 
1、none 此元素不會被顯示，而且不佔據頁面空間，這也是與visibility:hidden不一樣的地方，設置visibility:hidden的元素，不會被顯示，可是仍是會佔據原來的頁面空間。
 
2、inline 行內元素 元素會在一行內顯示，超出屏幕寬度自動換行，不能設置寬度和高度，元素的寬度和高度只能是靠元素內的內容撐開。有margin和padding，可是隻可以設置左右的值，設置上下的值是無效的。
示例元素：span,b,i,a,u,sub,sup,strong,em
 
3、block 塊級元素 會獨佔一行，若是不設置寬度，其寬度會自動填滿父元素的寬度，能夠設置寬高，即便設置了寬度，小於父元素的寬度，塊級元素也會獨佔一行。能夠設置margin和padding上下左右的四個值，margin能夠有負值，padding不容許有負值。
示例元素：div,h1-h6,ul,ol,dl,p
 
4、inline-block 行內塊元素 與行內元素同樣能夠再一行內顯示，並且能夠設置寬高，能夠設置margin和padding（上下左右均可以）。
示例元素：input,button,img
 
5、list-item 列表元素
示例元素：li
 
6、table 會做爲塊級表格來顯示(相似於<table>)，表格先後帶有換行符。
 
7、inline-table 會做爲內聯表格來顯示(相似於<table>)，表格先後沒有換行符。
 
8、flex 多欄多列布局，一個Flexbox佈局是由一個伸縮容器(flex containers)和在這個容器裏的伸縮項目(flex items)組成。
伸縮容器(flex  containers)是一個HTML標籤元素，而且「display」屬性顯式的設置了「flex」屬性值。在伸縮容器中的全部子元素都會自動變成伸縮項目(flex  items)。對於
複雜的佈局，推薦使用。