html
盒模型:
網頁上每一個元素都可以看做一個盒子,他從內到外包括content,padding,border,margin.
舉例:
box-sizing:content-box
: width屬性 === 內容區寬度。當border和padding變寬的時候,內容區寬度不變
box-sizing:border-box
: width屬性 === 內容區寬度 + padding 寬度 + border 寬度,當固定width的時候,調整border和padding的大小,內容區寬度會自動收縮。
HTML語義化
舉例,比如說段落用 p,邊欄用 aside,主要內容用 main 標籤,看到標題用h1或者h2。 語義化的好處是易讀、有利於SEO。
HTML5
html5中新增加的標籤,技術(api)(包括promise,localStorage,canvas等),統稱為html5.
meta viewport
死背:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
複製程式碼
控制頁面在移動端不要縮小顯示。
侃侃而談
一開始,所有頁面都是給PC準備的,賈伯斯推出 iPhone 3GS,讓手機也可以訪問PC端的頁面,但是頁面是不適應手機螢幕的,所以賈伯斯的工程師想了一個辦法,預設把手機模擬成 980px,頁面縮小。後來,智慧手機普及,這個功能在部分網站不需要了,所以我們就用 meta:vp 讓手機不要縮小我的網頁。
手機頁面不寫meta viewport:
document.documentElement.clientWidth //980
複製程式碼
BFC 是什麼?
如何清除浮動?
overflow: hidden
(方方反對)
用:
.clearfix
清除浮動寫在爸爸身上
.clearfix::after{
content: ''; display: block; clear:both;
}
.clearfix{
zoom: 1; /* IE 相容 */
}
複製程式碼
CSS
CSS選擇器
-
.
類選擇器,#
id選擇器,input[type=text] [data-x] [target=_blank]
屬性選擇器 -
直接子代選擇器
>
後代選擇器空格,
代表兩個都選 -
偽類選擇器
:
input:focus
選擇獲得焦點的 input 元素。a:hover
p:first-child
p:last-child
p:nth-child(1)
p:nth-child(even)
p:nth-child(odd)
p:before
p:after
input:enabled
選擇每個啟用的 元素。
input:disabled
選擇每個禁用的 元素
input:checked
選擇每個被選中的 元素。
高度與寬度,文字省略,margin合併,文件流
- inline的高度是行高,而不是font-size
- 所有inline和inline-block元素之間,不管有多少回車和空格或者tab,都只顯示一個空格,解決方法:1float:left,然後clearfix清除浮動,2display:flex
- 超出一行文字省略:
div{ border:1px solid red; /*以下三行*/ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 複製程式碼
- 阻止父子上下margin合併的方法:1.父親padding0.1或者兒子border0.1擋住,可以防止合併。2父親overflow:hidden;
- 文件流:1.內聯元素從左到右依次排列,如果空間不夠,就換一行從左到右依次排列2.塊級元素另起一行,從上到下佔滿整行。
- 脫離文件流的情況
父元素div高度變小
float
position:absolute
position:fixed
注意:position:relative
沒有脫離文件流,只是相對於之前的位置定位,原來的地方還佔據位置。 - 寬高固定居中套路:
position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
- 內聯元素的padding 和margin只會影響寬度,但是不會影響高度,內聯元素的高度只受line-height影響。
CSS4 icon:SVG
SVG:SVG其實是一段程式碼,瀏覽器可以解析這段程式碼,將它變成圖形 優點:可以漸變,不會失真,可以動
flex佈局(css6)
我理解flex從兩個方面去理解:
- 元素佈局
主軸和交叉軸,彈性元素永遠沿主軸排列
/*容器上:*/ flex-direction/* 彈性元素按主軸排列的方向*/ flex-wrap/*nowrap | wrap | wrap-reverse,主軸排列不下,是否換行 。預設是nowrap不折行。不會溢位。元素的彈性伸縮*/ flex-flow/*上面兩個的縮寫*/ justify-content/* 主軸對齊方式,五個屬性*/ align-items/* 單行交叉軸的元素對齊方式。預設stretch(元素未在交叉軸上設定尺寸,將把交叉軸自動填滿,有flex-start,end,center,baseline幾個屬性)*/ align-content/*多行交叉軸的對齊方式。flex-wrap: wrap的時候。stretch(這幾行在垂直方向上佔滿) | flex-start(這幾行擠在上面) | flex-end(擠在下面) | center(擠在中間) | space-between | space-around */ /*元素上:*/ order/* 元素排列次序*/ align-self/* 單個元素的align-items*/ 複製程式碼
- 元素伸縮
當容器為
flex-wrap: nowrap;
時,元素會伸縮。 在元素上寫:
flex-shrink
預設為1,按比例縮小,佔滿一行flex-grow:
放大比例。預設為0,不放大。如果兩個子元素flex-grow:3,flex-grow:2,那麼意思就是剩下的空間按3:2分配。flex-basis
預設為為auto
。如果有width
,就由width
決定,如果沒有width
,就由內容的寬度決定。flex-basis
有數值。忽略width
,由flex-basis
決定flex-basis:0
由內容寬度決定。因為他的優先順序比width
高
flex
是上面三個的縮寫。flex: 1 = flex: 1 1 0%
既以內容的大小(不管width是多少) 按比例放大或縮小,佔滿一行 -flex: auto = flex: 1 1 auto;
既考慮width, 按比例放大或縮小,佔滿一行flex: none = flex: 0 0 auto;
不放大也不縮小,width是多少,就是多少常用於固定尺寸 不伸縮
calc()
width: calc(50% - 10px);
寬度100%會把父盒子撐破, 解決方法:
box-sizing:border-box;
width: calc(100% - 10px);
佈局CSS7
聖盃佈局和雙飛翼佈局 是老的佈局方式,2012年以前流行,現在已不流行,但是面試可能會考察到. why it?
- 是三列布局,兩邊固定寬度,中間自適應
- 中間內容元素在 dom 元素次序中優先位置
原理:實際上都用了浮動和負邊距的特性。 雙飛翼實現方法: 1先全部fl 2main width100% 3 左邊的一塊 margin-left: -100%; /4/ 右邊的一塊 margin-left: -150px; /5/ 4.main.wrap{ margin-left: 100px; /6/ margin-right: 150px; /6/ background: blue; /7/ height: 350px; /7/ } 雙飛翼:js.jirengu.com/fevifumike/…
CSS8:到底什麼是BFC?
內部元素完全包起來(float等),外部元素界限分明,不重疊。
面試官問的時候就說:
- 首先一個BFC可以包住浮動元素,不讓他超過邊界(但這不是清除浮動,清除浮動用clearfix),即使是子元素的margin也可以包住,不衝出父元素。比如舉一個程式碼的例子,兒子是浮動元素,那麼只要在爸爸上寫overflow:hidden;或者overflow:auto;或者diaplay:flow-root;那麼爸爸就會包住兒子,且margin也會在爸爸裡面)
- 讓兩個相鄰的BFC界限分明。 舉個例子: 兩個div是是兄弟關係,如果哥哥浮動了,那麼哥哥會疊在弟弟上面,會遮蓋弟弟。這時候如果把弟弟也變成BFC,那麼哥哥和弟弟之間就會界限分明,誰都不會遮擋誰。
移動端開發
響應式兩點:(CSS5)
- 媒體查詢:
2.加上@media (max-width: 768px){/*0-768*/ body{ background-color: blue; } } @media (max-width: 425px){/*0-425*/ body{ background-color: red; } } 複製程式碼
meta viewport
歷史原因:最開始手機瀏覽器(蘋果三)會在自己的三四百畫素的手機上模擬980畫素的顯示效果,然後讓使用者自己去縮放,檢視網頁. 那麼就告訴瀏覽器不要縮放網頁,手機螢幕是多少畫素,就顯示多少畫素的網頁.使用下面的程式碼<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 複製程式碼
手機端什麼CSS屬性都可以用,不用考慮相容的問題
CSS9動態 REM
動態 REM是手機專用,是如何適配所有手機的方案。
em
:一個m的寬度.就說是一個漢字的寬度.這個單位是相對於font-size的
rem
:root em,根元素的font-size
.即 <html>
的font-size
.rem是相對於html的font-size的.
vh
:視口高度,總共100vh
vw
:視口寬度,總共100cw
pc端只需要選一個佈局(flex或者float),然後定寬就可以了。但是手機端不行,因為螢幕太多了 解決方法:
- 使用百分比佈局。(缺點:高度無法使用百分比)
- 使用vw,vh。(缺點是相容性不好)
- 使用動態 REM整體縮放
動態rem:
因為rem
這個單位跟<html>
標籤的font-size
掛鉤。那麼用js
將<html>
標籤的font-size
與頁面寬度掛鉤(pagewidth),那麼rem
這個單位就間接地與頁面寬度掛鉤了。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>動態REM</title>
<script></script>
</head>
複製程式碼
然後佈局等大單位就用rem,但是border,font-size等小單位,還用px即可,因為這些單位就算統一,在任何手機上的表現都沒有多少影響。
這樣寫之後,10rem就是頁面寬度。這樣就可以整體按比例縮放了。
偽類,偽元素
偽類: :hover :focus :active :visited :link :first-child ,:last-child ,nth-child()用來選取不同狀態的元素 偽元素: ::before ::after ,實際存在的元素,用content:''來做小三角形,小圓點
html5標籤
html5標籤header footer main artical section aside nav,有點:如果都用div或者span來著,那麼不清楚每一部分的含義,語義化,結構清晰,提高可讀性。有利於seo,比如標題是h1,爬蟲爬取資料會優先爬取標題。
DOCTYPE 規定使用哪個版本的html 使用html5
元素
塊級元素:div p header footer main artical section aside nav
行內元素:span、a、b、i,strong
行內塊元素:img,input,button