Web前端开发 课件 第9章 CSS盒子模型

第9章盒子模型主讲教师：朱铁樱《Web前端开发》9.1盒子模型概述盒子模型是网页布局的基础，读者只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素。项目中将详细讲解盒子模型的概念、盒子模型相关属性、元素类型、元素类型转换、<div>标签、<span>标签等知识，带领初学者运用盒子模型划分网页模块。9.1盒子模型概述在浏览网站时，我们会发现网站页面的内容都是按照区域划分的。在网站页面中，每一块区域分别承载不同的内容，使得网站页面的内容虽然零散，但是在版式排列上依然清晰有条理。9.1盒子模型概述内容：手机可以看做盒子模型的内容。宽度和高度：手机盒子的大小代表盒子模型的宽度和高度。内边距：填充泡沫可以看做盒子模型的内边距。边框：纸盒的厚度可以看做盒子模型的边框。外边距：当多个手机盒子放在一起时，它们之间的距离为盒子模型的外边距。9.2内边距内边距也被称为内填充，指的是元素内容与边框之间的距离。在CSS中padding属性用于设置内边距，padding属性是复合属性。Padding分为四个方向，顺序上、右、下、左。padding属性的基本语法格式padding:上内边距[右内边距下内边距左内边距];注意：1、padding相关属性的取值可为auto、不同单位的数值、相对于父元素（或浏览器）宽度的百分比。2、内边距属性值为百分比是相对于父元素宽度width的百分比，内边距随父元素width的变化而变化，和高度height无关。9.2内边距9.2内边距外边距指的是相邻元素之间的距离。在CSS中margin属性用于设置外边距，它是一个复合属性。margin分为四个方向，顺序上、右、下、左。margin属性的基本语法格式margin:上外边距[右外边距下外边距左外边距];9.3外边距注意：1、外边距设置为负值时，相邻元素会发生重叠。2、如果没有明确定义标签的宽度和高度时，内边距相比外边距的容错率高。9.3外边距9.3外边距标准流中，垂直方向的margin不叠加，以较大的为准，叫做margin的塌陷现象。水平方向没有此现象。如果不在标准流中（盒子浮动），则两个盒子之间是没有塌陷现象。9.3外边距margin的值可以为auto，表示自动，盒子相对于整个页面布局会水平居中。使用margin:0auto居中的限制条件：必须有明确的width，否则无效，必须处于标准流中，否则无效。表示盒子居中，而不是盒子中的文本居中，文本居中使用text-align:center。9.3外边距有一些标签默认带有padding、margin，如ul标签。网页设计时为了便于控制标签的样式，先清除默认的padding、margin。可以使用通配符删除，但效率较低。可以使用组选择器清除默认的padding、margin。9.4边框边框属性用于给元素设置边框效果。在CSS中，边框属性包括边框样式属性、边框宽度属性、边框颜色属性、边框综合属性。同时为了进一步满足设计需求，CSS3中还增加圆角边框属性、图片边框属性。设置内容样式属性常用属性值边框样式border-stylenone：无（默认）solid：单实线、dashed：虚线dotted：点线、double：双实线边框宽度border-width像素值边框颜色border-color颜色的英文单词、十六进制颜色值、rgb颜色值边框综合属性border复合属性取值9.4边框在CSS属性中，border-style属性用于设置边框样式，必须按上、右、下、左的顺时针顺序书写边框样式的属性值，各属性值之间用空格分隔。border-style属性的基本语法格式border-style:上边[右边下边左边];设置边框样式时既可以针对4条边分别设置，也可以统一设置4条边的样式。在统一设置4条边的样式时，可以按照值复制原则。（1）边框属性-边框样式（border-style）9.4边框值复制原则，是指在设置属性值时，可以按既定规则，省略部分相同的属性值。设置一个属性值，代表4条边样式。设置两个属性值，第1个属性值代表上边和下边，第2个属性值代表左边和右边。设置三个属性值，第1个属性值代表上边，第2个属性值代表左边和右边，第3个值代表下边。（1）边框属性-边框样式（border-style）9.4边框在CSS中，border-width属性用于设置边框的宽度，border-width属性常用取值为像素值。border-width属性的基本语法格式border-width:上边[右边下边左边];（2）边框宽度（border-width）9.4边框在CSS3中，border-color属性用于设置边框的颜色。border-color的属性值可为颜色的英文单词、十六进制颜色值#RRGGBB或RGB颜色值rgb(r,g,b)。border-color属性的基本语法格式border-color:上边[右边下边左边];（3）边框颜色（border-color）9.4边框使用border属性可以在一行代码中直接设置边框的样式、宽度和颜色。边框样式、宽度、颜色的顺序不分先后。可以只指定需要设置的边框属性，省略的属性将取默认属性值，但边框样式不能省略。border属性的基本语法格式border:样式宽度颜色;（4）综合设置边框（border）9.4边框（4）综合设置边框（border）9.5圆角边框运用CSS3中的border-radius属性可以将矩形边框圆角化。border-radius属性的基本语法格式圆角边框border-radius属性值取值通常使用百分比值或像素值，和内边框外边框类似。border-radius:值1值2值3值4四个值：依次作用于（左上||右上||右下||左下）。三个值：依次作用于（左上||右上左下||右下）。两个值：依次作用于（左上右下||右上左下）。一个值：四个角同一值。9.5圆角边框border-radius属性的值复制原则，如下。设置一个值时，表式四角的圆角半径。设置两个值时，第一个值代表左上圆角半径和右下圆角半径，第二个值代表右上和左下圆角半径。设置三个值时，第一个值代表左上圆角半径，第二个值代表右上和左下圆角半径；第三个值代表右下圆角半径。设置四个值时，第一个值代表左上圆角半径，第二个值代表右上圆角半径，第三个值代表右下圆角半径，第四个值代表左下圆角半径。9.6盒子的大小在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值。在CSS规范中，盒子的width属性和height属性仅指块级元素内容的宽度和高度，块级元素周围的内边距、边框和外边距是单独计算的。盒子的总宽度=width值+左右内边距值+左右边框宽度值+左右外边距值。盒子的总高度=height值+上下内边距值+上下边框宽度值+上下外边距值。9.6盒子的大小在CSS中，可以通过设置box-sizing属性来指定是使用标准盒子模型（content-box）还是IE盒子模型（border-box）。①默认值。宽度和高度只包括内容区域，不包括填充、边框或外边距。换句话说，指定的宽度和高度值仅适用于内容框，即padding,border,margin等都会撑大整个div的宽高。②包括内容区域、填充和边框在指定的宽度和高度内。外边距仍然添加在指定尺寸的外部。元素的总宽度和高度保持不变，任何指定的填充或边框值都将包含在指定的尺寸内。注意：宽度属性width和高度属性height仅适用于块级元素，对行内元素无效，除<img/>标签和<input/>标签外。标准盒子模型（content-box）IE盒子模型中（border-box）9.6盒子的大小box-sizing:content-box宽度: