项目6 创建CSS3盒子模型

项目六创建CSS3盒子模型理解盒子模型的概念掌握盒子模型的相关属性掌握盒子模型的定位学习目标Contents目录认识盒子模型任务1盒子模型的定位任务3理解盒子模型的相关属性任务2任务1认识盒子模型1.概念CSS盒子模型是网页设计中经常用到的一种重要的思维模型。它主要用来对网页元素进行布局和定位，通常用div来定义盒子。一个网页可以由若干个盒子组合而成，好比下图的相框。一个盒模型主要包括属性有：内容(content)、内边距(padding)、边框(border)、外边距(margin)。height任务1认识盒子模型2.主要属性属性说明:div标记就是一个区块容器标记，简称块标记，块通称为盒子。Content(内容)-盒子的内容，显示文本和图像。Padding(内边距)-内容区和边框之间的空间，内外距是透明的。Border(边框)-围绕在内边距和内容外的边框。Margin(外边距)-

盒子的最外围，是添加在边框外周围的空间。外边距是透明的。任务1认识盒子模型3.盒子模型大小标准盒子模型的大小：标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。标准盒模型的盒子的大小=content+border+padding+margin也就是一个完整的盒模型。它的宽度和高度的计算方式为:宽度=左外边距+左边框宽+左内边距＋内容宽度＋右内边距+右边框宽＋右外边距高度=上外边距+上边框宽+上内边距+内容高度+下内边距+下边框宽+下外边距任务2理解盒子模型的相关概念1.Border属性边框可以使用border-style、border-width和border-color以及它们的简写属性border来设置边框的样式。其中border-style属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。border属性是各个边框属性的简写属性,语法格式如下border{border-widthborder-style（必需）border-color}border-width:属性指定要显示的边框宽度。border-style:属性指定要显示的边框样式。border-color:属性指定要显示的边框颜色。Bordery-style(边框样式）solid:边框样式为单实线。

dashed:边框样式为虚线。dotted:边框样式为点线。double:边框样式为双实线。groove：边框样式为3D凹槽边框。ridge：边框样式为3D垄状边框。inset：边框样式为3Dinset边框。outset：边框样式为3Doutset边框。

none：边框样式为无边框hidden：边框样式为隐藏。Border(边框类型）(1)border-top:上边框宽度、样式、颜色。(2)border-right:右边框宽度、样式、颜色。(3)border-bottom:下边框宽度、样式、颜色。(4)border-left:左边框宽度、样式、颜色。创建CSS3盒子模型2.边框宽度border-widthborder-width属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）例如，设置上下为20像素，左右为5像素的盒子，盒子边框样式为实线，代码如下div{border-style:solid;border-width:20px5px}也可详写为div{border-style:solid;border-width:20px5px20px5px}请解释下面的语句div{border-style:solid;border-width:30px10px20px;border-color:red}也可详写为？任务2理解盒子模型的相关概念3.margin(外边距)margin属性可以同时指定上、右、下、左（以此顺序）边距外边距位于盒子模型的最外围，是边框之外的空间，通过外边距可以使盒子与盒子之间不会紧凑的连接在一起，是CSS布局中的一种重要手段。margin-top:上外边距大小。margin-right:右外边距大小。margin-bottom:下外边距大小。margin-left:左外边距大小。margin取值可以是长度、百分比或auto。当使用百分比时，表示相对于父元素宽度的百

分比；auto:设置浏览器边距，其效果依赖于浏览器；长度：可以使用用px、em等作单位。#box{margin-top:50px;margin-right:20px;margin-bottom:15px;margin-left:10px;}#box{margin:50px20px15px10px;}#box{margin:30px;}请问表示什么含义#box{margin:20px30px;}请问表示什么含义#box{margin:0auto;}请问表示什么含义任务2理解盒子模型的相关概念4.

padding(内边距)padding属性可以同时指定上、右、下、左（以此顺序）边距内边距用于设置盒子中内容与边框之间的距离padding-top:上内边距大小。padding-right:右内边距大小。padding-bottom:下内边距大小。padding-left:左内边距大小。padding取值可以是长度和百分比,但不能使用负值。#box{padding-top:50px;padding-right:20px;padding-bottom:15px;padding-left:10px;}#box{padding:50px20px15px10px;}#box{padding:30px;}请问表示什么含义#box{padding:20px30px;}请问表示什么含义任务2理解盒子模型的相关概念5.圆角边框（border-radius)CSS3中新增的border-radius属性可以给元素设置圆角边框。这是CSS3很有吸引力的一个功能。其基本语法格式如下。border-radius:圆角半径每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。取值可以是长度和百分比,

。#box{border-top-left-radius:50px;border-top-right-radius:20px;border-bottom-right-radius:15px;border-bottom-left-radius:10px;}#box{border-radius:50px20px15px10px;}#box{border-radius:30px;}请问表示什么含义#box{border-radius:20px30px;}请问表示什么含义任务2理解盒子模型的相关概念6.盒子阴影（box-shadow)box-shadow属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由2-4个长度值、一个可选的颜色值和一个可选的inset关键字来规定。省略长度的值是0。其基本语法格式如下。box-shadow:阴影水平偏移量阴影垂直偏移量阴影模糊半径阴影扩展半径阴影颜色阴影类型；#box{box-shadow:10px5px6px8pxred;}#box{box-shadow:11px10px9px6px;}#box{box-shadow:30px20px6px9pxgreen;}请问表示什么含义#box{box-shadow:10px30px;}请问表示什么含义说明：（1）阴影水平偏移量:必选顶，可以为负值，正值表示向右偏移，负值表示向左偏移。（2）阴影垂直偏移量:必选项，可以为负值，正值表示向下偏移，负值表示向上偏移。（3）阴影模糊半径:可选顶,不能为负值，值越大阴影就越模糊，默认值为0，表示不模糊。（4）阴影扩展半径:可选项,可为负值。正值表示在所有方向扩展，负值表示在所有方向上消减，默认值为0。(5）阴影颜色:可选项,省略时为黑色。(6）阴影类型:可选项,内阴影的值为inset,省略时为外阴影。任务2理解盒子模型的相关概念1.文档流（documentflow）文档流又称普通流，指的是元素按照其在HTML中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。也可理解为将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素。简单的说：网页在解析时，遵循从上向下，从左向右的顺序。脱离文档流:脱离了文档流的管理。不受文档流的布局约束了，并且更重要的一点是，这个标签在原文档流中所占的空间也被清除了。脱离文档流的元素处于浮动状态（可以理解为漂浮在文档流的上方），CSS有3种基本的定位机制:普通流、float（浮动）position(定位)脱离文档的的定位机制通常包括float、position：absolute、fixed。任务3盒子模型的定位2.盒子模型的的浮动(float)浮动定位的基本机制是:设置为浮动的元素从正常的文本流中移出，但它依然对原来存在于文本流中的元素产生影响,这些元素的内容（注意不是框，而是框中的内容）会围绕在浮动元素周围，就好像“河流”围绕“小岛”一样;浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。float,其值有是left(左浮动)、right(右浮动)、none（默认值，不浮动)。任务3盒子模型的定位所有浮动元素受父元素影响，设置了左浮动（右浮动）的元素，先找父亲的左边缘（右边缘），若遇到浮动的元素，就靠着浮动元素排列，设置浮动的元素不独占一行。浮动的核心属性是float,其值有left(左浮动)、right(右浮动)、none（默认值，不浮动)。3.盒子模型清除浮动（clear)left:在左侧不允许有浮动元素right:在右侧不允许有浮动元素both:在左右两侧都不允许有浮动元素，这是最常用的取值none:默认值，允许有浮动元素清除浮动（clear):元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性。clear取值任务3盒子模型的定位3.2使用overflow属性清除浮动clear属性只能清除元素左右两侧浮动的影响。平时制作网页时、会遇到一些特殊情况。例如,父元素没有定义高度,子元素设置了浮动，则子元素的浮动会对父元素产生影响。若要使父元素不受子元素的影响，我们可以用overflow属性来消除影响。任务3盒子模型的定位通常用Overflow:hidden消除影响3.3overflow属性任务3盒子模型的定位overflow属性是CSS样式中一个非常重要的属性，除了可以清除子元素对父元素的影响外，还可以设置盒子内容外溢的显示方式，其语法规则如下。选择器{overflow:属性值}overflow属性值有：visible、hidden、auto、scrollvisible（默认值）：溢出的内容不会修剪，呈现在元素框之外。hidden：溢出的内容会被修剪，溢出的内容看不见。auto：在需要时产生滚动条,即自适应所要显示的内容。scroll：溢出内容会被修剪，且浏览器会始终显示滚动条。4.盒子模型的定位positionposition取值static:称为静态定位relative

:称为相对定位,absolute:称为绝对定位,

fixed:称为固定定位任务3盒子模型的定位5.盒子模型的相对定位position:relativeposition:relativerelative:相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局。也是按照从上到下、从左到右的方式定位元素(即处于普通的文档流中)，不过可以指定水平和垂直方向的偏移量，并且原来所占有的空间会保留。换言之，所谓“相对”,是指相对于原来如果是静态定位的位置。任务3盒子模型的定位6.盒子模型的

绝对定位position:absoluteposition:absolute绝对定位，表