![]()
知识点巩固
盒模型常用属性
padding内边距border内边框线margin外边距background背景box-sizing3C盒子和IE盒子转换
![]()
列间隙的两种方案
固定值表达方式
需要利用浮动
float来协助表达利用一个固定的数值来完成列间隙的设定，并且左右块的宽度+中间间隙不得超过100%
缺点是无法根据font-size变化而变化，响应式布局美观度不够
案例
<style> .main { width:49% ; /* 设置margin-right固定值1%，以达到中间间隙强性空出1% */ margin-right: 1%; } .sidebar { width:49% ; /* 设置margin-left固定值1%，以达到中间间隙强性空出1% */ margin-left: 1%; }<style>设置响应式表达方式
需要利用浮动
float来协助表达让总宽度，用函数
calc来减掉所需要间隙的em来实现，并满足响应式布局的美观
案例
<style> .main { width:calc(70% - 0.5em); <!-- 设置margin-right为0.5em，用函数calc减掉间隙所需值达到响应式布局效果 --> margin-right: 0.5em; } .sidebar { width:calc(30% - 0.5em); <!-- 设置margin-left为0.5em，用函数calc减掉间隙所需值达到响应式布局效果 --> margin-left: 0.5em; }<style>图样
![]()
等高列的方式：表格
目的把两个列的高度设置为一样
把要等高的位置转为表格
案例
<style> .conteainer { /* 用表格实现等高列，需要将实现等高列的容器转为表格table类型 */ display: table; /* 表格的宽度需手动设置为100%，然后再设置单无格间隙来达到列间隙的表达方式 */ width: 100%; border-spacing: 2em 0; } .main, .sidebar { /* 转为单元格后就变为表格一致的高度 */ display: table-cell; float: none; } .taobiao { /* 表格的宽度，必须要套一个壳才往左右回拉，把单元格的列间隙给拉回去，才能把原有宽度铺满 */ margin-left: -2em; margin-right: -2em; } </style> </head> <body> <header> <h1>百花齐放竞“双晒” 文旅会上展芳容</h1> </header> <div class="taobiao"> <div class="conteainer"> <main class="main">![]()
全文案例
<!DOCTYPE html><html lang=""> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>等高列的展示</title> <style> :root { box-sizing: border-box; } /* 通配符选择器，匹配页面所有元素，级别低tag */ * { /*用inherit强制继承*/ box-sizing: inherit; /* 样式重置 */ margin: 0; padding: 0; } body { background-color: #eee; } header { color: white; background-color: teal; /* border-radius: 0.5em; */ padding: 0.5em 2em; margin-bottom: 0.5em; } /* 兼容IE浏览器 ，可以不写*/ main { display: block; } .main, .sidebar { background-color: white; border-radius: 0.5em; /* 浮动 */ float: left; /* margin: 0.5em; */ padding: 0.5em 1em; } p { /* 左缩进2个字符 */ text-indent: 2em; } .main { width: calc(70% - 0.5em); /* height: 20em; */ margin-right: 0.5em; /* overflow: 是当前内容超出盒子大小后，采取什么行为，-y（高）和-x（宽）都可以设置 */ /* auto是表示上下左右滚动条根据内容的多少自动设置 */ overflow: auto; } .sidebar { width: calc(30% - 0.5em); /* height: 20em; */ margin-left: 0.5em; } a:link { color: black; text-decoration: none; } .conteainer { /* 用表格实现等高列，需要将实现等高列的容器转为表格table类型 */ display: table; /* 表格的宽度需手动设置为100%，然后再设置单无格间隙来达到列间隙的表达方式 */ width: 100%; border-spacing: 2em 0; } .main, .sidebar { /* 转为单元格后就变为表格一致的高度 */ display: table-cell; float: none; } .taobiao { /* 表格的宽度，必须要套一个壳才往左右回拉，把单元格的列间隙给拉回去，才能把原有宽度铺满 */ margin-left: -2em; margin-right: -2em; } </style> </head> <body> <header> <h1>百花齐放竞“双晒” 文旅会上展芳容</h1> </header> <div class="taobiao"> <div class="conteainer"> <main class="main"> <p> 10月15日，2020重庆国际文化旅游产业博览会（以下简称“重庆文旅会”）线下展览将在重庆国际博览中心北展馆盛大开幕。据2020重庆文旅会组委会消息，本届展会上特设“双晒”成果展示专馆，重庆各大区县文旅“双晒”成果悉数亮相。届时，市民将品尝到各大区县美食，欣赏到各种特色歌舞表演，淘到多种优惠旅游产品，好看好玩耍事超多。 </p> <br /> <h3>看非遗｜麦秆画、棕编小龙等悉数亮相</h3> <br /> <p> 一根小小麦秆能干什么呢？在能人巧匠手里，这平常的原料却可化腐朽为神奇，经过割、漂、刮、碾、烫、熏、雕、烙等十多道工序，就可成为让人叹为观止的艺术品。 </p> <p> 据万盛经开区相关负责人介绍，此次展会将展出两款非遗文化产品——棕编小龙和火烧糯米酒。市民到达现场，不仅可以看到棕编小龙，还有棕编长颈鹿、乌龟等几十种动物造型工艺制品。值得一提的是，现场还有两款本地特色茶文化代表产品——黑山红和定青银毫，你既能在现场观赏到茶艺表演秀，感受万盛茶文化的精髓，还可参与丰富的抽奖活动，棕编小龙、黑山谷门票、青年汇巅峰乐园门票等礼品等你来拿。 </p> <p> 来到垫江展区，你肯定会被精湛的雕刻技术所吸引。据介绍，展会期间垫江角雕大师龙显国将在现场展演雕刻技术，还有非遗大石竹编工艺师将在现场展演精湛的竹编技术，除此，还能在现场看到渝中展区的葫芦烙画非遗产品制造工艺，这些悠久的历史和独特的艺术风格，值得你前去感受一番。 </p> </main> <aside class="sidebar"> <a href="">[景区]巫山小三峡 </a><br /> <a href="">[景区]巫山神女峰 </a><br /> <a href="">[景区]重庆朝天门 </a><br /> <a href="">[景区]重庆洋人街 </a><br /> <a href="">[景区]重庆动物园 </a><br /> <a href="">[景区]重庆人民大礼堂 </a><br /> <a href="">[景区]观音桥 </a><br /> <a href="">[景区]歌乐山国家森林公园 </a><br /> </aside> </div> </div> </body></html>图样