關(guān)于CSS的一點(diǎn)點(diǎn)學(xué)習(xí)成果

左右布局

在HTML中，div元素的排列方式是豎向依次排列，那如果我想要兩個(gè)塊級(jí)元素并列，形成左右布局該怎么做呢？這種可以通過(guò)浮動(dòng)元素來(lái)完成，將需要并列顯示的元素變成浮動(dòng)元素。具體代碼如下：
html代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="parent clearfix">
  <div class="child">
    1
  </div>
  <div class="child">
    2
  </div>
</div>
</body>
</html>

CSS代碼

.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
.parent{
  border: 5px solid red;
}
.child{
  outline: 1px solid green;
  float:left;
  width:50%;
}

代碼實(shí)現(xiàn)圖

代碼鏈接點(diǎn)這里。
如代碼所示，在需要排列的元素中加入float:left;，將其浮動(dòng)化，然后在其父級(jí)元素上加入clearfix，然后在CSS中加入.clearfix::after調(diào)整樣式，這樣就將其并列顯示了。但這樣會(huì)有一個(gè)問(wèn)題，子元素并沒(méi)有嚴(yán)格的左右對(duì)半分,而是靠左排列在一起的，這種問(wèn)題可以給定寬度來(lái)解決，直接給子元素width:50%;，賦予其父級(jí)元素50%的寬度，這就剛好兩個(gè)子元素占一排了。也可以通過(guò)將右邊元素的浮動(dòng)寫(xiě)法改為float:right;，使右邊的元素靠右排列來(lái)實(shí)現(xiàn)。

左中右布局

上面介紹了左右布局，如果要進(jìn)行左中右布局呢，我的想法是和左右布局類(lèi)似，只需要將子元素的寬度更改一下，但100%的寬度要分為3份不好分，我就直接給每個(gè)子元素30%的寬度，然后給第二個(gè)子元素左右各給5%的margin，就剛好使100%的寬度。
html代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="parent clearfix">
  <div class="child">
    1
  </div>
  <div class="child" style="margin-left:5%;margin-right:5%;">
    2
  </div>
  <div class="child">
    3
  </div>
</div>
</body>
</html>

CSS代碼

.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
.parent{
  border: 5px solid red;
}
.child{
  outline: 1px solid green;
  float:left;
  width:30%;
}

代碼效果圖

代碼鏈接點(diǎn)這里。

水平居中

這種要分情況，看子元素的寬是確定的還是不確定的。

子元素寬不確定的情況

如果子元素為塊級(jí)元素的話(huà)，直接在子元素中寫(xiě)margin-left: n px;margin-right: n px;，n的數(shù)值根據(jù)實(shí)際情況來(lái)確定。
如果子元素為內(nèi)聯(lián)元素，直接在父級(jí)元素中寫(xiě)text-align:center;即可。
代碼如下。
html代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="parent">
  <div class="child">
    <span>YyzclYang</span>
  </div>
</div>
</body>
</html>

CSS代碼

.parent{
  border: 5px solid red;
}
.child{
  outline: 1px solid green;
  margin-left:100px;
  margin-right: 100px;;
  text-align: center;
}

代碼效果圖

代碼鏈接點(diǎn)這里。
parent的子元素為child，child的子元素為span元素。child和span都相對(duì)于他們的父級(jí)元素居中。

子元素寬度確定的情況

當(dāng)子元素寬度確定時(shí)，直接加上margin-left:aotu;margin-right:aotu;即可。代碼如下
html代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="parent">
  <div class="child">
      YyzclYang
  </div>
</div>
</body>
</html>

CSS代碼

.parent{
  border: 5px solid red;
}
.child{
  outline: 1px solid green;
  width:60%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

代碼效果圖

代碼鏈接點(diǎn)這里。

垂直居中

在進(jìn)行垂直居中時(shí)，可以利用padding元素來(lái)實(shí)現(xiàn)。如果父級(jí)元素高40px，那么可以通過(guò)設(shè)置子元素高30px，然后利用padding上下各外推5px來(lái)實(shí)現(xiàn)。
html代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="parent">
  <div class="child">
      YyzclYang
  </div>
</div>
</body>
</html>

CSS代碼

.parent{
  border: 5px solid red;
}
.child{
  outline: 1px solid green;
  text-align: center;
  line-height: 30px;
  padding: 5px 0;
}

代碼實(shí)現(xiàn)圖

代碼鏈接點(diǎn)這里。

其他的心得

長(zhǎng)單詞換行

在遇到長(zhǎng)單詞時(shí)，如果不能將整個(gè)單詞顯示完全的話(huà)，會(huì)默認(rèn)將長(zhǎng)單詞換到下一行顯示，但如果加入一個(gè)word-break:break-all;，就能將單詞斬?cái)?，隨意換行顯示。
html代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  YyzclYang>
  YyzclYangYyzclYang>
  YyzclYangYyzclYangYyzclYang>
  YyzclYangYyzclYangYyzclYangYyzclYang>
  YyzclYangYyzclYangYyzclYangYyzclYangYyzclYang>
</div>
</body>
</html>

CSS代碼

div{
  border:1px solid red;
  word-break:break-all;
}
實(shí)現(xiàn)效果圖

文字省略溢出

上一節(jié)中文字過(guò)多，如果只需要顯示一行，多余用...代替的話(huà)，那么CSS中可以這么寫(xiě)。
CSS代碼

div{
  border:1px solid red;
  word-break:break-all;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

效果圖

但如果需要顯示多行，最后一行多余的省略呢，那么就這么寫(xiě)。
CSS代碼

div{
  border:1px solid red;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

效果圖

代碼-webkit-line-clamp:3;中的數(shù)字3就是需要顯示的行數(shù)，可自行根據(jù)需求更改。

添加多個(gè)空格

在html中，兩個(gè)元素之間的空格，換行等書(shū)寫(xiě)方式，到最后只會(huì)顯示一個(gè)空格，如果要顯示多個(gè)空格，就應(yīng)該寫(xiě)&nbsp;，需要多少個(gè)空格就寫(xiě)多少個(gè)。

文字兩端對(duì)齊

例如我們需要實(shí)現(xiàn)下面這個(gè)樣式。

效果圖

可以這么寫(xiě)。
html代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  <span>姓名</span>
  <br>
  <span>聯(lián)系方式</span>
</div>
</body>
</html>

CSS代碼

div{
  border:1px solid red;
  width:100px;
}
span{
  display:inline-block;
  width:100%;
  text-align:justify;
  line-height:20px;
  overflow:hidden;
  height:20px;
}
span::after{
  content:'';
  display:inline-block;
  width:100%;
}

就能實(shí)現(xiàn)中文的兩端對(duì)齊。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容