1.本章面试题

1.1 块状元素和行内元素的区别

1.2 盒子模型包含哪些属性

2. 知识点

2.1 上一章内容回顾

​ 上一章我们讲解了字体文本样式，和背景样式。

2.2 本章内容重点

​ 本章讲解块状元素，行内元素，以及盒子模型的相关内容。

3. 具体内容

3.1 块状元素和行内元素

​ 文档<body>部分出现的元素，它们可以被分为块级元素和行内元素。块级元素在浏览器中显示时，就好像在它的首尾都有一个换行符。例如<p>、<h1>-<h6>、<pre>、<address>、<header>、<nav>和<footer>等。

​ 行内元素则可以出现在某一行句子中而不必新起一行。例如<b>、<i>、<em>、<strong>、<sup>、<sub>、<small>、<ins>、<del>和<cite>等都是行内元素。从严格意义上讲，行内元素不可以包含块级元素，并且只能处于块级元素内， 而块级元素则可以包含块级元素，也可以包含行内元素。

<!DOCTYPE html>
<html>
<head>
<title>块级元素和行级元素</title>
</head>
<body>
<header><h1>招聘启事</h1>
</header>
<h2>岗位职责描述</h2>
<p>招聘2名网页设计师：<br/>1、男女不限，<b>大专以上学历</b>，熟练使用Dreamweaver等设计软件   <br />2、熟练使用html、DIV+CSS、PHP程序语言  <br />3、责任心强,工作态度端正，工作认真负责,有良好的服务意识工作时间！<br />4、能独立完成交待的设计任务; <br />5、直接与客户沟通,根据客户的修改要求组织修改设计方案； <br />6、不限专业,<i>更注重个人能力！</i>待遇面议，有意者请带上<strong>个人作品</strong>前来面试。
</p>
<h2>联系方式</h2>
<p>联系人：张先生  <br />电话：01******25606    <br />E-Mail：66****171@qq.com   <br /><address>地址：北京市朝阳区**路**号</address>
</p>
</body>
</html>

3.2 无语义的容器元素

​ 语义即意义，HTML5的语义元素能够为浏览器和开发者清楚的描述其意义，HTML5中大部分标记都是语义元素，本节主要介绍两个无语义元素——<span>和<div>，两者特别是<div>是排版布局很常用的容器类元素。

3.2.1 <div>元素

​ <div> 元素是块级元素，它是可用于组合其它HTML元素的容器，也就是说<div>标记是一个区块容器标记，可以容纳段落、标题、表格、图片等各种HTML元素。

​ <div>元素没有特定的含义，如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。<div>元素最常见的用途是网页布局，DIV+CSS布局方法取代了使用表格定义布局的老式方法。

​ 在HTML5中<header>等结构化元素出现之前，最常用的组容器就是<div>元素，它代表一个通用的内容块，结合CSS对文档赋予结构。即使在HTML5中，它的这个功用依然被大家广泛认可。

<!DOCTYPE html>
<html>
<head>
<title>div元素</title>
<style>
body{text-align:center;width:600px;margin:0 auto;font-size:13px;
}
div{border:1px solid black;margin:1px;
}
#top{padding:20px;
}
#navi{padding:5px;
}
#main{height:200px;padding:2px;
}
#left{width:150px;float:left;height:200px;
}
#right{width:432px;float:right;height:200px;
}
#foot{padding:15px;
}
</style>
</head>
<body>
<div id="top">页眉部分</div>
<div id="navi">导航部分</div>
<div id="main"><div id="left">主内容部分左侧</div><div id="right">主内容部分右侧</div>
</div>
<div id="foot">页脚部分</div>
</body>
</html>

3.2.2 <span>元素

​ <span>元素是一个行内元素，它是<div>元素的一位表亲，同样是一个没有语义的通用元素，就其本身而言，<span>元素对文档的视觉效果没有任何影响。但如果配合CSS可以对<span>元素定义的内容进行各种样式设置。

<!DOCTYPE html>
<html>
<head>
<title>span元素</title>
<style>
.s1{background-color:#f00;color:#ff5;text-decoration:underline;
}
.s2{float:left;font-size:30px;font-weight:bolder;
}
</style>
</head>
<body>
<p>
在无数蓝色的眼睛和褐色的眼睛之中，我有着一双宝石般的黑色眼睛，<span class="s1">我骄傲，我是<strong>中国</strong>人！</span>在无数白色的皮肤和黑色的皮肤之中，我有着大地般黄色的皮肤，我骄傲，我是中国人!
</p>
<p>
<span class="s2">我</span>是中国人——黄土高原是我挺起的胸脯，黄河流水是我沸腾的热血，长城是我扬起的手臂，泰山是我站立的脚跟。我是中国人——我的祖先最早走出森林，我的祖先最早开始耕耘，我是指南针、印刷术的后裔，我是圆周率、地动仪的子孙。
</p>
</body>
</html>

3.3 盒子模型

​ 在HTML文档中，每个元素都有盒子模型，所以说在Web世界里（特别是页面布局），盒子模型无处不在，这个盒子就是一个矩形的块，可以对其进行幅面、边框和边距的设置。

