欢迎来到天天文库
浏览记录
ID:42256898
大小:1.21 MB
页数:18页
时间:2019-09-11
《人机交互界面设计第六章网页布局基础》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、人机交互界面设计第六章网页布局基础目录01盒子模型02网页布局方式03简单的网页布局练习02-01标准流02-02浮动与清除浮动02-03相对定位02-04绝对定位02-05z-index01-01宽度和高度01-03内边距01-02边框border01-04外边距01盒子模型网页文档中的每个元素都被视为一个盒子。可以理解为,网页布局就是将大大小小的盒子通过嵌套来进行合理的摆放。在布局的过程中,最需要关注的是盒子尺寸计算、是否会在不同浏览器移位等要素。一个标准的W3C盒子模型由content(内容)、padding(填充,也称内边距)、margin(
2、外边距)和border(边框)这4个属性组成content就是盒子里装的东西,盒子一定会有宽度和高度;盒子外壳的厚度就是(border)边框;盒子里面的内容距盒子的边框会有一定的距离,这就是内边距(padding);而盒子之间的间距就是外边距(margin)。宽度widthwidth属性只为实际内容(即content)的宽度。Min-widthMax-widh01盒子模型----宽度和高度高度heightHeight属性指元素的内容在浏览器可视区域中的高度,可以指定数值(比如900px)或者相对于父元素的百分比(比如60%)。若不为元素指定高度,元素
3、的高度一般为内容自身的高度Min-heightMax-height边框宽度border-width网页中元素的边框(border)也包含同样的一些属性。具体为border-width(边框的厚度),border-style(边框的样式),border-color(边框的颜色)的常用css属性,01盒子模型----边框border边框的宽度分为4个方向,分别是top,right,bottom,left语法如:border-width:数值也可以单独为某一个方向设定宽度,如border-top-width:2px也可以单独为某一个方向设定宽度,如bord
4、er-top-width:2px边框颜色border-color01盒子模型----边框border边框颜色同宽度一样也是四个方向,语法为border-color:颜色值边框宽度属性一样,取值可以是1个到4个值border-color:red边框样式border-styleborder-style是指边框的显示方式是实线,虚线还是点状线、双线等形态仍然有4个方向的值,1-4个值的取值也与上面是一致的。用法如:border-style:dashed。注意:不同浏览器对相同边框样式的渲染方式可能不同。简写属性border01盒子模型----边框borde
5、rborder:1pxsolid#000;3个值的顺序可以调换;或者单独为某一个方向指定属性,如border-top:1pxdashed#00f圆角边框border-radius支持圆角边框(border-radius)也是CSS3的一大亮点border-radius:none
6、圆角半径。最大的圆角半径为元素高度的一半盒子阴影box-shadow盒子阴影也是css3的新属性,在前面我们讲过文本阴影,盒子阴影与文本阴影相似。语法为box-shadow:x轴偏移y轴偏移模糊量阴影颜色内阴影inset/外阴影outsetBox-shadow:5px5px7
7、px#000inset。01盒子模型----内边距padding内边距分为上右下左4个方向距边框的距离。语法为padding:数值;数值取值可以是像素,可以是cm,可以是百分比,不允许为负值。同样的取值可以为1个到4个,1个表示4个方向的内边距都相等;2个分别表示上下和左右;3个表示上,左右,下;4个值表示顺时针上,右,下,左。padding:5px;Padding:5px0;Padding:5px10px15px;Padding:5px2px10px4px;01盒子模型----外边距margin外边距margin与padding相似,同样分上下左右
8、4个方向语法为margin:数值。与padding不同的是margin可以设置为负值。取值可以为1个到4个,每种取值方式同padding一样margin:5px;margin:5px0;margin:5px10px15px;margin:5px2px-10px4px;小贴士01盒子模型一个元素的最终占位宽度和高度究竟是以什么计算的?元素最终在网页里所占的总宽度=自己本身的宽度(width)+元素的边框厚度(border-width)+元素的内边距(padding)+元素的外边距(margin)。父元素所指定的宽度一定不能小于它里面所有子元素占位累加起
9、来的宽度同理,元素最终在网页里所占的总高度=自己本身的宽度(height)+元素的边框厚度(border-w
此文档下载收益归作者所有