时间：2016年5月17日
在昨天学习了边框和尺寸的情况下，今天我们主要学习的就是盒模型。盒模型是HTML中最重要，这也是要实现基本布局的一个关键知识点。基本的盒模型包括margin，bordor，padding，contant，由外到里。其中“margin”是边框激励父标签的距离，或者距离同级标签边框的距离。padding数以标签的一部分，是标签内容到边框的距离。bordor设置边框样式如颜色，实线虚线或者大小。contant是内容。margin是外边距，而padding是内边距。
课堂笔记摘录：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-image: url("nihao/22.jpg");
background-repeat: repeat;
background-attachment:fixed;
margin: 100px;
}
/这里设置的主要是body的样式，无论是背景图片和背景颜色还是外边距都有体现。/
#box{
width: 300px;
padding:10px;
border: 2px dotted gray;
background-color: pink;
}
div.box{
width: 200px;
height: 100px;
padding-left: 20px;
margin: 40px;
border: 1px solid black
}
/*div{
width: 400px;
height: 300px;
border: 1px solid black;
background-image: repeating-radial-gradient(50px at center,red 0px,green 20px,orange 50px);
}
*/
d1{
background-image: linear-gradient(to bottom,red,#ccc);
}
bar{
height: 76px;
width: 200px;
background-image: url(bg.jpg);
background-repeat: repeat-x;
}
h2{
background-image: radial-gradient(200px at left top,red,blue);
}
right{
display: inline-block;
}
a{
width: 100px;
height: 100px;
border: 1px gray dotted;
background-color: blue;
padding: 10px;
}
b{
width: 122px;
border: 1px white dotted;
background-color: yellow;
padding: 10px;
}
c{
width: 144px;
border: 1px black dotted;
background-color: pink;
padding: 10px;
}
top{
display: inline-block;
width: 100px;
height: 100px;
background-color: black;
/*margin-bottom: 150px;*/margin:auto;
}
bottom{
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
<div id="box">
觉得神女控土壤管理山东那边lift还能巴洛克风格很不vfbhljfnbx可不能打开，发布 逢高减磅你烦不烦客服根本就，电饭煲 咖啡馆不见了地方回来的根本就好地解放北路附近改变你的的不是跟你玩日本李嘉诚不了人挺好ijn，吃饭吧ilghfkgh来发表讲话了日就会明白你劳动法保护考虑别人可了不得
</div>
<div class="box">
您好，你你拨打的电话已关机，请你稍后再拨。
</div>
<div id="d1"></div>
<div id="bar"></div>
<div id="h2"></div>
<div id="right">
<div id="c"><div id="b"><div id="a"></div></div></div>
</div>
</body>
</html>
上述程序中体现的有在做和模型的时候设置的一些参数和能够达到的效果。
盒模型的结构样式图如下：
he.png
hemo.png
盒模型在css中的样式：
div.box {
width:200px; height:100px; padding:20px; margin:40px; border:1px solid black;
}
<div class="box">
This is content.
This is content.
This is content.
</div>
什么是外边距？
围绕在元素边框周围的空⽩白区域是外边距
– 会在元素外创建额外的空⽩白
– 外边距是透明的
外边距的作用效果：
wai.png
外边距 margin
• 外边距：与下⼀一个元素之间的空间量 – margin：value;
• 单边设置
– margin-top/right/bottom/left：value;
• 外边距的属性值可能为px(像素)，百分⽐比(%)或⾃自动 (auto)，也可以为负值
div {
width:150px; height:150px; border:2px solid #0f0; margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px; }
显示效果：
tu.png
外边距 margin（续1）
• 默认情况下，以下 HTML 块级元素都存在外边距
– body –
h1,h2,h3,h4,h5,h6
– p…
• 声明 margin 属性，可以覆盖默认样式 body,p,div,h1,h2,h3,h4,h5,h6,pre
{
margin:0;
}
外边距 margin（续2）
• margin 可取值为 auto，由浏览器计算外边距
– 实现⽔水平⽅方向居中显⽰示的效果
外边距的简洁写法
• 外边距的简捷写法有以下⼏几种：
– margin : value(四个⽅方向相同) ;
– margin : value(上下) value(左右) ;
– margin : value(上) value(左右) value(下) ;
– margin: value(上) value(右) value(下) value(左) ;
div {
width:150px; height:150px; border:2px solid #0f0; margin:10px 20px 30px 40px;
}
外边距合并
• 当两个垂直外边距相遇时，它们将形成⼀一个外边距，称为 外边距合并
• 合并后的外边距的⾼高度等于两个发⽣生合并的外边距的⾼高度 中的较⼤大者
注意：margin纵向叠加，横向相加。
什么是内边距
• 内边距：内容区域和边框之间的空间
– 会扩⼤大元素边框所占⽤用的区域
div
{
border:2px solid red; width:200px; height:50px;
}
d1
{
padding:20px;
}
图解：
jie.png
内边距 padding
• 内边距：内容与框线之间的距离
– padding：value;
• 内边距属性值可以为像素、百分⽐比，但不能为负数
• 单边设置
– padding-top/right/bottom/left：value;
内边距的简洁写法
• 内边距的简捷写法有以下⼏几种：
– padding : value(四个⽅方向相同);
– padding : value(上下) value(左右);
– padding : value(上) value(左右) value(下);
– padding : value(上) value(右) value(下) value(左)
注意：兄弟关系用margin，父子关系用padding，如果父子关系使用padding必须将子用display转化为块。
inling-block.
1.png
背景绘制区域 background-clip
• background-clip 属性规定背景的绘制区域
• 可取值为
– border-box：背景被裁剪到边框盒，为默认值
– padding-box：背景被裁剪到内边距框
– content-box：背景被裁剪到内容框
背景的定位区域 background-origin
• background-origin 属性规定背景图⽚片的定位区域
• 可取值为
– border-box：背景图像相对于边框来定位
– padding-box：背景图像相对于内边距框来定位
– content-box：背景图像相对于内容框来定位
背景属性 background
• background 属性在一个声明中设置所有的背景属性
• 语法结构是：
– background : color url(图像URL) repeat attachment position ;
• 如果不设置其中的某个值，将使⽤用默认值
什么是渐变
• 渐变指，两种或者多种颜⾊色之间的平滑过渡
• 可以指定多个中间颜⾊色值（⾊色标） – 每个⾊色标包含一种颜⾊色和一个位置 – 从每个⾊色标的颜⾊色淡出到下一个，以创建平滑的渐变
• 渐变可以⽤用在任何使⽤用背景图⽚片的地⽅方
– 线性渐变
– 径向渐变
– 重复渐变
渐变语法
• 使⽤用 background－image 属性进⾏行设置
• 可以取值 – linear-gradient ：线性渐变
– radial-gradient ：径向渐变
– repeating-linear-gradient ：重复线性渐变
– repeating-radial-gradient ：重复径向渐变
线性渐变
• linear-gradient( angle, color-point1, color-point2,…)
– angle：为第⼀一个参数，指定渐变的⽅方向，可以是⾓角度值， 也可以是关键词，如 to top（对应 0deg），to right（对应 90deg），to bottom（对应 180deg），to left（对应 270deg）
– color－point：表⽰示颜⾊色的起始点、中间点或者结束点，取 值为颜⾊色和位置的组合，如 red 0%、green 50％
径向渐变
• radial-gradient( [size at position], color-point1, colorpoint2,…)
– position：为第⼀一个参数，指定渐变的圆⼼心位置，默认值为 center；可以取值为 数值、百分⽐比，或者关键字；此参数 可以省略
– color－point：表⽰示颜⾊色的起始点、中间点或者结束点，取 值为颜⾊色和位置的组合，如 red 0%、green 50％
重复渐变
• 重复线性渐变
– repeating-linear-gradient( angle, color-point1, color-point2, …)
重复渐变（续1）
• 重复径向渐变
– repeating-radial-gradient( [size at position], color-point1, color-point2,…)
浏览器兼容性
•目前，各浏览器的新版本均⽀支持渐变属性
• 对于不⽀支持的版本
– Firefox 需要前缀
-moz– Chrome 和 Safari 需要前缀-webkit
– Opera 需要前缀 -o#
display参数：none（隐藏表情标签，并且不占款高，inline行标签，block转化为快标签）inlinr-block转化为内联块
网友评论