3.3.1 盒子模型的基本样式

​ 每一个盒子都有三个必须了解的参数，border（边框）、padding（内边距）和margin（外边距），盒子模型规定了处理元素内容和内边距、边框以及外边距的方式。

<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<style type="text/css">
body,h1,p,b,span,img{margin:5px;             /*外边距5像素*/padding:10px;           /*内边距10像素*/border:2px solid black;         /*边框2像素黑色实线*/
}
b,span{color:#6FF;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<p>
<b>段落文字（此处粗体强调）：</b>感受CSS如何处理HTML元素盒子，每个盒子的<span>表现形式</span>如何？在例子中会为每个盒子添加边框和内外边距。
</p>
<p>
<img src="data:images/scenery.jpg" />
段落文字：每一个盒子都有三个必须了解的参数，border（边框）、padding（内边距）和margin(外边距)，盒子模型规定了处理元素内容和内边距、边框以及外边距的方式。
</p>
</body>
</html>

3.3.2 盒子大小的计算width/height

​ 基本语法：

width: auto | 长度 | 百分比;
height: auto | 长度 | 百分比;

​ 语法说明：

  • auto：无特定宽高值，取决于其它属性值。

  • 长度：用长度值来定义宽高，不允许负值。

  • 百分比：用百分比来定义宽高，不允许负值。

​ 根据目前多数主流高版本浏览器的盒子大小计算规则，width和height默认指的是内容部分的宽高，是不包含padding、margin和border在内的，要想改变盒子大小的计算规则，则要使用box-sizing属性，此属性下一小节详解。多数情况下，盒子所占据的真正大小是：

盒子所占宽度= width（内容宽度）+ padding（左右）+ margin（左右）+ border（左右）
盒子所占高度= height（内容高度）+ padding（上下）+ margin（上下）+ border（上下）
<!DOCTYPE html>
<html>
<head>
<title>盒子大小</title>
<style type="text/css">
div{width:300px;            /*宽300像素*/height:200px;           /*高200像素*/margin:15px;            /*外边距15像素*/padding:20px;           /*内边距20像素*/border:15px solid green;        /*边框15像素绿色实线*/
}
</style>
</head>
<body>
<div>div盒子中的内容</div>
</body>
</html>

3.3.3 改变盒子大小的计算方式 box-sizing

​ 基本语法：

width: 值;
height: 值;
box-sizing: content-box | border-box;

​ 语法说明：

  • content-box：标准模式下的盒子模型。padding、border和margin不被包含在定义的宽高之内，此时设定的width仅指内容的宽度，height亦类似。

  • border-box：怪异模式下的盒子模型。padding和border被包含在定义的width和height之内，此时设定的width指“内容+border+margin”，height类似。很多旧式浏览器，如IE7.0及其之前版本，默认的盒子大小计算模式就是如此。

<!DOCTYPE html>
<html>
<head>
<title>盒子大小计算方式</title>
<style type="text/css">
#cbox{width:300px;            /*宽300像素*/height:200px;           /*高200像素*/margin:15px;            /*外边距15像素*/padding:20px;           /*内边距20像素*/border:15px solid green;        /*边框15像素绿色实线*/box-sizing:content-box;     /*width、height仅指内容宽高*/
}
#bbox{width:300px;            /*宽300像素*/height:200px;           /*高200像素*/margin:15px;            /*外边距15像素*/padding:20px;           /*内边距20像素*/border:15px solid green;        /*边框15像素绿色实线*/box-sizing:border-box;     /*width、height指内容宽高+margin+border*/
}
</style>
</head>
<body>
<div id="cbox">content-box方式：盒子所占实际大小为400px*300px，内容部分大小为300px*200px</div>
<div id="bbox">border-box方式：盒子所占实际大小为330px*230px,，内容部分大小为230px*130px</div>
</body>
</html>

3.3.4 边框的基本属性

​ 边框border用于指定盒子的边框应如何呈现，边框样式属性最基本的有style、color和width，分别表示边框的样式、颜色和厚度。

3.3.4.1 边框样式border-style

​ border-style属性用来控制对象的边框样式，可同时设定1个或多个边框样式。

​ 另外还有四个分属性border-top-style、border-right-style、border-bottom-style和border-left-style分别对应上、右、下、左4个边的边框样式。

​ 基本语法：

border-style: 样式值{1,4};
border-top-style: 样式值;
border-bottom-style: 样式值;
border-left-style: 样式值;
border-right-style: 样式值;

​ 语法说明：

  • 样式值如下表所示。

  • border-top-style、border-right-style、border-bottom-style和border-left-style属性只能有1个值。

  • border-style的值可以是1-4个，中间以空格分隔。如果只提供1个值，将用于全部的4个边框；如果提供2个值，则第1个用于上、下边框，第2个用于左、右边框；如果提供3个值，则第1个用于上边框，第2个用于左、右边框，第3个用于下边框；如果提供全部4个值，将按按照上、右、下、左的顺序作用于4个边框。

<!DOCTYPE html>
<html>
<head>
<title>边框样式</title>
<style type="text/css">
div{width:80px;height:50px;margin:10px;     /*外边距*/  float:left;      /*左边浮动*/font-size:13px;
}
#bs1{ border-style:none; }
#bs2{ border-style:solid; }
#bs3{ border-style:solid dashed;}
#bs4{ border-style:solid dashed double; }
#bs5{ border-style:solid dashed double dotted; }
#bs6{ border-style:groove; }
#bs7{ border-style:ridge; }
#bs8{ border-style:inset; }
#bs9{ border-style:outset; }
#bs10{border-top-style:solid; border-right-style:dashed;border-bottom-style:double;border-left-style:dotted;
​
}
</style>
</head>
<body>
<div id="bs1">none无边框</div>
<div id="bs2">1个值solid</div>
<div id="bs3">2个值solid dashed</div>
<div id="bs4">3个值solid dashed double</div>
<div id="bs5">4个值solid dashed double dotted</div>
<div id="bs6">groove3D凹槽</div>
<div id="bs7">ridge3D凸槽</div>
<div id="bs8">inset3D凹边</div>
<div id="bs9">outset3D凸边</div>
<div id="bs10">分别设定四个边</div>
</body>
</html>

3.3.4.2 边框厚度border-width

​ 基本语法：

border-width: 厚度值{1,4};
border-top-width: 厚度值;
border-bottom-width: 厚度值;
border-left-width: 厚度值;
border-right-width: 厚度值;

​ 语法说明：

  • 厚度值可以是长度或关键字，关键字可以是medium、thin和thick，分别表示中等厚度的边框、细边框和粗边框。

  • border-top-width、border-right-width、border-bottom-width和border-left-width属性只能有1个值。

  • border-width的值可以是1-4个，中间以空格分隔。如果只提供1个值，将用于全部的4个边框；如果提供2个值，第1个用于上、下边框，第2个用于左、右边框；如果提供3个值，第1个用于上边框，第2个用于左、右边框，第3个用于下边框；如果提供全部4个值，将按照上、右、下、左的顺序作用于4个边框。

<!DOCTYPE html>
<html>
<head>
<title>边框厚度</title>
<style type="text/css">
div{width:80px;height:50px;margin:10px;     /*外边距*/  float:left;      /*左边浮动*/font-size:13px;border-style:solid;     /*边框样式solid*/
}
​
#bw1{ border-width:thick; }
#bw2{ border-width:2px 4px;}
#bw3{ border-width:2px 4px 6px; }
#bw4{ border-width:2px 4px 6px 8px; }
#bw5{border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px;
}
</style>
</head>
<body>
<div id="bw1">1个值thick</div>
<div id="bw2">2个值2px 4px</div>
<div id="bw3">3个值2px 4px 6px</div>
<div id="bw4">4个值2px 4px 6px 8px</div>
<div id="bw5">分别设定4个边2px、4px、6px和8px</div>
</body>
</html>

3.3.4.3 边框颜色border-color

​ 基本语法：

border-color: 颜色值{1,4};
border-top-color: 颜色值;
border-right-color: 颜色值;
border-bottom-color: 颜色值;
border-left-color: 颜色值;

​ 语法说明：

​ 颜色值可以是任何合法CSS颜色值。

  • border-top-color、border-right-color、border-bottom-color和border-left-color属性只能有1个值。

  • border-color的值可以是1-4个，中间以空格分隔。如果只提供1个值，将用于全部的4个边框；如果提供2个值，第1个用于上、下边框，第2个用于左、右边框；如果提供3个值，第1个用于上边框，第2个用于左、右边框，第3个用于下边框；如果提供全部4个值，将按照上、右、下、左的顺序作用于4个边框。

<!DOCTYPE html>
<html>
<head>
<title>边框颜色</title>
<style type="text/css">
div{width:80px;height:50px;margin:10px;     /*外边距*/  float:left;      /*左边浮动*/font-size:13px;border-style:solid;     /*边框样式solid*/border-width:10px;    /*边框宽度10像素*/
}
#bc1{ border-style:groove;border-color:#81409A;
}
#bc2{ border-color:#81409A #B7D5EF; }
#bc3{ border-color:#81409A #B7D5EF #B6CE44; }
#bc4{ border-color:#81409A #B7D5EF #B6CE44 #FDDA04; }
#bc5{border-top-color:#81409A;border-right-color:#B7D5EF;border-bottom-color:#B6CE44;border-left-color:#FDDA04;;
}
</style>
</head>
<body>
<div id="bc1">1个颜色值，样式groove</div>
<div id="bc2">2个颜色值,样式solid</div>
<div id="bc3">3个个颜色值,样式solid</div>
<div id="bc4">4个个颜色值,样式solid</div>
<div id="bc5">分别设定4个边,样式solid</div>
</body>
</html>

3.3.4.4 边框复合属性

​ 基本语法：

