html,css

時間 2019-12-06

標籤 html css 欄目 HTML 简体版

原文原文鏈接

html

盒模型:

網頁上每個元素均可以看作一個盒子,他從內到外包括content,padding,border,margin. 舉例： box-sizing:content-box: width屬性 === 內容區寬度。當border和padding變寬的時候，內容區寬度不變css

box-sizing:border-box: width屬性 === 內容區寬度 + padding 寬度 + border 寬度，當固定width的時候，調整border和padding的大小，內容區寬度會自動收縮。html

HTML語義化

舉例，好比說段落用 p，邊欄用 aside，主要內容用 main 標籤，看到標題用h1或者h2。語義化的好處是易讀、有利於SEO。html5

HTML5

html5中新增長的標籤,技術(api)(包括promise,localStorage,canvas等),統稱爲html5.面試

meta viewport

死背：canvas

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
複製代碼

控制頁面在移動端不要縮小顯示。segmentfault

侃侃而談api

一開始，全部頁面都是給PC準備的，喬布斯推出 iPhone 3GS，讓手機也能夠訪問PC端的頁面，可是頁面是不適應手機屏幕的，因此喬布斯的工程師想了一個辦法，默認把手機模擬成 980px，頁面縮小。後來，智能手機普及，這個功能在部分網站不須要了，因此咱們就用 meta:vp 讓手機不要縮小個人網頁。promise

手機頁面不寫meta viewport：瀏覽器

document.documentElement.clientWidth  //980
複製代碼

BFC 是什麼？

如何清除浮動？

overflow: hidden（方方反對）用： .clearfix 清除浮動寫在爸爸身上bash

.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> 複製代碼