1、盒子模型

一个盒子我们会分成几个部分：

内容区(content)

内边距(padding)

边框(border)

外边距(margin)

图片1.png

内容区

通过width和height两个属性可以设置内容区的大 小。

width和height属性只适用于块元素。

内边距

默认情况下width和height不包含padding的大小。

使用padding属性来设置元素的内边距。

例如：

padding:10px 20px 30px 40px

这样会设置元素的上、右、下、左四个方向的内边距

内边距

同时在css中还提供了padding-top、padding-right、padding-

right、padding-bottom分别用来指定四个方向的内边距

边框

border-top/left/right/bottom分别指定上右下左 四个方向的边框。

边框的样式

边框可以设置多种样式：

none(没有边框)

dotted(点线)

dashed(虚线)

solid(实线)

double(双线)

groove(槽线)

ridge(脊线)

inset(凹边)

outset(凸边)

外边距

使用margin属性可以设置外边距。

用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。

当将左右外边距设置为auto时，浏览器会将左右外 边距设置为相等，所以这行代码margin:0 auto可 以使元素居中。

display

我们不能为行内元素设置width、height、 margin-top和margin-bottom。

我们可以通过修改display来修改元素的性 质。

可选值：

block：设置元素为块元素

inline：设置元素为行内元素

inline-block：设置元素为行内块元素

none：隐藏元素(元素将在页面中完全消失)

visibility

visible：可见的

hidden：隐藏的

overflow

visible：默认值

scroll：添加滚动条

auto：根据需要添加滚动条

hidden：隐藏超出盒子的内容

文档流

文档流

我是一个span

我是一个span

我是一个span

我是一个span

我是一个span

我是一个span

浮动

浮动

.box1{

width: 600px;

height: 200px;

background-color: red;

/*

块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开

如果希望块元素在页面中水平排列，可以使块元素脱离文档流

使用float来使元素浮动，从而脱离文档流

可选值：

none，默认值，元素默认在文档流中排列

left，元素会立即脱离文档流，向页面的左侧浮动

right，元素会立即脱离文档流，向页面的右侧浮动

当为一个元素设置浮动以后(float属性是一个非none的值)，元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动

元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素

*/

float: left;

}

.box2{

width: 200px;

height: 200px;

background-color: yellow;

float: left;

}

.box3{

width: 200px;

height: 200px;

background-color: green;

float: left;

}

定位

position属性可以控制Web浏览器如何以 及在何处显示特定的元素。

可以使用position属性把一个元素放置到网 页中的任何位置。

可选值：

static

relative

absolute

fixed

相对定位

当将position属性设置为relative时，则开启了元素 的相对定位。

当开启了相对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。

内联元素的浮动

浮动

.box1{

/*在文档流中，子元素的宽度默认占父元素的全部*/

/*height: 100px;*/

background-color: #bfa;

/*

当元素设置浮动以后，会完全脱离文档流.

块元素脱离文档流以后，高度和宽度都被内容撑开

*/

/*float: left;*/

}

.s1{

/*

开启span的浮动

内联元素脱离文档流以后会变成块元素

*/

float: left;

width: 100px;

height: 100px;

background-color: yellow;

}

hello

网页的简单布局

本来生活

*{

margin: 0;

padding: 0;

}

.head{ /*头部*/

width: 1519.2px;

height: 31px;

background-color: #fcfcfc;

border-bottom: 1px solid #e5e5e5;

margin: auto;

}

.register{ /*登录*/

width: 195px;

height: 29.6px;

background-color: yellow;

margin-left: 160px;

}

.slideshow1{ /*轮播图*/

width: 1519.2px;

height: 60px;

background-color: yellowgreen;

margin: auto;

}

.seek{ /*搜索*/

width: 1200px;

height: 102px;

background-color: #3e4141;

margin: auto;

margin-top: 10px;

margin-bottom: 20px;

padding: 10px 0 20px;

}

.catalogue{ /*目录*/

width: 1519.2px;

height: 44px;

background-color: #8ab700;

margin: auto;

}

.box1{

width: 210px;

height: 44px;

background-color: green;

margin-left: 160px;

float: left;

}

/*.box2{

width: 86px;

height: 40x;

background-color: green;

display: block;

margin:left:20px;

}*/

.box2{

width: 86px;

height: 40px;

background-color: green;

float: left;

margin:2px /*10px*/;

}

.box3{

width: 122px;

height: 40px;

background-color: green;

float: left;

margin:2px /*10px*/;

}

.box4{

width: 122px;

height: 40px;

background-color: green;

float: left;

margin:2px /*10px*/;

}

.box5{

width: 104px;

height: 40px;

background-color: green;

float: left;

margin:2px /*10px*/;

}

.box6{

width: 104px;

height: 40px;

background-color: green;

float: left;

margin:2px /*10px*/;

}

.box7{

width: 104px;

height: 40px;

background-color: green;

float: left;

margin:2px /*10px*/;

}

.box8{

width: 86px;

height: 40px;

background-color: green;

float: left;

margin:2px /*10px*/;

}

.box9{

width: 122px;

height: 40px;

background-color: green;

float: left;

margin:2px /*10px*/;

}

.box10{

width: 122px;

height: 40px;

background-color: green;

float: left;

margin:2px /*10px*/;

}

.content{ /*内容*/

width: 1519.2px;

height: 400px;

background-color: gray;

margin:auto;

}

.classify{

width: 206px;

height: 396px;

background-color: yellow;

margin-left: 160px;

float: left;

border:2px green solid;

}

/*.a{

width: 206px;

height: 33px;

background-color: blue;

float: left;

}*/

image.png