您的位置：首页 > Web前端 > CSS

CSS最佳实践+套路（七） - 布局

2018-01-30 13:42 134 查看


概述

在我们平时布局的时候，一般都是选择浮动布局和Flex布局。如果项目需要支持IE8，那么推荐选择浮动布局，如果不需要支持IE8，那么尽量选择Flex布局，当我们不需要支持IE8的时候，那么我们就能使用很多高级的语法，例如：计算值（）


原则

写不要死
width
状语从句：
height

尽量选择flex，calc
如果是IE，那么上述两点全部推翻，能写死就写死


浮布局

子元素：
float:
left | right

父元素：添加
clearfix
类
1
2
3
4
5

clearfix :: after {
content：'';
显示：块;
明确：两者;
}


Flex布局

在CSS最佳实践+套路（六） - flex一文中已经详细介绍了关于FLex的相关属性.Flex布局主要是
父元素：
display:
flex;
+弹性容器相关属性
子元素：弹性项目相关属性


最佳实践和套路

实现这种布局



每个模块都是一样的，四个模块占据一行，中间有边际，四个模块占据的宽度是一定的。

float + margin负值法
HTML：
1
2
3
4
56
7

<div class =“container”>
<div class =“inner”>
<ol class =“clearfix”>
li * 10
</ ol>
</ div>
</ div>

CSS：
1
2
3
4
56
7
8
9
10
11
12
13
14
15
16

.container {
width：960px;
保证金：0汽车;
}
.clearfix {
content：'';
显示：块;
明确：两者;
}
.inner {
margin：0  - 间距/ 2px;
}
li {
width：
float：left;
}

flex + margin负值法
HTML：
1
2
3
4
56
7

<div class =“container”>
<div class =“inner”>
<ol>
li * 10
</ ol>
</ div>
</ div>

CSS：
1
2
3
4
56
7
8
9

.container {
width：960px;
保证金：0汽车;
}
ol {
display：flex;
证明内容：空间之间;
margin：0  - 间距/ 2px;
}

flex + calc 
HTML：
1
2
3
4
56
7

<div class =“container”>
<div class =“inner”>
<ol>
li * 10
</ ol>
</ div>
</ div>

CSS：
1
2
3
4
56
7
8
9
10
11

.container {
width：960px;
保证金：0汽车;
}
ol {
display：flex;
证明内容：空间之间;
}
li {
calc（25％ -  8px）// 20％*父元素宽度 -  8px
}



©CZBBhkrx
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航