日常笔记-css\html篇
2019獨角獸企業重金招聘Python工程師標準>>>
問：display:none和visibility:hidden區別是什么
css繪制畫面有兩種形式：repaint 和reflow，當我們更改css屬相如background時，瀏覽器只需repaint就行，dom節點的大小、位置均未發生改變，我理解為：原地不動只是換個顏色填充而已。這時的開銷就小。當我們操作dom節點要改變其大小和位置時，對瀏覽器來說就比較麻煩了，必須要進行reflow，重新定位，重新布局，只不過對于現在的電腦硬件和高版本瀏覽器來說這倒不是顯而易見的性能問題，visibility:hidden;對瀏覽器來說只需一次repaint就OK。但display:none;瀏覽器要進行reflow，也就是要銷毀原先繪制的frame，然后還要再次重繪frame，浪費，不環保。
?
問：block，inline和inline-block區別
行內元素有（inline）：title ?span ?br ?a ? style ?em ?b ?i ? strong pcdata tt big small dfn code samp kbd var cite abbr acronym object script map q sub bdo。
不獨占一行，margin-top margin-bottom?width height 無法指定。
塊級元素有（block）：body ?form ?textarea ?h1-h6 html table ?button ?hr ?p ?ol ?ul ?dl ?center ?div pre noscript blockquote fieldset address
獨占一行，margin pading width height 可以指定
行內塊元素有（inline-block）： img ?input ?td select textarea label
不獨占一行，margin pading width height 可以指定
?
問：rgba 和opacity的區別
rgba僅作用于元素，opacity作用于元素和子元素
?
問：如何垂直水平居中一個元素？
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>垂直居中一個浮動元素</title><style type="text/css">#div2{width: 200px;height: 200px;background-color: #6699ff;margin: auto;position: absolute;//或者relativeleft: 0;top: 0;right: 0;bottom: 0;}#container{width: 600px;height: 600px;background: hotpink;display: table-cell;text-align: center;vertical-align: middle;}</style> </head> <body><div style="background:hotpink; width: 600px; height: 600px; position: relative;"><div id="div2">方法二:未知元素的高寬</div></div><br><div id="container"><img width="200px" height="200px" src="assets/images/mug.jpg">//需要行內元素</div> </body> </html>?
問：實現不使用border，畫出1px高的線
<div style=”height:1px;overflow:hidden;background:red”></div>
?
問：position的值relative和absolute的定位原點是什么？
relative:他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。
absolute:他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定TRBL并且父級沒有設定position屬性，則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。
| absolute | 父級有position | 父級無position |
| 設置TRBL | 父原點 | 瀏覽器原點 |
| 無TRBL | 父原點（上一節點結束），父節點的padding或者上一屆點的margin將影響位置 | 父原點（上一節點結束），父節點的padding或者上一屆點的margin將影響位置 |
?
問：css中為什么要浮動，怎么清楚浮動？
1.增加一個div 設置clear:both屬性
2.給父元素設置overflow:hide或者auto（display：table）
3.? .clearfix:after?{?display:?block;?content:?".";?height:?0;?visibility:?hidden;?clear:?both;?}
參考：https://www.cnblogs.com/zhongweizhu/p/6003537.html
?
問：對WEB標準以及W3C的理解與認識?
web標準簡單來說可以分為結構、表現和行為，其中結構主要是有HTML標簽組成，表現即指css樣式表，通過css可以是頁面的結構標簽更具美感，行為是指頁面和用戶具有一定的交互。
W3C對web標準提出了規范化的要求：
①標簽字母要小寫②標簽要閉合③標簽不允許隨意嵌套④盡量使用外鏈css樣式表和js腳本⑤樣式盡量少用行間樣式表⑥標簽的id和class等屬性命名要做到見文知義
?
問：標準盒子模型和IE盒子模型？
標準盒子模型：box-sizing:content-box;
IE盒子模型：? ? box-sizing:border-box;
IE盒子模型使用場景：假如有一個容器，我們希望在里面用兩個子容器并排填滿，肯定會設置width：50%，但是如果要對兩個子容器的內容區進行分離，需要使用padding屬性，但是使用padding的話會撐寬盒子的寬度，導致兩個子容器無法并排，這個時候就可以使用IE盒子模型。
?
問：超出容器的內容省略號顯示？
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;?
問：reflow和repaint？
reflow（重排）：瀏覽器根據各種樣式來將元素放到確定的地方。
repaint（重繪）：?relfow完成之后，瀏覽器把這些元素按照各自的特性繪制一遍。
引起repaint的操作-改變外觀，不改變布局
????1.visibility
????2.outline
????3.background color
引起reflow的操作
? ? 1、添加或者刪除可見的DOM元素
????2、元素位置改變
????3、元素尺寸改變
????4、元素內容改變（例如：一個文本被另一個不同尺寸的圖片替代）
????5、頁面渲染初始化（這個無法避免）
????6、瀏覽器窗口尺寸改變
?
問：
轉載于:https://my.oschina.net/kimyeongnam/blog/1834096
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的日常笔记-css\html篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android系统属性获取及设置
- 下一篇： 无线AP如何区分来宾（流动）用户和正常用