布局分类
- 固定宽度布局
960px, 1000px, 1024px，电脑页面 - 不固定宽度布局。
主要靠文档流，原本就是自适应，不需要额外样式。
多半是手机页面布局。 - 响应式布局
怎样选择布局
截屏2021-02-09 16.36.15.png
Float布局 - 为IE准备
- 子元素加
float: left和width -
父元素加
.clearfix
e.g.
<style>
/* css reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 使脱离文档流的子元素高度可被父元素包裹 */
.clearfix::after {
content: '';
display: block;
clear: both;
}
/*
加入float属性使div.logo和nav脱离文档流
不再作为block元素存在
此时父元素header的高度为0
需要给header加入.clearfix
*/
.logo {
border: 1px solid red;
height: 40px;
width: 100px;
float: left;
margin-top: 5px;
/* 使logo和nav居中对齐 */
}
nav {
border: 1px solid green;
height: 50px;
width: 200px;
float: right ;
}
header {
border: 1px solid black;
}
</style>
<header class="clearfix">
<div class="logo">LOGO</div>
<nav>Navigation</nav>
</header>
- 一般来说float布局里，一行的最后一个元素不写width，由其自身决定。
- float布局不需要做响应式（由于float基本适配IE，而手机上没有IE，自然不需要为了手机屏幕做的响应式）
- IE6-7存在双倍margin bug
- 可以减半margin
e.g. 假设原margin-left: 10px
则在该行下增加
_margin-left: 5px;
IE可识别并计算出需要的margin - 可以加
display: inline-block对抗bug
- 可以减半margin
** tips: 怎样去除图片下方多余的背景色条**
给需要去掉的img加一行：
vertical-align: top;或者vertical-aligin: middle
原理: line-height
一个简单的nav示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/* css reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
/* 卸除列表默认样式 */
ul, ol{
list-style: none;
}
/* clearfix */
.clearfix::after {
content: '';
display: block;
clear: both;
}
.logo {
background: black;
display: inline-block;
float: left;
}
.logo > img {
/* 当宽度不好固定时可直接设置高度 */
height: 26px;
/* 裁去图片下方多余的背景色块 */
vertical-align: middle;
}
ul > li {
float: left;
border: 1px solid red;
/* 上下4px，左右0.5倍 */
padding: 4px 0.5em;
}
ul {
border: 1px solid green;
display: inline-block;
}
nav {
float: left;
}
</style>
</head>
<body>
<div class="logo">
<img src="" alt="logo">
</div>
<nav>
<ul class="clearfix">
<li>首页</li>
<li>商品</li>
<li>优惠</li>
<li>关于</li>
</ul>
</nav>
</body>
</html>
tips: 用outline替代border进行调试
使用border进行调试时其宽度可能会干扰显示，此时使用outline属性替代border
outline: 1px solid red;
tips: 如何让元素自动居中
margin: 0 auto;
指定auto为第二个参数基本上会告诉浏览器自动确定左右边距本身，方法是将它们均等设置。它保证左右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置为0。
其效果等同于
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
最好使用margin-left:auto; margin-right:auto;，以防覆盖margin-top, margin-bottom.
负margin（平均布局）
做float平均布局时，一个元素里包裹数个子元素，每个子元素都有自己的margi-right，则最后一个元素会因为其右侧margin溢出而转到下一行
此时可在所有子元素外再套一层父元素 ，并使其margin-right为负数
截屏2021-02-10 17.15.06.png
Flex布局(flex flow) 弹性盒模型
.container {
display: flex; /* 或者 display: inline-flex */
}
flex-direction 弹性盒模型方向
flex-direction: row; /* default, left->right */
flex-direction: row-reverse; /* right->left */
flex-direction: column; /* top->down */
flex-direction: colunm-reverse; /* down->top */
