文章图片
一、使用flex布局
- 锐客网
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
好好学习
好
天天向上
二、使用绝对定位方法
绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。
layout_box - 锐客网
html,body{
margin: 0px;
width: 100%;
padding: 0;
height: 100%;
}
#left,#right{
width: 200px;
height: 100%;
background-color: red;
position: absolute;
}
#left{left:0px;
}
#right{right: 0px;
}
#center{margin:0px 200px;
background-color: blue;
height: 100%;
}
我是左边
我是右边
我是中间
三、使用自身浮动法
自身浮动法的原理就是使用对左右使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。
html,body{margin: 0px;
width: 100%;
padding: 0;
height: 100%;
}
#left_self,#right_self{ width: 200px;
background-color: #ffe6b8;
height: 100%;
}
#left_self {float: left;
}
#right_self{float: right;
}
#center_self{margin: 0 200px;
background-color: #a0b3d6;
height: 100%;
}我是左边
我是右边
我是中间
四、圣杯布局
圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度,并且这个宽度要和left块的margin负值进行配合,具体原理参考这里。这里对圣杯布局解释特别详细。
html,body{ margin: 0px;
width: 100%;
padding: 0;
height: 100%;
}
#wrap{ width: 100%;
height: 100%;
background-color: #fff;
float: left;
}
#wrap #center{ margin:0 200px;
height: 100%;
background-color: #ffe6b8;
}
#left_margin,#right_margin{ float: left;
width: 200px;
height: 100%;
background-color: darkorange }
#left_margin {margin-left: -100%;
background-color: lightpink;
}
#right_margin{margin-left: -200px;
}
【三列布局(两边定宽,中间自适应,充满整个屏幕)】
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少(今天见识到跳槽天花板!!)