开发设计饥人谷技术博客

CSS布局小介绍，欢迎大佬点评

2019-02-18  本文已影响138人  饥人谷_子安

        该篇主要介绍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:点开后，若只看到展示效果，请点击展示效果上方的按钮，即可看到相应的代码，html按钮对应html代码，css按钮对应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设置时就会发现右边元素自动换至下一行了，这样与我们的期望不符，所以沂轱重新做了改进

<!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中的文字可以被块级元素包裹，也可以被内联元素包裹；在对块级元素设置垂直居中时，我们可以使用flex弹性盒子进行操作，对于内联元素我们可以使用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中的文字可以被块级元素包裹，也可以被内联元素包裹，但在这里指展示一下块级元素如何垂直居中，具体操作如下：

<!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="#">向导</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </div>
  <div class="banner">
    <main>
      <div>内容1</div>
      <div>内容2</div>
    </main>
  </div>
</body>
</html>

/*clearfix是CSS选择器，是用来对html文档进行样式设置的；在使用clearfix时一般采用将其变为类选择器，再进行使用（PS：也可以将其变为ID选择器）
*/
.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设置时建议不要写宽高，建议从内到外进行设置，多使用padding&margin来对标签的大小进行调整

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页-知乎</title>
  <link rel="stylesheet" href="./mian.css">
  <script src="//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="#">发现</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;
}

查看展示效果

上述代码可直接复制运行，但由于展示平台沂轱还不是很熟悉，所以展示中关于svg图片的地方，沂轱使用了边框进行代替

上一篇下一篇

猜你喜欢

热点阅读