-
什么時(shí)候使用絕對(duì)定位 布局： 橫向顯示多列，并且有列的寬度需要自適應(yīng)寬度。 另外的列需要固定高度，并且必須高于自適應(yīng)的列的高度。 父容器設(shè)置相對(duì)定位，絕對(duì)定位就參照父容器來(lái)定位。查看全部
-
絕對(duì)定位 position:absolute 特點(diǎn)： 1.脫離文檔流，不占用空間 2.有偏移量和z-index屬性 幾種情況： 1.沒(méi)設(shè)置偏移量，保持在元素初始位置，沒(méi)設(shè)置寬度，寬度是根據(jù)內(nèi)容來(lái)?yè)伍_(kāi)的。 2.設(shè)置了偏移量，沒(méi)有定位的祖先元素，偏移是參考的html也就是瀏覽器，進(jìn)行偏移。 3.設(shè)置了偏移量，并且有定位的祖先元素，偏移就是參考的離本身最近的祖先元素。查看全部
-
相對(duì)定位 特點(diǎn)： 1.是相對(duì)于自身原有的位置進(jìn)行偏移 2.仍然處于標(biāo)準(zhǔn)文檔流中，所以會(huì)占用空間 3.擁有偏移屬性和z-index屬性查看全部
-
positon屬性 三種定位形式： 1.靜態(tài)定位[static],沒(méi)有設(shè)置position值時(shí)的默認(rèn)定位。 2.相對(duì)定位[relative] 3.絕對(duì)定位[absolute、fixed] fixed是固定定位，也屬于絕對(duì)定位查看全部
-
父容器沒(méi)有設(shè)置浮動(dòng)，而子元素都設(shè)置了浮動(dòng)，就無(wú)法撐開(kāi)父容易的寬度，父容易就顯示成一條直線了。清除浮動(dòng)就可以解決子元素浮動(dòng)帶來(lái)的影響。clear:both是無(wú)效的，他只對(duì)于緊鄰后面的元素有效果。需要使用overflow:hidden;查看全部
-
清除浮動(dòng)兩種方法 1.cleare:both; 2.width:100%;overflow:hidden;查看全部
-
清除浮動(dòng)查看全部
-
盒子模型3維圖查看全部
-
橫向兩列布局：使用absolute實(shí)現(xiàn)，常用于一列固定寬度，另一列寬度自適應(yīng)的情況。 relative-父元素相對(duì)定位 absolute-自適應(yīng)寬度元素絕對(duì)定位 注意：固定寬度列的高度>自適應(yīng)寬度的列查看全部
-
設(shè)置偏移量 偏移量參照基準(zhǔn)：無(wú)已定位祖先元素，以<html>為偏移參照基準(zhǔn) 有已定位祖先元素，以距其最近的已定位祖先元素為偏移參照基準(zhǔn)查看全部
-
W3C標(biāo)準(zhǔn)：由萬(wàn)維網(wǎng)聯(lián)盟制定的一系列標(biāo)準(zhǔn)，包括： 結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言（HTML和XML） 表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言（CSS） 行為標(biāo)準(zhǔn)語(yǔ)言（DOM和ECMAScript） 倡導(dǎo)結(jié)構(gòu)、樣式、行為分離 CSS中，存在3種的定位機(jī)制： 標(biāo)準(zhǔn)文檔流(Normal flow) 浮動(dòng)（Floats） 絕對(duì)定位（Absolute positioning） 標(biāo)準(zhǔn)文檔流的特點(diǎn)：從上到下，從左到右輸出文檔內(nèi)容 由塊級(jí)元素和行級(jí)元素組成 塊級(jí)元素特點(diǎn)：從左到右撐滿頁(yè)面，獨(dú)占一行 觸碰到頁(yè)面的邊緣時(shí)會(huì)自動(dòng)換行 行級(jí)元素特點(diǎn)：能在同一行內(nèi)顯示 不會(huì)改變HTML文檔結(jié)構(gòu) 常見(jiàn)行級(jí)標(biāo)簽：span、strong、img、input查看全部0 采集 收起 來(lái)源：網(wǎng)頁(yè)布局相關(guān)知識(shí)點(diǎn)講解——標(biāo)準(zhǔn)文檔流、塊級(jí)及行級(jí)元素等
2017-06-20
-
盒子模型 1.盒子模型=網(wǎng)頁(yè)布局的基石 由4部分組成：邊框（border）、外邊距（margin）、內(nèi)邊距、（padding）、盒子中的內(nèi)容（content）。 2. 邊框（border）、外邊距（margin）、內(nèi)邊距、（padding）是盒子模型的屬性， 有四個(gè)方向，可以設(shè)定屬性值。 順時(shí)針?lè)较蛟O(shè)置，為上、右、下、左 3.三個(gè)值的屬性為： a為上、 b為左右、c為下。 兩個(gè)值的屬性為： a為上下、b為左右。 一個(gè)值的屬性為： a為上下左右。 4.優(yōu)先級(jí)，就近原則， 行內(nèi)樣式> 內(nèi)部樣式> 外部樣式 5.邊框三個(gè)屬性：邊框的粗細(xì)、樣式、顏色、每一個(gè)屬性值都要有一個(gè)空格來(lái)個(gè)開(kāi)，空格必須在英文輸入法狀態(tài)下輸入才可以，三個(gè)屬性缺一不可。 6.盒子模型的三維模式的包裹層與ps的模型一樣，分為五層： border為第一層、 content+padding為第二層、 background-image為第三層、 background-color為第四層、 marg為第五層。 7.盒子模型尺寸=邊框+外邊距+內(nèi)邊距+盒子中的內(nèi)容尺寸查看全部
-
橫向兩列布局： 1.對(duì)頁(yè)面進(jìn)行初始化：用全局選擇器將瀏覽器的默認(rèn)添加上， 把內(nèi)填充、外填充都設(shè)置為0：*{padding:0;margin:0;}。 2.讓頁(yè)面自動(dòng)居中：#wrap{margin:0 auto;width:960px}(上下值可任意設(shè)置，左右值必須設(shè)置為auto，寬度也必須設(shè)置，不然默認(rèn)寬度會(huì)占據(jù)瀏覽器的100%)。 3.當(dāng)設(shè)置浮動(dòng)后，父級(jí)元素和后面緊鄰的元素會(huì)受到影響。因?yàn)樽蛹?jí)設(shè)置了浮動(dòng)，因此父級(jí)元素的高度沒(méi)辦法正常擴(kuò)展。 當(dāng)父包含塊縮成一條時(shí)，用clear:both方法清除浮動(dòng)無(wú)效，它一般用于緊鄰后邊元素的清除浮動(dòng)。 此時(shí)只能用：overflow：hidden方法。（這種方法如果在不設(shè)置高度的情況下內(nèi)容能完全顯示，如果設(shè)置了高度，當(dāng)超過(guò)高度時(shí)，多余的內(nèi)容則不顯示。） 4.div塊的高度一般不需要設(shè)置。 橫向兩列布局有兩種方式： a.兩列中均設(shè)置為左浮動(dòng)：float:left,然后第一列設(shè)置margin屬性值； b.兩列中一列設(shè)置左浮動(dòng)，一列設(shè)置右浮動(dòng)（這種方法僅限于兩列布局，對(duì)于多列無(wú)效）； 情況：父包含塊沒(méi)有設(shè)置浮動(dòng)，而子包含快設(shè)置了浮動(dòng)，此時(shí)的父包含塊的高度就沒(méi)法擴(kuò)展，接下來(lái)就要對(duì)父包含塊進(jìn)行清除浮動(dòng) 注： 清除浮動(dòng)影響的另一方法：在受到浮動(dòng)影響的元素之前添加空的兄弟元素，p標(biāo)簽查看全部
-
當(dāng)父包含塊縮成一條時(shí)，用clear:both方法清除浮動(dòng)無(wú)效。它一般用于緊鄰后面的元素的清除浮動(dòng)。這個(gè)時(shí)候用overflow:hidden來(lái)清除浮動(dòng)。 div塊的高度一般不需要設(shè)置。查看全部
-
清除浮動(dòng)常用的方法（清除受影響的標(biāo)簽的浮動(dòng)）： 1.clear屬性：常用clear:both 2.設(shè)置：width:100% overflow:hidden 3.不建議用空標(biāo)簽<br>清除浮動(dòng)。查看全部
舉報(bào)
0/150
提交
取消