css，html備忘錄

1.background:url()#000 ;表明當圖片不夠充滿容器時，用黑色填滿。

2.height:inherit;繼承父級元素的高度。

當子元素給了絕對定位，父元素不給相對定位，子元素也能適配高度。

3.網上有在線excel表格轉json數據。

4.對於現代瀏覽器，例如webkit內核的瀏覽器，或者移動端，是能夠實現多行文本內容超出點點點…最後一行顯示的，典型的CSS組合以下：

.box {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
其中-webkit-line-clamp就是控制行數的，是3就是顯示3行，3行結束點點點，若是是2則最多2行。

5.textarea中設置value屬性是不生效的，能夠用js賦值，或者用placeholder。

6.placeholder的文字顏色能夠被更改。

7.IE對小數像素採起取整的策略，相似於Math.floor()方法，就算你大小爲11.999999像素，最後仍是顯示11像素文字的大小；

而Firefox等一些瀏覽器則採起四捨五入的策略，相似於Math.round()方法，11.4像素就表現爲11像素，11.5像素就表現爲12像素。

能夠利用此項規則解決一些誤差在一像素內的ie和其餘瀏覽器的兼容問題。

8.傳統<script>屬性支持一個名爲defer的屬性值，可讓JS資源異步加載，同時保持順序

<!-- 同步 -->
<script src="1.js"></script>

<!-- 異步但順序保證 -->
<script defer src="2.js"></script>
<script defer src="3.js"></script>

9.<a href="#" rel="internal">123</a>瞬間回到頂部

10.設置多個背景background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;用逗號隔開。

background-origin：有三個屬性值：content-box, padding-box,和 border-box

background-attchment:背景圖片跟不跟隨滾動條滾動

11.改變輸入框光標顏色：CSS caret-color屬性能夠改變輸入框插入光標的顏色。input { color: #333; caret-color: red;}

12.conic-gradient錐形漸變，mask遮罩屬性。

13.shape-outside:可讓內聯元素以不規則的形狀進行外部排列

14.background-size是css3中新增的屬性，background-size的cover特定值會保持圖像自己的寬高比例，將圖片縮放到正好徹底覆蓋定義背景的區域。

15.CSS中原生的變量定義語法是：--*，變量使用語法是：var(--*)，其中*表示咱們的變量名稱。
:root { //根元素
--1: #369;
}
body {
background-color: var(--1);
}

16.要想使圖片邊框不存在，img標籤需帶有屬性alt=「 」。

17.若是想利用 position：absolute；top：0；right：0；bottom:0;left:0;margin：auto；實現子盒子垂直水平居中；則子盒子須要給width和height；

18.position：sticky；
position屬性中最有意思的就是sticky了，設置了sticky的元素，在屏幕範圍（viewport）時該元素的位置並不受到定位影響（設置是top、left等屬性無效），
當該元素的位置將要移出偏移範圍時，定位又會變成fixed，根據設置的left、top等屬性成固定位置的效果。（不會脫離文檔流）

19.當父元素有transfrom屬性時，給子元素設置fixed會被影響，會被解析成absolute。

20.解決複選框，單選框與文字不對齊：（此處列舉兩種,給復/單選框加樣式）
基於vertical-align:top;height：父盒子的高度；margin-top:0;
基於vertical-align：text-top;height:文字的大小；margin-top：0；

21.flex-grow:默認值0；分配剩餘空間的擴張比例；

flex-basis:默認值auto；假若設置了此屬性，那麼計算剩餘空間以前要優先減去此屬性，且它的層級比width高，會將width覆蓋。

有一點須要注意，若是flex-basis和width其中有一個是auto，那麼另一個非auto的屬性優先級會更高。（也就是非auto的會覆蓋auto的）。

flex-shrink：默認值1；分配多餘的空間壓縮比例。

設爲0則表明不管如何都不壓縮此子盒子。

flex:flex-grow flex-shrink flex-basis;默認0 1 auto；
當flex取值爲none，則計算值爲0 0 auto；
當flex取值爲auto，則計算值爲1 1 auto；
當flex取值爲一個非負數字，則該數字爲flex-grow的值，計算值爲 非負數字 1 0%；
當flex取值爲一個長度或百分比，則該值爲flex-basis的值，計算值爲1 1 該值；
當flex取值爲兩個非負數字，則分別視爲flex-grow flex-shrink的值，計算值爲兩個非負數字 0%；
當flex取值爲一個非負數字和一個長度或百分比，則分別視爲flex-grow flex-basis的值，計算值爲非負數字 1 長度或百分比；

22.crossorigin="anonymous"表示，讀取文件不須要身份信息，即不須要 cookie 和 HTTP 認證信息。
若是設爲crossorigin="use-credentials"，就表示瀏覽器會上傳 cookie 和 HTTP 認證信息，同時還須要服務器端打開 HTTP 頭信息Access-Control-Allow-Credentials。

23.<map><area /></map>
<img> 標籤中的 usemap 屬性與 map 元素 name 屬性相關聯，建立圖像與映射之間的聯繫。

24.<base /> 標籤爲頁面上的全部連接規定默認地址或默認目標。在head中用

25.<bdo dir="rtl">Here is some text</bdo>規定文本輸出的方向

26.<blockquote> 與 </blockquote> 之間的全部文本都會從常規文本中分離出來，常常會在左、右兩邊進行縮進（增長外邊距），並且有時會使用斜體。也就是說，塊引用擁有它們本身的空間。

27.<cite> 標籤一般表示它所包含的文本對某個參考文獻的引用，好比書籍或者雜誌的標題。

28.<fieldset>左上角有文字的框
legend 元素爲 fieldset 元素定義標題（caption）。

29.當margin-top、padding-top的值是百分比時，分別是如何計算的？相對最近父級塊級元素的width，相對最近父級塊級元素的width.

30.背景圖片設置display:none或visibility：hidden則不會請求圖片路徑.

31.em單位，em單位是一個相對單位，用戶的瀏覽器默認渲染的字體大小是16px；而em則是相對於父級的字體大小進行縮放；從而達到頁面總體放大和縮小。

32.em的值=1/父級的font-size*須要轉化的像素比。

33.em兼容問題html {font-size: 100%;}body {font-size: 1em;}

34.rem單位，rem是一個相對單位，rem是相對於根元素的字體大小進行縮放，根元素泛指html。

35.height:calc(100vh - )計算高度；-先後必須空格

36.<xmp>標籤若是咱們想把一段文字按原來的格式，通常咱們會想到PRE標籤，但PRE中不能包含HTML元素，而XMP就沒有這個限制，徹底按原文本顯示。若是網頁中要插入相似源程序的文本，可用該標籤。