當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

日常笔记-css\html篇

發(fā)布時(shí)間：2025/6/16 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了日常笔记-css\html篇小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

問(wè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ì)瀏覽器來(lái)說(shuō)就比較麻煩了，必須要進(jìn)行reflow，重新定位，重新布局，只不過(guò)對(duì)于現(xiàn)在的電腦硬件和高版本瀏覽器來(lái)說(shuō)這倒不是顯而易見(jiàn)的性能問(wèn)題，visibility:hidden;對(duì)瀏覽器來(lái)說(shuō)只需一次repaint就OK。但display:none;瀏覽器要進(jìn)行reflow，也就是要銷毀原先繪制的frame，然后還要再次重繪frame，浪費(fèi)，不環(huán)保。

問(wè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 無(wú)法指定。

塊級(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 可以指定

問(wèn)：rgba 和opacity的區(qū)別

rgba僅作用于元素，opacity作用于元素和子元素

問(wèn)：如何垂直水平居中一個(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>

問(wèn)：實(shí)現(xiàn)不使用border，畫出1px高的線

問(wèn)：position的值relative和absolute的定位原點(diǎn)是什么？

relative:他的意思是絕對(duì)相對(duì)定位，他是參照父級(jí)的原始點(diǎn)為原始點(diǎn)，無(wú)父級(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(下面簡(jiǎn)稱TRBL)進(jìn)行定位，在沒(méi)有設(shè)定TRBL，默認(rèn)依據(jù)父級(jí)的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定TRBL并且父級(jí)沒(méi)有設(shè)定position屬性，則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。

absolute	父級(jí)有position	父級(jí)無(wú)position
設(shè)置TRBL	父原點(diǎn)	瀏覽器原點(diǎn)
無(wú)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將影響位置

問(wèn)：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

問(wèn)：對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)?

web標(biāo)準(zhǔn)簡(jiǎn)單來(lái)說(shuō)可以分為結(jié)構(gòu)、表現(xiàn)和行為，其中結(jié)構(gòu)主要是有HTML標(biāo)簽組成，表現(xiàn)即指css樣式表，通過(guò)css可以是頁(yè)面的結(jié)構(gòu)標(biāo)簽更具美感，行為是指頁(yè)面和用戶具有一定的交互。

W3C對(duì)web標(biāo)準(zhǔn)提出了規(guī)范化的要求：

①標(biāo)簽字母要小寫②標(biāo)簽要閉合③標(biāo)簽不允許隨意嵌套④盡量使用外鏈css樣式表和js腳本⑤樣式盡量少用行間樣式表⑥標(biāo)簽的id和class等屬性命名要做到見(jiàn)文知義

問(wèn)：標(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è)子容器無(wú)法并排，這個(gè)時(shí)候就可以使用IE盒子模型。

問(wèn)：超出容器的內(nèi)容省略號(hào)顯示？

text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

問(wèn)：reflow和repaint？

reflow（重排）：瀏覽器根據(jù)各種樣式來(lái)將元素放到確定的地方。
repaint（重繪）：?relfow完成之后，瀏覽器把這些元素按照各自的特性繪制一遍。

引起repaint的操作-改變外觀，不改變布局

????1.visibility

????2.outline

????3.background color

引起reflow的操作

? ? 1、添加或者刪除可見(jiàn)的DOM元素

????2、元素位置改變

????3、元素尺寸改變

????4、元素內(nèi)容改變（例如：一個(gè)文本被另一個(gè)不同尺寸的圖片替代）

????5、頁(yè)面渲染初始化（這個(gè)無(wú)法避免）

????6、瀏覽器窗口尺寸改變

問(wèn)：

轉(zhuǎn)載于:https://my.oschina.net/kimyeongnam/blog/1834096

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的日常笔记-css\html篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： android系统属性获取及设置
下一篇：无线AP如何区分来宾（流动）用户和正常用