一、认识盒子模型

  • 盒子模型:在网页中,承载内容的区域
  • 网页中盒子模型拥有内边距、边框、外边距、宽和高
  • 盒子模型用于划分区域和承载内容,使网页的元素清晰的排列

在这里插入图片描述

二、div标签

div标签是一个块容器标签(可以设置宽度和高度)

div标签可以把网页分割为独立的部分,用来实现网页的规划和布局

大多数HTML标签都可以嵌套<div>标签中可以嵌套多层<div>

可以替代大多数块容器标签,如:<h3><p>

示例代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>div演示</title>
	<style>
		.one{
			width: 400px;
			height: 100px;
			background: #FD0004;  /*设置div的宽度与高度*/
			border: 3px solid #000000; /*定义div的边框与边框颜色 */
			font-size: 20px; /*定义div内文字的字体大小*/
		}
		.two{
			margin: 10px;  /*div的间隙*/
			height: 200px;
			background: green;
		}
	</style>
</head>
<body>
	<div class="one"> 标题文字一</div>
	<div class="two">文本内容一</div>
</body>
</html>

效果:

注意:1 <div>标签最大的意义在于和浮动属性float配合可以实现网页的布局,这就是常说的DIV+CSS布局

​ 2 <div>可以替代块级元素标签,但语义上右一定的区别,如<h2>语义较重,<div>只代表一个通用的块级元素,主要用于布局,不能完全的替代<h>和<p>

三、边框属性

为了分割页面中不同的盒子,可以为元素设置边框的效果,图片或文字皆可设置边框,常见的边框分类和样式的属性如下

边框分类

border-top:上边框

border-bottom:下边框

border-left:左边框

border-right:右边框

边框样式属性

border-top-style:上边框样式

border-top-width:上边框宽度

border-top-color:上边框颜色

3.1 边框样式的属性值

边框样式有不同的显示样式,其对应的属性取值如下:

border-style的常见属性有如下几种:

border-style:solid; /*四边实线*/

border-style:solid dotted; /*上下实线*/

border-style:solid dotted dashed; /*上实线,左点线,下虚线*/

示例图片:

在这里插入图片描述

代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>边框属性</title>
	<style>
		h2{ border-style:double
		}
		.two{
			border-top-style: dotted;
			border-bottom-style: dotted;
			border-left-style: solid;
			border-right-style: solid;
		}
		.three{
			border-style: dotted solid;
		}
		.four{
			border-style: solid double dashed;
		}
	</style>
</head>
<body>
	<h2 class="one"> 标题文字一</h2>
	<p class="two">上下为点线,左右为实线</p>
	<p class="three">上下为点线,左右为实线(代码简写)</p>
	<p class="four">上为单实线,左右双实线,下为虚线</p>
</body>
</html>
3.2 边框宽度的设置

边框宽度的写法:

border-width:5px; /*四边宽度5像素*/

border-width:5px 3px; /*上下边框宽度5像素,左右边框宽度3像素*/

border-width:5px 3px 4px; /*上边框5像素,左右边框3像素,下边框4像素*/

3.3边框的颜色设置与综合写法

常用取值方法:

border-color: red;

transparent“设置为透明色”

颜色可以设置为颜色值、十六进制色值、rgb色值

综合属性设置方法:

border:宽度 样式 颜色

综合属性设置时顺序任意不分先后,若要指定方位,需要使用border-top:宽度 样式 颜色;

值赋值的原则:

  1. 只有一个取值则会赋值到边框的上下左右
  2. 如果取值为两个时则第一个会赋值到边框的上下,第二个值会赋值到边框的左右
  3. 取值为三个则第一个值会赋值到上边框,第二个值会赋值到左右边框,第三个值会赋值到下边框

注意:在设置边框宽度的时候必须同时设置边框的样式,若无样式也要将样式设置为none,否则宽度将设置无效

###欢迎加入QQ群一同交流学习937864538
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