- DIV + CSS 标准化页面布局实战
- HTML5新特性页面布局实战
- 响应式页面布局实战
- 使用弹性盒移动页面布局实战
- 用流行栅格框架布局页面实战
1.DIV+CSS布局布局介绍
- 页面布局常用标签
<div>无意义块砖元素便签</div>
<span>无意义行内元素标签</span>
<p>段落标签</p>
<ul>无序列表</ul>
<li>列表项</li>
<a>超链接标签</a>
<img />
<i>斜体标签</i>
<b>粗体标签</b>
- 页面布局常用选择器
id选择器 #id
类选择器 .class
关系选择器 div p、div>p、div,p
伪类选择器 hover
结构性伪类选择器:
E:after、E:before、E:nth-child()、E:first-child、E:last-child
- 页面布局常用属性
字体属性:font-size
文本属性:text-decoration、text-align
首行缩进:text-indent
行高:line-height
宽高属性:width、height、min-height、max-height
背景属性:background
列表属性:list-style-type
字体颜色:color
- 页面布局应用属性
定位属性:position
布局属性:display
浮动属性:float,clear
(css3)盒子模型:border,margin,padding
(css3)圆角边框:border-radius
阴影:text-shadow,box-shadow
浮动定位指
- 将元素排除在普通流之外(也就是说脱离文档流,到了另外一层)
- 元素将不在页面中占据空间(也就是有自己的位置)
- 讲浮动元素放置在包含框的左边或者右边
- 浮动元素依旧位于包含框之内
浮动的框可以向左或向右移动,
直到他的外边缘碰到包含框或另一个浮动框的边框为止
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动
,只会左右浮动
任何元素一旦浮动,display属性将完全失效
均可以设置宽高,并且不会独占一行
语法:float:none/left/right
请看案例
<style>
/*浮动属性:会脱离文档流,而且不会占据原有的空间 */
#box{
width: 600px;
height: 600px;
background:deeppink
}
#box>div:first-child{
width: 200px;
height: 200px;
background:rebeccapurple;
/* 左浮动 */
/* float:left; */
}
#box>div:nth-child(2){
width: 200px;
height: 200px;
background:rgb(233, 230, 47)
}
#box>div:last-child{
width: 200px;
height: 200px;
background:rgb(231, 123, 60)
}
</style>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
浏览器显示结果:
如果我们给第一个加上了左浮动
#box>div:first-child{
width: 200px;
height: 200px;
background:rebeccapurple;
/* 左浮动 */
float:left;
}
为了更明显,我们试着改一下宽高
说明它浮动上来了,并且没有占据宽高
我们试着设置成右浮动
#box>div:first-child{
width: 300px;
height: 300px;
background:rebeccapurple;
/* 左浮动 */
/* float:left; */
/* 右浮动 */
float: right;
}
我们上面说:
浮动的框可以向左或向右移动,
直到他的外边缘碰到包含框或另一个浮动框的边框为止
接下来我们来试一试
所以我们可以很清晰的看见,当两个元素都被设置成浮动时,
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止
我们知道,div特性:独占一行
现在我们设置成浮动的两个元素都处于浮动状态
我们没有浮动的第三个元素,所以它的呈现状态是这样的
假设我们给它一个浮动
在空间不够的情况下,它会自动下来
我们可以很清晰的看见,它下来了~~~
这个也说明了,浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠,浮动元素不会上下浮动,只会左右浮动
我们知道,行内元素特点:没有宽高,并且不会独占一行
<span>
成就自己只需要一套精品
</span>
我们给它设置一下宽高
span{
background: rgb(204, 142, 142);
width: 200px;
height: 200px;
}
浏览器显示结果:
我们发现我们给它设置的宽高是不起作用的
那么这时候如果我们给它加上浮动的属性
span{
background: rgb(204, 142, 142);
width: 200px;
height: 200px;
float: left;
}
浏览器显示结果:
接下来我们继续测验
<span>
成就自己只需要一套精品
</span>
<span>
成就自己只需要一套精品
</span>
浏览器显示结果:
所以说,任何元素一旦浮动,display属性将完全失效
均可以设置宽高,并且不会独占一行,有利于我们的排版,right?
回到我们之前的小例子
假设我们不给我们的父元素设置宽高,并把它的三个子元素的浮动先去掉
/*浮动属性:会脱离文档流,而且不会占据原有的空间 */
/* div特性:独占一行 */
#box{
/* width: 600px; */
/* height: 600px; */
background:deeppink
}
#box>div:first-child{
width: 200px;
height: 200px;
background:rebeccapurple;
/* 左浮动 */
/* float:left; */
/* 右浮动 */
/* float: right; */
}
#box>div:nth-child(2){
width: 200px;
height: 200px;
background:rgb(233, 230, 47);
/* 右浮动 */
/* float:right; */
}
#box>div:last-child{
width: 200px;
height: 200px;
background:rgb(231, 123, 60);
/* float:right; */
}
浏览器显示结果:
说明我们的父元素是能够感知我们的子元素的高度的
如果我们的第一个元素设置浮动了
我们可以发现父元素的高度明显降低了,因为第一个元素浮动了(可以理解为它离家出走了)
那么父元素只能感知到其他两个子元素的高度
同理,如果第二个设置了浮动,那么父元素只能感知到一个子元素的高度
如果第三个也设置了浮动,那么父元素就没有了
那么怎么解决这种问题?
1. 给父元素设置宽高
但是我要是不想设置宽高,应该怎么操作呢
2. 给父元素加----overflow: hidden
/* 在不设置宽高的情况下,让父类可以感知子类的高度 */
overflow: hidden;
3. 给父元素加浮动
设置完浮动之后,为了能够看见效果,我们再加一个div
我们设置的宽高是400*400,但是很明显,被浮动着的元素挡住了,这个时候,我们可以设置一下清除浮动
除了设置清除浮动,我们还可以给元素左浮动或者右浮动
因为父元素没有设置宽高,所以它可以尽情的浮动
父元素的宽高是根据子元素宽高决定的
假设这个时候我们把父元素的宽高设置出来
然后父亲也不设置浮动了
可以发现,这个子元素就下来了
如果这个子元素没设置浮动,那么它就上去了
所以第一种,我们可以选择浮动来解决这个问题
如果不用浮动,就用clear:both来解决
所以说,清除浮动的效果就是用来抵消其他元素浮动对当前元素所产生的影响
小结CSS清除浮动
描述
:
清除浮动是在使用了浮动之后必不可少的,为了网站布局的效果,清除浮动也变得非常麻烦
属性:clear
值:left、right、both
清除浮动的常用方式
- 结尾处加空div标签 clear:both(或者在下一个元素上加clear:both)
- 浮动元素的父级div定义 overflow:hidden
- 浮动元素的父元素定宽高
clear:left是为了抵消float:left的效果
clear:right是为了抵消float:right的效果
clear:both是为了来抵消两边的效果(推荐使用)