怎样在div盒子里加PHP,php学习笔记之div+css（三） | 醉墨阁

php学习笔记之div+css(三)

php学习笔记之div+css(三)是小六2016年11月10号的php学习的笔记，主要内容是css盒子模型，后面有小六自己写的案例代码。

行内元素和块元素：

行内元素只占能显示自己内容的宽度，不会占据整行，也不会换行。

块元素不管内容有多少，会占据整行，而且会换行显示。

常见的行内元素有 等。

常见块元素有

等。

行内元素和块元素可以转换：

Display: inline 表示使用行内元素方式显示

Display: block 表示使用块元素方式显示

标准流和非标准流

流: html 元素在网页中显示的顺序。

标准流: 在html 文件中，写在前面的元素在前面显示，写在后面的html 元素在后面显示。

非标准流：在html 文件中，当某个元素脱离的标准流，那么它就处于非标准流。

Css中的盒子模型：

CSS盒子模型：CSS盒子模式就像日常生活中所见的盒子一样是用来装东西的，它有四个属性：内容(content)、填充/内边距(padding)、边框(border)、边界/外边距(margin)。

盒子模型的理解：

边框(BORDER)就是盒子，它代表了盒子的大小；

内容(CONTENT)就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西损坏而添加的泡沫，把content与border分开；

边界/外边距(MARGIN)就是盒子不能靠墙摆放，要留一定空隙保持通风，保护东西不受潮。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子(DIV嵌套)，与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

Css盒子模型的案例代码：

Html代码：

1/

无标题文档

Css代码：

@charset "utf-8";

/* CSS Document */

.c1{

width:500px;

height:500px;

margin:0px auto;

border:solid #F00;}

.c2{

width:340px;

height:250px;

border:solid black;

padding-left:0px;

margin:10px auto;}

.c2 img{

width:45px;

height:45px;

margin:3px;

}

.c2 li{

width:52px;

height:52px;

list-style-type:none;

margin:5px;

float:left;

border:solid #CCC;

}

醉墨阁个人博客网站版权所有，转载请注明文章出处。

欢迎关注醉墨阁公众号：zmgblog