CSS基础教学：浮动布局与盒模型属性精讲.pdfVIP

第五天的内容

1.2复习：

1）background的使用

2）Border设置：

a)Border连写

b)Border可以分开写：上右下左边框。

3）padding:内边（计算盒子的大小）

1.Width:border-left+padding-left+width+padding-right+bord

er-right.

2.Padding的大小的设置

只给padding设置一个值，二个值，三个值，四个值

3.padding:连写4）

margin:同padding.

1.3浮动：

什么叫浮动：

问题：现在有两个div，我希望将两个div放在同一行上？

页面上块级元素单独占一行，行内元素可以一行放多个，这样的格式叫

做流（文档流），normalflow.(浏览器默认排序方式)。

如果要让两亿块级元素同时放在一行中，这个时候就必须脱标（脱离标

准流。）

1Float:left/float:right

浮动分为两种：左浮动，右浮动。

浮动可以理解为：在一个游泳中，流是我们在池底放盒子，浮动就相当

于放的这个盒子“飘起来了”。“飘起来了”的盒子会遮住池底盒子。

1.3.1浮动的特点：

1）浮动找浮动，不浮动找不浮动

2）浮动的盒子中上对齐，并且左浮动与右浮动位置相反的。

3）浮动只会影响当前盒子以下的内容，以上的内容不会影响。

总结：浮动的出现，使得页面的布局更加灵活，但是一般情况能够不使用浮动

的话，尽可能的不要使用浮动（浮动相对于SEO来说不太友好，因为它脱离标

准流）。

4）如果一个div没有设置高，这个div中的所有的元素都浮动了，那么

这个div的高是0;

Css中常用的属性：

List-style:none;去掉li之前小点

text-decoration:none;去掉超的下划线

Margin:0auto;让div居中（div是一个块级元素）

让文字居中：

水平：text-align:center;

垂直：line-height:height;

浮动：

Float:left/right;

清除中默认的内外边距：

*｛margin:0;padding:0｝

背景可不可以将容器撑开。

一个div不能放两张背景。

SEO中有个特点：

如果将关键字全部放在一起，那么SEO会认为你这是在。

1.4凡是写代码第一件：将css，初始化

Cssreset

*{margin:0;padding:0}//不要这样写了，

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,

fieldset,legend,img,input,button{margin:0;padding:0;}（推荐写法）