border-left: [宽度]  [样式]  [颜色];
border-right: [宽度]  [样式]  [颜色];
border-top: [宽度]  [样式]  [颜色];
border-bottom: [宽度]  [样式]  [颜色];
border: [宽度]  [样式]  [颜色];

​ 语法说明：

  • 属性值中“宽度”、“颜色”和“样式”可同时设定1个或多个，值之间无特定顺序，用空格分隔。

  • “宽度”、“颜色”和“样式”参考前文章节。

<!DOCTYPE html>
<html>
<head>
<title>边框复合属性</title>
<style type="text/css">
div{width:100px;height:60px;margin:10px;     /*外边距*/  float:left;      /*左边浮动*/font-size:13px;
}
#b1{ border:solid;color:#159DD7;       /*前景色*/
}
#b2{ border:double #81409A;}
#b3{ border:dashed #047C3F 6px;}
#b4{ border-top:double;border-right:solid #B6CE44;border-bottom:dotted 2px;border-left:ridge #B7D5EF 8px;
}
</style>
</head>
<body>
<div id="b1">border:solid，边框颜色默认使用前景色</div>
<div id="b2">border:double #81409A;</div>
<div id="b3">border:dashed #047C3F 6px;</div>
<div id="b4">4个边分别设置</div>
</body>
</html>

3.3.5 边距

​ 盒子有内边距和外边距，分别指内容离边框的距离和边框离其它元素的距离。

3.3.5.1 内边距padding

​ 基本语法：

padding : 值{1,4};
padding-top :值;
padding-bottom :值;
padding-left :值;
padding-right :值;

​ 语法说明：

  • 属性值可以是长度值和百分比，不可以是负值，百分比在水平书写模式下，参照其包含块 width 进行计算。

  • padding-top、padding-right、padding-bottom和padding-left属性只能有1个值。

  • padding的值可以是1-4个，中间以空格分隔。如果只提供1个值，将用于全部4个边；如果提供2个值，第1个用于上、下边，第2个用于左、右边；如果提供3个，第1个用于上边，第2个用于左、右边，第3个用于下边；如果提供全部4个参数值，将按上、右、下、左的顺序作用于4个边。

  • 所有对象可以使用该属性设置左、右两边的内边距；若要设置内联元素的上、下两边的内边距，必须先设置对象为块级元素。

<!DOCTYPE html>
<html>
<head>
<title>内边距</title>
<style type="text/css">
/*父层样式*/
#parent{padding:20px 30px;        /*父层内边距*/background-color:#B0DFE9;        /*父层背景色*/
}
/*子层样式*/
#child{border:3px double #189FD7;         /* 子层边框 */padding:20px;                 /*子层内边距*/
​
}
/*h1样式*/
h1{font-size:20px;border-bottom:2px dashed #189FD7;padding-bottom:10px;               /*下边内边距*/text-align:center;
}
/*p元素样式*/
p{font-size:14px;line-height:1.5;text-indent:2em;padding-top:5px;    /*上边内边距*/
}
</style>
</head>
<body>
<div id="parent"><div id="child"><h1>月是故乡明</h1><p>中秋节，又称月夕、秋节、仲秋节、八月节、八月会、追月节、玩月节、拜月节、女儿节或团圆节，是流行于中国众多民族与汉字文化圈诸国的传统文化节日，时在农历八月十五；因其恰值三秋之半，故名，也有些地方将中秋节定在八月十六。</p><p>中秋节始于唐朝初年，盛行于宋朝，至明清时，已成为与春节齐名的中国主要节日之一。受中华文化的影响，中秋节也是东亚和东南亚一些国家尤其是当地的华人华侨的传统节日。自2008年起中秋节被列为国家法定节假日。2006年5月20日，国务院列入首批国家级非物质文化遗产名录。</p><p>中秋节自古便有祭月、赏月、拜月、吃月饼、赏桂花、饮桂花酒、等习俗，流传至今，经久不息。中秋节以月之圆兆人之团圆，为寄托思念故乡，思念亲人之情，祈盼丰收、幸福，成为丰富多彩、弥足珍贵的文化遗产。中秋节与端午节、春节、清明节并称为中国四大传统节日。</p></div>
</div>
</body>
</html>

3.3.5.2 外边距margin

​ 基本语法：

margin : 值{1,4};
margin-top :值;
margin-bottom :值;
margin-left :值;
margin-right :值;

​ 语法说明：

  • 属性值可以是长度值和百分比，不可以是负值，百分比在水平书写模式下，参照其包含块 width 进行计算。

  • margin-top、margin-right、margin-bottom和margin-left属性只能有1个值。

  • margin的值可以是1-4个，中间以空格分隔。如果只提供1个值，将用于全部4个边；如果提供2个值，第1个用于上、下边，第2个用于左、右边；如果提供3个，第1个用于上边，第2个用于左、右边，第3个用于下边；如果提供全部4个参数值，将按上、右、下、左的顺序作用于4个边。

  • 若要设置内联元素的外边距，必须先使该元素表现为块级显示，外边距始终透明。

