JAVA web中的盒子模型

JAVA web中的盒子模型

1.认识盒子模型：所谓盒子模型，就是把HTML页面中的元素，看作是一个个矩形的盒子，也就是一个个盛装内容的容器。每个矩形都由元素的内容、内边距、边框、外边距组成。
例：

盒子中包含的内容

2.

标记: division意为 区域、分割。是一个区块容器标记，可以将网页分割成独立的、不同的部分，以实现网页的规划和布局。

之间相当于一个盒子。 3.盒子的宽与高 盒子的总宽度=width+左右内边距之和+左右边框之和+左右外边距之和 盒子的总高度=height+上下内边距之和+上下边框之和+上下外边距之和 4.盒子模型的相关属性 4.1边框属性：

设置内容 样式属性 常用属性值
边框样式 border-style:上 右 下 左 None无(默认值)、solid单实线
dashed虚线 dotted点线 double双实线
边框宽度 border-width:上 右 下 左 像素值
边框颜色 border-color： 颜色值、十六进制、RGB
综合设置边框 border:四边宽度 四边样式 四边颜色
圆角边框 border-radius:水平半径/垂直半径 像素与百分比
图片边框 border-image:图片路径 裁切方式 重复方式
边框样式：border-style:使用border-style设置四边样式时，必须按照上右下左的顺时针顺序，省略时采用值复制的原则，即一个值代表四边，两个值为上下/左右 三个值为上/左右/下。
4.2边框宽度（border-width:）
border-width:22px;遵循值复制的原则。
4.3边框颜色（border-color:）用于设置边框的颜色;
border-color:上 右 下 左 遵循值复制的原则。
4.4综合设置边框：
border:宽度 样式 颜色；
单侧复合属性设置各边框。
border-top:3px dashed #F00;
border-right:10px double #900;
border-bottom:5px double #F60;
border-left:10px solid green;
4.5圆角边框
border-radius:可以将矩形的边框圆角化。
语法格式：border-radius:参数1/参数2;
参数1代表水平半径 参数2代表垂直半径
如果第二个参数省略，则会默认等于第一个参数。
参数1和参数2设置一个参数值时，表示四角的圆角半径
参数1和参数2设置两个参数时，第一个参数值代表左上圆角半径和右下圆角半径。第二个参数值代表右上和左下圆角半径。
参数1和参数2设置三个参数时，第一个代表左上圆角半径，第二个参数代表右上和左下圆角半径，第三个参数值代表右下圆角半径。
参数1和参数2设置四个参数时，第一个参数值代表左上圆角半径，第二个参数值代表右上圆角半径，第三个参数值代表右下圆角半径，第四个参数值代表左下圆角半径。
2.边距属性
CSS的边距属性包括内边距和外边距。
内边距：指元素内容与边框之间的距离。也成为内填充。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
外边距：指的是元素边框与相邻元素之间的距离。margin外边距可以使用负值，使相邻元素重叠。
3.box-shadow
盒子阴影属性：语法格式
Box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型
像素值1：元素水平阴影位置
像素值2：元素垂直阴影位置
像素值3：阴影模糊半径
像素值4：阴影的扩展半径
颜色值：阴影的颜色
阴影类型：内阴影、外阴影。
设置多重阴影：