第七章 方框与边框Word文件下载.docx
《第七章 方框与边框Word文件下载.docx》由会员分享,可在线阅读,更多相关《第七章 方框与边框Word文件下载.docx(10页珍藏版)》请在冰豆网上搜索。
●border-style(样式).
●其中border-style属性可以将边框设置为实线(solid)、虚线(dashed)、点划线(dotted)、双线(double)等效果
使用CSS时,可以分别对4条边框设置不同的属性值。
●方法是按照规定的顺序,给出2个、3个或者4个属性值,它们的含义将有所区别,具体含义如下:
如果给出2个属性值,那么前者表示上下边框的属性,后者表示左右边框的属性。
如果给出3个属性值,那么前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性。
如果给出4个属性值,那么依次表示上、右、下、左边框的属性,即顺时针排序。
●要把border-width、border-border-color和border-style这3个属性合在一起,还可以用border属性来简写。
●例如:
●border:
2pxgreendashed
●这行样式表示将4条边框都设置为2像素的绿色虚线,这样就比分为3条样式来写更方便。
边框实例
<
html>
<
head>
styletype="
text/css"
>
#outerBox{
width:
200px;
height:
100px;
border:
2pxblacksolid;
border-left:
4pxgreendashed;
border-color:
redgrayorangeblue;
/*上右下左*/
border-right-color:
purple;
}
<
/style>
/head>
body>
divid="
outerBox"
/div>
/body>
特殊样式边框
●在CSS中,可以对元素的其中三条边框应用同种样式,但是单独对某一条边框设置特殊的样式,以制作特殊效果,例如:
2pxgreendashed;
●border-left:
1pxredsolid
盒子模型的应用
●1.美化表单
●网页中的表单控件在默认情况下背景都是灰色的,文本框边框是粗线条带立体感的,不够美观。
下列代码通过CSS改变表单的边框样式、颜色和背景颜色让文本框,按钮等变得漂亮些。
填充padding属性
●填充padding属性,也称为盒子的内边距。
就是盒子边框到内容之间的距离,和表格的填充属性(cellpadding)比较相似。
如果填充属性为0,则盒子的边框会紧挨着内容,这样通常不美观。
●当对盒子设置了背景颜色或背景图像后,那么背景会覆盖padding和内容组成的范围,并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的
●和前面介绍的边框类似,padding属性可以设置1、2、3或4个属性值,分别如下:
●设置1个属性值时,表示上下左右4个padding均为该值。
●设置2个属性值时,前者为上下padding的值,后者为左右padding的值。
●设置3个属性值时,第1个为上padding的值,第2个为左右padding的值,第3个为下padding的值。
●设置4个属性值时,按照顺时针方向,依次为上、右、下、左padding的值。
●如果需要专门设置某一个方向的padding,可以使用
●padding-left、
●padding-right、
●padding-top或者
●padding-bottom来设置。
设置外边距
●外边距(margin)指的是元素与元素之间的距离。
●小案例:
●观察普通的网页,可以发现边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器窗口的边框。
●这是因为body本身也是一个盒子,在默认情况下,body会有一个若干像素的margin,具体数值因各个浏览器而不尽相同。
●因此在body中的其他盒子就不会紧贴着浏览器窗口的边框了。
●为了验证这一点,可以给body这个盒子也加一个边框,代码如下。
body{
1pxblacksolid;
background:
#cc0;
三类margin
●1.行内元素之间的水平margin
●2.块级元素之间的竖直margin
1.行内元素之间的水平margin
●如图所示为两个块并排的情况。
2.块级元素之间的竖直margin
●如果不是行内元素,而是竖直排列的块级元素,margin的取值情况就会有所不同。
●两个块级元素之间的距离不是margin-bottom与margin-top的总和,而是两者中的较大者,如图所示。
●这个现象称为margin的¡
°
塌陷¡
±
(或称为¡
合并¡
)现象,意思是说较小的margin塌陷(合并)到了较大的margin中。
3.嵌套盒子之间的margin
●当一个<
div>
块包含在另一个<
块中时,便形成了典型的父子关系。
●这时,如果两个盒子都有边框,我们通常考虑两个盒子边框之间的距离
●此时,两个盒子边框之间的距离等于:
⏹外面盒子的填充值+里面盒子的margin值
⏹其中子块的margin将以父块的内容为参考,
⏹如下图所示:
子元素的实际宽度超过父height的不同处理方式
●当子元素的实际高度超出父元素的height的时候,IE与Firefox处理方式是不同的。
●IE:
⏹自动扩大父元素的高度,以容纳子元素
●Firefox:
⏹不扩充,因此,会子元素会溢出到父元素之外
●示例:
●图例:
margin的特殊用法:
取负值
●margin可取负值
●上面提及margin的时候,它的值都是正数。
其实margin的值也可以设置为负数。
●当margin取负值的时候,可以产生意向不到的排版效果,而且有关的巧妙运用方法也非常多,在后续章节中都会陆续介绍。
●这里先分析margin设为负数时产生的排版效果。
margin取负值的排版效果
●当margin设为负数时,会使被设为负数的元素向相反的方向移动,甚至覆盖在另外的元素上。
●示例
●效果图如下所示
盒子模型的特性
●边界值margin可为负,填充padding不可为负
●边框border默认值为0,即不显示
●行内元素,如a,定义上下边界不影响行高
对盒子模型的思考
●边框是实的,我们可以看到实实在在的边框,而填充和边界都是虚的,我们只能看到他们对元素的影响
●盒子模型中只能设置两类颜色,即边框颜色和背景颜色
●盒子模型可设置三类距离,即边界距离margin,填充距离padding和边框值border
属性值的简写形式
如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性;
如果给出3个属性值,前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性;
如果给出4个属性值,依次表示上、右、下、左边框的属性,即顺时针排序。
各种元素盒子属性的默认值
●大部分html元素的盒子属性(margin,padding)默认值都为0;
●有少数html元素的(margin,padding)浏览器默认值不为0,例如:
body,p,ul,li,form标记等,因此我们有时有必要先设置它们的这些属性为0。
●Input元素的边框属性默认不为0,我们可以设置为0达到美化表单中输入框和按钮的目的。
盒子的定位
盒子的三种定位形式
●在标准流下的定位
●在浮动属性下的定位
●在定位属性下的定位
●除非设置浮动属性或定位属性,否则所有盒子都是在标准流中定位。
顾名思义,标准流中元素盒子的位置由元素在HTML中的位置决定。
标准流
●HTML元素在标准状况下的定位方式
●行内元素在同一行内横向排列
●块级元素占满整个一行,在页面中竖向排列
●元素不会移动到其它地方去,对于嵌套的元素盒子也是嵌套的关系
标准流下的盒子排列分析
*{
border:
2pxdashed#FF0066;
padding:
10px;
margin:
2px;
}
网页的banner(块级元素)<
ahref="
#"
行内元素1<
/a>
行内2<
行内3<
这是无名块<
p>
这是盒子中的盒子<
/p>
行内元素的盒子
●行内元素的盒子永远只能在浏览器中得到一行高度的空间(行高由line-height属性决定,如果没设置该属性,则是内容的默认高度),如果给它设置上下border,margin,padding等值,导致其盒子的高度超过行高,那么它的盒子上下部分将和其他元素的盒子重叠。
●因此,不推荐对行内元素直接设置盒子属性,一般先设置行内元素以块级元素显示,再设置它的盒子属性。
改变行内元素的高度
●如图所示,当增加行内元素的边界和填充时,行内元素a占据浏览器的高度并没有增加,下面这个div块仍然在原来的位置,导致行内元素盒子的上下部分重叠,而左右部分不会受影响
display属性
●通过display属性可控制元素是以行内元素显示还是以块级元素显示,或不显示
●display:
block|inline|none|list-item
block元素
●block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非用width设定一个宽度
<
h1>
form>
ul>
和<
li>
是块元素的例子。
inline元素
inline元素的特点是:
●和其他元素都在一行上
●高,行高及顶和底边距不可改变;
●宽度就是它的文字或图片的宽度,不可改变。
span>
a>
label>
input>
img>
strong>
和<
em>
是inline元素的例子
列表项元素display:
list-item
●在html中只有li元素默认是此类型,将元素设置为列表项元素后将按列表元素显示,再通过设置列表选项可使元素的左边出现小黑点。
隐藏元素display:
none;
●当某个元素被设置成了隐藏元素之后,浏览器会完全忽略掉这个元素,该元素将不会被显示,也不会占据文档中的位置。
像title元素默认就是此类型。
●比较visibility:
hidden;
●制作下拉菜单、tab面板等有时就需要用display:
none把菜单或面板隐藏起来
需要使用display属性切换的情况
☐让一个inline元素从新行开始;
☐让块元素和其他元素保持在一行上;
☐控制inline元素的宽度;
☐控制inline元素的高度(对导航条特别有用);
☐无须设定宽度即可为一个块元素设定与文字同宽的背景色
标准流下定位的应用-制作竖直导航菜单
#nava{
font-size:
14px;
color:
#333333;
text-decoration:
background-color:
#CCCCCC;
display:
block;
width:
140px;
padding:
6px10px4px;
border:
1pxsolid#000000;
margin:
#nava:
hover{
#FFFFFF;
#666666;
盒子的margin叠加问题
盒子的margin在标准流中的计算
实验1:
行内元素之间的水平margin
span.left{
margin-right:
30px;
#a9d6ff;
span.right{
margin-left:
40px;
#eeb0b0;
行内元素之间的水平margin
结论:
行内元素之间的水平margin不会叠加
块级元素之间的上下margin