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