CSS布局

Mianxiong
93 阅读3分钟

Float布局:

1.子元素上加float:left和width 2.在父元素上加.clearfix

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        .logo {
            border: 1px solid red;
            height: 40px;
            width: 100px;
            float: left;//Float布局
            margin-top: 5px;
            margin-left: 10px;/*在IE6会自动变成双倍*/
            display: inline-block;
        }

        nav {
            border: 1px solid green;
            width: 200px;
            height: 50px;
            float: right;//Float布局
        }
        
        <!-- header是块级元素，是由内部文档流的元素的总和决定的， -->
        <!-- 如果header里面没有文档流元素，header的高度就是0，加入clearfix可以解决这个问题 -->
        <header class="clearfix">
            <!-- div加了float会脱离文档流 -->
            <div class="logo">XDML</div>
            <!-- nav加了float会脱离文档流 -->
            <nav>导航</nav>
        </header>

14.png

四栏布局

        ul > li {
            float: left;
            border: 1px solid red;
            padding: 4px 0.5em;
        }
        
        <div>四栏布局</div>
        <ul class="clearfix">
            <li>首页</li>
            <li>男装</li>
            <li>运动</li>
            <li>百货</li>
        </ul>

15.png

两栏布局

        .logo {
            background: grey;
            display: inline-block;
            float: left;
            margin-left: 10px;
        }

        .logo>img {
            /* width: 100px; */
            /* border: 1px solid red; */
            height: 260px;
            vertical-align: middle;
            /*如果发现图片下面有多余的东西，使用vertical-align:top/middle */
        }
        
        ul>li {
            float: left;
            /* border: 1px solid red; */
            padding: 4px 0.5em;
            line-height: 1;
            /*文字的高度用line-height确定*/
        }

        ul {
            /* border: 1px solid green; */
            display: inline-block;
            margin-top: 117px;
            /*(260+26)/2-26*/
        }


        <header class="clearfix">
            <div class="logo"><img src="./hai.jpeg" alt=""></div>
            <ul class="clearfix nav">
                <li>首页</li>
                <li>男装</li>
                <li>运动</li>
                <li>百货</li>
            </ul>
        </header>

16.png

三栏布局

    .content {
            /* border: 1px solid red; */
            /*有时候border会干扰宽度，可以改成outline*/
            outline: 1px solid red;
            width: 800px;
            /*最外面的content是宽度固定像素的，只需要写margin:0 auto;就居中了*/
            /* margin: 0 auto;不是最优写法 */
            /* 最优写法，只对块元素有用 */
            margin-left: auto;
            margin-right: auto;
        }

        .content>aside {
            width: 200px;
            /* border: 1px solid green; */
            height: 300px;
            float: left;
            background: #999;
            /* display: inline-block; */
        }

        .content>main {
            /* border: 1px solid purple; */
            height: 300px;
            width: 500px;
            float: left;
            background: #ccc;
        }

        .content>.ad {
            width: 100px;
            /* border:1px solid black; */
            height: 300px;
            float: left;
        }

        <div class="content clearfix">
            <aside>一行有很多个字</aside>
            <main></main>
            <div class="ad"></div>
        </div>

17.png

平均布局

        .imageList {
            outline: 1px solid green;
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
        }

        .imageList>.x>.image {
            width: 191px;
            height: 191px;
            background: #000;
            border: 1px solid red;
            float: left;
            /* margin-top: 10px; */
            margin-bottom: 10px;
            margin-right: 12px;
        }

        .imageList>.x {
            /* 采用负margin */
            margin-right: -12px;
        }
        
        <!-- 平均布局 -->
        <div class="imageList">
            <div class="x clearfix">
                <div class="image"></div>
                <div class="image"></div>
                <div class="image"></div>
                <div class="image"></div>
            </div>
        </div>

18.png

Flex布局

flex container 有哪些样式？


改变items流动方向（主轴），默认是row：
.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

改变折行，默认是nowrap：
.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

主轴对齐方式，默认是flex-start：
默认主轴是横轴，除非改变了flex-direction方向
.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

次轴对齐，默认是stretch：
默认次轴是纵轴
.container {
    align-items: stretch | flex-start | flex-end | center | stretch | baseline;
}

多行内容，默认是stretch：
如何分布
.container {
    align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}

flex item有哪些属性？

item上面加order
.item:nth-child(2){
    order:1;
}

item上面加flex-grow，默认值为0
控制自己如何长胖
.item:first-child{
    flex-grow: 1;
}  
.item:nth-child(2){
    flex-grow: 2;
}
.item:nth-child(3){
    flex-grow: 1;
}

flex-shrink控制如何变瘦
一般写flex-shrink:0防止变瘦，默认是1

flex-basis控制基准宽度，默认是auto

align-self定制align-items：align-self: flex-end;

常用属性

display:flex;
flex-direction:row/column;
flex-wrap:wrap;
justify-content:center/space-between;
align-items:center;

两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        ul,ol{
            list-style: none;
        }
        img {
            max-width: 100%;
        }
        .logo {
            background: grey;
            display: flex;
            align-items: center;
        }
        .logo>img {
            height: 56px;
            vertical-align: middle;
            border: 1px solid red;
        }
        ul {
            /* 代替justify-content: space-between;的方式 */
            /* margin-left: auto; */
            display: flex;
            /* border:1px solid green; */
        }
        ul>li {
            /* border: 1px solid red; */
            /* line-height: 32px; */
            padding:4px;
            
        }
        .header{
            display: flex;
            /* border: 1px solid black; */
            justify-content: space-between;
            align-items: center;
            padding: 4px 0;
        }
    </style>
</head>
<body>
    <!-- 两栏布局 -->
    <header class="header">
        <div class="logo"><img src="../images/hai.jpeg" alt=""></div>
        <ul>
            <li>首页</li>
            <li>男装</li>
            <li>运动</li>
            <li>百货</li>
        </ul>
    </header>
</body>
</html>

26.png

三栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        ul,ol{
            list-style: none;
        }
        img {
            max-width: 100%;
        }
        .content {
            display: flex;
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        .content>aside {
            background: #000;
            width: 200px;
        }
        .content>main {
            background: #666;
            height: 400px;
            /* 中间部分 */
            flex-grow: 1;
        }
        .content>.ad {
            background: #999;
            width: 100px;
        }
    </style>
</head>
<body>
    <!-- 三栏布局 -->
    <div class="content">
        <aside>一行有很多个字</aside>
        <main></main>
        <div class="ad"></div>
    </div>
</body>
</html>

27.png

平均布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul,
        ol {
            list-style: none;
        }

        .imageList {
            /* border: 1px solid red; */
            width: 800px;
            margin-left:auto;
            margin-right: auto;
            margin-top: 10px;
            
        }

        .imageList > .x {
            display: flex;
            flex-wrap: wrap;
            margin-right: -12px;
            /* justify-content: space-between; */
        }

        .image {
            width: 191px;
            height: 191px;
            background: grey;
            border: 1px solid red;
            margin-right: 12px;
            margin-bottom: 10px ;
        }
    </style>
</head>

<body>
    <!-- 平均布局 -->
    <div class="imageList">
        <div class="x">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
    </div>
</body>

</html>

28.png

  1. 永远不要把width和height写死，除非特殊说明
  2. 用min-width/max-width/min-height/max-height
  3. flex可以基本满足所有需求
  4. flex和margin-xxx:auto配合有意外的效果

资料来源：饥人谷

avatar
文章
阅读
粉丝