版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
2.2.4CSS盒子模型CSS的盒子模型border(边框)padding(填充)margin(外边距)CSS的盒子模型盒子模型（BoxModel）指定元素如何显示以及如何相互交互。页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。margin:一个元素所占空间的边缘到相邻元素之间的距离
border:元素的边框padding:是用来设置元素内容到边框的距离
CSS的盒子模型每个HTML元素都是一个装了东西的盒子默认情况下盒子的边框是无，背景色是透明的，所以在默认情况下看不到盒子
为所有HTML元素添加边框后引入：我的第一个盒子计算盒子的宽度与占位#banner{background-color:#efe;height:150px;width:300px;margin:80px;padding:40px;border:1pxsolid#666;
}提问：CSS属性中height:150px;width:300px;
，指的是谁的尺寸？我们所能看见盒子的宽和高又是多少？这个盒子实际占据的宽高尺寸又是多少？contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight盒子最终占据的页面宽度占据的宽度=左外边距+左边框+左填充+width
+右填充+右边框+右外边距盒子模型的属性值的缩写margin:6px04px8px;border:1pxsolidred;
padding:5px;
顺时针方向上右下左4.1.2边框border属性border属性由3个子属性构成：border-width（宽度）border-style（样式）和border-color（颜色）border-style:
solid|dashed|dotted|double
border属性的写法对4条边的所有样式统一设置border:1pxsolidred;对4条边的各个样式分别设置border-width:1px2px3px4px; border-color:whitebluered; border-style:soliddashed; 对每条边的每个样式分别设置border-right-color:red;border-top-width:4px;各种边框的效果border:4pxsolidred; /*同时设置4个边框*/ /*-----------------②----------------------*/border-bottom:6pxdoubleblack; /*-----------------③--------------------*/border:3pxdotted#00f;border-right:none; /*-----------------④--------------------*/border:5pxdashed#666;border-width:05px; 边框交汇效果两条交汇的边框之间是一个斜角，通过为交汇的边框设置不同的颜色，再利用这个斜角，即可制作出各种三角形
内容下边框8px透明上边框8px透明左边框8px红色border-width:8px
08px8px;border-style:solid;border-color:transparentred;
属性值的简写形式
问题：border:6px10px4px;左边框是多少？答案：如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。4.1.3圆角border-radius属性border-radius
：圆角盒子属性，准确来说应该叫box-radius用来将元素的盒子改变成圆角矩形、圆或椭圆等带弧线的形状border-radius属性border-radius：用于设置元素盒子四个角的圆角效果border-radius:5px10px20px40px;/*上左上右下右下左*/border-radius:5px10px20px; /*上右和下左都是10px*/border-radius:5px10px; border-radius:10px; /*四个角的半径都是10px*/border-radius属性示例div{width:100px;height:200px;border:50pxsolid#c00;display:inline-block;}.box1{border-radius:100px;}
.box2{border-radius:100px0;}.box3{border-radius:50%;}
.box4{border-radius:050%50%0;}.box5{height:100px;border-radius:100px;}<divclass="box1"></div>…<divclass="box5"></div>border-radius属性示例div{width:100px;height:100px;background:#C96;}.box1{border-radius:100px;}.box2{border-radius:100px0;}.box3{height:50px;border-radius:50%;}.box4{border-radius:50%;background:url(images/head01.jpg)no-repeat;background-size:cover;}.box5{height:50px;border-radius:50px50px00;}4.1.4图像边框border-imageborder-image的源图片会自动被两横两竖4条辅助线切割成9部分（俗称九宫格）。4条辅助线的位置由其slice参数决定。语法如下：border-image:sourceslicerepeat;border-image:url(images/img.jpg)74repeat;border-image示例.delta{height:60px;width:300px; border:74pxsolidorange; /*必须先设置边框和图像边框一样大*/border-image:url(images/borderimg.jpg)74repeat;}.deltap{margin:-40px;} /*使p元素向外伸展到父元素的边框区域*/<divclass="delta"><p>图像边框示例……</p></div>制作饼状图盒子模型的综合运用4.1.5padding和margin属性padding和margin属性都只能设置宽度值，例如：padding:
15px;
padding属性值一般为像素正值，当以“%”为单位时则是以父元素的width为基准的（很少用）。未设置paddingmargin外边距margin属性的值为像素或百分比。例如：margin:10px;margin:0auto; /*左右为自动*/ margin:10px5px3px-15px;margin-left:50%; /*只设置左外边距*/margin值可以为负值，负margin是实现盒子重叠的一种方式，很有用嵌套盒子之间的距离计算如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充(padding)＋内盒子的外边距（margin）#box1{ background-color:#ddd; margin:10px; padding:15px;}#box2{ color:red; width:100px; background-color:#aaa;
margin:10px; padding:10px0px10px;} …<divid=“box1”><divid=“box2”>这是里面的盒子</div>盒子模型的特性外边距margin可为负，填充padding不可为负边框border默认值为0，即不显示行内元素，如a，定义上下边界不影响行高各种元素盒子属性的默认值大部分html元素的盒子属性:margin,padding默认值都为0；body，p，ul，li，form等少数html元素的margin,padding浏览器默认值不为0，有时可先设置它们的这些属性为0。input元素的边框属性默认不为0。2.2标准流下的定位及应用盒子的三种布局方式在标准流(normalflow)下的布局在浮动(float)属性下的布局在定位(position)属性下的布局除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。标准流标准流下的定位：HTML元素在标准状况下的定位方式，特点如下:块级元素占满整个一行，在页面中竖向排列行内元素在同一行内横向排列元素不会移动到其它地方去，对于嵌套的元素，盒子也是包含的关系标准流下的盒子排列分析*{border:2pxdashed#F06;padding:10px;margin:2px;}……<body><div>网页的banner（块级元素）</div><ahref="#">行内元素1</a><ahref="#">行内2</a><ahref="#">行内3</a><div>这是无名块<p>这是盒子中的盒子</p></div>改变行内元素的高度当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，导致行内元素盒子的上下部分重叠，而左右部分不会受影响display属性为了解决这个问题，可将行内元素转换成块级元素或行内块元素显示通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示display:
block|inline|none|inline-blockdisplay属性display:
block;
以块级元素显示display:
inline;
以行内元素显示display:
inline-block;
以行内块元素显示，行内块元素将在一行内水平排列，但每个元素又具有块级元素的特点display:
none;
将元素隐藏，且不占据网页空间inline元素inline元素的特点是：和其他元素都在一行上高及顶和底的外边距和填充不可改变；宽度就是它的文字或图片的宽度，不可改变
<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子隐藏元素display:none;当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。比较visibility:hidden;
应用：制作下拉菜单、tab面板等有时就需要用display:none把菜单或面板隐藏起来4.2.2margin合并现象块级元素之间的竖直margin会合并 <body> <divstyle="margin-bottom:50px;">块元素1</div> <divstyle="margin-top:30px;">块元素2</div></body>块元素1块元素2块元素1块元素2margin-bottom:50pxmargin-top:30pxmargin-bottom:50px块级元素之间的上下margin行内元素的margin不会合并行内元素之间的水平margin不会合并span.left{ margin-right:30px; background-color:#a9d6ff;}span.right{ margin-left:40px; background-color:#eeb0b0;}span2span1margin-rightmargin-left空白边叠加当一个元素包含在另一个元素中时，若父元素的边框和填充为0，此时父元素和子元素的margin挨在一起，那么父元素的上下margin也会和子元素的上下margin发生叠加。经验：对于盒子嵌套，要调整嵌套盒子之间的距离，用外面盒子的padding来调整可避免4.2.3盒子模型的应用制作日历效果制作要点：3个盒子，外面的盒子设置宽度和填充设置背景颜色和字体颜色设置水平居中和垂直居中盒子模型的应用制作留言评论界面制作要点：左边的图片是子元素，对它设置负margin-left，使其向左移动到父元素外面右边的文本区域是父元素
制作竖直导航菜单制作要点：将每个a元素用display属性设置为块级元素对a元素设置背景色、宽度等。在hover伪类中改变a元素的背景和字体颜色，并添加左边框<divid="nav"><ahref="#">首页</a><ahref="#">中心简介</a>……<ahref="#">为您服务</a><ahref="#">技术服务</a></div>4.2.4chrome浏览器的CSS调试功能背景的运用background属性用法CSS的背景属性背景（background）是网页中常用的一种表现方法，无论是背景颜色还是背景图片，都能为网页带来丰富的视觉效果CSS背景属性是网页样式美化最主要的手段CSS的背景属性是backgroud或以backgroud开头背景属性background-*background-color设置背景颜色background-color:#98AB6F;
background-image设置背景图像background-image:url(a.jpg);
background-repeat设置背景图像是否及如何平铺repeat:背景图像在纵向和横向上平铺
no-repeat:背景图像不平铺
repeat-x:背景图像在横向上平铺
repeat-y:背景图像在纵向平铺background-attachm
ent背景图像是否随对象内容滚动scroll:背景图像是随对象内容滚动
fixed:背景图像固定
background-position设置背景图像位置横轴(x)纵轴(y)left|center|righttop|center|bottom50%50%20px40px例如：background-position:leftcenter;背景属性的默认值和缩写形式background-color:transparent 透明background-image:nonebackground-repeat:repeat 平铺background-attachment:scrollbackground-position:0%0%背景属性的缩写：
background:background-color|background-image|background-repeat|background-attachment|background-position背景图片背景颜色背景定位背景不平铺background-repeat属性background-repeat:
repeat（默认）、repeat-x、repeat-y、no-repeat
background-position属性background:url(hua.gif)no-repeat50%33%;background-attachment属性background-attachment：scroll（默认）、fixedfixed：背景在网页中的位置是固定的，不随容器的移动而移动。（案例：/）DW中的背景设置面板background-color:#0099ccbackground-image:url(images/bottom.gif)background-repeat:no-repeatbackground-position:rightbottombackground-attachment:fixedCSS3新增的背景属性background-size属性：改变背景图像的大小或宽高比
background-size:
length|percentage|cover|contain;
contain
cover
100%
50px50pxbackground-origin与background-clip属性background-origin：规定背景图片的定位区域border-box|padding-box|content-box
background-clip：规定背景图片的裁剪区域border-box|padding-box|content-box
background多背景图CSS3允许background属性设置多背景图，每个背景图之间用,号隔开。 background:
url(images/pic1.jpg)no-repeat, url(images/pic2.jpg)no-repeat30px30px, url(images/pic3.jpg)no-repeat60px60px, url(images/pic4.jpg)no-repeat180px0px;
5.opacity属性opacity属性用于设置元素的透明度。取值为[0-1]。0：完全透明，1：完全不透明示例：当鼠标悬停时，box1变成半透明
.box1:hover{opacity:0.5; filter:Alpha(opacity=50);}/*兼容IE8-*/opacity与rgba()的区别：opacity作用于元素，opacity设置的透明度会使元素的背景和内容，及其子元素全部有透明度效果，而rgba()是属性值，作用于属性，一般用于color、background-color和渐变属性中4.3.2背景的基本运用技术背景的运用技巧同时运用背景颜色和背景图片控制背景在盒子中的位置及是否平铺多个元素背景的叠加滑动门技术背景位置的控制－实现图片的翻转圆角的设计方法总结
同时运用背景颜色和背景图片#sidebar{background:#666url(images/side_bg.gif)no-repeatcenterbottom;}控制背景图在盒子中的位置及是否平铺背景图位于元素的右下角不平铺背景颜色改变背景图的位置，可见背景图只显示出了一部分background-position:-135px-165px;body{background:#e6fbffurl(self.jpg)no-repeatrightbottom;}用背景图片做列表项图标思路：利用背景图精确定位，并且不平铺ul{list-style-type:none;}li{ background:url(arr.gif)no-repeat0px3px;
padding-left:20px;
}向右向下防止文字和背景图标重叠多个元素背景的叠加背景图片的叠加是指：当两个元素是嵌套关系时，那么里面元素的背景的不透明部分将覆盖在外面元素盒子背景之上，利用这一点，再结合对背景图片位置的控制，可以得到滑动门技术。尽管CSS3的背景属性已经支持多背景图，但考虑到IE8还不支持，因此多个元素背景的叠加还是有实用价值的下面以4图像可变宽度圆角栏目框的制作来介绍多个元素背景叠加的技巧圆角的设计固定宽圆角可变宽圆角4图像可变宽度圆角栏目框<divid="round"><h3><p><span><divid="round"><h3>这是圆角矩形的标题</h3><p><span>……</span></p></div>最后再设置背景色由于几层背景的叠加，背景色只能放在最底层的盒子上，也就是对最外层的元素设置背景色，这样背景色就不会覆盖背景图片。与此相反，为了让内容能放在距边框有一定边距的区域，必须设置padding值，而且padding值只能设置在最里层的盒子上。将滑动门技术和背景图片翻转结合的例子a:hover{ background-position:100%-42px;}a:hoverb{ background-position:0-42px; color:red;}4.4CSS3样式美化功能盒子阴影box-shadowbox-shadow:h-shadowv-shadowblur[spread]color[inset];box-shadow:10px10px5px#888888; /*设置左下角阴影，*/box-shadow:0015px#888888; /*设置外发光，*/box-shadow:10px10px5px#888888inset; /*设置内凹阴影，*/翘边阴影和曲线阴影文字阴影text-shadow属性的取值含义和box-shadow完全一致text-shadow:0010pxred;text-shadow:01px1px#fff; text-shadow:-1px-1px0#fff,1px1px0#333,1px1px0#444; text-shadow:005px#f96;color:transparent;text-shadow:1px1px0#f96,-1px-1px0#f96;4.4.2渐变效果线性渐变
background-image:linear-gradient(direction,color-stop1,color-stop2,...);径向渐变
background-image:radial-gradient([position,][shapesize,]start-color,stop-color);利用径向渐变还可制作圆弧效果4.4.2渐变效果3.设置径向渐变的形状background:radial-gradient(ellipse,white25%,red); /*椭圆形渐变，默认值*/background:radial-gradient(circle200px,white25%,red); /*圆形渐变*/4渐变中的透明度设置background:radial-gradient(150px,red,rgba(255,0,0,0)); /*从红色到透明的渐变*/5.多重渐变4.4.3描边效果outline属性和border属性的显示效果很相似，但outline外轮廓不会占据网页空间outline:5pxsolidblue;
box-shadow:00013px#888;border:13pxsolidred;4.4.4遮罩效果要实现遮罩，可使用mask-image属性引用一张有透明部分的图片(如PNG图片)，该图片用于遮挡在HTML元素上，被图片透明部分遮住的部分将不被显示。
background:url(images/swy.jpg);-webkit-mask-image:url(images/apple.png); -webkit-mask-repeat:no-repeat; 使用渐变层作为遮罩mask-image属性的值也可以是渐变填充，如果用渐变填充遮挡在HTML元素之上，则被半透明部分遮罩的图片也会具有半透明效果。-webkit-mask:radial-gradient(100px,red,rgba(55,0,0,0)); /*红色到透明的径向渐变*/-webkit-mask:linear-gradient(black,rgba(55,0,0,0)); /*上黑下透明的线性渐变*/4.5变形与动画效果transform属性transform属性用于实现元素盒子的变形效果。取值如下：rotate旋转、skew扭曲、scale缩放、translate移动、matrix矩阵变形。1.缩放scaletransform:scale(2,1.5);transform-origin:top; /*设置缩放点为正上方*/课程展示框制作思路：用一个div元素表示课程展示框，在该div中插入一个img元素和一个类名为show的元素，用于放置文本（5-28.html）。transform属性2.旋转rotatetransform:rotate(30deg);3.移动translatetransform:translateX(50%);transform:translate(50%,30%);4.扭曲skewtransform:skew(45deg,15deg);transform属性同时应用多种变形效果transform:rotate(45deg)scale(0.8,1.2)skew(60deg,-30deg);制作自动伸缩的下划线
#nava:after{transform:scaleX(0); /*缩小到0*/ transform-origin:50%50%;}#nava:hover:after{ transform:scaleX(1); }/*放大到1*/制作图片墙4.5.23D变换效果1.三维旋转属性值rotateX(angle)：围绕X轴旋转，如人在单杠上旋转rotateY(angle)：围绕Y轴旋转，人跳钢管舞时的旋转。rotateZ(angle)：围绕Z轴旋转，抽奖大转盘的旋转。三维旋转属性示例.r2d:hover{transform:rotate(180deg);}.r3dX:hover{transform:rotateX(135deg);}.r3dY:hover{transform:rotateY(135deg);}.r3dZ:hover{transform:rotateZ(180deg);}2.透视属性perspective4.5.23D变换效果3.3D平移属性3D平移的属性值有：translateX(x)、translateY(y)、translateZ(z)当translateZ的值大于perspective值时，元素将不可见.box:hover{transform:translateZ(488px);}4.3D缩放属性scaleX(x)、scaleY(y)、scaleZ(z)制作立方体4.5.3animation动画效果animation属性animation属性制作动画主要依赖关键帧：@keyframes，每个关键帧表示动画过程中的一个关键状态@keyframes的语法如下：@keyframes动画名{
from或n%{CSS样式规则}…… to或n%{样式规则} }
动画应用举例闪烁的红星div{background:url(images/redstar.jpg)no-repeat;margin:100pxauto;width:505px;height:505px;
animation:star2slinear.5sinfinitealternate;}@keyframesstar{/*定义动画名*/from,to{opacity:0;transform:scale(
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- “中点”模型专题复习教学课件2025-2026九年级数学人教版
- 临床静脉导管维护操作专家共识总结2026
- 平台交易纠纷妥善处理指南
- 2026届河南省安阳市高三二诊模拟考试历史试卷含解析
- 2026届成都市高考历史四模试卷含解析
- 2026年生物降解材料在农业虚拟现实创新应用报告
- 2026年无人驾驶航空物流行业报告
- 影像组学联合代谢组学预测肿瘤治疗敏感性
- 2026年自动驾驶汽车芯片技术报告及未来五至十年交通革命报告
- 2026年教育支付创新模式报告
- GB/T 47193-2026矿山修复回填用钢渣应用技术规范
- GB/T 47253-2026铸造机械浇包、浇注机及相关设备安全技术规范
- 污水站岗位责任制度
- 极兔快递案例分析
- 江苏省建筑施工事故隐患辨识图集（临时用电工程）2026
- 实验室管理题库(含答案)
- 加油员安全作业培训考核题及答案
- (2025年)萧山区法院司法雇员考试真题附答案
- 2025年嘉兴事业单位真题
- 2026届新高考高中英语语法填空题66篇（含答案解析）
- 镍柱纯化蛋白课件
评论
0/150
提交评论