盒子模型概念
宽度=盒子模型设置的宽度
+左内边距+右内边距+左边框线
+右边框线+左外边距+右外边距
一、盒子模型内边距
1、padding-top 上面(顶部)内边距
padding-top:20px; 或 padding-top:10%;(值大小:元素宽度*10%)
2、padding-right 右边内边距
同上
3、padding-bottom 下面(底部)内边距
同上
4、padding-left左边内边距
同上
(1)、paddding 四个值
padding:上 右 下 左; padding:3px 6px 10px 20px;
(2)、padding 三个值
padding:上 左右 下;padding:3px 10px 5px;
(3)、padding 两个值
padding:上下 左右;padding:3px 10px;
(4)、padding 一个值
padding:上下左右;padding:3px;
二、盒子模型外边距
1、margin-top 上面(顶部)内边距
2、margin-right 右边内边距
3、margin-bottom 下面(底部)内边距
4、margin-left左边内边距
5、margin简写属性。作用是在一个声明中设置元素的所内边距属性。
(1)、margin 四个值
margin:上 右 下 左; margin:3px 6px 10px 20px;
(2)、margin 三个值
margin:上 左右 下;margin:3px 10px 5px;
(3)、margin 两个值
margin:上下 左右;margin:3px 10px;
(4)、margin 一个值
margin:上下左右;margin:3px;
三、边框线(border)
(一)、三要素
边框线大小 边框线风格 边框线颜色
(二)、边框样式值
1、none 无边框 border:none;
2、solid 实线
3、dashed 虚线
4、dotted 点状
5、double 双线
6、groove 3D 凹槽边框
7、ridge 3D 垄状边框
8、inset 3D inset 边框
9、outset 3D outset 边框
(三)、边框线颜色
1、十六进制颜色值 #CC00FF
2、英文单词中的颜色red blue
(四)、单独定义某个边框线样式
1、border-top 顶部(上)边框线 border-top:1px solid #CC00FF;
2、border-right 右边框线样式border-right:5px solid red;
3、border-bottom底边框线样式border-bottom:10px dotted #660033
4、border-left左边框线样式border-left:15px double blue;
JAVA技术交流群 532101200
相关推荐
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 ...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.1.1 将页面用div分块 11.1.2 设计各块的位置 11.1.3 用CSS定位 11.2 固定宽度且居中的版式 11.2.1 方法一 11.2.2 方法二 11.3 左中右版式...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 ...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 ...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 ...
6 一、利于搜索引擎蜘蛛爬行 6 二、易于修改 7 三、减少网页加载时间 7 四、代码精简 7 五、相对表格的嵌套问题 8 六、搜索排名的影响 8 第四节 div+css布局方式 8 第五节 div+css理论概述 9 一、理解CSS盒子模型 9 ...
第3章 深入理解盒子模型 3.1 盒子的内部结构 3.2 边框(border) 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 ...
…… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10章 表格也精彩 第11章 圆角设计 第12章 应用Spry制作高级网页组件 第13章 固定宽度布局剖析与制作 第14...
第11章 圆角设计 第12章 应用Spry制作高级网页组件 第13章 固定宽度布局剖析与制作 第14章 变宽度网页布局剖析与制作 第15章 “CSS禅意花园”作品研究 第16章 综合案例研究 第17章 从学习到创作 附录...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 ...
第一步:在xpage中插入<div dojoType=”dijit.form.Button” id=”dojoBtn”></div> 第二步:在xpage中插入<xp:scriptBlock></xp:scriptBlock> 第三步:编写客户端javascript <div dojoType="dijit.form....
钱使用背景图片和图案第2天:2020年11月23日盒子模型和元素定位边距,边距,边框重要提示:分配适当的父框大小盒子定位。 使用; div,班级和科重要:浮动:左| 显示:块使用“ clearfix”的优势排列方
} </style> </head> <body> <div id="wrap"> 春天</h1> 春天,又称为春季,是一年的第一个季节,半球为公历3、4、5月,而南半球却是在 9月开始,11月结束,如澳大利亚。气候学上以连续5天日平均气温稳定通过10 为...