html5剧中布局,HTML5中CSS的布局

HTML5中CSS的布局

本章摘要 : 自从2014年完成制定对HTML的标准后,在默认情况下,所有的网页标签都是在"标准流"布局中.

1, 标准流中的默认样式

从左到右

从上到下

2, 在各个网站上可以看到有种标签,不管你怎么拖动滑动条,它都是在原来的位置不变,这种标签就是脱离了"标准流"的标签,有两种方式设置"脱离标准流"的方法 :

float属性

position属性 需要和top left right bottom等属性联用

一, CSS布局 - float属性

float属性常用的两个取值是

left : 脱离标准流,浮动在父标签的最左边

right : 脱离标准流,浮动在父标签的最右边

注意点: 当继续添加数据时,会紧贴着脱离的标签,具体如下例子

float相关知识点

CSS布局

/*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;*/

}

my name is Alex

I am 20 years old

• Alex
• Alex
• Alex
• Alex
• Alex

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的简单使用

CSS布局 - position属性

.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;

}

不要担心,万事开头难,努力学习新知识

总结 : 属性值的定义和运用有点绕,多练习就可以了.