布局相关的样式

最新推荐文章于 2024-05-14 18:25:49 发布

uncle_Huang

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量197

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/uncle_Huang/article/details/96826826

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

布局相关的样式

1. 多栏布局
column-count属性
将一个元素的内容分成多栏进行显示
用法：
column-count:多栏数;

column-width属性
指定栏目的宽度来生成分栏

column-gap属性‘
指定栏目与栏目之间的距离’

column-rule属性
栏目与栏目之间的一条分割线

 column-count: 3;
           column-width: 20px;
           column-gap: 20px;
           column-rule: solid 2px green;

2. 盒布局
效果图：
box-sizing: border-box;//总宽度=width
在这里插入图片描述
display: -webkit-box;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">    
      li{
          list-style-type: none;
      }
      a{
          text-decoration: none;
          color: black;
      }
      #content1{
          width: 1000px;
          margin: 0px auto;
          display: -webkit-box;
      }
      div#left{
          width: 300px;
          float: left;
          padding: 10px;
          background-color: red;
      }
      div#right{
          width: 300px;
          float: right;
          padding: 10px;
          background-color: green;
      }
      div#content11{
          width: 400px;
          float: left;
          padding: 10px;
          background-color: yellow;
      }
      /* div#left,div#right,div#content11{
          box-sizing: border-box;
      }  */
    </style>
</head>
<body>
    <div id="content1">
        <div id="left">
            <ul>
                <li><a href="">第一章</a></li>
                <li><a href="">第二章</a></li>
                <li><a href="">第三章</a></li>
                <li><a href="">第四章</a></li>
                <li><a href="">第五章</a></li>
                <li><a href="">第六章</a></li>
                <li><a href="">第七章</a></li>
            </ul>
        </div>
        <div id="content11">文案：
            前世的魏无羡万人唾骂，声名狼藉。被护持一生的师弟带人端了老巢，
            纵横一世，死无全尸。
            曾掀起腥风血雨的一代魔道祖师，重生成了一个……
            脑残。
            还特么是个人人喊打的断袖脑残！
            我见诸君多有病，料诸君见我应如是。
            但修鬼道不修仙，任你千军万马，十方恶霸，九州奇侠，高岭之花，
            但凡化为一抔黄土，统统收归旗下，为我所用，供我驱策！
           文案：
            前世的魏无羡万人唾骂，声名狼藉。被护持一生的师弟带人端了老巢，
            纵横一世，死无全尸。
            曾掀起腥风血雨的一代魔道祖师，重生成了一个……
            脑残。
            还特么是个人人喊打的断袖脑残！
            我见诸君多有病，料诸君见我应如是。
            但修鬼道不修仙，任你千军万马，十方恶霸，九州奇侠，高岭之花，
            但凡化为一抔黄土，统统收归旗下，为我所用，供我驱策！
           文案：
            前世的魏无羡万人唾骂，声名狼藉。被护持一生的师弟带人端了老巢，
            纵横一世，死无全尸。
            曾掀起腥风血雨的一代魔道祖师，重生成了一个……
            脑残。
            还特么是个人人喊打的断袖脑残！
            我见诸君多有病，料诸君见我应如是。
            但修鬼道不修仙，任你千军万马，十方恶霸，九州奇侠，高岭之花，
            但凡化为一抔黄土，统统收归旗下，为我所用，供我驱策！
        </div>
        <div id="right">
            <ul>
                <li><a href="">前一章</a></li>
                <li><a href="">前一页</a></li>
                <li><a href="">后一页</a></li>
                <li><a href="">后一章</a></li>
            </ul>
        </div>
    </div>  
</body>
</html>

3. 弹性盒布局
使用自适应窗口的弹性盒布局：
box-flex

      #content1{ 
          display: -webkit-box;  
       }    
      div#content11{
          -webkit-box-flex: 1;
          width: 400px;
          float: left;
          padding: 10px;
          background-color: yellow;
      }

改变元素的显示顺序：
box-ordinal-group

 div#left{
          width: 300px;
          float: left;
          padding: 10px;
          background-color: red;
          -webkit-box-ordinal-group: 3;
      }

      div#right{
          width: 300px;
          float: right;
          padding: 10px;
          background-color: green;
          -webkit-box-ordinal-group: 2;
      }

      div#content11{
          -webkit-box-flex: 1;
          width: 400px;
          float: left;
          padding: 10px;
          background-color: yellow;
          -webkit-box-ordinal-group: 1;
      }

改变元素的排列方向：
box-orient
horizontal水平从左到右排列子元素
vertical垂直从上到下排列子元素

 #content1{ 
          display: -webkit-box;  
          -webkit-box-orient: vertical;
       }

元素的宽度与高度自适应
在使用盒布局时，元素的高度与宽度具有自适应性，即元素的宽高可以根据排列方向的改变而改变

使用弹性布局来消除空白
在div中加入一个box-flex属性

对多个元素使用box-flex
让浏览器或者容器中的总宽度或者是总宽度都等于浏览器或者是容器的宽度
方法对多个元素使用box-flex属性

指定水平方向与垂直方向的对齐方式
使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中的文字、图像以及子元素水平方向或者是垂直方向上的对齐方式

属性值	box-pack\box-align
start	左对齐\顶对齐
center	中对齐
end	右对齐\底对齐

uncle_Huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录