web前端布局技巧经验总结
【HTML】
1、标签语义化
除了div和span，使用 header、footer、section、article、h1~h5、ul、li、a、i、b 等语义化标签。
2、使用emmet插件
3、当某些元素不需要绑定鼠标事件，在文档流里不是很重要的话，可以使用 :before/:after 等伪元素
想要实现上图的效果，只需要一个div就能搞定：
【html】
【css/scss】
.item {
&-wrap {
position: relative;
width: 150px;
min-height: 20px;
margin: 10px 0 0;
padding: 10px 30px 10px 10px;
border: 1px solid #1dbf6e;
border-radius: 3px;
line-height: 20px;
color: #666;
font-size: 14px;
&:after {
content: '';
position: absolute;
top: 50%;
right: 15px;
display: block;
width: 6px;
height: 12px;
border: 2px solid #1dbf6e;
border-left: 0 none;
border-top: 0 none;
margin: -8px 0 0 0;
transform: rotate(45deg);
}
}
}4、标签上属性注意罗列顺序：事件绑定、id、class、others
5、结构尽量精简，减少层级，降低html解析的DOM树复杂度
【css】
1、选择器权重
1）如果两个选择器作用在同一元素上，则权重高者生效；
2）权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素；
3）如果两个选择器权重值相同，则后面定义的CSS规则权重要更大，会取代前面的CSS规则；
4）权重：行内样式（1000）、id（100）、类/属性/伪类（10）、元素（1）；
2、样式属性编辑顺序
定位（position）、布局（display、float）、尺寸、内/外边距（padding、margin）、边框（border）、背景（background）、文字样式（color、font、text-align等）、过渡效果、动画效果等。
3、样式简写、同属性合并成一句
margin、padding、backgrond、font
如下：
background-image:url(test1.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:10px 20px;
background-size:50px 60px;
background-origin:content-box;
background-clip:padding-box;
background-color:#aaa;可合并写成：
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box;4、不滥用包含选择符
例： E F ；
减少样式树形关联，降低复杂度、便于样式覆盖。
5、类名命名规则
1）关键词以“-”连接；
2）最多三个层级为宜，如“first-second-third”;
3）关键字以常用易理解为主： wrap、head、contain、foot、box、content、card、row、cell、text...
6、注重类名的命名空间
模块细分，同一个模块类名以同一命名空间开头。
7、使用 sass、less 等样式编译器，提高效率
@color-light: #d2dee2;
@color-primary: #3286ff;
@color-deep: #3ea4cc;
@color-dark: #317c9a;
.index-main-navcell {
display: inline-block;
height: 30px;
padding: 0 15px;
border-bottom: 2px solid #fff;
line-height: 30px;
text-align: center;
font-weight: bold;
font-size: 14px;
cursor: pointer;
&:hover,
&.selected,
&.selected:active {
color: @color-primary;
}
&:active {
color: @color-deep;
}
&.selected {
border-bottom-color: @color-primary;
}
}
.index-main-info {
width: 500px;
padding: 180px 0;
margin: 0 auto;
color: #999;
& > p {
font-size: 16px;
line-height: 30px;
color: #666;
& > a {
color: @color-orange;
}
}
}8、在都能实现的情况下，margin优于position使用，padding优于margin使用
9、充分利用“+”选择器
【html】
【css/scss】
.list {
&-wrap {
width: 100px;
margin-top: 20px;
}
&-cell {
height: 30px;
background: #ffae47;
& + & {
border-top: 3px solid #8b9a7e;
}
}
}【效果】
10、行内元素存在间隙
先看个例子：
#1
#2
#3
#4
#5
.row {
&-wrap {
width: 100px;
margin: 20px 0 0;
background: #666;
& > span {
background: #ffae47;
color: #666;
}
}
}
效果图中可以看到，不做任何处理的span间存在着一道小小的空隙，且无法通过设置margin： 0；消除。
该情况可以设置元素浮动消除空隙，但是会使元素脱离文档流，下面是一种使元素保持在文档流中又能消除空隙的方法：
.row {
&-wrap {
width: 100px;
margin: 20px 0 0;
background: #666;
font-size: 0;
& > span {
background: #ffae47;
color: #666;
font-size: 12px;
}
}
}【效果】
行内元素间的空格回车等会造成行内元素的空隙，除了可以利用 font-size: 0 消除，还可以如下处理：
#1#2#3#4#5
【布局】
1、双栏布局
1）撑满window，随浏览器大小变化而变化
<方案一>
这是顶部的一段文字这是顶部的一段文字这是顶部的一段文字这是顶部的一段文字这是顶部的一段文字这是顶部的一段文字这是顶部的一段文字
这是左侧栏的一段文字这是左侧栏的一段文字这是左侧栏的一段文字这是左侧栏的一段文字这是左侧栏的一段文字这是左侧栏的一段文字
这是右侧自适应的一段文字这是右侧自适应的一段文字这是右侧自适应的一段文字这是右侧自适应的一段文字这是右侧自适应的一段文字
.layout {
&-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #222;
font-size: 30px;
}
&-head {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: #666;
overflow: auto;
}
&-left {
position: absolute;
top: 100px;
left: 0;
bottom: 0;
width: 200px;
background: #eee;
overflow: auto;
}
&-right {
position: absolute;
top: 100px;
left: 200px;
right: 0;
bottom: 0;
background: #999;
overflow: auto;
}
}使用position布局能够简单快速的达到我们想要的效果，兼容性好，但是整个页面脱离了文档流。
<方案二>
这是顶部的一段文字这是顶部的一段文字这是顶部的一段文字这是顶部的一段文字这是顶部的一段文字这是顶部的一段文字这是顶部的一段文字
这是左侧栏的一段文字这是左侧栏的一段文字这是左侧栏的一段文字这是左侧栏的一段文字这是左侧栏的一段文字这是左侧栏的一段文字
这是右侧自适应的一段文字这是右侧自适应的一段文字这是右侧自适应的一段文字这是右侧自适应的一段文字这是右侧自适应的一段文字
.layout {
&-wrap {
height: 100%;
}
&-head {
height: 100px;
background: #666;
font-size: 30px;
}
&-body {
height: calc(100% - 100px);
background: #eee;
font-size: 0;
}
&-left {
display: inline-block;
width: 40%;
height: 100%;
background: #eee;
font-size: 30px;
overflow: auto;
}
&-right {
display: inline-block;
width: 60%;
height: 100%;
background: #999;
font-size: 30px;
overflow: auto;
}
}使用行内元素布局也同样可以达到这样的效果，不过需要在较高版本的浏览器运行。
<方案三>
&-left {
float: left;
width: 40%;
height: 100%;
background: #eee;
font-size: 30px;
overflow: auto;
}
&-right {
width: 60%;
height: 100%;
margin-left: 40%;
background: #999;
font-size: 30px;
overflow: auto;
}通过float布局同样可以实现，在方案二的基础上调整一下左右两个div的样式即可。
【效果】
2）文档高度不定，页面可滚动
.layout {
&-wrap {
min-width: 1200px;
}
&-head {
height: 100px;
background: #666;
}
&-body {
width: 1200px;
min-height: 500px;
margin: 10px auto;
background: #eee;
}
}这种布局比较常见，也较为简单，就不作扩展了。
2、移动端页面布局
1）常见布局（导航栏+内容+菜单栏）
<方案一>
这是顶部
主体内容
底部
.layout {
&-head {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4rem;
background: #fa0;
}
&-body {
position: absolute;
top: 4rem;
left: 0;
right: 0;
bottom: 50px;
background: #eee;
}
&-foot {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: #ffa319;
}
}这是利用position绝对定位的方案。
<方案二>
.layout {
&-wrap {
height: 100%;
}
&-head {
height: 4rem;
background: #fa0;
z-index: 1;
}
&-body {
box-sizing: border-box;
height: 100%;
margin-top: -4rem;
padding: 4rem 0 50px;
background: #eee;
}
&-foot {
height: 50px;
margin-top: -50px;
background: #ffa319;
}
} 这是利用padding和margin做的布局，不脱离文档流，浏览器兼容性较好。
<方案三>
.layout {
&-wrap {
height: 100%;
}
&-head {
height: 4rem;
background: #fa0;
}
&-body {
height: calc(100% - 4rem - 50px);
background: #eee;
}
&-foot {
height: 50px;
background: #ffa319;
}
} 2）按比例展示图片
.layout {
&-img {
&-wrap {
position: relative;
&:before {
content: '';
display: block;
padding-top: 56%;
}
& > img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
}