HTML5+CSS3网页设计基础 第六章 CSS盒子模型
学习HTML和CSS中的盒模型和浮动布局
学习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盒⼦模型概述盒⼦模型概述1.认识盒⼦模型 所谓盒⼦模型就是把HTML页⾯中的元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。
每个矩形都由元素的内容、内边距、边框和外边距组成。
具体可以把盒⼦模型⽐作为⼀个⼿机盒⼦模型： ⼀个完整的⼿机盒⼦通常包含⼿机、填充泡沫和盛装⼿机的纸盒。
如果把⼿机盒⼦想象成HTML元素，那么⼿机盒⼦就是⼀个CSS盒⼦模型，其中的⼿机为CSS盒⼦模型的内容，填充泡沫的厚度为CSS盒⼦模型的内边距，纸盒的厚度为CSS盒⼦模型的外边距，当多个⼿机盒⼦放在⼀起时，它们之间的距离就是CSS盒⼦模型的外边距。
⽹页中的所有元素和对象都由上图所⽰的基本结构组成，并呈现出矩形的盒⼦效果。
在浏览器看来，⽹页就是多个盒⼦嵌套排列的结果。
其中，内边距出现在内容区域的周围，当给元素添加背景⾊或是背景图像时，该元素的背景⾊或背景图像也将出现在内边距中，外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。
需要注意的是，虽然盒⼦模型拥有内边距、边框、外边框、宽和⾼这些基本属性，但是并不要求每个元素都必须定义这些属性。
2.<div> 标记 div是英⽂division的缩写，意味“分割、区域”。
<div>标记简单⽽⾔就是⼀个区块容器标记，可以将⽹页分割为独⽴的、不同的部分，以实现⽹页的规划和布局。
<div>与</div>之间相当于⼀个“盒⼦”，可以设置外边距、宽和⾼，同时内部可以容纳段落、标题、表格、图像等各种⽹页元素，也就是⼤多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
在上⾯的图⽚中，定义了两对<div>，其中⼀对<div>中嵌套段落标记<p>。
对两对<div>分别添加class属性，然后通过CSS控制其宽、⾼、背景颜⾊和⽂字样式等。
CSS盒模型详解
CSS盒模型详解前⾔1.盒模型、盒⼦模型、框模型（box model）- CSS将页⾯中的所有元素都设置为了⼀个矩形的盒⼦- 将元素设置为矩形的盒⼦后，对页⾯的布局就变成将不同的盒⼦摆放到不同的位置- 每⼀个盒⼦都由⼀下⼏个部分组成：内容区（content）内边距（padding）边框（border）外边距（margin）2.内容区（content），元素中的所有的⼦元素和⽂本内容都在内容区中排列内容区的⼤⼩由width 和 height两个属性来设置width 设置内容区的宽度height 设置内容区的⾼度3.边框（border），边框属于盒⼦边缘，边框⾥边属于盒⼦内部，出了边框都是盒⼦的外部边框的⼤⼩会影响到整个盒⼦的⼤⼩要设置边框，需要⾄少设置三个样式：边框的宽度 border-width边框的颜⾊ border-color边框的样式 border-style盒⼦模型-边框border-width可以⽤来指定四个⽅向的边框的宽度值的情况四个值：上右下左三个值：上左右下两个值：上下左右⼀个值：上下左右border-color⽤来指定边框的颜⾊，同样可以分别指定四个边的边框规则和border-width⼀样border-color也可以省略不写，如果省略了则⾃动使⽤color的颜⾊值border-style 指定边框的样式solid 表⽰实线dotted 点状虚线dashed 虚线double 双线border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求除了border以外还有四个 border-xxxborder-topborder-rightborder-bottomborder-left/* border: solid 10px orange; *//* border-top: 10px solid red;盒⼦模型-内边距内边距（padding）- 内容区和边框之间的距离是内边距- ⼀共有四个⽅向的内边距：padding-toppadding-rightpadding-bottompadding-left- 内边距的设置会影响到盒⼦的⼤⼩，-背景颜⾊会延伸到内边距上盒⼦的可见框的⼤⼩，由内容区内边距和边框共同决定，所以在计算盒⼦⼤⼩时，需要将这三个区域加到⼀起计算盒⼦模型-外边距外边距（margin）- 外边距不会影响盒⼦可见框的⼤⼩- 但是外边距会影响盒⼦的位置- ⼀共有四个⽅向的外边距：margin-top- 上外边距，设置⼀个正值，元素会向下移动margin-right- 默认情况下设置margin-right不会产⽣任何效果margin-bottom- 下外边距，设置⼀个正值，其下边的元素会向下移动margin-left- 左外边距，设置⼀个正值，元素会向右移动- margin也可以设置负值，如果是负值则元素会向相反的⽅向移动- 元素在页⾯中是按照⾃左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素⾃⾝⽽设置下和右外边距会移动其他元素- margin的简写属性margin 可以同时设置四个⽅向的外边距，⽤法和padding⼀样- margin会影响到盒⼦实际占⽤空间盒⼦模型-⽔平布局元素的⽔平⽅向的布局：元素在其⽗元素中⽔平⽅向的位置由以下⼏个属性共同决定“margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right⼀个元素在其⽗元素中，⽔平布局必须要满⾜以下的等式margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其⽗元素内容区的宽度- 以上等式必须满⾜，如果相加结果使等式不成⽴，则称为过度约束，则等式会⾃动调整- 调整的情况：- 如果这七个值中没有为 auto 的情况，则浏览器会⾃动调整margin-right值以使等式满⾜- 这七个值中有三个值和设置为autowidthmargin-leftmaring-right- 如果某个值为auto，则会⾃动调整为auto的那个值以使等式成⽴0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 8000 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600200 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 400- 如果将⼀个宽度和⼀个外边距设置为auto，则宽度会调整到最⼤，设置为auto的外边距会⾃动为0- 如果将三个值都设置为auto，则外边距都是0，宽度最⼤- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值所以我们经常利⽤这个特点来使⼀个元素在其⽗元素中⽔平居中⽰例：width:xxxpx;margin:0 auto;盒⼦模型-垂直⽅向布局⼦元素是在⽗元素的内容区中排列的，如果⼦元素的⼤⼩超过了⽗元素，则⼦元素会从⽗元素中溢出使⽤ overflow 属性来设置⽗元素如何处理溢出的⼦元素可选值：visible，默认值⼦元素会从⽗元素中溢出，在⽗元素外部的位置显⽰hidden 溢出内容将会被裁剪不会显⽰scroll ⽣成两个滚动条，通过滚动条来查看完整的内容auto 根据需要⽣成滚动条外边距的折叠垂直外边距的重叠（折叠）1.- 相邻的垂直⽅向外边距会发⽣重叠现象- 兄弟元素- 兄弟元素间的相邻垂直外边距会取两者之间的较⼤值（两者都是正值）- 特殊情况：如果相邻的外边距⼀正⼀负，则取两者的和如果相邻的外边距都是负值，则取两者中绝对值较⼤的- 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进⾏处理2. - ⽗⼦元素- ⽗⼦元素间相邻外边距，⼦元素的会传递给⽗元素（上外边距）- ⽗⼦外边距的折叠会影响到页⾯的布局，必须要进⾏处理盒⼦的尺⼨1.默认情况下，盒⼦可见框的⼤⼩由内容区、内边距和边框共同决定box-sizing ⽤来设置盒⼦尺⼨的计算⽅式（设置width和height的作⽤）可选值：content-box 默认值，宽度和⾼度⽤来设置内容区的⼤⼩border-box 宽度和⾼度⽤来设置整个盒⼦可见框的⼤⼩，width 和 height 指的是内容区和内边距和边框的总⼤⼩轮廓和圆⾓box-shadow ⽤来设置元素的阴影效果，阴影不会影响页⾯布局第⼀个值⽔平偏移量设置阴影的⽔平位置正值向右移动负值向左移动第⼆个值垂直偏移量设置阴影的⽔平位置正值向下移动负值向上移动第三个值阴影的模糊半径第四个值阴影的颜⾊box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;outline ⽤来设置元素的轮廓线，⽤法和border⼀模⼀样轮廓和边框不同的点，就是轮廓不会影响到可见框的⼤⼩outline: 10px red solid;1. /* border-radius: ⽤来设置圆⾓圆⾓设置的圆的半径⼤⼩*//* border-top-left-radius: *//* border-top-right-radius *//* border-bottom-left-radius: *//* border-bottom-right-radius: *//* border-top-left-radius:50px 100px; */2.border-radius 可以分别指定四个⾓的圆⾓四个值左上右上右下左下三个值左上右上/左下右下两个个值左上/右下右上/左下3./* 将元素设置为⼀个圆形 *//*border-radius: 50%;*/。
HTML5+CSS3网站设计CSS盒子模型
第5章CSS盒子模型《HTML5+CSS3网站设计基础教程》学习目地/Target掌握盒子地有关属性,能够制作常见地盒子模型效果。
掌握背景属性地设置方法,能够设置背景颜色与图像。
理解渐变属性地原理,能够设置渐变背景。
熟悉CSS控制列表样式地方式,能够运用背景图像定义列表项目符号。
章节概述/Summary盒子模型是网页布局地基础,只有掌握了盒子模型地各种规律与特征,才可以更好地控制网页各个元素所呈现地效果。
接下来,本章将对盒子模型地概念,盒子有关属性进行详细讲解。
目录/Contents01盒子模型概述02盒子模型有关属性03背景属性04渐变属性05阶段案例——制作音乐排行榜01盒子模型概述了解盒子模型,能够说出盒子模型地概念与盒子模型包含地内容。
学习目地1.认识盒子模型1.认识盒子模型1.认识盒子模型联想一下生活常见地盒子？1.认识盒子模型以手机盒子为例,分析盒子模型1.认识盒子模型当多个手机盒子放在一起时,它们之间地距离就是CSS盒子模型地外边距1.认识盒子模型所谓盒子模型就是把HTML页面地元素看作是一个矩形地盒子,也就是一个盛装内容地容器。
每个矩形都由元素地内容,内边距（padding）,边框（border）与外边距（margin）组成。
l 了解div标记,能够说出<div>标记地概念。
l 熟悉div标记地用法,能够将网页分成多个模块。
学习目地2.div标记2.div标记<div>标记是一个块容器标记。
1可以将网页分割为独立地部分,以实现网页地规划与布局。
2大多数HTML标记都可以嵌套在<div>标记,<div>还可以嵌套多层<div>。
3可以替代大多数地块级文本标记。
42.div标记注意:1,<div>标记最大地意义在于与浮动属性float配合,实现网页地布局,这就是常说地DIV+CSS网页布局。
对于浮动与布局这里了解即可,后面地章节将会详细介绍。
（二）css盒子模型
属性作⽤padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-bottom 下内边距写法意思padding:10px;上下左右内边距均为 10像素padding:5px 10px;上下内边距是5像素，左右内边距是10像素padding:5px 10px 15px;上内边距是5px ，左右内边距是10px ，下边距是15px padding:5px 10px 15px 20px;上是5px ，右是10px ，下是15px ，左是20px 从上顺时针（⼆）css 盒⼦模型记录前端学习过程，⽅便查漏补缺，如有错误，请评论告知~⼀、⽹页布局的本质⽹页布局过程： 1、先准备好相关的⽹页元素，⽹页元素基本都是盒⼦Box 2、利⽤CSS 设置好盒⼦样式，然后摆放到相应位置 3、往盒⼦⾥装内容⽹页布局的核⼼本质：就是利⽤CSS 摆盒⼦。
⼆、盒⼦模型所谓盒⼦模型：就是把HTML 页⾯中的布局元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。
CSS 盒⼦模型本质上是⼀个盒⼦，封装周围的HTML 元素，它包括：边框、外边框、内边距和实际内容其中：content ：实际内容padding （内边距）：盒⼦边框与内容之间的距离margin （外边距）：盒⼦与盒⼦之间的距离border （边框）：字⾯意思三、内边距（padding ）padding 属性⽤于设置内边距，即边框与内容之间的距离padding 属性的复合写法可以有⼀到四个值也可以单独指定padding 值：padding-top ：10px; （其他⽅位同理）注：padding 可能会影响盒⼦的实际⼤⼩。
属性作⽤margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距如上图，⼀个100 x 100的盒⼦，在设置padding 为30px 以后，盒⼦实际⼤⼩变为160 x 160因此在使⽤时，应当注意padding 对盒⼦⼤⼩的影响，以设置盒⼦的最终⼤⼩。
30第6章 CSS3盒子模型
可以改写为：#box{padding:10px 20px 30px 40px;}
德才兼备 知行合一
14
6.2.2 盒子模型相关属性
边框属性 圆角边框属性 内边距属性 外外边边距距属属性性 盒子阴影属性
。其设置方法类似于内边距（paddding）
属性的设置，其设置方式如下：
margin-top：上外边距大小
盒子之间的距离
，块通称为 。
6.2.1 盒子模型概念
（1）大部分网页元素都是以盒子的形式存在的。例如，
等。
（2）给盒子添加背景色或背景图像时，该元素的背景色或背景图像也将出现在
内边距中。
（3）虽然每个盒子模型拥有内边距、边框、外边距、宽和高这些基本属性，但
是并不要求每个元素都必须定义这些属性。
（4）div标记定义的盒子
margin-right：右外边距大小
margin-bottom：下外边距大小
margin-left：左外边距大小
若
，则可以一次设置如下：
德才兼备 知行合一
15
6.2.2 盒子模型相关属性
边框属性 圆角边框属性 内边距属性 外外边边距距属属性性 盒子阴影属性
例如，将盒子box的上右下左四个外边距分别设置为10、20、30、40个像素，则可以用如下代 码： #box{ margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px; } 也可以简写成：#box{ margin:10px 20px 30px 40px;}
（4）段落文字采用宋体、大小14像素、文字颜色为深灰色（#666）、行高
25px、首行缩进2个字符、段落的下外边距为20像素。
HTML5+CSS3 盒的基本类型
HTML5+CSS3 盒的基本类型CSS 盒状模型是CSS 布局的基础，规定了网页元素的显示方式以及元素间的相互关系。
1．CSS 盒结构CSS 中的盒状模型（Box Model ）用于描述一个为HTML 元素形成的矩形盒子。
CSS 盒状模型还涉及为各个元素调整外边距（margin ）、边框（border ）、内边距（padding ）和内容的具体操作。
Top （上）bottom （下）left （左）right （左）Margin(外边距)border(边框)Padding(内边距)Contenu(内容)提示： ● content 指内容，可以是文字、图片等元素。
●padding 指内边距，也有人称之为空白、内补丁等。
主要用来设置内容到边框之间的距离，就像一个缓冲带。
● border 指边框，用于设置内容的边框线粗线和样式等。
●margin 指外边距，也可称为边界。
用来设置一块内容与一块内容之间的距离。
上述示意图中，最外边框线指浏览器的外边界。
而第二层框线和第三层虚线框线之间，指元素的边框样式。
因此，可以将示意图中的边框线视为不同内容之间的分界线，并非属性的内容。
示例：15-1 box.html执行上述代码，可以浏览器中，看到一条宽边框线和文本内容。
Border边框而在Dreamweaver编辑器的【设计】模式中，用户可以看其图形结构与盒状模型结构相同。
模型结构根据CSS盒模型规则，可以给出一个简单的盒模型尺寸计算公式：2．边界在CSS中，边界又被称作外补丁，最简单的方法是使用margin属性。
它可以接受任何长度单位，如像素、磅、英寸、厘米、百分等。
该属性可以有1到4个值。
右外边距是5px；下外边距是15px；左外边距是20px。
3．边框网页元素边框可以使用border属性来设置。
该属性允许用户定义网页元素所有边框的样式、宽度和颜色。
语法：在上述语法中，参数含义下：●width 指边框的宽度。
CSS3——盒子模型
在浏览器上运行得网页实际上就是一份HTMＬ文件,这份文件得主体则就是由多个HTML标签所组成, 网页在显示这些标签得时候,会使用盒子模型来计算这些标签该如何显示在网页上。
盒子模型得定义里,每个显示在网页上得标签都就是一个矩形对象,这些矩形对象包含了各种显示样式,在浏览器显示网页给用户时,会依照这些显示样式,来决定网页上标签得面积、边距、位置等显示外观。
另外,盒子模型中得矩形对象都包含了一个内容区域,这个内容区域能够容纳其她得矩形对象,盒子模型通过这样一层套一层得方式,将树状结构得标签,展开成为树状结构得矩形对象、浏览器在显示网页给用户时,会依照这个树状结构得矩形对象,来决定矩形对象之间会互相影响得显示外观。
矩形对象得主要得几个样式如下:１。
外边距(marｇiｎ):定义了矩形对象与其她矩形对象之间得距离,包括矩形对象与内容区域之间得距离、同一个内容区域内相邻得两个矩形对象之间得距离。
(１)mａrgiｎ得属性内容可以设置为长度、百分比、autｏ等属性、当设置为百分比时,会依照父矩形对象得内容区域大小来作为百分比得计算基数;当设置为ａuto时,浏览器会参照矩形对象本身、父矩形对象、定位样式等得样式,由浏览器自动配置矩形对象得外边距大小、(2)外边距合并功能:上下两个相邻得矩形对象之间得外边距会合并,合并后得外边距会以较大得数值作为设置值。
2。
边框(bｏｒder):定义边框得框线样式与框线粗细,还有颜色。
3.内边距(paｄding):内边距定义内容区域与边框之间得距离。
同样得,其属性值可以就是长度、百分比(同外边距)等。
4。
宽度与高度(ｗidth、hｅｉｇht):定义盒子模型得内容区域得大小,其属性可以就是长度、百分比与ａｕｔo等。
错误!未定义书签。
错误!未定义书签。
错误!未定义书签。
错误!未定义书签。
错误!未定义书签。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
length：自定义边框的宽度，常用取值单位为像素px。 示例：设置段落的边框宽度。 p{borer-width: thin; } /*四边都是细的边框*/ p{borer-width: 2px thick; }
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第14页
6.2.3 盒子的边框属性
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第18页
6.2.3 盒子的边框属性
6. 盒子阴影（box-shadow）
语法：box-shadow: h-shadow v-shadow blur spread color inset 参数：
h-shadow：水平阴影的位置，允许负值，必需。
第6章 CSS盒子模型
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第1页
本章概述
盒模型是CSS中一个重要概念，文档中的每个元 素被描绘为矩形盒子。一个盒子包括content （实际内容）、padding（内边距）、border （边框）和margin（外边距）。 本章将具体介绍盒子的各种外观属性和背景属性 及其设置方法。
v-shadow：垂直阴影的位置，允许负值，必需。 blur：模糊距离，可选。
spread：阴影的尺寸，可选。
color：阴影的颜色，可选。 inset：将外部阴影 (outset) 改为内部阴影，可选。
参考示例：6-2-8.html ， 6-2-9.html
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第19页
6.2.4 盒模型边距属性
1. 内边距
语法：padding-top:auto | length padding-right:auto | length padding-bottom:auto | length padding-left:auto | length padding:1~4 auto | length 参数： auto：浏览器计算内边距。 length：内边距值，常用取值单位为像素px，默认值是 0px，不能为负数。
语法：border-top: border-width border-style border-color 其他各边的设置方法相同。
示例：
border-bottom:2px solid #999; /*上边框样式2px的灰色实线*/ 用border属性设置四条边框共同的样式。
语法：border:border-width border-style border-color
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第11页
6.2.2 盒模型的宽和高
4. 元素类型与元素类型转换
(1) 文档中元素都可以划归为 block和 inline两种类型 块级元素(block)，块级元素的宽度为100%，始终占据一 行。<h1>~<h6>、<p>、<ul>、<ol>、<li>、<table>、 <div>和<body>等元素都是块级元素。 行级元素(inline)，行级元素没有高度和宽度，行级元素 前后没有换行符，没有固定的形状，显示时只占据其内容 的大小。<a>、<img>、<strong>、<b>、<em>、<i>、 <span>和表单元素等都是行级元素。
参考示例：6-2-1.html
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第8页
6.2.2 盒模型的宽和高
1. 盒子模型
W3C模型中，width/height=content 盒子实际宽度/高度= content + border + padding IE模型中，width/height=content+padding+border 盒子实际宽度/高度= width 而盒子所占空间=盒子实际宽度/高度+margin。
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第2页
本章的学习目标
理解盒子模型的概念。 掌握盒子模型宽度和高度属性的意义及其设置方 法。 掌握盒子模型边框属性的意义及其设置方法。 掌握盒子模型边距属性的意义及其设置方法。 掌握盒子模型背景颜色和背景图像设置方法。 掌握CSS3渐变背景的设置方法。 掌握综合应用设置盒子属性制作页面的方法。
2.边框样式（border-style）
语法：border-style: 1~4 none| solid | dashed | dotted | double | groove | ridge | inset | outset; 参数： none：无边框。 solid：边框为单实线。 dashed：边框为虚线。 dotted：边框为点线。 double：边框为双实线。 groove：根据border-color的值画3D凹槽。 ridge：根据border-color的值画棱形边框。 inset：根据border-color的值画3D凹边。 outset：根据border-color的值画3D凸边。 示例：p{borer-style: dashed solid; } /*上下边虚线，左右边实线*/
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第7页
6.2.2 盒模型的宽和高
语法：width:auto | length | % height:auto | length | % 参数： auto：浏览器计算实际的宽度（高度）。 length：自定义元素的宽度（高度），常用取值单位为像 素px。 %：定义基于父元素宽度（高度）的百分比宽度（高度）。
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第15页
6.2.3 盒子的边框属性
3. 边框颜色（border-color）
语法：border-color:1~4 color; 参数： color的取值有如下几种。 预定义的颜色值，如blue、gray、red、yellow等。 十六进制#RRGGBB。
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第3页
主要内容
6.1 盒模型简介 6.2 盒子外观属性
6.3 背景属性
6.4 实训 6.5 本章小结
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第4页
6.1 盒模型简介
盒模型是CSS中一个重要概念，文档中的每个元素被描绘 为矩形盒子。一个盒子包括content（实际内容）、 padding（内边距）、border（边框）和margin（外边 距）。
设置盒子宽度和高度的时候，其包括：content+padding+border
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第10页
6.2.2 盒模型的宽和高
3. 应用范围
盒子的宽度和高度适用于块级（block）元素和内联（ inline-block）元素，行内元素无效。 参考示例6-2-2.html span是行级元素，设置的宽度和高度无效。
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第20页
6.2.4 盒模型边距属性
2. 外边距
语法：margin-top:auto | length margin -right:auto | length margin-bottom:auto | length margin -left:auto | length margin:1~4 auto | length 参数： auto：浏览器计算外边距，设置为对边的值。 length：外边距值，常用取值单位为像素px，默认值是 0px。可以为负数。 参考示例6-2-10.html
RGB代码rgb(r,g,b)。
示例：p{borer-color: #CCC #FF0000; }
/*上下边框灰色，左右边框红色*/
边框样式设置参考示例：6-2-4.html
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第16页
6.2.3 盒子的边框属性
4. 边框综合属性设置（border）
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第21页
6.2.5 案例制作
制作完成演示案例:首页企业新闻局部页面。 参考代码 6-2.html
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第22页
6.3 背景属性
本节主要内容：
案例分析
background 属性
CSS渐变背景 背景和图像的透明度 案例著作
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第23页
6.3.1 案例分析
【案例展示】使用CSS文本、图片和背景的知识，设计网 页头部局部页面，显示效果如图所示。 【知识要点】盒子背景颜色、背景图片、渐变背景的设置。 【学习目标】掌握设置盒子背景属性的方法。
第9页
6.2.2 盒模型的宽和高
2. box-sizing属性
盒子采用何种模型，可以用box-sizing属性设置 设置标准的盒模型（默认值）