一列布局自适应与固定-CSDN博客

本文链接：https://blog.csdn.net/sinat_20177327/article/details/76030087

1、一列自适应布局

所谓自适应，就是布局大小随着窗口大小改变。自适应一列布局很容易实现。

HTML代码：

<!--一列布局-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一列布局</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="div1">
        hello world!
    </div>
</body>
</html>

main.css

*{
    margin: 0;
    padding: 0;
}/*清除格式*/
.div1{
    width: 80%;/*设置宽度为百分比形式即可实现自适应*/
    height: 500px;
    background: #837979;
    margin: 50px auto;/*一列布局块元素水平居中,宽度小于浏览器窗口宽度时需要设置*/
    text-align: center;/*块内文本水平居中*/
}
.div1 p{
    padding: 5px 0;
    font-size: 24px;
    color: #357140;
    /*line-height: 500px;/*当只有单行文本时，子元素line-height等于父元素height，设置垂直居中，若多行文本,需另外考虑*/
}