IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > HTML5/前端互联网工程师 > css3渐变背景及框模型的介绍(第五天)

css3渐变背景及框模型的介绍(第五天)

时间:2017-01-23 08:24来源:原创 作者:恪己 点击:
一、框模型(重难点) 1、框模型 Box Model(框模型,盒模型,盒子模型) 定义了元素框处理元素内容(尺寸),内边距,边框和外边距的方式。 width 和 height 指内容区域的宽度和高度 增加了内
一、框模型(重难点)
1、框模型
Box Model(框模型,盒模型,盒子模型)
定义了元素框处理元素内容(尺寸),内边距,边框和外边距的方式。
 
width 和 height 指内容区域的宽度和高度
增加了内边距,外边距,边框不会影响内容区域的尺寸,但是会影响元素框的总尺寸
 
元素实际宽度=左右外边距+左右边框+左右内边距+width;
元素实际高度=上下外边距+上下边框+上下内边距+height;
 
(1)、外边距
1)、什么是外边距
围绕在元素边框周围的空白区域
外边距会在元素外创建空白
是透明的
与下一个元素之间的空间量
2)、语法
属性:
margin : 四个方向的外边距
margin-left : 左外边距
margin-right : 右外边距
margin-top : 上外边距
margin-bottom : 下外边距
取值:
单位:
l 具体数值(px)
l 百分比%
l 值为 auto
由浏览器自动计算 左右外边距,上下无效允许让块级元素 , 呈现出水平居中的表现效果
要求:块级元素必须设置宽度。
l 负值
设置 左外边距和上外边距为负数时,元素会向着相反的方向移动
简洁写法:
margin:value;上下左右四个方向外边距
margin:v1 v2;v1:上下外边距,v2:左右外边距。
margin:10px 20px;
上下各10像素外边距,左右各20px外边距
margin:v1 v2 v3;v1:上外边距 v2:左右外边距 v3:下外边距
margin:5px 10px 3px;
上外边距:5px
左右外边距:10px
下外边距:3px
 
margin:10px auto 2px;

margin:v1 v2 v3 v4;
v1 : 上
v2 : 右
v3 : 下
v4 : 左
3)、具备默认外边距的元素
取消默认外边距
body,p,h1,h2,h3,h4,h5,h6,pre,ol,ul,dl,dd{
margin:0;
}
4)、外边距引发的特殊效果
l 外边距合并
当两个垂直外边距相遇时,他们将形成一个外边距,成为 "外边距合并"
 
合并后的外边距是两个外边距中大者
l 上下外边距溢出
子债父还
在满足一定的条件下,当设置子元素的上下外边距的时候,可能会作用到父元素上
条件:
l 父元素 没有边框
l 子元素必须是父元素中的第一个或最后一个元素时
 
解决:
l 父元素增加上下边框
弊端:会影响父元素的尺寸
l 通过 父元素的 内边距,取代子元素的外边距
弊端:会影响父元素的尺寸
3、~~~~~~~~~~~~~~
5)、外边距对行内(inline)和行内块(inline-block)的处理
1、对于行内元素,上下margin无效
2、对于行内块元素,上下margin会影响到同行的所有元素
(2)、内边距
1)、什么是内边距
内容区域与边框之间的空间
内边距会扩大元素边框所占据的区域
2)、语法
属性:
padding
padding-left:
padding-right:
padding-top:
padding-bottom:
取值:
单位:
1、px
2、%
简单写法:
padding:value;上下左右
padding:v1 v2;上下  左右
padding:v1 v2 v3;上  左右  下
padding:v1 v2 v3 v4;上右下左
3)、特殊注意
为元素设定 内边距 ,只能影响自己,不会影响到其他元素
(3)、特殊
对于 button 来说
<input >
type="submit/reset/button"
<button>
设定宽度和高度时,包含 边框 以及 内边距
 
其他元素,设定宽度和高度时,只是设置 内容区域的宽和高,不包含 边框 以及 内边距
 
属性:box-sizing
作用:指定 盒子 尺寸计算 模式
取值:
l content-box
默认值,为元素所设定的width和height只是内容区域的 width和height,不包含元素的 边框和内边距
l border-box
为元素所指定的width和height会包含元素的 内容宽高以及内边距和边框的距离。
二、背景属性
1 、背景属性的作用
控制元素的背景颜色和背景图像等信息
2、背景属性
1)、背景颜色
属性:background-color
取值:
合法颜色值
取值为 transparent
注意:
背景颜色会从边框的位置处开始绘制
2)、背景图片
属性:background-image
取值:url(图片的URL)
 
注意:如果 背景图像和背景颜色同时存在的话,那么背景图会压在背景颜色的上面

     

------分隔线----------------------------
栏目列表
推荐内容