當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

（三）CSS【不多说了，前端面试 CSS 是必考知识，不过关直接回家】

發布時間：2023/12/31 HTML 42 豆豆

生活随笔收集整理的這篇文章主要介紹了（三）CSS【不多说了，前端面试 CSS 是必考知识，不过关直接回家】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS

HTML
- 如何理解HTML語義化？
- 默認情況下，哪些HTML標簽是塊級元素、哪些是內聯元素？
CSS
- 布局
- - 盒子模型的寬度如何計算？
  - margin縱向重疊問題
  - margin負值的問題
  - BFC理解和應用
  - - 形成BFC的常見條件
    - 形成BFC的常見應用
  - float布局的問題，以及clearfix
  - - 如何實現圣杯布局和雙飛翼布局
    - - 圣杯布局和雙飛翼布局的目的
      - 圣杯布局和雙飛翼布局的技術總結
    - 手寫clearfix
    - flex實現一個三點的色子
  - 定位
  - absolute和relative分別根據什么定位？
  - 居中對齊有哪些實現方式？
  - - 水平居中
    - 垂直居中
- 圖文樣式
- - line-height的繼承問題
- 響應式
- - rem是什么？
  - 如何實現響應式？
- CSS3
- - 關于CSS3動畫

HTML

如何理解HTML語義化？

讓人更容易讀懂（增加代碼可讀性）
讓搜索引擎更容易讀懂（SEO）

默認情況下，哪些HTML標簽是塊級元素、哪些是內聯元素？

display:block/table：有div h1 h2 table ul ol p 等
display:inline/inline-block：有span img input button 等

CSS

布局

盒子模型的寬度如何計算？

offsetWidth = （內容寬度 + 內邊距 + 邊框），無外邊距

//div1的offsetWidth是多大？ <!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒模型</title><style type="text/css">#div1 {width: 100px;padding: 10px;border: 1px solid #ccc;margin: 10px;}#div2 {width: 100px;padding: 10px;border: 1px solid #ccc;margin: 10px;box-sizing: border-box;}</style> </head> <body><div id="div1">this is div1</div><div id="div2">this is div2</div><script>console.log(document.getElementById('div1').offsetWidth) //122console.log(document.getElementById('div2').offsetWidth) //100</script> </body> </html> // 啟動服務訪問頁面 npm install -p http-server http-server -p 8881

margin縱向重疊問題

相鄰元素的margin-top和margin-bottom會發生重疊空白內容的<p></p>也會重疊 //AAA和BBB之間的距離是多少？15px <!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>margin 縱向重疊</title><style type="text/css">p {font-size: 16px;line-height: 1;margin-top: 10px;margin-bottom: 15px;}</style> </head> <body><p>AAA</p><p></p><p></p><p></p><p>BBB</p></body> </html>

margin負值的問題

對margin的top left right bottom設置負值，有何效果？

