HTML5中CSS的布局
本章摘要 : 自从2014年完成制定对HTML的标准后,在默认情况下,所有的网页标签都是在"标准流"布局中.
- 1, 标准流中的默认样式
- 从左到右
- 从上到下
- 2, 在各个网站上可以看到有种标签,不管你怎么拖动滑动条,它都是在原来的位置不变,这种标签就是脱离了"标准流"的标签,有两种方式设置"脱离标准流"的方法 :
- float属性
- position属性 需要和top left right bottom等属性联用
一, CSS布局 - float属性
float属性常用的两个取值是
left : 脱离标准流,浮动在父标签的最左边
right : 脱离标准流,浮动在父标签的最右边
注意点: 当继续添加数据时,会紧贴着脱离的标签,具体如下例子
float相关知识点
<html>
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
<style>
/*float脱离标准流*/
.one{
color: darkkhaki;
background-color: mediumpurple;
font-weight: bolder;
font-size: 15px;
width: 120px;
/*设置它脱离标准流,紧贴最左边*/
float: left;
/*设置它脱离标准流,紧贴最右边*/
/*float: right;*/
}
.two{
background-color: green;
color: red;
/*根据这行,当将two选择的标签的宽度设置为200时,并不是指two这个类标签的宽度
为200,而是加上one类选择器中的标签的120的宽度,刷新浏览器就会知道,两个标签
是紧贴着的,当第一行的宽度等于200之后,会自动跳到下一行, 如果我们将宽度设置
大一点,两个标签就会显示在一行*/
width: 200px;
}
/*要求实现将它们显示在同一行,删除圆点,之间有一定的间距*/
ul li{
background-color: red;
color: green;
/*可以使用display转化类型*/
/*display: inline-block;*/
/*设置floatleft或者right就可以实现它们同行显示*/
float: left;
margin: 7px;
/*去除圆点*/
/*list-style: none;*/
}
</style>
</head>
<body>
<div class="one">my name is Alex</div>
<div class="two">I am 20 years old</div>
<ul>
<!--此时,它们是独占一行的-->
<li>Alex</li>
<li>Alex</li>
<li>Alex</li>
<li>Alex</li>
<li>Alex</li>
</ul>
</body>
</html>
CSS布局 - position属性
1, position属性和float属性功能是一样的,都是将指定标签脱离"标准流"但是它们的用法完全不相同,下面我们来了解一下position的用法,在使用position之前,我们来了解几个position属性的几个常用值 :
1,absolute :它生成的是绝对定位元素,相对于static定位以外的第一个父标签进行定位.元素的位置是通过 : left, right, top, 以及bottom等属性值进行规定的.
2,fixed :生成绝对定位元素,该值是相对于浏览器的窗口进行定位,元素的位置是通过 : left, right, top, 以及bottom等属性值进行规定的.
3,relative :生成的是相对定位元素,相对于其正常位置进行定位,比如:"left :50px" 表示的意思是:会像left位置增加50个像素.
4,static 默认值,没有定位,元素会出现在正常的"标准流"中(会忽略掉top, bottom, left, right 或者 z-index声明)
** inherit** 规定元素应该从父元素那里继承position属性的值
position的简单使用
<html>
<head>
<meta charset="UTF-8">
<title>CSS布局 - position属性</title>
<style>
.William{
background-color: mediumslateblue;
color: red;
font-size: 15px;
width: 200px;
height: 200px;
position: relative;
margin: 50px;
}
.Alex{
background-color: green;
width: 100px;
height: 100px;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<!--注意:两个标签设置成了是父子关系-->
<div class="William">
<div class="Alex">不要担心,万事开头难,努力学习新知识</div>
</div>
</body>
</html>
- 总结 : 属性值的定义和运用有点绕,多练习就可以了.
