布局方式
1.默认的就是文档流的方式
以默认的html元素的结构顺序显示
2.浮动布局方式
通过设置html元素的float属性显示
3.定位布局方式
通过设置html元素的position属性显示
浮动
浮动(float)CSS实现布局的一种方式,包括div在内的任何元素都可以以浮动的方式进行显示
浮动是将块元素的霸道属性(独占一行的取消),允许别人和它一行,其实就是这个块从原来的文档流模式中分离出来,它后面的对象就视它不存在
值:
none:不浮动
left:对象向左浮动,而后面的 内容流向对象的右侧
right:对象向右浮动,而后面的内容流向对象的左侧
补充:当父元素没有指定高度并且它的子元素有浮动时,这时,这个父元素的高度不会自动增加
1常用的布局效果:例如,一行并列式,就是在一行中,显示几个块元素
如果想让多个块显示在同一行中,可以将这些块都设置为浮动,并且浮动方向相同
2CSS把网页元素,分为两类,一类是块,一类是内联
Body,div,p,h1
3ul和li默认情况下是块元素,要想让他们在一行中显示,就要用到浮动。
4我们在制作时,多使用不同的浏览器查看你的结果,这样,就知道各种浏览器的差别
5当IE6父元素中的子元素的高度超出了父元素,IE6会把父元素的高度自动增加
清除浮动
就是去掉前面对象浮动对后面对象的影响
clear :
none:默认值,不清除浮动
left:只清除向左的浮动
right:只清除向右的浮动
both:所有浮动都会清除
浮动浮动,先浮后动,浮动的对象,会先漂浮起来,离开原来的位置,后动,就是它后面的对象会向它原来的位置上动起来
出现的问题:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客布局</title>
<style>
body,div{
margin:0;
padding:0;
}
#left{
width: 200px;
height: 100px;
background-color: red;
float:left;
}
#right{
width: 300px;
height: 300px;
background-color: green;
float:right;
}
#footer{
height: 50px;
font-size: 20px;
background-color: blue;
clear:both;
}
</style>
</head>
<body>
<div id="left" >1</div>
<div id="right" >2</div>
<div id="footer" >3</div>
</body>
</html>
执行代码的截图(正常截图):
当浏览器窗口的逐渐变小后,红块和绿块本应该在同行的元素的位置发生了改变。改变了原来的位置
改变位置的截图:
解决方法:在左右两块外加一个父元素,用于控制它们的整体
总结:清除浮动方法总结
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱现象,可以通过清除浮动的方法来解决浮动元素的影响。
方法一:额外标签法
这是最简单到的方法,在浮动容器的末尾增加一个”clear:both”的元素,强迫容器适应它的高度以便装下所有的float元素
.class{clear:both}
<div id="top" >4</div>
<div id="main">
<div id="left" >1</div>
<div id="center" >3</div>
<div id="right" >2</div>
<div class=”clear” ></div>/*添加一个空div*/
</div>
<div id="footer" >3</div>
方法二:父元素使用overflow元素
通过设置父元素overflow值设置为hidden,使最简单的清除浮动的方法,但如果使用的定位布局,就会很难实现
CSS中溢出的使用
功能 | 语法 |
设置当对象的内容超过其指定高度及宽度时如何管理内容 | overflow:visivle[默认值。不剪切内容也不添加滚动条],auto[在必要时对象内容才会被裁切或显示滚动条],hidden[不显示超过对象尺寸的内容], scroll[总是显示滚动条] |
方法三:利用伪对象agter方法:
定义一个类,使用伪after,控制浮动元素的影响
网上最流行的清除浮动的代码:
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:””;
}
定位布局
就是可以通过元素的position属性控制元素的位置
当我们要使用绝对定位时,必须要有两个条件:
- 必须给父元素加定位属性,一般简易使用position:relative
- 给子元素加绝对定位position:absolute,同时要加方向属性
属性:position
描述:设置对象的定位方式
值:
static:静态定位:页面中的每一个对象的默认值
absolute:绝对定位:将对象从文档流中分离出来,通过设置left,right,top,bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象,则依据body对象。
relative:相对定位:对象不从文档流分离,通过设置left,right,top,bottom四个方向相对于自身位置进行相对定位。
相对定位和绝对定位的区别:
绝对定位是以父元素为基准点,进行定位,会脱离文档流。
相对定位是根据其自身为基准点,进行定位,离开原来的位置,但还占着原来的空间。
注意:有些元素有内外边距
补充:css控制字体样式:
补充:向想文字在垂直方向上居中,将行高设置为元素的高度,行高=元素高度(文字的内容不能超过元素的宽度,也就是说不能换行)