欢迎来到天天文库
浏览记录
ID:52842893
大小:146.24 KB
页数:9页
时间:2020-03-23
《网页设计三剑客PSFLDW案例教程全套配套课件教学资源10.2 盒子模型.pptx》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、PhotoshopCC2015FlashCC2015DreamweaverCC2015中文版案例教程PhotoshopCC2015/FlashCC2015/DreamweaverCC2015ZhongwenbanAnliJiaochengDreamweave篇10.2盒子模型什么是盒子模型border(边框)10.2.110.2.210.2.3margin(边界)10.2盒子模型10.2.410.2.5padding(填充)content(内容)10.2.1什么是盒子模型什么是CSS盒子模式呢
2、?为什么叫它是盒子?首先说说在网页设计中常听到的属性名:内容(Content)、填充(Padding)、边框(Border)、边界(Margin)。CSS盒子模式具备这些属性,如图10-2所示。10.2.2margin(边界)margin(边界)用来设置页面中元素和元素之间的距离,即定义元素周围的空间范围,是页面排版中一个比较重要的概念。margin属性包含4个子属性,分别是margin-top、margin-right、margin-bottom和margin-left,分别用于控制元素4周的边距
3、。10.2.3border(边框)border(边框)是内边距和外边距的分界线,可以分离不同的HTML元素,border属性设置的是元素的最外围。在网页设计中,如果计算元素的宽和高,则需要把border计算在内。Border属性有3个子属性,分别是边框样式(border-style)、边框宽度(border-width)和边框颜色(bordercolor)。10.2.4padding(填充)在CSS中,可以通过设置padding属性定义内容与边框之间的距离,即内边距。padding属性值可以是一个具
4、体的长度,也可以是一个相对于上级元素的百分比,但不可以使用负值。padding属性可以为盒子定义上、右、下、左各边填充的值,分别是padding-top(上填充)、Padding-right(右填充)、Padding-bottom(下填充)和Padding-left(左填充)。10.2.5content(内容)从盒模型中可以看出中间部分是content(内容),它主要用来显示内容,这部分也是整个盒模型的主要部分,其他如margin、border、Padding所做的操作都是对content部分所做的
5、修饰。对于内容部分的操作,也就是对文、图像等页面元素的操作。
此文档下载收益归作者所有