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

segmentfault.com/a/119000001…

聖盃佈局和雙飛翼佈局是老的佈局方式，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）

媒體查詢：

@media (max-width: 768px){/*0-768*/
            body{
                background-color: blue;
            }
        }

        @media (max-width: 425px){/*0-425*/
            body{
                background-color: red;
            }
        }
複製程式碼

2.加上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>
    var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')
  </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

html,css