<!DOCTYPE html>
<html>
<head>
<title>外边距</title>
<style type="text/css">
/*父层样式*/
#parent{padding:20px 30px;        /*父层内边距*/margin:10px;              /*父层外边距*/background-color:#B0DFE9;        /*父层背景色*/
}
/*子层样式*/
#child{border:3px double #189FD7;         /* 子层边框 */padding:20px;                 /*子层内边距*/margin:10px;
​
}
/*h1样式*/
h1{font-size:20px;border-bottom:2px dashed #189FD7;padding-bottom:10px;               /*下边内边距*/text-align:center;
}
/*p元素样式*/
p{font-size:14px;line-height:1.5;text-indent:2em;padding-top:5px;    /*上边外边距*/
}
/*img元素样式*/
img{width:200px;margin:0px 10px;      /*图像外边距*/float:right;
}
</style>
</head>
<body>
<div id="parent"><div id="child"><h1>月是故乡明</h1><p><img src="data:images/midautumn.jpg" />中秋节，又称月夕、秋节、仲秋节、八月节、八月会、追月节、玩月节、拜月节、女儿节或团圆节，是流行于中国众多民族与汉字文化圈诸国的传统文化节日，时在农历八月十五；因其恰值三秋之半，故名，也有些地方将中秋节定在八月十六。</p><p>中秋节始于唐朝初年，盛行于宋朝，至明清时，已成为与春节齐名的中国主要节日之一。受中华文化的影响，中秋节也是东亚和东南亚一些国家尤其是当地的华人华侨的传统节日。自2008年起中秋节被列为国家法定节假日。2006年5月20日，国务院列入首批国家级非物质文化遗产名录。</p><p>中秋节自古便有祭月、赏月、拜月、吃月饼、赏桂花、饮桂花酒、等习俗，流传至今，经久不息。中秋节以月之圆兆人之团圆，为寄托思念故乡，思念亲人之情，祈盼丰收、幸福，成为丰富多彩、弥足珍贵的文化遗产。中秋节与端午节、春节、清明节并称为中国四大传统节日。</p></div>
</div>
</body>
</html>

3.3.6 边框的其他属性

​ CSS3增加了圆角边框、图像边框、盒子阴影和盒子倒影等新属性，这些属性已被部分浏览器支持。

3.3.6.1 圆角边框border-radius

​ 边框的圆角的半径值定义

​

  1. 分别设置4个角

    基本语法：

    border-top-left-radius: [水平半径]  [垂直半径];
border-top-right-radius: [水平半径]  [垂直半径];
border-bottom-right-radius: [水平半径]  [垂直半径];
border-bottom-left-radius: [水平半径]  [垂直半径];

    语法说明：

    • border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius分别设置对象左上角、右上角、右下角和左下角的圆角样式。

    • 属性值可以是长度值或百分比，表示圆角的水平和垂直半径，如果数值为0则表示是直角边框。

    • 提供2个参数，2个参数以空格分隔，第1个参数表示水平半径，第2个参数表示垂直半径，如果第2个参数省略，则默认等于第1个参数。

    1. 同时设置4个角

    基本语法：

    border-radius: 取值{1,4} [ / 取值{1,4} ];

    语法说明：

    • 属性值可以是长度值或百分比，表示圆角的水平和垂直半径，如果数值为0则表示是直角边框。

    • 它提供2组参数，2组参数以“/”分隔，每组参数允许设置1~4个参数值，第1组参数表示水平半径，第2组参数表示垂直半径，如第2组参数省略，则默认等于第1组参数。

    • 每组参数如果只提供1个参数值，将用于全部的于4个角。

    • 每组参数如果提供2个参数值，第1个用于上左（top-left）和下右（bottom-right），第2个用于上右（top-right）和下左（bottom-left）。

    • 每组参数如果提供3个参数值，第1个用于上左（top-left），第2个用于上右（top-right）和下左（bottom-left），第3个用于下右（bottom-right）。

    每组参数如果提供全部4个参数值，将按上左（top-left）、上右（top-right）、下右（bottom-right）、下左（bottom-left）的顺序作用于4个角。

<!DOCTYPE html>
<html>
<head>
<title>圆角边框</title>
<style type="text/css">
div{width:130px;height:70px;margin:10px;     float:left;      /*左边浮动*/font-size:13px;border:2px solid #000;padding:5px;
}
#br1{ border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;
}
#br2{border-top-left-radius:20px 10px;border-top-right-radius:20px 10px;
}
#br3{ border-radius:10px; }
#br4{ border-radius:10px 15px; }
#br5{ border-radius:10px 15px 20px; }
#br6{ border-radius:10px 15px 20px 25px; }
#br7{ border-radius:10px/20px;}
#br8{ border-radius:10px 15px/20px 25px;}
#br9{ border-radius:10px 15px 20px 25px/20px 25px 30px 35px;}
</style>
</head>
<body>
<div id="br1">分别设置4个角:<br />左上右上10px<br />左下右下20px</div>
<div id="br2">分别左上和右上:<br />值20px 10px</div>
<div id="br3">水平与垂直半径相同:<br />1个参数值:10px</div>
<div id="br4">水平与垂直半径相同:<br />2个参数值:10px 15px</div>
<div id="br5">水平与垂直半径相同:<br />3个参数值:10px 15px 20px</div>
<div id="br6">水平与垂直半径相同:<br />3个参数值:10px 15px 20px 25px</div>
<div id="br7">水平与垂直半径不同：<br />每组1个参数:10px/20px;</div>
<div id="br8">水平与垂直半径不同：<br />每组2个参数:10px 15px/20px 25px</div>
<div id="br9">水平与垂直半径不同：<br />每组4个参数:10px 15px 20px 25px/20px 25px 30px 35px</div>
</body>
</html>

