JAVA web中的盒子模型

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

认识盒子模型

盒子中包含的内容

标记: 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：阴影的扩展半径
颜色值：阴影的颜色
阴影类型：内阴影、外阴影。
设置多重阴影：

设置圆角边框

JAVA web中的盒子模型相关推荐

CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
java web 中有效解决中文乱码问题-pageEncoding与charset区别, response和request的setCharacterEncoding 区别
java web 中有效解决中文乱码问题-pageEncoding与charset区别, response和request的setCharacterEncoding 区别参考文章: (1)java ...
Java开发中Netty线程模型原理解析！
Java开发中Netty线程模型原理解析,Netty是Java领域有名的开源网络库具有高性能和高扩展性的特点,很多流行的框架都是基于它来构建.Netty 线程模型不是一成不变的,取决于用户的启动参数配 ...
Java Web中的中文编码问题分析
一.为什么需要编码在计算机中存储信息的最小单位是1个字节,即8bit,所以能标识的最大字符范围是0~255,而人类自然语言中例如汉语.日语要表示的符号太多,无法单纯用一个字节来完全表示,为了解决这个 ...
java 控制jsp_JSP学习之Java Web中的安全控制实例详解
普通用户界面修改登录的Servlet,修改后的代码如下: LoginProcess.java代码: package servlet; import javabean.User; import jav ...
第三章深入分析Java Web中的中文编码问题
3.1 几种常见的编码格式 3.1.1 为什么要编码一个字节 byte只能表示0~255个符号,要表示更多的字符,需要编码. 3.1.2 如何翻译 ASCII码:有128个,用一个字节的低7位表示. ...
用servlet路径访问一个html,java web中servlet、jsp、html 互相访问的路径问题
在html">java web种经常出现 404找不到网页的错误,究其原因,一般是访问的路径不对. html">java web中的路径使用按我的分法可以分两种情况,当 ...
java web 中读取windows图标并显示
java web中读取windows对应文件名的系统图标 ....显示 1.获取系统图标工具类 package utils; import java.awt.Graphics; import j ...
Java web中不同浏览器间导出Excel文件名称乱码问题解决方案
Java web中不同浏览器间导出Excel文件名称乱码问题解决方案参考文章: (1)Java web中不同浏览器间导出Excel文件名称乱码问题解决方案 (2)https://www.cnblog ...

JAVA web中的盒子模型

JAVA web中的盒子模型

JAVA web中的盒子模型相关推荐

最新文章

热门文章