本文共 4042 字，大约阅读时间需要 13 分钟。

1.2 CSS浮动布局及盒模型

笔者为正在学习web前端开发基础的菜鸟，计划先学习祖传三大件：HTML CSS及JS。写博客主要是为了加深记忆，以及把自己所学分享。本博客的内容主要为学习笔记，由于自学，其中我会借鉴网课老师课堂笔记再加入一些自己的见解，同时会分享一些学习过程中遇到的问题和解决方法

正文

1.什么是浮动？

浮动就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。 2.浮动的原理 就是让元素脱离文档流，不占用标准流。 3.float的属性值： left:左浮动 right:右浮动 none:默认值，不浮动 4.浮动后，后面的元素不管是块级还是行级元素，不会显示在下一行。 5.清除浮动 目的：让后面的元素自动掉到下一行。 方法： 1）添加空标签，并设置样式：clear:both; clear:left; 清除左浮动 clear:right; 清除右浮动 clear:both; 清除左右浮动 clear:none; 左右浮动都不清除 2）在要清除浮动的父级添加样式：overflow:hidden; overflow:hidden; 超出部分隐藏，也可以用来实现清除浮动。 此种方式用的最多也最快捷。 3）在要清除浮动的父级添加伪元素，并设定样式： 父元素:after{ content:""; display: block; clear:both; }

注意：在实际项目开发中，我们一般首先第2种方案。

6.CSS盒子模型

每个元素都是一个盒子，一个盒子由margin（外边距），border（边框线）,padding（内边距）和content（内容）组成。 IE的盒子中的content又由padding和content组成。

区别外边距和内边距是以边框为参照。系统默认外边距为8px，在练习的时候可以利用*选择器初始化所有标签的padding和margin，利于掌握。1）外边距(margin)：指元素边框线之外的距离。    margin-left:左边距    margin-right:右边距    margin-top:上边距    margin-bottom:下边距    margin:可用来设置任意一个边的边距，可以带1至4个参数。        1个(apx)：表示上下左右都有这样的外边距apx        2个(apx bpx)：表示上下外边距为apx，左右外边距为bpx        3个(apx bpx cpx)：表示上外边距为apx，下外边距为cpx，左右外边距为bpx        4个(apx bpx cpx dpx)：表示上为apx,右为bpx,下为cpx,左为dpx        1参数为所有，2参数上下、左右，3参数个人建议可以直接写成四参数带个零，四参数上右下左。2）内边距（padding）：指元素的文本内容与边框之间的距离。    它的用法与margin完全一样。3）边框(border)    border-width:边框线宽度    border-style:边框线样式    border-color:边框线颜色    复合写法（简写）：        border:border-width border-style border-color;        注意：border-width border-style border-color这三个参数没有位置之分。

7.盒子的真实尺寸

盒子宽度 = width + padding左右 + border左右 盒子高度 = height + padding上下 + border上下

-小实验-

这里可以做一个小实验来体验盒子的真实尺寸

两个son类盒子的宽度为200px，包裹son类盒子的father类盒子宽度为400px。两个son盒子浮动之后大家可以看到，son并没有成为一行。

这是因为两个son盒子和一个father盒子都设置了边框宽度，这是一个数学问题

——son每个盒子真实宽度为：(width)200px + (border_width)2px = 202px

所以，增加father宽度(404px)或者减小son宽度(198px)都可以让其排列一行。

.father{
               width: 404px;            height: 400px;            overflow: hidden;        }

8.display属性：用来设置元素的显示方式。

属性值： none:不显示元素 block:块显示，在元素前后设置换行符。目的：将行级标签转换为块级标签（因为行级标签不识别宽高， 而块级标签识别，转换后，行级标签也可以设置宽高了） inline:行内显示，将块级标签转换为行级标签。 inline-block;将块级或行级标签转换为行内块级标签。 9.table样式 table一般不用来布局，主要用来格式化数据。 属性： width:宽度 height:高度 border-collapse:collapse; 单线边框 border:边框线 td,tr属性： width:宽度 height:高度 border:边框线 text-align:文本左右对齐(left(默认)/center/right) vertical-align:文本垂直对齐(top/middle(默认)/bottom) 10.列表样式 不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列表等。 1）列表类型 无序(ul)、有序(ol)和自定义列表(dl)。 ul和ol的列表项都是用li表示的，而dl是由一个dt和一个或多个dd组成的。 dl一般用来设定一个定义，比如名词解释等。dt：标题,dd：描述，用来对dt的内容进行解释并说明的。 2）样式(用来修改标识类型) list-style-image:用图像表示标识 list-style-position:标识的位置(inside/outside(默认)) list-style-type:标识类型 可复合，任意顺序，任意参数数量都可以（其余自动默认）

总结

浮动是个好东西，一定多加练习，熟悉掌握。不过小心一些稍复杂的网页，标签嵌套比较多的时候，某个板块不需要浮动，却不小心设置了浮动。这种错误往往很难发现，所以在编写布局的时候，请尽量合理化标签的嵌套，看清标签之间关系。在利用浮动的时候，要计算好宽度是否允许浮动到一行。请记住，一定要及时清除浮动！

下图为利用今日所学做成的网页效果图，这里稍微用到布局样式position，下个文章介绍

效果图

HTML布局：

CSS样式：

/*轮播图*/*{
       margin: 0;    padding: 0;}li{
       list-style: none;}a{
       text-decoration: none;}.carousel{
       width: 768px;    height: 432px;    margin: 100px auto;    background-color: #cccccc;    position: relative;    overflow: hidden;}.carousel-imgs{
       width: 99999px;}.carousel-imgs li{
       float: left;}.carousel-imgs img{
       width: 768px;    height: 432px;}/*控制器*/.prev,.next{
       width: 32px;    height: 32px;    position: absolute;    top: 50%;    margin-top: -16px;}.next{
       background-image: url("../img/next.png");    right: 10px;}.prev{
       background-image: url("../img/prev.png");    left: 10px;}/*计数器*/.count{
       width: 768px;    height: 10px;    position: absolute;    bottom: 25px;}.count ul{
       width: 100px;    margin: 0 auto;}.count ul li{
       width: 10px;    height: 10px;    cursor: pointer;    opacity: .5;    background-color: #cccccc;    float: left;    margin-right: 10px;    border-radius: 50%;}.count .active{
       background-color: #4375f3;}

转载地址：http://iqozi.baihongyu.com/