CSS布局

table表格布局
- 用的不多,不用关心
盒子模型

display/position

display确定显示类型

block/inline/inline-block

<!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>Document</title>
    <style>
        .block{
            height:200px;
            background:red;
        }
        .inline{
            display: inline;
            background: green;
        }
        .inline-block{
            display: inline-block;
            width:200px;
            height:100px;
            background:blue;
        }
    </style>
</head>
<body>
    <div class="block">
        block
    </div>
    <div class="inline">inline</div>
    <div class="inline">inline</div>
    <div class="inline-block">inline-block</div>
</body>
</html>

position确定元素的位置
- static:最基本的布局方式,每个元素按照文档的顺序依次排列
- relative:相对本身位置的偏移,如:left:10px;top:-10px
- absolute:绝对定位.从文档流中脱离出来,不会对其他文档的布局产生影响.其位置相对的是最近的relative或者absolute父元素.
- fixed:固定定位.也是脱离文档流的.相对位置同视图有关.
- 对于重叠中显示优先级的设置,可以使用z-index.

flex box——真正的布局盒子(最新的,apple官网就是这种)

<!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>Document</title>
    <style>
        .container{
            width:800px;
            height:200px;
            display: flex;
        }
        .left{
            background: red;
            display: flex;
            width:200px;
        }
        .right{
            background: blue;
            display: flex;
            flex:1;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>
</body>
</html>

float(兼容性最好,使用范围最广)

float布局(本来就是为了做图文混排效果的)
- 元素浮动
- 脱离文档流
- 不脱离文本流
float布局对自身的影响
- 形成块.像span这种inline元素,本身没有宽高特性.但是指定float布局之后,就升级到块的特性
- 位置尽量靠上
- 位置尽量靠左

float布局还是很复杂的,会出现高度塌陷的问题.没怎么看懂,反正下边的例子中.container2::after是为了消除这个问题的.这个在腾讯网,网易网都是这种方案.

<!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>Document</title>
    <style>
        .container{
            background:red;
            width:400px;
            margin:20px;
        }
        .p1{
            background:green;
            float:left;
            width:200px;
            height:50px;
        }
        .container2::after{
            content: 'aaa';
            clear:both;
            display: block;
            visibility: hidden;
            height:0;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <span class="p1">
            float
        </span>
        <div class="p2">
            很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
        </div>
    </div>

    <div class="container container2">
        <span>写几个字</span>
        <span class="p1">
            float
        </span>
        <span class="p1">
            float
        </span>
    </div>
    <div class="container" style="height:200px;background:blue;">
    </div>
</body>
</html>

经典难题:float实现三栏布局

<!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>Document</title>
    <style>
        .container{
            width:800px;
            height:200px;
        }
        .left{
            background:red;
             float:left;
             height:100%; 
            width:200px;
            /*position: absolute;*/
            height:200px;
        }
        .right{
            background:blue;
            float:right;
            width:200px;
            height:100%;
        }
        .middle{
            margin-left:200px;
            margin-right:200px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
        <div class="middle">
            中间
        </div>
    </div>
</body>
</html>

inline-block

会遇到间隙问题,解决:将父元素font-size设置为0,inline-block元素的font-size设置为正常大小,就可以了.

<!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>Document</title>
    <style>
        .container{
            width:800px;
            height:200px;
            font-size:0;
        }
        .left{
            font-size:14px;
            background:red;
            display: inline-block;
            width:200px;
            height:200px;
        }
        .right{
            font-size:14px;
            background:blue;
            display: inline-block;
            width:600px;
            height:200px;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>
</body>
</html>

响应式布局

隐藏+折行+自适应空间
rem/viewport/media query
具体步骤
- 加上viewport,设置可视区域的大小等于屏幕的大小.
- 使用@media设置条件显示

<!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>responsive</title>
    <style>
        .container{
            margin:0 auto;
            max-width:800px;
            display: flex;
            border:1px solid black;
        }
        .left{
            display: flex;
            width: 200px;
            background:red;
            margin:5px;
        }
        @media (max-width: 640px){
            .left{
                display: none;
            }
        }
        .right{
            display: flex;
            flex: 1;
            background:blue;
            margin:5px;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            这里是一些不重要的内容，比如友情链接、广告
        </div>
        <div class="right">
            这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。
        </div>
    </div>
</body>
</html>

使用rem单位

html默认的font-size是16px,一个rem就表示16个像素.但是可以粗略计算成20px=1rem.
可以通过设置html的font-size来适配不同的屏幕.

<!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>responsive</title>
    <style>
        html{
            font-size:20px;
        }
        .container{
            margin:0 auto;
            max-width:800px;
            border:1px solid black;
        }
        .intro{
            display: inline-block;
            width:9rem;
            height:9rem;
            line-height: 9rem;
            text-align: center;
            border-radius: 4.5rem;
            border:1px solid red;
            margin:.3rem;
        }
        @media (max-width: 375px){
            html{
                font-size:24px;
            }
        }
        @media (max-width: 320px){
            html{
                font-size:20px;
            }
        }
        @media (max-width: 640px){
            .intro{
                margin:.3rem auto;
                display: block;
            }
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="intro">
            介绍1
        </div>
        <div class="intro">
            介绍2
        </div>
        <div class="intro">
            介绍3
        </div>
        <div class="intro">
            介绍4
        </div>
    </div>
</body>
</html>

看一下bootstrap中自适应布局的方案

<!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">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <title>Bootstrap</title>
    <style>
        .content > div{
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: #333;
            background:#cccccc;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
        </div>
    </div>
</body>
</html>

posted @ 2018-12-23 22:49 麦兜爱学习阅读(113) 评论(0) 编辑收藏举报

刷新页面返回顶部

麦兜爱学习

CSS布局

公告