CSS布局小介紹，歡迎大佬點評

????????該篇主要介紹CSS的左右布局、左中右布局、水平居中、垂直居中，以及一些小技巧

??左右布局

????????左右布局，顧名思義就是將元素進行左右分布展示的一種操作，具體操作如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
  <header></header>
  <banner>
    <div class="left">我是左邊</div>
    <div class="right">我是右邊</div>
  </banner>
  <footer></footer>
</body>
</html>

body{
  border: 1px solid blue;
  padding: 2px;
}
banner .left{
  width: 50%;
  border: 1px solid red;
  float: left;
  background-color: red;
}
banner .right{
  border: 1px solid black;
  background-color: blue;
}
左右布局.png

具體代碼及效果展示

????????PS:點開后，若只看到展示效果，請點擊展示效果上方的按鈕，即可看到相應(yīng)的代碼，html按鈕對應(yīng)html代碼，css按鈕對應(yīng)css按鈕...

??左中右布局

????????左中右布局，與左右布局相類似，但是卻比左右布局多了一個中間元素，具體過程如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <header></header>
  <banner>
    <div class="left">我是左邊</div>
    <div class="centre">我是中央</div>
    <div class="right">我是右邊</div>
  </banner>
  <footer></footer>
</body>
</html>

body{
  border: 1px solid red;
  padding: 2px;
}
banner .left{
  width: 30%;
  border: 1px solid green;
  color: #fff;
  background-color: black;
  float: left;
}
banner .centre{
  width: 30%;
  border: 1px solid black;
  color: #fff;
  background-color: red;
  float: left;
}
banner .right{
  border: 1px solid blue;
  color: #fff;
  background-color: green;
}
左中右布局（錯誤的做法）.png

具體代碼即效果展示

????????這是最開始沂轱的布局方式，但是這樣是不對的，雖然這樣也可以出來，但是這樣布局后，如果對右邊元素進行width設(shè)置時就會發(fā)現(xiàn)右邊元素自動換至下一行了，這樣與我們的期望不符，所以沂轱重新做了改進

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <header></header>
  <banner>
    <div class="lac">
      <div class="left">我是左邊</div>
      <div class="centre">我是中央</div>
    </div>
    <div class="right">我是右邊</div>
  </banner>
  <footer></footer>
</body>
</html>

*{
  padding: 0;
  margin: 0;
}
body{
  border: 1px solid red;
}
banner .lac .left{
  width: 50%;
  border-right: 1px solid yellow;
  /* border: 1px solid yellow; */
  float: left;
}
banner .lac .centre{
  width: 49%;
  /* border: 1px solid red; */
  float: left;
}
banner .lac{
  width: 80%;
  float: left;
  border: 1px solid yellow;
  background-color: black;
  color: #eee;

}
banner .right{
  border: 1px solid blue;
  background-color: red;
  color: #eee;
}

左中右布局.png

具體代碼即展示效果

??水平居中

????????水平居是指文字的左右兩邊的間距是一樣的，但是在html中的文字可以被塊級元素包裹，也可以被內(nèi)聯(lián)元素包裹；在對塊級元素設(shè)置垂直居中時，我們可以使用flex彈性盒子進行操作，對于內(nèi)聯(lián)元素我們可以使用margin來使其文字水平居中；具體操作如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <header></header>
  <banner>
    <ul>
      <li>begin</li>
      <li>content</li>
      <li>over</li>
    </ul>
    <div class="test">
      <span>lslsls</span>
      <span>lslsls</span>
    </div>
  </banner>
  <footer></footer>
</body>
</html>

body{
  border: 1px solid red;
}
ul li{
  list-style: none;
}
banner{
  margin: 0 auto;
}
banner ul{
  display: flex;
}
banner ul li{
  /* display: inline-block; */
  border: 1px solid blue;
  justify-content:center;
  display: flex;
  width: 30%;
}
banner .test{
  text-align: center;
}
banner .test span{
  border: 1px solid yellow;
}

水平居中.png

具體代碼即效果展示

??垂直居中

????????垂直居中表示文字的上邊和下邊的間距是一樣的，在html中的文字可以被塊級元素包裹，也可以被內(nèi)聯(lián)元素包裹，但在這里指展示一下塊級元素如何垂直居中，具體操作如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <header></header>
  <banner>
    <div id="block">#block</div>
    <div id="block">#block</div>
    <div id="block">#block</div>
  </banner>
  <footer></footer>
</body>
</html>

body{
  border: 1px solid red;
}
*{
  padding: 0;
  margin: 0;
}
banner #block{
  border: 1px solid green;
  display: flex;
  justify-content:center;
  align-items: center;
  width: 30%;
  margin: 0 auto;
}

垂直居中.png

具體代碼即效果
????????PS: 最開始沂轱對于垂直居中和水平居中還是不清楚，直到沂轱看到了這個：
image.png

點擊此處，查看出處

??其他小技巧

較真的說下面的這些技巧算不得CSS布局，但是這些技巧對CSS布局起著重要的作用

