div容器；浮动；做出百度；盒子模型

一、html常用标签

 

（1）a：跳转标签

（2）img：图片标签

（3）div：容器标签

行内：本身有多大，占据的网页位置就有多大a、img

块级：宽度一定占据网页的一整行，高度由内容自动撑大——容器

A、宽度一定占据网页端一整行，高度由内容自动撑大

 “&nbsp”是空格。

B、用于页面分割（分割思路：将一个页面尽可能的切割，切割成你能够解决的最小单元格）

C、设置容器内容对齐方式：text-align：left/center/right;

二、浮动

（1）文档流概念：每一个网页标签都会占据一定的网页位置，我们把这个网页位置称为文档流位置

         （文档流解决了一行可以放不止一个东西的问题？？）

        遵循“从上到下，从左到右”的排列规则

（2）浮动：float，脱离文档流，使得标签不再占据文档流

       左浮动/右浮动

（3）解决由于子元素全部设置浮动导致的页面紊乱问题

A、给父元素一个固定的高度

（4）文字环绕效果

三、盒子模型

概念：css假定每一个标签都是一个矩阵，围绕这个矩阵，从内到外，展开一系列的属性来描述它

        这一系列，被称为【盒子模型】

组成：content、padding、border、margin

举例：操场上有一个箱子，箱子里有篮球

content（篮球本身）：（一个标签的）内容，有width、height组成

padding：内间距，内容到边框的距离

A、他有上下左右四个方向的内间距，padding-left、padding-right/top/bottom

B、设置padding的时候，默认会先撑大我们的content，再拿出对应宽度作为内间距

如果想要宽高从内容本身减小的话，就要设置box-sizing：border-box

                                                          （因为会被里面的内容撑大，所以要用↑来恢复原来的大小）

boder：边框，他有上下左右四个方向的边框

A、组成：border-style：边框的样式

                 border-style：边框颜色

                border-style：边框粗细

B、四条边单独设置：border：上下左右-style/color/width

C、设置padding的时候，默认会先撑大我们的content，再拿出对应宽度作为内间距

如果想要宽高从内容本身去减小的话，就要设置box-sizing：border-box

D、圆角：border-radius

        特殊：圆角等于边长的一半的时候，为圆形

E、他有上下左右四个角

        bordr-top/bottom-left/right-radius

margin:外间距，盒子跟盒子之间的距离

A、他有上下左右四个方向的内间距

B、margin：auto 使得盒子处于他所占据文档流位置的正中央

拓展1：

(margin：auto)：使得盒子处于他所占据文档流位置的正中央

（text-align：center）：使得盒子里的内容处于他所占据文档流位置的正中央

拓展2：使得文字上下左右居中，设定

height：