建站
咨詢
售后
建站咨詢
新聞中心
居中
居中
行內(nèi)標(biāo)簽
從2013年開始創(chuàng)新互聯(lián)專注于”幫助中小企業(yè)+互聯(lián)網(wǎng)”, 也是目前成都地區(qū)具有實(shí)力的互聯(lián)網(wǎng)服務(wù)商。團(tuán)隊(duì)致力于為企業(yè)提供--站式網(wǎng)站建設(shè)、移動(dòng)端應(yīng)用( H5手機(jī)營(yíng)銷、成都app軟件開發(fā)、微信開發(fā))、軟件開發(fā)、信息化解決方案等服務(wù)。
上圖：行內(nèi)標(biāo)簽在劇中的位置顯示
上圖：行內(nèi)-塊級(jí)標(biāo)簽也是可以被居中的
居中
塊級(jí)標(biāo)簽
代碼：新增塊級(jí)標(biāo)簽測(cè)試居中
上圖：塊級(jí)標(biāo)簽因?yàn)槭钦紦?jù)整行的特性，會(huì)根據(jù)設(shè)計(jì)的寬度從最左邊適應(yīng)，沒有被居中。
居中
塊級(jí)標(biāo)簽
代碼：p標(biāo)簽設(shè)計(jì)新增外邊距 margin: 0 auto; 表示上下距離為0，左右的寬度為auto。
上圖：這樣p標(biāo)簽根據(jù)父級(jí)標(biāo)簽（div）來自動(dòng)適應(yīng)左右兩邊的距離。
居中
行內(nèi)標(biāo)簽
代碼：div設(shè)計(jì)新增line-height: 250px; 與height 250px相同； 默認(rèn)標(biāo)簽垂直的距離是字體本身的距離，所以我們將標(biāo)簽的行高（line-height）與height同樣高，span標(biāo)簽就居中了（字體居中）
居中
塊級(jí)標(biāo)簽
代碼：塊級(jí)標(biāo)簽使用line-height: 250px;
上圖：
該塊級(jí)標(biāo)簽優(yōu)先使用了p標(biāo)簽的設(shè)計(jì)，背景顏色為金色；
寬度為200px（如果沒設(shè)置會(huì)繼承父集標(biāo)簽的寬度）；
高度默認(rèn)為字體的高度（不會(huì)繼承父級(jí)標(biāo)簽的高度height: 250px;），但是卻繼承了行高line-height: 250px;，所以跟紅色部分一樣高，這樣實(shí)現(xiàn)了垂直居中的效果；
最后p標(biāo)簽又設(shè)計(jì)了外層邊距margin: 0 auto;，實(shí)現(xiàn)了水平居中的效果。
line-heigth是行高的意思，它決定了元素中文本內(nèi)容的高度，height則是定義元素自身的高度，行高等于元素高，可將文本內(nèi)容垂直居中。
居中
塊級(jí)標(biāo)簽
代碼：p標(biāo)簽設(shè)計(jì)中新增height: 40px;（元素高度）
上圖：元素的高度改變了，文本的高度沒有改變。
p{
background-color: goldenrod;
width: 200px;
height: 40px;
line-height: 40px;
margin: 0 auto;
}代碼：在p標(biāo)簽設(shè)計(jì)中新增line-height: 40px;
上圖：塊級(jí)標(biāo)簽當(dāng)前的元素和文本高度都一致了。
Title
代碼：添加input行內(nèi)-塊級(jí)標(biāo)簽
上圖：圖中可以看到我們?cè)谳斎肟蛑休斎雰?nèi)容后，內(nèi)容與邊框非常緊湊。
Title
代碼：設(shè)計(jì)input標(biāo)簽的內(nèi)邊距
上圖：明顯的看到內(nèi)容與邊框之間的距離變大了。
input{
width: 500px;
height: 50px;
padding: 5px;
}
上圖：當(dāng)前的高度和寬度變大了
input{
width: 500px;
height: 50px;
padding: 5px;
box-sizing: border-box;
}代碼：新增box-sizing: border-box;
上圖：可以看到盒子的內(nèi)容尺寸變小了；在不改變盒子外邊距的寬度和高度的情況，把空間往里擠。
浮動(dòng)
默認(rèn)情況下，所有的網(wǎng)頁標(biāo)簽都在標(biāo)準(zhǔn)流布局中
從上到下，從左到右
脫離標(biāo)準(zhǔn)流的方法有
position屬性 和 left、right、top、bottom屬性
float屬性
float屬性的常用取值有
left：脫離標(biāo)準(zhǔn)流，浮動(dòng)在父標(biāo)簽的最左邊
right：脫離標(biāo)準(zhǔn)流，浮動(dòng)在父標(biāo)簽的最右邊
Title
- 123123123
- 123123123
- 123123123
- 123123123
上圖：列表的默認(rèn)樣式
ul li{
float: left;
}代碼：讓列表脫離標(biāo)準(zhǔn)布局，浮動(dòng)在頁面左邊；（右邊就改成：float: right;）
ul{
display: inline-block;
background-color: red;
}
ul li{
float: right;
}代碼：
將快標(biāo)簽li改成行內(nèi)-塊級(jí)標(biāo)簽display: inline-block;
將float: right;改成右側(cè)浮動(dòng)
float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。
如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過程會(huì)持續(xù)到某一行擁有足夠的空間為止。
position
這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。
.jpg)
Title
123123
代碼：想讓span標(biāo)簽浮動(dòng)在父集標(biāo)簽（div）的left: 20px; top: 20px;位置。
上圖：
因?yàn)閙argin: 50px;，我們紅色的div標(biāo)簽位置變了；
然后想讓span浮動(dòng)在父標(biāo)簽（div）的left: 20px; top: 20px;位置，但是因?yàn)楦笜?biāo)簽?zāi)J(rèn)position是static，字標(biāo)簽（span）無法定位父標(biāo)簽（div），需要將父標(biāo)簽的position改成relative才可以。
Title
123123
代碼：修改為 position: relative;
上圖：成功浮動(dòng)到父標(biāo)簽的指定位置。
span{
background-color: green;
position: absolute;
right: 0;
bottom: 0;
}代碼：浮動(dòng)到右下角
文章題目：2-1CSS布局的補(bǔ)充
本文鏈接：http://www.dlmjj.cn/article/iiosoj.html