3.3.6.2 图像边框border-image

​ 基本语法：

border-image：< border-image-source > || < border-image-slice > [ / < border-image-width > | / < border-image-width >? / < border-image-outset > ]? || < border-image-repeat >

​ 这几个属性的意义如下：

  • border-image-source：控制对象的边框要使用的图像。

  • border-image-slice：控制对象的边框图像的切片方式。

  • border-image-width：控制对象的边框厚度。

  • border-image-outset：控制对象的边框图像的外延扩展。

  • border-image-repeat：控制对象的边框图像的平铺方式。

  1. border-image-source属性

    控制对象的边框要使用的图像，属性值可以是none或者图像url，假如该属性的值为none或者无法显示图片，则将会使用border-style（如果定义了border-style）的设置显示边框。

    基本语法：

    border-image-source: none | url(图像路径);

    语法说明：

    • none：不使用图像边框。

    • url：边框图像的路径。

  2. border-image-slice属性

    控制对象的边框图像的切片方式，属性可以是1-4个数字或百分比，也可以增加一个fill关键字。

    基本语法：

    border-image-slice：[ 数字 | 百分比 ]{1,4} && fill?

    语法说明：

    • 值可以是1~4个数字或百分比，这4个值分别表示相对于图片的上、右、下、左边缘的偏移量，将图像分成4个角，4条边和中间区域的9个切片，中间区域始终是透明的（即没有图像填充），除非加上关键字 fill。

    • 如果第4个值不存在，它会等同于第2个值；如果第3个值不存在，它会等同于第1个值；如果第2个值不存在，它会等同于第1个值。

    • 当值为数字时，代表图像中的像素，注意不能加px表示单位，直接使用数字。

    • 当使用百分比时，相对于图片的大小。

    • fill关键字存在的话，将会保留border-image中间的部分。

  3. border-image-width属性

    该属性用于指定使用多厚的边框来承载被裁剪后的图像。

    基本语法：

    border-image-width：[ 长度值 | 百分比 | 浮点数 | auto ]{1,4}

    语法说明：

    • 值可以是1~4个长度值、百分比、浮点数或者关键字auto，这4个值用来指定边框图片区域相对于上、右、下、左4个侧边的厚度。

    • 如果第4个值不存在，它会等同于第2个值；如果第3个值不存在，它会等同于第1个值；如果第2个值不存在，它会等同于第1个值。

    • auto表示边框图片的厚度为图片分割后切片的宽度或高度，即和border-image-slice的值相同。

  4. border-image-repeat属性

    ​ 该属性用于指定边框图像的填充方式。可定义0~2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为stretch，则可省略不写。

    ​ 基本语法：

    border-image-repeat：[ stretch | repeat | round | space ]{1,2}

    ​ 语法说明：

    • stretch：指定用拉伸方式来填充边框图像。

    • repeat：指定用平铺方式来填充边框图像。当图片遇到边界时，如果超出则被截断。

    • round：指定用平铺方式来填充边框图像。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

    • space：指定用平铺方式来填充边框图像。图片会根据边框的尺寸动态调整图片之间的间距直至正好可以铺满整个边框。目前主流浏览器几乎都不支持space关键字。

5.border-image-outset属性

​ 该属性用于指定边框图像向外扩展所定义的数值，即如果值为10px，则图像在原本的基础上往外延展10px再显示。

​ 基本语法：

border-image-outset：[ 长度值 | 浮点数 ]{1,4}

​ 语法说明：

  • 值不允许为负值。

  • 值可以是1~4个长度值或浮点数，这4个值用来指定边框图片区域相对于上、右、下、左4个侧边的外延。

  • 如果第4个值不存在，它会等同于第2个值；如果第3个值不存在，它会等同于第1个值；如果第2个值不存在，它会等同于第1个值。

