常见布局示意图
单列布局
width: 1000px; 或 max-width: 1000px;
margin-left: auto; margin-right: auto;
.parent { text-align: center; }
.child { display: inline-block; }
// IE6不支持inline-block
.child { *display: inline; *zoom: 1; }
第一列第2个例子（通栏）
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
/*
若 .layout 设置宽度 width: 960px;，当窗口宽度小于 960px 时，
header、footer的背景色会出现bug
给 body 设置 min-width 去掉滚动背景色 bug
若 .layout 设置宽度 max-width: 960px;，那就不需要了
*/
/*min-width: 960px;*/
}
.layout {
/* 注意 max-width 和 width 的区别，若使用 width，当窗口宽度小于 960px时，会出现横向滚动条 */
/*width: 960px; */
max-width: 960px;
margin: 0 auto;
border: 1px solid black;
}
#header {
height: 100px;
background: teal;
text-align: center;
font-size: 0;
}
#header > .layout {
padding: 10px;
}
#header .btn {
display: inline-block;
padding: 5px 8px;
border: 1px solid #ccc;
border-right: none;
color: #fff;
text-decoration: none;
font-size: 15px;
}
#header .btn:first-child {
border-radius: 5px 0 0 5px;
}
#header .btn:last-child {
border-right: 1px solid #ccc;
border-radius: 0 5px 5px 0;
}
#content {
position: relative;
height: 500px;
background: lightcoral;
}
#footer {
height: 80px;
background: lightgreen;
}
</style>
</head>
<body>
<header id="header">
<div class="layout">
<a href="#" class="btn">HTML</a>
<a href="#" class="btn">CSS</a>
<a href="#" class="btn">JavaScript</a>
</div>
</header>
<main id="content" class="layout">内容</main>
<footer id="footer">
<div class="layout">尾部</div>
</footer>
</body>
第一列第5个例子
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.parent {
/* 或者我们采用 flex */
/*display: flex;*/
/*justify-content: center;*/
max-width: 600px;
margin: 0 auto;
padding: 10px 0;
border: 1px solid red;
text-align: center;
font-size: 0;
}
.child {
/*
inline-block 要少用，一般作为父元素的唯一子元素才考虑，
因为存在底部间距问题，需要在父元素内设置字体大小为 0
这里 display: inline-block; 形成BFC，可以包含浮动元素
*/
display: inline-block;
border: 1px solid green;
font-size: 15px;
}
.child > span {
float: left;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<span>确定</span>
<span>取消</span>
</div>
</div>
</body>
利用 inline-block 做到绝对居中（了解就行）
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 600px;
height: 600px;
margin: 0 auto;
border: 1px solid red;
/* 利用 左右两个 span 和 text-align: center; 做到水平居中 */
text-align: center;
}
.wrapper > span {
/* 利用 span 的高度 100% 和 vertical-align: middle; 做到垂直居中 */
display: inline-block;
height: 100%;
border: 1px solid pink;
vertical-align: middle;
}
/* span 元素 我们用 ::before、::after 来代替;*/
.wrapper:before,
.wrapper:after
{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.wrapper > main {
display: inline-block;
width: 200px;
background-color: #ccc;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrapper clearfix">
<!-- <span>12345</span> -->
<main>main main main main main main main main main main main main</main>
<!-- <span>12345</span> -->
</div>
</body>
双列布局
- 一列固定宽度，另外一列自适应高度
- 浮动元素／定位元素 + 普通元素 margin
第二列第1个例子
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.content {
/* 2、采用定位的方式 */
/*position: relative;*/
/* 3、采用flex的方式 */
/*display: flex;*/
max-width: 800px;
margin: 0 auto;
background-color: pink;
}
.content > .aside {
/* 1、采用浮动的方式 */
float: left;
/* 如果侧栏在右边呢？注意：页面元素的渲染顺序 */
/*float: right;*/
/*position: absolute;*/
/*left: 0;*/
/*right: 0;*/
width: 200px;
height: 400px;
background: teal;
}
.content > .main {
margin-left: 210px;
/*margin-right: 210px;*/
/*margin-left: 10px;*/
/*flex-grow: 1;*/
height: 600px;
background: orange;
}
</style>
</head>
<body>
<div class="content clearfix">
<aside class="aside">aside</aside>
<main class="main">content</main>
</div>
</body>
第二列第2个例子
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.card {
max-width: 400px;
margin: 0 auto;
border: 1px solid green;
position: relative;
/*display: flex;*/
}
.card > .avator {
/*float: left;*/
/*
注意：如果 .text 内容撑起的高度小于 .avator 的高度怎么办呢？
所以 要考虑到多方面的情况，可以给 .text 设置最小高度
*/
/* 除了 float，我们也可以使用 定位 的方式来做 */
position: absolute;
left: 0;
right: 0;
/* 用 flex 的方式来做 */
/*
这里 .avator 会被压缩空间，通过设置其 min-width 恢复正常
或者给 .text 设置一个宽度 和 flex-grow: 1; 使其占据剩余空间
*/
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid black;
background-color: #ccc;
}
.card > .text {
margin-left: 52px;
/*margin-left: 10px;*/
/*width: 100px;*/
/*flex-grow: 1;*/
min-height: 42px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="card">
<div class="avator"></div>
<div class="text">
减肥的空间就看到
反馈的风景卡及阿奎
反馈的风景卡及阿奎罗分可了解对方
景卡及阿奎罗分可了解对方卡拉胶的风
景卡及阿奎罗分可了解对方卡拉胶的风
景卡及阿奎罗分可了解对方卡拉胶的风
<div style="text-align: right; padding: 0 5px;">
<button style="padding: 1px 7px; border: 1px solid">赞</button>
</div>
</div>
</div>
</body>
三列布局
第三列第1个例子
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.wrapper {
/* 2、采用定位的方式 */
/*position: relative;*/
/* 3、采用 flex 的方式 */
/*display: flex;*/
max-width: 800px;
margin: 0 auto;
background-color: pink;
}
.wrapper > .menu {
/* 1、采用浮动的方式 */
float: left;
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
/*order: 1;*/
width: 150px;
height: 400px;
background-color: lightgreen;
}
.wrapper > .aside {
float: right;
/*position: absolute;*/
/*top: 0;*/
/*right: 0;*/
/*order: 3;*/
width: 200px;
height: 300px;
background: teal;
}
.wrapper > .main {
margin-left: 160px;
margin-right: 210px;
/*flex-grow: 1;*/
/*order: 2;*/
/*margin: 0 10px;*/
height: 600px;
background: orange;
}
</style>
</head>
<body>
<div class="wrapper clearfix">
<!-- 为什么不是 main 在前面？还是跟渲染顺序有关 -->
<div class="menu">menu</div>
<aside class="aside">aside</aside>
<main class="main">main</main>
</div>
</body>
网友评论