【HTML】用盒子模型划分网页模块

1、盒子模型

☞ 所谓的盒子模型在HTML中就是一个盛装
元素内容的容器。
☞ 每个盒子模型都由元素的内容、宽高、
内边距（padding）、边框（border）和外边距（margin）组成。

2、< div>标签

3、border：边框属性

css">border-top-style:dashed ;		//上边框的样式
border-top-width:3px ;			//上边框的宽度
border-top-color:#F00;			//上边框的颜色border-top:3px dashed #F00;		//上边框的宽度、样式、颜色
border-right:10px double #900;	//右边框的宽度、样式、颜色
border-bottom:3px dotted #CCC;	//下边框的宽度、样式、颜色
border-left:10px solid green;	//左边框的宽度、样式、颜色
border:10px solid green;		//四边框的宽度、样式、颜色

3.1、border-style：边框样式

none：没有边框
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

css">border-style:solid ; /*四边均为实线*/
border-style:solid dotted ;  /*上下实线、左右点线*/
border-style:solid dotted dashed; /*上实线、左右点线、下虚线*/

3.2、border-width：边框宽度

在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。
注意：常用取值单位为像素。

css">border-width:5px; /*四边宽度均为5像素*/
border-width:5px 3px ; /*上下边框5像素宽度、左右边框3像素宽度*/
border-width:5px 3px 4px; /*上边框5像素宽、左右边框3像素宽度、下边框4像素宽度*/

3.3、border-color：边框颜色

①颜色值，例：red、green
②#十六进制色值，例：#ccc
③rgb(r,g,b)，例：rgb(30,0,0)
④rgb(r%,g%,b%)

css">border-color:#f00; /*四边均为红色*/
border-color:#f00 #00f ; /*上下红色、左右蓝色*/
border-color:#f00 #00f #0f0; /*上红色、左右蓝色、下绿色*/

4、padding：内边距属性

padding-top:上边距;
padding-right:右边距;
padding-bottom:下边距;
padding-left:左边距;
padding：四边内边距;

padding取值可为：auto自动（默认值）、不同单位的数值、相对于父元素（或浏览器）宽度的百分比%，实际工作中最常用的是像素值px。
注意：内边距padding不允许使用负值

css">padding:5px  /*四个方向内边距为5像素宽度*/
padding:5px 3px  /*上下内边距为5像素，左右内边距为3像素*/
padding:5px 3px 4px  /*上内边距为5像素，左右内边距为3像素，下内边距为4像素*/
padding:5%  /*段落内边距为父元素宽度的5%*/

5、margin：外边距属性

margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin-left:左外边距;
margin:四边外边距;

当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。
注意：和内边距不同，外边距margin允许使用负值

css">margin:5px  /*四边外边距为5像素宽度*/
margin:5px 3px  /*上下外边距为5像素，左右外边距为3像素*/
margin:5px 3px 4px  /*外边距：上为5像素，左右为3像素，下为4像素*/
margin:0 auto  /* 利用margin实现块元素水平居中*/
margin:5px auto  /* 利用margin实现块元素水平居中，并且上下拉开5像素边距*/

为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。

css">*{padding:0;         /*清除内边距*/margin:0;          /*清除外边距*/
}

6、盒子的宽width和高height

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

7、background-color:背景颜色

css">background-color:#F00;

8、background-image :背景图像

css">body{background-image:url(images/wdjl.jpg);     /*设置网页的背景图像*/
}

9、background-repeat：图像平铺

默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。
在这里插入图片描述

css">background-repeat:no-repeat;                 /*设置背景图像不平铺*/

10、background-position：图像位置

在这里插入图片描述

11、background-attachment：图像固定

在这里插入图片描述

12、背景属性的综合运用

background:背景色 url("图像") 平铺 定位 固定;

css">background: url(img/wdjl.jpg) no-repeat 50px 80px fixed;

13、元素

13.1、块元素

在页面中以区域块的形式出现。
每个块元素通常都会独自占据一整行或多整行。
可以对其设置宽度、高度、对齐等属性。
常见的块元素：< h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>。

13.2、行元素

不占有独立的区域。
仅仅靠自身的字体大小和图像尺寸来支撑结构。
一般不可以设置宽度、高度、对齐等属性。
常见的行元素：< strong>、< b>、< em>、< i>、< del>、< d>、< ins>、< u>、< a>、< span>。

css"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>块元素和行内元素</title>
<style type="text/css"> 
h2{                           /*定义h2的背景颜色、宽度、高度、文本水平对齐方式*/background:#FCC;width:350px;height:50px;text-align:center;
}
p{background:#090;}         /*定义p的背景颜色*/
strong{                       /*定义strong的背景颜色、宽度、高度、文本水平对齐方式*/background:#FCC;width:360px;height:50px;text-align:center;
}
em{background:#FF0;}       /*定义em的背景颜色*/
del{background:#CCC;}      /*定义del的背景颜色*/
</style>
</head>
<body>
<h2>h2标记定义的文本。</h2>
<p>p标记定义的文本。</p>
<strong>strong标记定义的文本。</strong>
<em>em标记定义的文本。</em>
<del>del标记定义的文本。</del>
</body>

效果图：
在这里插入图片描述

13.3、元素类型转换

在这里插入图片描述

14、颜色透明度

通过引入RGBA模式和opacity属性，对背景与图片设置不透明度

14.1、rgba模式

rgba(r,g,b,alpha);

css">p{background-color:rgba(255,0,0,0.5);}

14.2、opacity属性

opacity：opacityValue;

opacity属性用于定义标签的不透明度，参数opacityValue表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。

15、border-image：图片边框

border-image

16、box-shadow:阴影

css"> box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #333 inset;

17、渐变

17.1、线性渐变

在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。

background-image:linear-gradient（渐变角度，颜色值1，颜色值2...，颜色值n）;

渐变角度：渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或关键词。

颜色值：颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

17.2、径向渐变

径向渐变同样是网页中一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，按照椭圆或圆形形状进行扩张渐变。

background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);

渐变形状：渐变形状用来定义径向渐变的形状，其取值即可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。
圆心位置：圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数值来定义径向渐变的中心位置。
颜色值：“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

17.2、重复渐变

重复线性渐变

background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);

重复径向渐变

background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);

18、拼图效果

18.1、圆角

在网页设计中，经常会看到一些圆角的图形，如按钮、头像图片等，运用CSS3中的border-radius属性可以将矩形边框四角圆角化，实现圆角效果。
在这里插入图片描述

border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

需要注意的是，当应用值复制原则设置圆角边框时，如果“垂直半径参数”省略，则会默认等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等。