css布局
2019-01-11 本文已影响19人
miccuci
盒模型
margin/border/padding/content
盒模型结构图
行内元素与块级元素
- 块级元素
div、ul、li、h1~h6、p
- 总是在新行上开始；
- 高度，行高以及外边距和内边距都可控制；
- 宽度缺省是它的容器的100%，除非设定一个宽度。
- 它可以容纳内联元素和其他块元素
- 行内元素
span、a、img、表单元素(input、select)等
- 和其他元素都在一行上；
- 高，行高及外边距和内边距不可改变；
- 宽度就是它的文字或图片的宽度，不可改变
- 内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下：
- 设置宽度width 无效。
- 设置高度height 无效，可以通过line-height来设置。
- 设置margin 只有左右margin有效，上下无效。
- 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
布局与定位：display、float、position
- display
通过display属性对行内元素和块级元素进行切换
image.png
- float
浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
image.png
image.png
- position
image.png
相对定位，根据自身位置定位
绝对定位，根据父元素定位，脱离文档流
固定定位，根据浏览器窗口定位
flex布局
flex实例教程-阮一峰
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
-
水平方向，左侧固定，右侧内容撑满
image.png
<div class="InputAddOn">
<span class="InputAddOn-item">...</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">...</button>
</div>
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
-
垂直方向，底部固定，中间内容撑满
image.png
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
-
圣杯布局
image.png
<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>...</footer>
</body>
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
flex: 1;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}
