一、盒子模型布局,一般网络模块布局
头部: 一行中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无效