<!DOCTYPE html>
<html>
<head>
<title>图像边框</title>
<style type="text/css">
div{padding:30px;margin:20px;font-size:14px;background-color:#9FF;     /*设置div背景颜色*/float:left;width:160px;height:80px;
}
#bi1{border-image-source:url("images/test.png");border-image-slice:27;border-image-width:auto;border-image-repeat:repeat;
}
#bi2{border-image-source:url("images/test.png");border-image-slice:27 fill;border-image-width:auto;border-image-repeat:repeat;
}
#bi3{border-image-source:url("images/test.png");border-image-slice:27;border-image-width:auto;border-image-outset:10px;border-image-repeat:repeat;
}
#bi4{ border-image:url("images/test.png") 27/15px repeat; }
#bi5{ border-image:url("images/test.png") 35/40px repeat; }
#bi6{ border-image:url("images/test.png") 20/27px repeat; }
#bi7{ border-image:url("images/test.png") 27/auto stretch; }
#bi8{ border-image:url("images/test.png") 27/auto round; }
#bi9{ border-image:url("images/test.png") 10 15 20 30/auto repeat; }
</style>
</head>
<body>
<div id="bi1">切片：27<br />边框厚度：auto，即27px <br />平铺方式：repeat
</div>
<div id="bi2"><h1>加关键字fill</h1>
</div>
<div id="bi3">切片：27<br />边框厚度：auto，即27px <br />外延：10px <br /> 平铺方式：repeat
</div>
<div id="bi4">切片：27<br />边框厚度：15px  <br />   平铺方式：repeat
</div>
<div id="bi5">切片：35<br />边框厚度：40px <br />平铺方式：repeat
</div>
<div id="bi6">切片：20<br />边框厚度：27px <br />平铺方式：repeat
</div>
<div id="bi7">切片：20<br />边框厚度：auto，即27px <br />平铺方式：stretch
</div>
<div id="bi8">切片：20<br />边框厚度：auto，即27px <br />平铺方式：round
</div>
<div id="bi9">切片：10 15 20 30<br />边框厚度：auto，即27px <br />平铺方式：repeat;
</div>
</body>
</html>

3.3.7 盒子阴影 box-shadow

​ box-shadow属性的值可以是none或者1到多个阴影的叠加效果。none表示没有阴影，为默认值；如果有阴影，则每个阴影有6个值可以设置：2~4个长度值、1个颜色值和1个阴影类型关键字inset（inset为可选）。

​ 基本语法：

box-shadow: none | 阴影 [ , 阴影 ]*;
阴影 = [inset] 水平偏移量 垂直偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色]

​ 语法说明：

  • none：没有阴影。

  • 阴影：可以设定多组阴影效果，每组参数值以逗号分隔。

  • inset：设置对象的阴影类型为内部阴影，可以没有，如果没有该值，则对象的阴影默认为外部阴影。

  • 水平偏移量： 该长度值用来设置对象的阴影水平偏移值，可以为负值，正值表示向右偏移，负值表示向左偏移。

  • 垂直偏移量：该长度值用来设置对象的阴影垂直偏移值，可以为负值，正值表示向下偏移，负值表示向上偏移。

  • 阴影模糊半径：此值可选，如果提供了此长度值则用来设置对象的阴影模糊值，不允许负值，值越大阴影就越模糊，默认值为0，表示没有模糊。

  • 阴影扩展半径：此值可选，如果提供了此长度值则用来设置对象的阴影扩展半径，可以为负值。正值表示在所有方向扩展，负值表示在所有方向上消减，默认值为0，表示没有扩展。

  • 阴影颜色：设置对象的阴影颜色，可以省略，默认为黑色。

<!DOCTYPE html>
<html>
<head>
<title>盒子阴影</title>
<style type="text/css">
div,img{width:150px;height:100px;margin:15px;padding:5px;float:left;font-size:13px;
}
#bs1{box-shadow:4px 4px 2px 2px #61f7eb; background-color:#EC3B58;
}
#bs2{ box-shadow:4px 4px; background-color:#9CDFFC;
}
#bs3{ box-shadow:-4px 4px 2px 2px #ef41d4; background-color:#7afe84;
}
#bs4{ box-shadow:0 0 6px 6px #9366f7;
}
#bs5{ box-shadow:inset 0 0 6px 6px #9366f7;
}
#bs6{         /*多重阴影效果*/box-shadow: 0 0 2px 2px #56f79a, 0 0 2px 4px #fcf276,0 0 2px 7px #5fcff5,0 0 2px 11px #f34ddf;
}
</style>
</head>
<body>
<div id="bs1">外部阴影有模糊有外延</div>
<div id="bs2">外部阴影无模糊无外延</div>
<div id="bs3">外部阴影有模糊有外延</div>
<img id="bs4" src="data:images/qute.png" />
<img id="bs5" src="data:images/qute.png" />
<img id="bs6" src="data:images/qute.png" />
</body>
</html>

4.本章总结

4.1 总结本章知识点

​ 本章学习了块状元素和行内元素的概念，以及元素的盒子模型。

4.2 面试题答案

4.2.1 块状元素和行内元素的区别

​ 块级元素在浏览器中显示时，就好像在它的首尾都有一个换行符，元素分行显示。行内元素则可以出现在某一行句子中而不必新起一行。。从严格意义上讲，行内元素不可以包含块级元素，并且只能处于块级元素内， 而块级元素则可以包含块级元素，也可以包含行内元素。

4.2.2 盒子模型包含了哪些属性

​ 盒子模型包括盒子的大小,边框样式，边框颜色，边框宽度，边框圆角，内边距，外边距，盒子阴影。

