生活随笔
收集整理的這篇文章主要介紹了
（三）CSS【不多说了，前端面试 CSS 是必考知识，不过关直接回家】
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
CSS
- HTML
- 如何理解HTML語義化？
- 默認(rèn)情況下，哪些HTML標(biāo)簽是塊級元素、哪些是內(nèi)聯(lián)元素？
- CSS
- 布局
- 盒子模型的寬度如何計算？
- margin縱向重疊問題
- margin負(fù)值的問題
- BFC理解和應(yīng)用
- 形成BFC的常見條件
- 形成BFC的常見應(yīng)用
- float布局的問題，以及clearfix
- 如何實現(xiàn)圣杯布局和雙飛翼布局
- 圣杯布局和雙飛翼布局的目的
- 圣杯布局和雙飛翼布局的技術(shù)總結(jié)
- 手寫clearfix
- flex實現(xiàn)一個三點的色子
- 定位
- absolute和relative分別根據(jù)什么定位？
- 居中對齊有哪些實現(xiàn)方式？
- 圖文樣式
- 響應(yīng)式
- rem是什么？
- 如何實現(xiàn)響應(yīng)式？
- CSS3
HTML
如何理解HTML語義化？
- 讓人更容易讀懂（增加代碼可讀性）
- 讓搜索引擎更容易讀懂（SEO）
默認(rèn)情況下，哪些HTML標(biāo)簽是塊級元素、哪些是內(nèi)聯(lián)元素？
- display:block/table：有div h1 h2 table ul ol p 等
- display:inline/inline-block：有span img input button 等
CSS
布局
盒子模型的寬度如何計算？
offsetWidth = （內(nèi)容寬度 + 內(nèi)邊距 + 邊框），無外邊距
<!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
) console
.log(document
.getElementById('div2').offsetWidth
) </script
>
</body
>
</html
>
npm install
-p http
-server
http
-server
-p
8881
margin縱向重疊問題
相鄰元素的margin
-top和margin
-bottom會發(fā)生重疊
空白內(nèi)容的
<p
></p
>也會重疊
<!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負(fù)值的問題
對margin的top left right bottom設(shè)置負(fù)值，有何效果？
- margin-top和margin-bottom，元素向上、向左移動
- margin-right負(fù)值，右側(cè)元素左移，自身不受影響
- margin-bottom負(fù)值，下方元素上移，自身不受影響
<!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 負(fù)值
</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 的負(fù)數(shù)情況
</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 的負(fù)數(shù)情況
</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理解和應(yīng)用
什么是BFC？如何應(yīng)用？
- Block format context，塊級格式化上下文
- 一塊獨立渲染區(qū)域，內(nèi)部元素的渲染不會影響邊界以外的元素
形成BFC的常見條件
- float不是none
- position不是absolute或fixed
- overflow不是visible
- display是flex inline-block等
形成BFC的常見應(yīng)用
<!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
; }</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
如何實現(xiàn)圣杯布局和雙飛翼布局
圣杯布局和雙飛翼布局的目的
- 三欄布局，中間一欄最先加載和渲染（內(nèi)容最重要）
- 兩側(cè)內(nèi)容固定，中間內(nèi)容隨著寬度自適應(yīng)
- 一般用于PC網(wǎng)頁
圣杯布局和雙飛翼布局的技術(shù)總結(jié)
- 使用float布局
- 兩側(cè)使用margin負(fù)值，以便和中間內(nèi)容橫向重疊
- 防止中間內(nèi)容被兩側(cè)覆蓋，一個用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
: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
:after
{content
: '';display
: table
;clear
: both
;
}
.clearfix
{*zoom
:1;
}
flex實現(xiàn)一個三點的色子
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分別根據(jù)什么定位？
- relative根據(jù)自身定位
- absolute依據(jù)最近一層的定位元素定位
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
>
居中對齊有哪些實現(xiàn)方式？
水平居中
- inline元素：text-align:center
- block元素：margin:auto
- absolute元素：left:50% + margin-left負(fù)值
<!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
;}.item
{background
-color
: #ccc
;}.container
-1 {text
-align
: center
;}.container
-2 .item
{width
: 500px
;margin
: auto
;}.container
-3 {position
: relative
;height
: 100px
;}.container
-3 .item
{width
: 300px
;height
: 100px
;position
: absolute
;left
: 50%;margin
-left
: -150px
;}</style
>
</head
>
<body
><div
class="container container-1"><span
>一段文字
</span
></div
><div
class="container container-2"><div
class="item">this is block item
</div
></div
><div
class="container container-3"><div
class="item">this is absolute item
</div
></div
>
</body
>
</html
>
垂直居中
- inline元素：line-height的值等于height值
- absolute元素：ltop:50% + margin-top負(fù)值
- 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的繼承問題
- 寫具體數(shù)值，如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%;}p
{background
-color
: #ccc
;font
-size
: 16px
;}</style
>
</head
>
<body
><p
>這是一行文字
</p
>
</body
>
</html
>
響應(yīng)式
rem是什么？
rem是一個長度單位
- px，絕對長度單位，最常用
- em，相對長度單位，相對于父元素，不常用
- rem，相對長度單位，相對于根元素，常用于響應(yīng)式布局
<!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
>
如何實現(xiàn)響應(yīng)式？
- media-query，根據(jù)不同的屏幕寬度設(shè)置根元素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
>響應(yīng)式布局
</title
><style type
="text/css">@media only screen
and (max
-width
: 374px
) {html
{font
-size
: 86px
;}}@media only screen
and (min
-width
: 375px
) and (max
-width
: 413px
) {html
{font
-size
: 100px
;}}@media only screen
and (min
-width
: 414px
) {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
>
window
.screen
.height
window
.innerHeight
document
.body
.clientHeight
vh 網(wǎng)頁視口高度的
1/100
vw 網(wǎng)頁視口寬度的
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
></script
>
</body
>
</html
>
CSS3
關(guān)于CSS3動畫
總結(jié)
以上是生活随笔為你收集整理的（三）CSS【不多说了，前端面试 CSS 是必考知识，不过关直接回家】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
