下载文档原格式
学习HTML和CSS中的盒模型和浮动布局HTML和CSS是现代网页设计不可或缺的两个重要技术，其中盒模型和浮动布局是学习HTML和CSS的基础，本文将逐一介绍盒模型和浮动布局的相关知识。
第一章：盒模型盒模型是指HTML中元素的布局和设计的基本单位。
一个HTML元素可以看作一个盒子，盒模型描述了这个盒子的内容、填充、边框和外边距。
在CSS中，盒模型是由四个部分组成的：内容（content）、填充（padding）、边框（border）和外边距（margin）。
1.1 内容（content）一个元素的内容指的是它所包含的文本、图片或其他媒体等信息。
内容的尺寸由元素的宽度和高度属性来决定。
1.2 填充（padding）填充是指元素内容与边框之间的空白区域。
填充可以通过padding属性来设置，可以为元素增加空白区域，使其内容看起来更加美观。
1.3 边框（border）边框是围绕元素内容和填充的线条。
边框可以通过border属性来设置，可以调整线条的宽度、样式和颜色。
1.4 外边距（margin）外边距是指元素与其他元素之间的空白区域。
外边距可以通过margin属性来设置，可以调整元素与其周围元素之间的间隔。
第二章：浮动布局浮动布局是指通过使用CSS中的float属性来控制元素在页面中的位置。
通过设置元素的float属性，可以将元素向左或向右浮动，使其脱离正常的文档流并在页面中移动。
2.1 浮动的基本原理浮动元素会尽可能地靠近页面的左边或右边，并且尽量与前一个元素或后一个元素保持距离。
当元素浮动之后，其他元素会围绕着浮动的元素排列。
2.2 浮动的应用场景浮动布局可以用于实现多栏布局、图文混排以及响应式布局等。
它常用于网页中的导航栏、侧边栏和图片等元素的布局。
第三章：盒模型和浮动布局的综合运用在实际的网页设计中，盒模型和浮动布局经常会同时被使用。
通过对盒模型的设置，我们可以控制元素的尺寸、外观和间距；而通过浮动布局，我们可以实现元素的位置自由调整和多列布局。
了解CSS中的盒模型和定位属性CSS（层叠样式表）是我们在网页设计中经常用到的一种技术，其中的盒模型和定位属性也是我们必须掌握的内容。
一、盒模型在CSS中，元素的盒子可以看作是一个三维的盒子，其中包含了内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。
1.1内容(content)内容部分是元素盒子中的第一部分。
这部分用于展示元素的内容，它的大小由元素的宽度(width)和高度(height)属性所决定。
1.2内边距(padding)内边距是内容部分和边框之间的距离。
使用内边距可以在元素内容和边框之间留出空间，使元素看起来更美观。
1.3边框(border)边框是围绕元素内容和内边距的可视化边界。
它可以设置颜色、宽度和样式。
可以为元素设置多个边框，每个边框都具有独立的样式和属性。
1.4外边距(margin)外边距是元素盒子和邻近元素盒子之间的距离。
外边距可以被用来分隔元素。
它们可以在网页设计中被用于创建边距和空格。
二、定位属性定位属性是CSS中另一个重要的概念。
定位可以被用来控制元素的位置。
2.1 positionposition属性可以设置元素的定位类型。
它有以下四个值可用：static、relative、absolute和fixed。
其中static是默认值，元素将遵循正常的文档流，而其他三个值则可以使元素变得具有定位特性，可以通过top、bottom、left和right属性进一步控制它们的位置。
2.2 top该属性指定元素应该向上定位的距离。
它是相对于已定位的父元素而言的。
2.3 bottom该属性指定元素应该向下定位的距离。
它是相对于已定位的父元素而言的。
2.4 left该属性指定元素应该向左定位的距离。
它是相对于已定位的父元素而言的。
2.5 right该属性指定元素应该向右定位的距离。
它是相对于已定位的父元素而言的。
2.6 z-index此属性用于控制元素的堆叠顺序。
css三⼤模块：盒⼦模型、浮动、定位⼀、盒⼦模型把HTML页⾯中的元素看作是⼀个矩形的盒⼦（装内容的容器），每个矩形都由元素的内容、内边距padding、边框border和外边距margin 组成。
看下⾯的代码：<style>.box{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}</style><div class="box"></div>代码效果如下：浏览器下的效果在Chrome的开发者⼯具中 box的⼆维分析图盒⼦模型⼀般分为两种：IE盒模型（⼜称怪异盒模型）和标准盒模型css3中可以通过box-sizing来指定盒模型，如下：标准盒模型：box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/IE盒模型：box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/代码如下：<style>div{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}.box1{box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/}.box2{box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/}</style><div class="box1">box1</div><div class="box2">box2</div>两种盒模型效果图如下（box1为标准盒模型、box2为IE盒模型）：浏览器下的效果在Chrome的开发者⼯具中两个盒⼦的⼆维分析图⽹页布局的本质：把⽹页元素（⽂字、图⽚等），放⼊到盒⼦⾥⾯，然后利⽤css摆放盒⼦的过程。
盒⼦属性，浮动，定位1.盒⼦常见属性1）容器盒⼦Box-size:设置盒⼦模型，CSS3标准，content-box:正常默认模式，起源于⾕歌，元素的整体⼤⼩会被内边距和边框撑开border-box：怪异模式，起源于IE，元素的整体⼤⼩不会被内边距和边框撑开Width:宽度Height:⾼度注意：width,height会根据box-size盒⼦模型的不同来决定是内容的宽度和⾼度，还是整个元素⼤⼩的宽度和⾼度。
2）Padding:内边距Padding-left,padding-right,padding-top,padding-bottomPadding:上右下左;Padding:上右下；左边距等于右边距Padding:上右；下跟上边⼀样，左跟右⼀样3）Margin:外边距外边距跟内边距⼀致。
但是两个元素的外边距会重叠。
4）Border:边框语法：border: 边框宽度边框样式颜⾊;可以分开设置，例如border-width: 30px;border-style: dashed;border-color: purple;分别设置上下左右边框，例如border-bottom:50px dotted green;5）Box-shadow:盒⼦阴影box-shadow: 阴影的⽔平偏移值阴影的垂直偏移值阴影的模糊度阴影的颜⾊;6）Display:设置盒⼦是块级元素还是⾏级元素还是弹性元素Block:块级元素，会占据⼀整⾏，有宽⾼，div,h1,p,li,ul...Line-block:⾏块元素，不会占据⼀整⾏，有宽⾼,img...Line:⾏元素，不会占据⼀整⾏，也没有宽⾼,a,span...7）Border-radius:边框的圆⾓8）Background:设置元素的背景，背景图⽚，背景颜⾊Background:是⼀个综合性的属性，可以分出背景颜⾊，背景图⽚，背景是否重复，背景图⽚的位置，背景图⽚的⼤⼩Background-position:设置背景图⽚的位置，left,right,top,bottom,center,百分⽐⼀般可以设置2值，第⼀个值是设置⽔平位置，第⼆个值设置垂直位置Background-size:设置背景图⽚的⼤⼩，注意：有时候不知道图⽚的确切⽐例的时候，只需要设置⼀个宽度或者⾼度，另外⼀个值设置为auto即可。
