Web前端开发（HTML5+CSS3+JavaScript） 课件 第5章 盒子模型与文本格式

Web前端基础技术CSSJSHTML第5章

盒子模型与文本格式、背景图Contents目录盒子模型块元素DIV与行内元素SPAN单位字体、文本格式背景一

盒子模型模型示意：每一个BODY中的元素都可看成一个box（盒子）。margin(外边距，4个)

-边框外的区域（元素与其他元素之间的间距），外边距是透明的border(边框，4个)

-围绕在内边距和内容外的边框，默认为0。padding(内边距，4个)

-内容周围的区域（内容离边框之间的间距），内边距是透明的。content(内容，宽度、高度)

-盒子的内容，显示文本和图像。元素的width和height属性默认：width:指content内容宽度；height：指content内容高度元素占用页面空间（总宽度)的计算公式：margin-left+border-left+padding-left+contentwidth+padding-right+border-right+margin-right总宽度=左外边距+左边框+左内边距+content宽度+右内边距+右边框+右外边距总高度=上外边距+上边框+上内边距+content高度+下内边距+下边框+下外边距（1）独立设置margin-top:上外边距px；margin-right:右外边距px；margin-bottom：下外边距px；margin-left:左外边距px以下是外边距margin的上、右、下、左（顶部开始，顺时针）四个样式属性（2）统一设置（1）1个值，如：margin:2px；表示所有四个外边距相同；（2）2个值，如：margin:2px4px；表示上下外边距均为2px，左右均为4px；（3）3个值，如：margin:2px4px3px;表示上、下分别为2px、3px，左右均为4px;（4）4个值，如：margin:2px4px4px2px；表示上、右、下和左分别为：2px4px4px2px内边距padding取值含义与外边距类似。特性：如果有：margin:xpxauto；当左右边距外auto时，设置了宽度的元素将在父元素水平居中。例如：margin:2pxauto；或者:margin:auto;1.段落：宽度为300px，高度为100px;2.在1基础上，设置左、右内边距为100px；3.在2基础上，设置左、右外边距为100px;示例：元素占用的页区域(感性认识盒子模型的各个尺寸属性)<pclass="p1">段落高度和宽度都为100px</p><pclass="p1p2">段落高度和宽度都为100px</p><pclass="p1p2p3">段落高度和宽度都为100px</p>.p1{width:300px;height:100px;background-color:#ccc;margin:0;}.p2{background-color:yellow;padding:0100px;}.p3{background-color:greenyellow;margin:0100px;}计算:宽度和高度是实际宽度和高度，包括边框，但不包括margin如：width=400px,那么，width=border+padding+content=400px*{box-sizing:border-box;}/**号表示所有的元素；边框盒子border-box：宽度和高度包含边框；*/为避免复杂计算，通常会将所有的元素使用box-sizing样式属性为box-border这样，width和height分别代表元素的实际在页面占用的宽度和高度示例：在上例子基础上，

使用box-sizing属性，查看元素占用的页面空间n其前、后元素自动分行；例如段落前后的文本n默认宽度为100%，高度为auto（由子元素高度决定）；n可以改变宽度和高度；n通常作为容器元素使用。典型的块元素有：div、p、h1~h6、ul、li等。其中：div是最常用的块元素，它没有默认属性。div作为容器元素可以包含任意其他的HTML元素，主要用于元素定位和页面布局。

元素分两大类：块元素和行内元素二、

块元素和行内元素1.块元素特征Tips：如果不知道使用什么元素的时候，那么就使用div2.行内元素特征n前、后的其他的行内元素不会自动分行，如多个链接；n无法通过属性改变宽度和高度，宽度和高度由内容决定。【而img例外，它可以改变宽度和高度；此外，当行内元素为绝对定位时也可以改变其大小；】n可以通过改变padding、字体大小和左、右外边距来改变行内元素的实际占用页面的宽度，但上、下外边距的改变不影响在高度方向的其他元素。典型的行内元素：span、a和img。需要格式化的文本通常使用span。当部分文本需要单独使用样式修饰时，可以使用span标记将其包裹起来。例如，在一行文本中，设置部分文文本为不同颜色。<spanstyle="color:red;">红</span><spanstyle="color:green;">绿</span><spanstyle="color:blue;">蓝</span>

块元素和行内元素可以相互转换使用CSS中的display属性，可以使块元素和行内元素相互转换。 display属性取值如下： none：元素不显示，即隐藏，不再占用页面空间；

block：将行内元素转换为块元素，具有块元素的特征；与none结合，可以实现块元素在显示/隐藏之间切换。 inline：将块元素转换为行内元素，具有行内元素的特征。 inline-block：将块元素或行内元素转换为行内块元素，具有块元素的部分特征，又有行内元素的部分特征，即（1）元素大小由内容决定，（2）前、后元素不会分行，（3）可以通过改变宽度、高度属性调整其大小。【实质：理解为不换行的块元素】示例将列表项转换为行内块元素[不换行]，实现列表项的水平排列。 <style>ul{list-style:none;/*显式取消列表符号*/padding:0;/*也将自动取消列表项*/margin:0;}li{

display:inline-block;padding:10px20px;/*文本居中效果*/border:1pxsolid#ccc;}</style><style>ul{list-style:none;padding:0;margin:0;}li{display:inline-block;}a{/*撑大父元素*/

display:block;padding:10px;border:1pxsolid#ccc;}a:hover{background-color:black;color:white;}</style><h3>链接列表</h3><ul><li><ahref="#">链接A</a></li><li><ahref="#">链接B</a></li><li><ahref="#">链接C</a></li></ul>1.列表项转换为行内块元素；列表项包含链接，

链接使用内边距撑大列表项。2.鼠标悬停到链接时，链接反色显示 练习时刻单位、字体、文本和背景样式1.

CSS属性中的单位1.绝对单位：印刷场合，极少使用；如厘米cm毫米mm磅pt英寸in2.相对单位：与分辨率、视角区域(窗口大小)、浏览器设置(缩放)有关。(1)px：像素值，整数，常用(2)em：相对字体像素的倍数值，可以是小数。最初目的：使浏览器可以缩放文字。如：2em，则相对当前元素字体大小的2倍大小；如果当前元素没有设置字体大小，则相对父元素字体大小（继承）。(3)百分比：相对父元素对应的属性的百分比值。如图片宽度是相对父元素宽度的百分比；字体大小相对父元素的字体百分比大小。所有元素的顶层父元素是html，默认字体大小为16px，即1em

<p>这是段落文字，默认大小</p><pstyle="font-size:16px;">这是段落文字,16px</p><pstyle="font-size:1em;">这是段落文字,1em</p><pstyle="font-size:24px;">这是段落文字,24px</p><pstyle="font-size:1.5em;">这是段落文字,1.5em</p>示例：认识相对单位px与em<div

style="font-size:32px;">

<pstyle="font-size:2em">段落为div中的子元素2em，即64px</p></div>页面（body）默认字体大小:16px；字体大小使用em为单位时相对父元素字体大小而言的，顶层父元素是HTML12示例：使用百分比%，相对父元素对应的属性值；<style>

p,div{border:1pxsolidred;}</style>结论：%是相对父元素对应属性取百分比值<p>这是段落，默认大小和宽度</p><pstyle="font-size:100%;width:100%;">这是段落，字体大小100%;宽度100%;</p>

<divstyle="font-size:24px;width:400px;">

这是div文字,24px大小,400px宽度

<pstyle="font-size:150%;width:50%;">这是段落，父元素是div</p></div>2.CSS字体样式2.1字体大小：font-size：像素|em|百分比|关键字em：相对父元素字体大小(对font-size而言)百分比：同em也可以使用关键字：small|medium|larger…(比较少用)通常web页面使用像素px。2.2字体样式：font-style：normal|italic|obliqueitalic：斜体字(字库自有)oblique：强制斜体(字库没有，变斜)，与italic效果无差别字体样式包括：字体样式、粗细、大小/行高字体名2.CSS字体样式2.3字体变体：font-variant:normal|small-caps(了解)小型大写字母：将英文大写，与一般小写字母大小相同。样式：字体样式、粗细、大小/行高字体名注：span标记相当于文本标签，仅仅用于文字说明，或者对需要单独设置样式的文字起到包裹、分隔作用；除对部分文字设置样式外一般不会使用。2.4字体名：font-family:字体名1，字体名2,…如果字体名有空格，加双引号，如：”timesnewroma”2.5字体粗细：font-weight:bold|bolder|lighter|数字100-900一般使用bold(700)值，代替<b></b>标记2.6复合属性font:样式粗细大小/行高字体名

一次性设置字体所有属性

font：italicbold32px/1.5em

黑体2.CSS字体样式样式：字体样式、粗细、大小/行高字体名3.CSS文本样式3.1字符间距：letter-spacing：px|em(数值)样式：字符间距行高首行缩进字符装饰大小写转换水平、垂直对齐3.2行高

：line-height:px|em|百分比(相对字体，一般使用px应用于块元素)一行文本在页面占据的高度。

特性：当行高与高度相等时，行内文字自动垂直居中；一般使用像素值；使用百分比值/em时，是相对字体大小！3.CSS文本样式样式：字符间距行高

首行缩进字符装饰大小写转换水平、垂直对齐3.3首行缩进：text-indent：px|em|百分比(相对父元素宽度,但一般使用px)3.CSS文本样式样式：字符间距行高

首行缩进

字符装饰大小写转换水平、垂直对齐3.CSS文本样式样式：字符间距行高

首行缩进字符装饰大小写转换水平、垂直对齐3.4字符装饰

：text-decoration：none|underline|overline|line-throughthref3.CSS文本样式样式：字符间距行高

首行缩进字符装饰大小写转换水平、垂直对齐3.5大小写转换（了解）：text-transform：none|uppercase|lowercase|capitalize3.6水平对齐方式

：行内元素/块元素文本在行中的水平对齐方式。text-align：left|center|right|justify3.7垂直对齐方式

：vertical-align：top|middle|bottom|text-top|text-bottom|super|subtop:与容器顶部对齐；text-top：与文字顶部对齐。默认情况下，top与text-top效果同。场景：一般用于设置在行中(或单元格中)；图片（的对齐方式）与文字的垂直对齐效果。3.CSS文本样式样式：字符间距行高

首行缩进字符装饰大小写转换水平、垂直对齐vertical-align属性可被用于两种环境：使行内元素在其容器垂直对齐。例如，用于垂直对齐一行文本内的图片<img>；垂直对齐表格单元内容。注意vertical-align只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。表示其他行内（行内块）元素与元素中的文本对齐方式，例如文本与图片，设置图片对齐方式。vertical-align:text-top;vertical-align:text-bottom;vertical-align:top;vertical-align:bottom;line-height:200px;不设置line-height<pclass="p1"><imgsrc="./梦想.jpg"/>

这是段落文字

<span>段落其他文字</span></p><pclass="p2"><imgsrc="./梦想.jpg"/>

这是段落文字

<span>段落其他文字</span></p><pclass="p3"><imgsrc="./梦想.jpg"/>

这是段落文字

<span>段落其他文字</span></p><style>p{width:400px;line-height:200px;border:1pxsolidred;display:inline-block;margin:0;

vertical-align:middle;}img{width:100px;height:100px;}.p1img{vertical-align:text-top;}.p2img{vertical-align:middle;}.p3img{vertical-align:text-bottom;}</style>注：span标记相当于文本标签，仅仅用于文字说明，或者对需要单独设置样式的文字起到包裹、分隔作用；除非对部分文字设置样式外一般不会使用。素材

这是段落，包含红绿蓝三种文字这是粗体、斜体而且加下划线的文字这是段落，显示表达式：X12+Y12=Z<body><h3>部分文字效果,使用span标记包裹</h3><p>这是段落，包含

<spanclass="red">红</span><spanclass="green">绿</span><spanclass="blue">蓝</span>三种文字</p><p>这是<spanclass="text">粗体、斜体而且加下划线</span>的文字</p><p>这是段落，显示表达式：

X<spanclass="super">1</span><spanclass="sub">2</sapn>+Y<spanclass="super">1</span><spanclass=""sub>2</span>=Z</p></body><style>.red{color:red;}.green{color:green;}.blue{color:blue;}.text{font-weight:bold;font-style:italic;text-decoration:underline;}.super{vertical-align:super;}.sub{vertical-align:sub;}</style>综合实例：仿京东二级菜单中导航链接的效果重点在于：你要给LI宽度，否则超过容器跨度，行内块特性是换行。行内块可以垂直对齐素材电脑整机笔记本游戏本平板电脑台式机一体机服务器/工作站电脑配件显示器CPU主板显卡硬盘内存机箱电源散热器显示器支架刻录机/光驱声卡/扩展卡装机配件SSD固态硬盘组装电脑USB分线器主板CPU套装<divclass="container"><ul><li><ahref="#">电器设备</a></li><li><ahref="#">手机</a><ahref="#">电脑</a><ahref="#">手机</a><ahref="#">电脑</a><ahref="#">充电器</a><ahref="#">CPU</a><ahref="#">SSD</a></li></ul>

<ul><li><ahref="#">其他商品</a></li><li><ahref="#">运动鞋</a><ahref="#">皮鞋</a><ahref="#">跑步鞋</a><ahref="#">挎包</a><ahref="#">T恤</a><ahref="#">手表</a><ahref="#">运动鞋</a><ahref="#">皮鞋</a><ahref="#">跑步鞋</a><ahref="#">挎包</a><ahref="#">T恤</a><ahref="#">手表</a><ahref="#">运动鞋</a><ahref="#">皮鞋</a><ahref="#">跑步鞋</a><ahref="#">挎包</a><ahref="#">T恤</a><ahref="#">手表</a></li></ul></div>具体实现见实例源代码23.CSS颜色与背景

3.1字体颜色：color:颜色单词|16进制|rgb|rgbargb(R,G,B)：R,G,B颜色值，范围在0~255;或百分比(相对255值，三者必须同时使用统一单位)。rgba（R,G,B,A）:取值同上，A：透明度：0~1小数值样式：字体颜色；背景颜色；背景图3.CSS颜色与背景

样式：字体颜色；背景颜色；背景图3.2背景样式：背景颜色(同color取值)；背景图1.background-color:背景色2.background-image:url(背景图)；

背景图位置。3.background-repeat：no-repeat|repeat|repeat-x|repeat-y；背景图的填充方式。4.background-position：xy；在一个元素中，相对左上角的位置开始显示图片，即显示图片的起始位置（可取负值），可以使用关键字，例如：centercenter5.background-size:背景图大小，可以缩放图片。6.background-attachment：fixed|scroll是否随(页面)滚动/固定示例：背景图应用background-image；background-repeat；background-position；/*position组合：lefttop;leftbottom;righttop;rightbottom；centercenter;10px10px；-10px-10px*/扩展示例background-position应用，例9-5选择图片一部分作为背景，鼠标移过时切换到另外一个图/---在线取坐标工具；画在一张图上，主要考虑性能问题，不需要一个个下载目的：位置样式的使用思路：在div的哪个位置显示整个图片<body><divclass=“div1”></div>

<div