-
水平居中設(shè)置-定寬塊狀元素
當被設(shè)置元素為?塊狀元素?時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
定寬塊狀元素：塊狀元素的寬度width為固定值。
滿足定寬和塊狀兩個條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實現(xiàn)居中的。? ? ?margin-left 與 margin-right?設(shè)置為 auto
注意：元素的“上下 margin” 是可以隨意設(shè)置的。
查看全部 -
水平居中設(shè)置-行內(nèi)元素
(分兩種情況：行內(nèi)元素?還是?塊狀元素?，塊狀元素里面又分為定寬塊狀元素，以及不定寬塊狀元素。)
如果被設(shè)置元素為文本、圖片等行內(nèi)元素時，水平居中是通過給父元素設(shè)置?
text-align:center?來實現(xiàn)的。
查看全部 -
?給子元素設(shè)置flex占比
設(shè)置子元素相對于父元素的占比
1、給子元素設(shè)置flex屬性,可以設(shè)置子元素相對于父元素的占比。
2、flex屬性的值只能是正整數(shù),表示占比多少。
3、給子元素設(shè)置了flex之后,其寬度屬性會失效。
查看全部 -
使用align-items屬性設(shè)置縱軸排列方式
align-items屬性，本屬性定義了項目在交叉軸上的對齊方式。屬性值分別為：
flex-start：默認值，左對齊
flex-end：交叉軸的終點對齊
center： 交叉軸的中點對齊
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
查看全部 -
使用justify-content屬性設(shè)置橫軸排列方式
justify-content:?
????????flex-start :?交叉軸的起點對齊
????????flex-end：右對齊
????????center： 居中?
????????space-between?：兩端對齊，項目之間的間隔都相等。
????????space-around?：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
查看全部 -
?彈性盒模型之flex屬性
1、設(shè)置display: flex屬性可以把塊級元素在一排顯示。
2、flex需要添加在父元素上，改變子元素的排列順序。
3、默認為從左往右依次排列,且和父元素左邊沒有間隙。
查看全部 -
Relative與Absolute組合使用
使用position:absolute可以實現(xiàn)被設(shè)置元素相對于瀏覽器（body）設(shè)置定位
1、參照定位的元素必須是相對定位元素的前輩元素
2、參照定位的元素必須加入position:relative;
?#box1{
????width:200px; ????height:200px;??? ??????????? ????}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。
#box2{?????? ???? ???????}把box4定位到圖片(box3)的底部。
#box3{position:relative;}
#box4{????position:absolute;
? ? ? ? ????????bottom:0;}
查看全部 -
層模型之固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。
以下代碼可以實現(xiàn)相對于瀏覽器視圖向右移動100px，向下移動50px。并且拖動滾動條時位置固定不變。
#div1{ ? ? width:200px; ? ? height:200px; ? ? border:2px red solid; ? ? position:fixed; ? ? left:100px; ? ? top:50px; } <p></p> ....
?
任務(wù)
我也來試試，實現(xiàn)瀏覽器視圖右下角定位div層。
?position:fixed;
? ? ? ? bottom:0;
? ? ? ? right:0;
查看全部 -
層模型之相對定位
如果想為元素設(shè)置層模型中的相對定位，需要設(shè)置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
如下代碼實現(xiàn)相對于以前位置向下移動50px，向右移動100px;
#div1{ ????width:200px; ????height:200px; ????border:2px?red?solid;????} <div?id="div1"></div>
效果圖：
什么叫做“偏移前的位置保留不動”呢？
大家可以做一個實驗，在右側(cè)代碼編輯器的19行div標簽的后面加入一個span標簽，在標并在span標簽中寫入一些文字。如下代碼：
<body> ????<div?id="div1"></div>偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置</body>
效果圖：
從效果圖中可以明顯的看出，雖然div元素相對于以前的位置產(chǎn)生了偏移，但是div元素以前的位置還是保留著，所以后面的span元素是顯示在了div元素以前位置的后面。
查看全部 -
層模型之絕對定位
position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用 left、right、top、bottom 屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
如下面代碼可以實現(xiàn)div元素相對于瀏覽器窗口向右移動100px，向下移動50px。
div{ ????width:200px; ????height:200px; ????border:2px?red?solid;????} <div?id="div1"></div>效果如下：
查看全部 -
層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網(wǎng)頁設(shè)計領(lǐng)域，由于網(wǎng)頁大小的活動性，層布局沒能受到熱捧。但是在網(wǎng)頁上局部使用層布局還是有其方便之處的。
CSS定義了一組定位（positioning）屬性來支持層布局模型。
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
查看全部 -
浮動模型
?任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。如下代碼可以實現(xiàn)兩個 div 元素一行顯示。
div{ ????width:200px; ????height:200px; ????border:2px?red?solid; ???? ????????} <div?id="div1"></div> <div?id="div2"></div>效果圖
當然你也可以同時設(shè)置兩個元素右浮動也可以實現(xiàn)一行顯示。
div{ ????width:200px; ????height:200px; ????border:2px?red?solid;?? ??????}效果圖
又有小伙伴問了，設(shè)置兩個元素一左一右可以實現(xiàn)一行顯示嗎？當然可以：
div{ ????width:200px; ????height:200px; ????border:2px?red?solid; } #div1{} #div2{}效果圖
查看全部 -
流動模型（二）
第二點，在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行）
右側(cè)代碼編輯器中內(nèi)聯(lián)元素標簽a、span、em、strong都是內(nèi)聯(lián)元素。
查看全部 -
流動模型（一）
流動（Flow）是默認的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的。
流動布局模型具有2個比較典型的特征：
????????第一點，塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認狀態(tài)下，塊狀元素的寬度都為100%。
????????實際上，塊狀元素都會以行的形式占據(jù)位置。如右側(cè)代碼編輯器中三個塊狀元素標簽(div，h1，p)寬度顯示為100%。
查看全部 -
CSS3包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float。
在網(wǎng)頁中，元素有三種布局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）查看全部
舉報