5. 练习题

5.1 任务一

5.2 任务二

5.3 任务三

5.4 任务四

小白入门之HTML--第五章 块状元素,行内元素,盒子模型相关推荐

  1. D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素

    D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...

  2. HTML行内元素、块状元素和行内块状元素的区分

    HTML 5 的常用元素分类 HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换 (1)display:inline;转 ...

  3. HTML网页设计：五、行内元素和块元素

    行内元素和块元素 HTML系列文章目录 HTML网页设计:一.HTML的基本结构 HTML网页设计:二.网页的基本标签 HTML网页设计:三.图像标签之<img>标签 HTML网页设计:四 ...

  4. Python编程从入门到实践第五章部分习题

    Python编程从入门到实践第五章部分习题 5-8 5-9` names = ['admin','zhang','li','zhao','song'] for name in names:if nam ...

  5. 零基础入门转录组分析——第五章（表达定量）

    零基础入门转录组分析--第五章(表达定量) 目录 零基础入门转录组分析--第五章(表达定量) 1. 序列比对结果的复查 2. 表达定量 3. 提取有效信息 4. 合并多个样本定量结果 5. 进一步修改 ...

  6. ArcGIS for Desktop入门教程_第五章_ArcCatalog使用 - ArcGIS知乎-新一代ArcGIS问答社区

    原文:ArcGIS for Desktop入门教程_第五章_ArcCatalog使用 - ArcGIS知乎-新一代ArcGIS问答社区 1 ArcCatalog使用 1.1 GIS数据 地理信息系统, ...

  7. 行内元素和块状元素的水平居中设置

    我在上一篇文章里总结了一下块状元素.内联元素.内联-块状元素的区别 三者的一个重要区别在于是不是独占一行以及能不能设置宽高.内外间距. 在这个前提下,我们应该怎么设置元素在水平方向上的居中呢? 行内元 ...

  8. 盒模型，块状元素，行内元素

    盒子模型: css盒模型分为两种,一种是遵循w3c标准的标准盒模型,另一种是IE盒模型. 标准盒子模型 IE盒子模型 通过上面两张图可以看出,两种盒子模型都包括padding,margin,borde ...

  9. 块状元素、内联元素(又叫行内元素)和内联块状元素

    块元素在页面中以区域块的形式出现,每个块元素都会独自占据一整行或多整行,其中<div>标记为最典型的块元素.内联元素特点是不必在新的一行开始,同时,也不强迫其他的元素在新的一行显示.一个行 ...

  10. 行内元素和块状元素一览表

    块状元素: address:地址 blockquote: 块引用 center :居中对齐块 dir:目录列表 div:常用块级容易,也是CSS layout的主要标签 dl:定义列表 fieldse ...

最新文章

  1. 评价对象检测模型的数字度量：F1分数以及它们如何帮助评估模型的表现
  2. Python【算法中心 02】Web框架Django管理页面使用（管理员账号创建+API使用+应用添加）GreenPlum数据库引擎及API测试
  3. context 的理解
  4. No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=armv7s, VALID_ARCHS=armv7 armv6)
  5. Grove-Lora Radio：修改库函数使能修改扩频因子、带宽参数、码率
  6. 红橙Darren视频笔记 模板模式的应用与BaseActivity
  7. 解决：“确实允许此网页访问剪贴板吗”
  8. 苹果2019新款iPhone售价惊曝：咬牙仍坚持高价位？
  9. 【QT5.3】VS2013+QT5.3 中文乱码问题 解决方案
  10. navision系统和sap区别_上海生产管理EPR系统和SAP系统有什么不同，我们应该选择哪个？...
  11. 20200721每日一句
  12. 再好的技术，再完美的规章，也无法取代人自身的素质和责任心
  13. android摄像头(camera)之buffer管理
  14. Pycharm this applicatation failed to start because it could not find or laod the qt plaform plugin
  15. 微信JSSDK使用签名算法
  16. mysql 1677错误_[转载]MySQL 5.5.12 row格式复制下从库结构变更引发1677错误一则
  17. 2022年全球与中国电缆悬挂夹市场现状及未来发展趋势
  18. 【Python】动量策略回测（日内高频数据）
  19. 【HTCVR】VRTK插件模块功能分析之传送移动（二）
  20. 帧、报文、报文段、分组、包、数据报的概念区别

热门文章

  1. python pdf文件处理
  2. class uesrfun.php,帝国cms教程：列表页面批量添加Tags -电脑资料
  3. 让终端窗口“下雪”的有趣指令
  4. 最小生成树（Kruskal、Prim）
  5. php验证是否是jwt,php实现JWT认证的方法 JWT验证使用流程
  6. python pgm 转 bmp
  7. 【数据结构（C语言版）严蔚敏 第一章 绪论】
  8. 开发linux无线网卡驱动程序,linux-2.6.26下开发marvell 88w8686 wifi驱动 （转）
  9. 详解关键路径法，这可能是你能找到的最详尽的了
  10. MSF之meterpreter权限维持