margin-top和margin-bottom，元素向上、向左移動
margin-right負值，右側元素左移，自身不受影響
margin-bottom負值，下方元素上移，自身不受影響

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>margin 負值</title><style type="text/css">body {margin: 20px;}.float-left {float: left;}.clearfix:after {content: '';display: table;clear: both;}.container {border: 1px solid #ccc;padding: 10px;}.container .item {width: 100px;height: 100px;}.container .border-blue {border: 1px solid blue;}.container .border-red {border: 1px solid red;}</style> </head> <body><p>用于測試 margin top bottom 的負數情況</p><div class="container"><div class="item border-blue">this is item 1</div><div class="item border-red">this is item 2</div></div><p>用于測試 margin left right 的負數情況</p><div class="container clearfix"><div class="item border-blue float-left">this is item 3</div><div class="item border-red float-left">this is item 4</div></div></body> </html>

BFC理解和應用

什么是BFC？如何應用？

Block format context，塊級格式化上下文
一塊獨立渲染區域，內部元素的渲染不會影響邊界以外的元素

形成BFC的常見條件

float不是none
position不是absolute或fixed
overflow不是visible
display是flex inline-block等

形成BFC的常見應用

清除浮動

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style type="text/css">.container {background-color: #f1f1f1;}.left {float: left;}.bfc {overflow: hidden; /* 觸發元素 BFC */}</style> </head> <body><div class="container bfc"><img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/><p class="bfc">某一段文字……</p></div> </body> </html>

float布局的問題，以及clearfix

如何實現圣杯布局和雙飛翼布局

圣杯布局和雙飛翼布局的目的

三欄布局，中間一欄最先加載和渲染（內容最重要）
兩側內容固定，中間內容隨著寬度自適應
一般用于PC網頁

圣杯布局和雙飛翼布局的技術總結

使用float布局
兩側使用margin負值，以便和中間內容橫向重疊
防止中間內容被兩側覆蓋，一個用padding一個用margin

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圣杯布局</title><style type="text/css">body {min-width: 550px;}#header {text-align: center;background-color: #f1f1f1;}#container {padding-left: 200px;padding-right: 150px;}#container .column {float: left;}#center {background-color: #ccc;width: 100%;}#left {position: relative;background-color: yellow;width: 200px;margin-left: -100%;right: 200px;}#right {background-color: red;width: 150px;margin-right: -150px;}#footer {text-align: center;background-color: #f1f1f1;}/* 手寫 clearfix */.clearfix:after {content: '';display: table;clear: both;}</style> </head> <body><div id="header">this is header</div><div id="container" class="clearfix"><div id="center" class="column">this is center</div><div id="left" class="column">this is left</div><div id="right" class="column">this is right</div></div><div id="footer">this is footer</div> </body> </html> <!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>雙飛翼布局</title><style type="text/css">body {min-width: 550px;}.col {float: left;}#main {width: 100%;height: 200px;background-color: #ccc;}#main-wrap {margin: 0 190px 0 190px;}#left {width: 190px;height: 200px;background-color: #0000FF;margin-left: -100%;}#right {width: 190px;height: 200px;background-color: #FF0000;margin-left: -190px;}</style> </head> <body><div id="main" class="col"><div id="main-wrap">this is main</div></div><div id="left" class="col">this is left</div><div id="right" class="col">this is right</div> </body> </html>

手寫clearfix

/* 手寫 clearfix */ .clearfix:after {content: '';display: table;clear: both; } .clearfix {*zoom:1;/* 兼容IE低版本 */ }

flex實現一個三點的色子

//常見語法回顧 flex-direction justify-content align-items flex-wrap align-self <!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>flex 畫骰子</title><style type="text/css">.box {width: 200px;height: 200px;border: 2px solid #ccc;border-radius: 10px;padding: 20px;display: flex;justify-content: space-between;}.item {display: block;width: 40px;height: 40px;border-radius: 50%;background-color: #666;}.item:nth-child(2) {align-self: center;}.item:nth-child(3) {align-self: flex-end;}</style> </head> <body><div class="box"><span class="item"></span><span class="item"></span><span class="item"></span></div> </body> </html>

定位

absolute和relative分別根據什么定位？

relative根據自身定位
absolute依據最近一層的定位元素定位

//定位元素 absolute relative fixed body <!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>absote relative 定位問題</title><style type="text/css">body {margin: 20px;}.relative {position: relative;width: 400px;height: 200px;border: 1px solid #ccc;top: 20px;left: 50px;}.absolute {position: absolute;width: 200px;height: 100px;border: 1px solid blue;top: 20px;left: 50px;}</style> </head> <body><p>absolute 和 relative 定位問題</p><div class="relative"><div class="absolute">this is absolute</div></div></body> </html>

居中對齊有哪些實現方式？

水平居中

inline元素：text-align:center
block元素：margin:auto
absolute元素：left:50% + margin-left負值

垂直居中

inline元素：line-height的值等于height值
absolute元素：ltop:50% + margin-top負值
absolute元素：transform(-50%,-50%)
absolute元素：top,left,bottom,right = 0 + margin:auto

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>垂直對齊</title><style type="text/css">.container {border: 1px solid #ccc;margin: 10px;padding: 10px;height: 200px;}.item {background-color: #ccc;}.container-1{text-align: center;line-height: 200px;height: 200px;}.container-2 {position: relative;}.container-2 .item {width: 300px;height: 100px;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -50px;}.container-3 {position: relative;}.container-3 .item {width: 200px;height: 80px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%)}.container-4 {position: relative;}.container-4 .item {width: 100px;height: 50px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}</style> </head> <body><div class="container container-1"><span>一段文字</span></div><div class="container container-2"><div class="item">this is item</div></div><div class="container container-3"><div class="item">this is item</div></div><div class="container container-4"><div class="item">this is item</div></div> </body> </html>

圖文樣式

line-height的繼承問題

寫具體數值，如30px，則繼承該值（比較好理解）
寫比例，如2/1.5，則繼承該比例（比較好理解）
寫百分比，如200%，則繼承計算出來的值（考點）

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>line-height 繼承問題</title><style type="text/css">body {font-size: 20px;line-height: 200%;/* 30px，1.5,200% */}p {background-color: #ccc;font-size: 16px;/* p標簽的行高是多少 *//* 30px，24px(1.5 * 16),40px(20 * 200%) */}</style> </head> <body><p>這是一行文字</p> </body> </html>

響應式

rem是什么？

rem是一個長度單位

px，絕對長度單位，最常用
em，相對長度單位，相對于父元素，不常用
rem，相對長度單位，相對于根元素，常用于響應式布局

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>rem 演示</title><style type="text/css">html {font-size: 100px;}div {background-color: #ccc;margin-top: 10px;font-size: 0.16rem;}</style> </head> <body><p style="font-size: 0.1rem">rem 1</p><p style="font-size: 0.2rem">rem 1</p><p style="font-size: 0.3rem">rem 1</p><div style="width: 1rem;">this is div1</div><div style="width: 2rem;">this is div2</div><div style="width: 3rem;">this is div3</div></body> </html>

如何實現響應式？

media-query，根據不同的屏幕寬度設置根元素font-size
rem，基于根元素的相對單位

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>響應式布局</title><style type="text/css">@media only screen and (max-width: 374px) {/* iphone5 或者更小的尺寸，以 iphone5 的寬度（320px）比例設置 font-size */html {font-size: 86px;}}@media only screen and (min-width: 375px) and (max-width: 413px) {/* iphone6/7/8 和 iphone x */html {font-size: 100px;}}@media only screen and (min-width: 414px) {/* iphone6p 或者更大的尺寸，以 iphone6p 的寬度（414px）比例設置 font-size */html {font-size: 110px;}}body {font-size: 0.16rem;}#div1 {width: 1rem;background-color: #ccc;}</style> </head> <body><div id="div1">this is div</div> </body> </html>

rem的弊端：“階梯”性
網頁視口尺寸

window.screen.height //屏幕高度 window.innerHeight //網頁視口高度 document.body.clientHeight //body高度

vw/vh

vh 網頁視口高度的1/100 vw 網頁視口寬度的1/100 vmax取兩者最大值，vmin取兩者最小值 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vw vh test</title><style>body {margin: 0;padding: 0;}#container {background-color: red;width: 10vw;height: 10vh;}</style> </head> <body><p>vw vh 測試</p><div id="container"></div><script>// window.innerHeight === 100vh// window.innerWidth === 100vw</script> </body> </html>

CSS3

關于CSS3動畫

總結

以上是生活随笔為你收集整理的（三）CSS【不多说了，前端面试 CSS 是必考知识，不过关直接回家】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：政协委员：国内超80%的家长认可防沉迷工
下一篇：微软推出语音合成模型 NaturalSp