源網站
01. 如何將下面的代碼修改的更有語意化？
<div>
<div>這是一個標題</div>
<div>這是一段文字</div>
<div>
<div>串列1</div>
<div>串列2</div>
</div>
</div>考察點：是否理解語意化
參考答案：
<div>
<h1>這是一個標題</h1>
<p>這是一段文字</p>
<ul>
<li>串列1</li>
<li>串列2</li>
</ul>
</div>語意化的意義：能夠增加代碼的可讀性，有利于所有引擎優化，會根據標簽權重值爬取關鍵字
02. 哪些標簽是塊標簽？有哪些是行內標簽？
考察點：是否了解塊標簽與行內標簽的概念、寫H5新增標簽會加分
參考答案：
<!-- 塊標簽 -->
div、p、h1-h6、ul、li、header、footer、nav、main、aside、section、article
<!-- 行內標簽 -->
span、a、b、i
<!-- 行內塊標簽 -->
img、input03. 行內標簽與塊標簽的區別
考察點：是否了解塊標簽與行內標簽的概念、寫H5新增標簽會加分
參考答案：
<!-- 塊標簽 -->
默認寬是父級100%、獨占一行、可設定寬高、可設定四個方向的padding/margin、可以嵌套其他標簽（p除外）
<!-- 行內標簽 -->
默認寬是內容撐開的、共享一行、不可設定寬高、只能設定左右的padding/margin，不能嵌套塊標簽
<!-- 行內塊標簽 -->
可設定寬高、共享一行、可設定四個方向的padding/margin04. 閱讀下面代碼，div的offsetWidth是多少？
<style>
#box {
width:100px;
height:100px;
padding:10px;
border: 1px solid red;
margin: 20px;
}
</style>
<div id="box"></div>考察點：盒子模型
參考答案：
/* 盒子模型寬高=width/height + padding + border */
*{
box-sizing: border-box;
}
/* 設定了這個就代表：盒子模型=width/height */05. 閱讀以下代碼，“文字”與“標題”的間距是多少
<style>
p {
font-size:16px;
line-height:1;
margin-top:10px;
margin-bottom:15px;
}
</style>
<p>文字</p>
<p></p>
<p></p>
<p></p>
<p>標題</p>考察點：margin塌陷、上下方向塌陷，誰的值大誰的
參考答案：
15px引申問題：左右的margin會產生塌陷嗎？
06. margin設定top、left、right、bottom負值后，會發生什么
考察點：margin負值問題
參考答案：
margin-top、margin-left 設定負值，自身元素會往上移，左移
margin-right 設定負值，會讓右邊元素向左移
margin-bottom 設定負值，會讓下邊元素向上移引申問題：margin負值有哪些應用？
07. 什么是BFC？如何應用
考察點：對BFC概念的考察
參考答案：
Block Format Context 塊級格式背景關系
一個獨立渲染的區域，元素內渲染不影響外邊界元素
形成BFC的條件
* float:left/right
* voerflow:hidden
* position:absolute/fixed
* display:flex/inline-block
BFC常用于清浮動08. 如何實作圣杯布局
考察點：margin負值、考察專案經驗
概念：
-
兩邊定寬，中間100%
-
中間部分優先渲染，提升用戶體驗
-
圣杯布局缺點:當中間區域寬度小于兩邊時，布局會破碎
使用display:flex;
<style>
.search {
display: flex;
height: 44px;
background-color: pink;
}
.search-left,
.search-right {
width: 40px;
height: 100%;
background-color: violet;
}
.search-middle {
flex: 1;
background-color: orange;
}
</style>
<div >
<div ></div>
<div ></div>
<div ></div>
</div>浮動布局
<style>
.search {
height: 40px;
background-color: pink;
min-width: 500px;
}
.search-left,
.search-right {
width: 40px;
height: 100%;
background-color: violet;
}
.search-left {
float: left;
}
.search-right {
float: right;
}
.search-middle {
width: 100%;
height: 100%;
padding: 0 40px;
background-color: orange;
}
</style>
<div >
<div ></div>
<div ></div>
<div ></div>
</div>09. 如何清除浮動？手寫clearfix
考察點：態度
參考答案：
overflow:hidden
display:inline-block
clear:both
clearfix:
:after{
display:block/table
content:""
clear:both
}10. div水平垂直居中？
注意：固定寬高？
參考答案：
-
margin負值+絕對定性/固定定位
-
display:flex
-
transform:translate(-50%,-50%); + 定位
-
display:table;
11、px/%/em/rem/vw/vh有什么區別？
px 像素
% 根據父級大小計算百分比
1em = 1個當前物件的font-size
1rem = 一個相對HTML根元素的font-size
vw = 可視視窗寬度的1%
vh = 可視視窗高度的1%12. visibility:hidden 與display:none 有什么區別？
visibility:hidden將元素隱藏，但是在網頁中該占的位置還是占著，
display:none將元素的顯示設為無，即在網頁中不占任何的位置，
13.給元素設定了 box-sizing：border-box; 會產生什么影響？
考察點：盒子模型
參考答案：
盒子模型是指：外邊距（margin）+ border（邊框） + 內邊距（padding）+ content（內容）
沒有設定box-sizing:border-box屬性，寬高會加上padding和border的值
加了box-sizing:border-box屬性，padding和border的值就不會在影響元素的寬高，相當于把padding和border的值都算在content里14.閱讀下面的代碼，文字應該是什么顏色？
<style>
#box #wrap {
color: green;
}
span {
color: blue;
}
</style>
<body>
<div id="box">
<p id="wrap">
<span id="text">文字</span>
</p>
</div>
</body>考察點：css選擇器的優先級
參考答案：blue
決議：
!ipmortand -> 行內樣式 -> id -> class -> 元素/標簽 -> 通配符/*
注意：繼承的樣式永遠沒有給的大15、定位
position:
fixed 固定定位，根據可視區定位
absolute 絕對定位，根據最近的有定位父級
relative 相對定位，相對自己
strtic 沒有定位
sticky 粘性定位
本文來自博客園，作者：默永，轉載請注明原文鏈接：https://www.cnblogs.com/Lmyong/p/16820495.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/519139.html
標籤：其他
下一篇：W5500使用備忘