??1. clearfix
????????clearfix是CSS中用來清除浮動的一種方法，一般使用在進行浮動操作元素的父元素中，用來清除子元素進行浮動操作后帶來的影響為何要清浮動，浮動會有什么影響？，使用方法如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="nav">
    <a href="#" class="logo">logo</a>
    <ul class="clearfix">
      <li><a href="#">首頁</a></li>
      <li><a href="#">向?qū)?lt;/a></li>
      <li><a href="#">關(guān)于</a></li>
    </ul>
  </div>
  <div class="banner">
    <main>
      <div>內(nèi)容1</div>
      <div>內(nèi)容2</div>
    </main>
  </div>
</body>
</html>

/*clearfix是CSS選擇器，是用來對html文檔進行樣式設(shè)置的；在使用clearfix時一般采用將其變?yōu)轭愡x擇器，再進行使用（PS：也可以將其變?yōu)镮D選擇器）
*/
.clearfix::after{
  content: '';
  display: block;
  clear: both;
} 
body{
  border: 1px solid red;
}
a{
  text-decoration: none;
  background-color: bule;
  color: #fff;
}
div{
  color: #fff;
  border: 1px solid green;
  background-color: green;;
}
ul li{
  list-style: none;
  border: 1px solid blue;
  background-color: red;
}
*{
  padding: 0;
  margin: 0;
}
.nav .logo{
  background-color: blue;
}
.nav ul{
  float: right;
}
.nav ul li{
  float: left
}

????????查看代碼
??
????????2. 在進行CSS設(shè)置時建議不要寫寬高，建議從內(nèi)到外進行設(shè)置，多使用padding&margin來對標簽的大小進行調(diào)整

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首頁-知乎</title>
  <link rel="stylesheet" href="./mian.css">
  <script src="http://at.alicdn.com/t/font_1045193_66987mg8u6.js"></script>
  <style type="text/css">
    .icon {
      width: 1em; height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
</style>
</head>
<body>
  <header>
    <div class="TopNavBar">
      <div class="TopNavBar-inner">
        <a href="" class="logo">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zhihu"></use>
        </svg>
        </a>
        <nav>
          <ul class="clearfix">
            <li><a href="#">首頁</a></li>
            <li><a href="#">發(fā)現(xiàn)</a></li>
            <li><a href="#">話題</a></li>
            <li>
              <form action="/3.txt" method="POST">
                <input type="text" placeholder = "請輸入提問"/>
                <input class = "button" type="submit" value="提問"/>
              </form>
            </li>
          </ul>
        </nav>
          <div class="userInfo">
            <ul class="clearfix">
              <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tixing"></use>
                    </svg>
                </a>
              </li>
              <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihua"></use>
                    </svg>
                </a>
              </li>
              <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rect"></use>
                    </svg>
                </a>
              </li>
            </ul>
          </div>
      </div>
    </div>
  </header>
  <banner></banner>
  <footer></footer>
</body>
</html>

body{
  /* height: 52px; */
  border: 1px solid red;
}
a{
  text-decoration: none;
  color: rgb(133,144,166);
  padding: 4px 0;
}
li{
  list-style: none;
}
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
*{
  margin: 0;
  padding: 0;
}
.TopNavBar-inner{
  margin: 6px 230px;
}
.TopNavBar .TopNavBar-inner .logo{
  display: block;
  float: left;
  /* border: 1px solid red; */
}
.TopNavBar-inner .logo svg{
  width: 82px;
  height: 38px;
  fill: rgb(0,132,255);
  padding: 0 15px;
}
.TopNavBar-inner nav{
  display: inline-block;
  padding: 8px 0;
  vertical-align: top;
}
.TopNavBar-inner nav ul li{
  float: left;
}
.TopNavBar-inner nav ul li a{
  padding: 0 15px;
  font-size: 15px;
  line-height: 30px;
}
.TopNavBar-inner nav ul li form input{
  height: 26px;
}
.TopNavBar-inner nav ul li form input.button{
  display: inline-block;
  background-color: rgb(0,132,255);
  padding: 0 10px;
  border: none;
  color: rgb(255, 255, 255);
}
.TopNavBar-inner .userInfo{
  
  float: right;
  /* border: 1px solid black; */
  padding: 4px 0;
  margin-right: 30px;
}
.TopNavBar-inner .userInfo ul{
  /* border: 1px solid blue; */
  display: inline-block;
  vertical-align: top;
}
.TopNavBar-inner .userInfo ul li{
  float: left;
  margin: 0 16px;
}
.TopNavBar-inner .userInfo ul li a{
  display: block;
}
.TopNavBar-inner .userInfo ul li a svg{
  width: 31px;
  height: 31px;
  fill: currentColor;
}

查看展示效果

上述代碼可直接復制運行，但由于展示平臺沂轱還不是很熟悉，所以展示中關(guān)于svg圖片的地方，沂轱使用了邊框進行代替

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

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