CSS常見(jiàn)布局寫(xiě)法

時(shí)間：2023-08-10 01:51:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-10 01:51:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

CSS常見(jiàn)布局寫(xiě)法：注意事項(xiàng)：浮動(dòng)布局也是元素脫離文檔流的一種方法，所以浮動(dòng)的元素必須給他們的父級(jí)元素加上.clearfix這個(gè)類(lèi)。

1.左右布局

<style>
.clearfix{
content: '';
display: block;
clear: both;
}
.left,.right{
width: 400px;
height: 400px;
background: red;
}
.left{
float: left;
}
.right{
float: right;
}
</style>

<div class="clearfix">
<div class="left"></div>
<div class="right"></div>
</div>

2. 左中右布局

（可以前兩個(gè)元素左浮動(dòng)，第三個(gè)元素右浮動(dòng)；也可以都左浮動(dòng)）

<style>
.clearfix{
content: '';
display: block;
clear: both;
}
.left,.middle,.right{
width: 400px;
height: 400px;
background: red;
float: left;
}
.left,.middle{
margin-right: 20px;
}
</style>

<div class="clearfix">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>

3. 水平居中

1. 內(nèi)聯(lián)元素/內(nèi)聯(lián)塊水平居中

只需給父級(jí)元素設(shè)置一個(gè)text-align:center;這里需要注意的是如果給內(nèi)聯(lián)元素設(shè)置了display:inline-block也必須在線(xiàn)面緊接著寫(xiě)一個(gè)vertical-align:top;要不然下面會(huì)有幾像素的間距。

<style>
p{
text-align: center;
}
</style>

<p>
<span>aaaaa</span>
</p>

2. 塊級(jí)元素水平居中

只需為其設(shè)置一個(gè)寬度后，使用margin: 0 auto;

塊級(jí)元素里面的文字內(nèi)容水平居中也是使用text-align:center;

<style>
div{
width: 300px;
height: 300px;
background: red;
margin: 0 auto;
}
</style>

<div>
bbbbb
</div>

4. 垂直居中

1. 讓元素的高度等于行高及height=line-height的值；

<style>
div{
width: 300px;
/*這兩步是實(shí)現(xiàn)垂直居中的，上面可以不用看*/
height: 300px;
line-height: 300px;
/*下面可以不用看*/
margin: 0 auto;
background: red;
text-align: center;
}
</style>

<div>
aaa
</div>

2. 給上下一個(gè)相同的padding值

<style>
div{
background: red;
text-align: center;
/*上面可以不用看*/
padding: 20px 0;
}
</style>

<div>
aaa
</div>

5.其他小技巧

1. 只要是設(shè)置了絕對(duì)定位，就一定要給他的父級(jí)元素設(shè)置相對(duì)定位（子絕父相）；
2. 用css布局時(shí)盡量不要寫(xiě)寬和高兩個(gè)屬性（因?yàn)閴K級(jí)元素的寬度和高度都是由內(nèi)部的文檔流元素決定的），一般情況下可以用padding來(lái)填充。
3. 內(nèi)聯(lián)元素不能設(shè)置寬和高，margin只對(duì)左右起作用，padding都起作用。
4. 若要使用:after和:before屬性（1）.必須加一個(gè)content:’’;（2）.必須設(shè)置成塊級(jí)元素。
5. 只要加了inline-block就一定要加vertical-align:top。
6. 元素只要是設(shè)置了position為fixed或者absolute就會(huì)變成塊級(jí)元素。
7. 一些特殊形狀css網(wǎng)站：

8. Css3漸變使用網(wǎng)站




我在寫(xiě)css中會(huì)犯的錯(cuò)誤，近期在寫(xiě)一個(gè)靜態(tài)頁(yè)的時(shí)候，自己測(cè)試了很多瀏覽器都沒(méi)問(wèn)題，可在mac上卻出現(xiàn)了錯(cuò)位：




這個(gè)列表信息我是用dl來(lái)寫(xiě)的

<dl class="clearfix">
<dt>年齡</dt>
<dd>23</dd>
<dt>所在城市</dt>
<dd>杭州</dd>
<dt>郵箱</dt>
...
</dl>

出現(xiàn)以上原因主要是dt和dd的高度不一致，所以就被擠到了另一邊。

解決辦法給dt和dd設(shè)置相同的高度或行高就可以