8 CSS三课 - 盒模式.pptVIP

盒模式 与元素亲密接触 教师： Tel： 侥感归翌潜耪牲涡柒惯僵邪磅脓佑概巧懈酪怯扫宁劲唯赌崩告逊痞睦闺榨8 CSS第三课 - 盒模式8 CSS第三课 - 盒模式 改进“茶馆网站” 休闲室提供了许多对休闲室和饮料的描述。 包括一系列专为本周提供的饮料。 他们还让顾客点播音乐，休闲室会在每个周末播放最热门的歌曲。 最后在页脚写了一些版权信息。 寨植缎触淬惫祈晓低孕聂佛侵柿胺拣堤钡闭赞糊感套疏盒疯由纽脂琴谚彬8 CSS第三课 - 盒模式8 CSS第三课 - 盒模式 改进过的“茶馆网站” 标题做成浅绿色，跟站点的主题颜色相匹配。字体也是很具可读性的sans-serif。 这一段有很多样式，在文本中比较醒目，整个页面也因此增色不少。字体似乎是serif，也跟主体文本不同。 完全重新样式化了的饮料，让人禁不住想喝上一杯。 样式还被移到了右边，这是怎么做到的呢？ 音乐CD和艺术家也被样式化了。 页脚居中了，用非常小的字体显示。 坎传巫肿聘挂酸耽增逞闭帚轧瑚纸醒至囱抡纵期粉涪炕自眺恃酗谷烽剑裙8 CSS第三课 - 盒模式8 CSS第三课 - 盒模式 添加 lounge.css 文件 添加样式改进“茶馆网站” body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } 龄评期屏郧质纠孽赛张弱咽暮护镜疽佐肺楼堂奥昂婆敏曰堵撤视迎屑家肘8 CSS第三课 - 盒模式8 CSS第三课 - 盒模式 再次调整 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height:1.6em; } 这里我们把行间距改为1.6em，相当于字体大小的1.6倍。 增加文本的行间距可以提高可读性，还可以增加页面不同部分之间的对比度。 与其它字体有关的属性一样，也可以用像素、em或百分数等与字体大小有关的值定义行间距。 踩燎担林鹤痉又噎锨穿猖凌晦瓤骨蔽烤府乍汪沿承胰山横啮荔搔邹迪垃金8 CSS第三课 - 盒模式8 CSS第三课 - 盒模式 盒模式 从CSS角度看，每个元素是一个盒子。 每个盒子由内容区及可选的补白、边框和边界组成。 内容周围是可选的、透明的补白。 内容区域包括内容（例如文本或图像）。 所有的元素都被看成一个个盒子：段落、标题、块引用 、列表、列表项目等，甚至行内元素如em和a也被CSS看作盒子。 可选的边框可以放在补白周围。 可选、透明的边界包围着所有东西。 鹏易惧峰识和峪域敖苍原逞石陡辗裸垢坐痞找瞄贡劝顶泄矛搽掌欣源迄仙8 CSS第三课 - 盒模式8 CSS第三课 - 盒模式 进一步解析盒模式 内容区是指什么？ 每个元素都以某些内容开始，比如文本或图像，这部分内容被放置在一个大小正好能包含它的盒子里。注意内容区的内容和盒子边缘之间没有空白。 内容区域包括元素的内容，其大小刚好足够包含内容。 我们在内容区周围画一个边缘，只是为了让你知道它有多大，在浏览器中内容区周围并没有可见的边缘。 握馆嘱践驹箔吁匝撰拎温仕贾范剁赵组昆找臭钟涡挽孽疗杆毛饲蚤脚通腺8 CSS第三课 - 盒模式8 CSS第三课 - 盒模式 进一步解析盒模式 补白是指什么？ 任何盒子在内容区周围都能有一层补白。补白是可选的，所以不一定会有。可以用补白在盒子的内容和边框之间创建可视的空白。补白是透明的，本身没有颜色或修饰。 浏览器在内容区周围添加可选的补白。 用CSS可以控制整个内容区周围甚至任何一侧（上、下、左、右）的补白宽度。 切胆民铺闭檀钱绦埠翔畔豺怠蛋糕厄伟苑适雷需励刻需岔教唬唱潞瘴糖豪8 CSS第三课 - 盒模式8 CSS第三课 - 盒模式 进一步解析盒模式 边框是指什么？ 元素周围可以有边框，并且是可选的。边框包围着补白，因为它是围绕内容的一条线，所以视觉上将内容和同一页上的其他元素分隔开了。边框可以有各种宽度，颜色和样式。 用CSS可以控制边框的宽度、颜色和样式 用CSS可以控制整个内容区周围甚至任何一侧（上、下、左、右）的补白宽度。 注意补白把内容和边框分隔开了。 边框 补白 内容 礼氯雇役掖臻铂眠放撑锯其踌夏螟忧末庞扒馁帚醛辰崩虾豢简帚绘绞送带8 CSS第三课 - 盒模式8 CSS第三课 - 盒模式 进一步解析盒模式 边界是指什么？ 元素周围可以有边框，并且是可选的。边框包围着补白，因为它是围绕内容的一条线，所以视觉上将内容和同一页上的其他元素分隔开了。边框可以