我不知道的css布局

table表格布局

早期表格布局的解析不是流式的,如果你的表格很长,那浏览器会把整个表格的代码拉完以后才解析,这会造成用户等待的时间过长,进而影响用户体验。但是现在浏览器做了优化,表格也是流式解析的,但是表格布局还存在语义化不明确等问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
.container{
    height:200px;
    width: 200px;
}
.left{
    background-color: red
}
.right{
    background-color: green
}
</style>
<body>
    <table class="container">
        <tbody>
            <tr>
                <td class="left"></td>
                <td class="right"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述
 

float浮动+margin

两栏布局

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}

.left{
    background-color: yellow; 
    float: left;
    height: 100%;
    width:100px;
}
.right{
    background-color: red; 
    margin-left:100px;
    height:100%;
}
</style>
<body>
    <div class=container>       
        <div class=left></div>
        <div class=right></div>
    </div>
</body>
</html> 

在这里插入图片描述
上面代码中最重要的是 margin-left: 100px;这一句将浮动元素的位置空了出来,所以右边栏里面的元素不会影响到浮动的 div。这就是浮动布局的基本思想。

 
三栏布局

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}


.left{
    background-color: yellow; 
    float: left;
    height: 100%;
    width:100px;
}
.right{
    background-color: green; 
    float: right;
    height: 100%;
    width:100px;
}
.middle{
    background-color: red; 
    margin-left: 100px;
    margin-right: 100px;
    height:100%;
}
</style>
<body>
    <div class=container>       
        <div class=left></div>
        <div class=right></div>
        <div class=middle></div>
    </div>
</body>
</html> 

在这里插入图片描述

 

inline-block 布局

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 500px;
    height: 200px;
}
.left{
    background-color: yellow; 
    display: inline-block;
    height: 100%;
    width:200px;
}
.right{
    width: 200px;
    display: inline-block;
    background-color: red; 
    height:100%;
}
</style>
<body>
    <div class=container>       
        <div class=left></div>
        <div class=right></div>
    </div>
</body>
</html> 

在这里插入图片描述
将div设置为display:inline-block可以很容易的让div块出现在一行,但是可以看到2个div块之间是有间隙的,这个间隙来自html中的空白,有以下两种解决方案:

  1. 将父元素的font-size设置为0
.container{
    width: 500px;
    height: 200px;
    font-size:0;
}
  1. 将2个div之间的空格去掉
<body>
    <div class=container>       
        <div class=left></div><div class=right></div>
    </div>
</body>

 

flexbox

flexbox 布局即弹性盒子布局,它的特点是盒子本来就是并列的,只需要指定宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
.container{
    height:200px;
    width: 600px;
    display: flex;
    border:1px solid black;
}
.flex{
    background-color: yellowgreen;
    border:1px solid red;
    margin:3px;
    flex:1
}
#fixed{
    width: 40px;
    flex:none;
}
#double{
    flex: 2;
}

</style>
<body>
    <div class="container">
        <div class="flex" id="fixed"></div>
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex" id="double"></div>
    </div>

</body>
</html> 

在这里插入图片描述

 

响应式设计

  • viewport
<meta name="viewport" content="width=device-width, initial-scale=1">

利用meta标签将页面的宽度设置成屏幕的宽度(width=device-width)

  • media(媒体查询)
@media (max-width: 360px) {  
     html { font-size: 12px;    }
}

这段css表明样式只会在宽度小于360px的设备上生效

  • 使用 rem
    rem 指的是 html 元素的 font-size,html 元素的 font-size 默认是 16px,所以 1 rem = 16px;然后根据 rem 来计算各个元素的宽高,然后配合 media query 就可以实现自适应。
<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_21439711

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值