一css盒子模型概念CSS css盒子模型又称框模型 Box Model ，包含了元素内容content内边距padding边框border外边距margin几个要素如图图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框border，然后最外层是外边距margin；布局的一般写法，从上到下，从左到右进行排版布局所以，先写最上面的长盒子，再写第二行最左边的，中间的大盒子你不知道怎么弄，可以把 二三行看成一行，一最大的最准，纵向分成三列，即 红色来进行布局，两边红色的盒子再固定宽度后，写两个盒子规定高度分成两行就行最下的盒子和第一行一；1打开HBuilder开发软件并在Web项目中创建一个新的静态页面2将三个div元素插入body元素并将其类设置为AA，BB和CC3预览静态页面，您可以看到页面效果，即中上层和下层4分别设置AA，BB和CC三个类的样式属性，包括宽度，高度和背景颜色5我们再次设置body元素样式属性body textalign；整个盒子模型在网页中所占的宽度左边界左边框左填充内容右填充右边框右边界 CSS盒子模型的属性内容属性宽=width 高=height 内填充属性内容与边框之间的距离padding 外边距属性margin使用该属性的时候注意浏览器的兼容性内填充与边界的规则如果有四个参数表示上右下左，也可以单单指；像这样可以通过子代选择器来设置，例如boxdivdivdivcolor#f00 但是假如最里层有多个div那也会被设置当前样式，所以这样虽然可以设置到，但是不合理通过后代选择器来设置 box contont color#f00 这样就是设置自代类名为 contont的盒子了。

无标题文档 box width500px height500px border1px solid #F00 这就是一个简单的div盒子，盒子就是所谓的一个个div，N个DIV组成的就是HTML网页具体的你需要看一些相关书籍学习一下；8 position定位方式确定元素的定位类型，如绝对定位相对定位等，这些定位方式可能会改变元素的盒子模型尺寸和位置通过调整这些属性的值，你可以精确控制元素的宽度和高度，以及它们如何影响盒子模型的计算此外，其他CSS属性的使用也可能间接影响盒子模型的尺寸，例如字体大小fontsize行高；需要准备的材料分别有电脑浏览器html编辑器1首先，打开html编辑器，新建html文件，例如indexhtml2其次，在indexhtml中的标签中，输入css代码divborder 1px solid blue textalign center3浏览器运行indexhtml页面，此时图片在盒子中是居中显示的；CSS盒模型详解CSS3中的盒模型主要有标准模型和怪异模型IE盒子模型，两者由marginborderpadding和content四部分构成不同模型在设置width和height时有所差异，可通过boxsizing属性调整盒模型类型对于宽度，width可以设置为最小值minwidth和最大值maxwidth高度属性也有相应的minheight和m。

Border边框 围绕在内边距和内容外的边框Padding内边距 清除内容周围的区域，内边距是透明的Content内容 盒子的内容，显示文本和图像为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的元素的宽度和高度 重要 当您指定一个 CSS 元素的宽度和高度属性时；标准盒子模型css中widthheight=content的widthheight 怪异盒子模型css中widthheight=content的widthheight+padding+border 导致的结果由于标准盒子模型和怪异盒子模型的存在，这就导致当同一段css代码作用在同一个元素上时，在不同盒子模型下的浏览器中，元素所占的宽度和高度却不同三，css3中；所有HTML元素可以看作盒子，在CSS中，quotbox modelquot这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括 边距 ， 边框 ， 填充 ，和 实际内容 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素我们可以同过调整元素的内外边距边框来实现元素的；width=border+padding+content border和padding都是有左右两边下面是盒模型这里面的611*170你可以理解为content 希望对你有所帮助，望采纳；内边距边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距 下图是W3School的Box Model 图解 示例代码如下* “*” 代表通配符，代表适用于所有标签** padding 0px margin 0px *ID选择器*。

以下是W3C标准的盒子示例lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot DIV+CSS div1 width300pxheight300pxbackgroundyellowborder2px solid redpadding10px 20px 30px 40px。