CSS经典布局分析

最新推荐文章于 2023-04-11 22:08:18 发布

AldarLin

最新推荐文章于 2023-04-11 22:08:18 发布

阅读量205

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34416331/article/details/103098970

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、盒子模型布局，一般网络模块布局

头部：一行中div并列排布：

1. 给每个div元素加上float:left

2. 给每个div元素加上display:inline-block。

使用display设置并列时，由于div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符，所以就会出现缝隙需要将父容器设置：font-size: 0

//index.html

<!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>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 头部区域 -->
    <div class="header">
        <!-- 头部模块 -->
        <div class="header-title"></div>
        <!-- 头部导航栏 -->
        <div class="header-nav"></div>
        <!-- 头部功能按键区 -->
        <div class="header-func"></div>
    </div>
    <!-- 内容区域 -->
    <div class="content"></div>
    <!-- 页面脚部 -->
    <div class="footer">
        <div class="footer-content"></div>
        <div class="footer-nav"></div>
    </div>
</body>
</html>

//style.css 

* {
    border: 0;
    margin: 0;
    padding: 0;
    background-color:#f2f3f4;
}

.header {
    width: 100%;
    height: 50px;
    background-color: white;
    margin-bottom: 10px;
    font-size: 0;
}

.header div {
    display: inline-block;
}

.header-title {
    width: 12.5%;
    height: 100%;
    background-color: red;
}

.header-nav {
    width: 75%;
    height: 100%;
    background-color: orange;
}

.header-func {
    width: 12.5%;
    height: 100%;
    background-color: blue;
}

.content {
    width:75%;
    height: 400px;
    margin: 0 auto;
    background-color: tomato;
}

.footer {
    width: 100%;
    height: 100px;
    background-color: green;
}

 .footer-content {
    height: 90px;
    width: 100%;
    background-color: transparent;
}

.footer-nav {
    width: 100%;
    height: 10px;
    background-color: black;
}

二、模块居中

2.1 让div模块在父容器中居中

float 结合 position使用（推荐）

元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。

相对定位结合绝对定位使用

设定父元素为相对定位，子元素为绝对定位，则可以使用left、top的值来做到水平居中和垂直居中的效果

.content {
    position: relative;
    width:75%;
    height: 400px;
    margin: 0 auto;
    background-color: tomato;
    /* text-align: center; */
}
 
.content-con {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    margin: 0 auto;
    background-color: teal;
    /* text-align: center; */
    /* vertical-align: middle; */
}

<!-- 内容区域 -->
<div class="content">
   <div class="content-con"></div>
</div>

2.2 让文字在div中居中

设置line-height等于父元素高度

三、vertical-align无效，margin:auto 0; 无效

vertical-align无效：由于vertical-align只能对内联元素生效，无法对块元素生效

margin: auto 0无效：由于margin是按宽度算的，高度auto无效

AldarLin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS经典布局分析

一、盒子模型布局，一般网络模块布局头部：一行中div并列排布：1. 给每个div元素加上float:left2. 给每个div元素加上display:inline-block。使用display设置并列时，由于div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符，所以就会出现缝隙需要将父容器设置：font-size: 0//index.h...
复制链接

扫一扫

专栏目录