Web前置课（4）
盒子模型与布局相关属性
布局相关属性- clear：设置组件的左右是否允许出现其他浮动的对象
- clear：设置组件的左右是否允许出现其他浮动的对象
- none两边都允许
- left左边不允许出现
- right右边不允许出现
- bot两边都不允许出现
- overflow：组件内容不够容纳时，剩下的内容如何处理
- visible默认 不剪裁 也不添加滚动条
- auto如果容纳不下自动添加滚动条
- hidden剪裁超出的部分
- scoll：总是显示出滚动条
- overflow-x：控制水平方向上overflow
- overflow-y：控制垂直方向上overflow
- visibility：组件是否显示，若不显示时，其所占用的空间依旧存在
- display：设置组件如何显示
2.7.2 盒子模型与display属性
两种最基本的盒子模型：
- block：块级元素，占据一行，可以设置宽高 div p
- inline：内联元素，不占据一行，多个内联元素在同一行，放不下则换行，不可以设置宽高 span a img
- inline-block：不占据一行，但也可以设置宽高
表格相关的盒子模型
- table：将组件显示为表格样式
- table-caption：将组件显示为表标题样式
- table-cell：将组件显示为单元格样式
- table-row：将组件显示为行的样式
2.7.3 给盒子模型加阴影
- box-shadow属性
- hOffset：水平偏移
- vOffset：垂直偏移
- blurlength：阴影的模糊程度
- scaleLength：阴影的缩放程度
- color：阴影的颜色
使用盒子模型来实现多栏布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
body {
margin: 0;
}
div#container {
width: 1200px;
border: 1px solid black;
/*设置容器组件为box样式*/
display: -webkit-box;
}
div>div {
border: 1px solid #aaf;
box-sizing: border-box;
border-radius: 15px 15px 0px 0px;
background-color: #ffc;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div style="width: 220px;">
<h2>第一栏</h2>
<p>
北国风光，千里冰封，万里雪飘，望长城内外，惟余莽莽，大河上下，顿失滔滔，山舞银蛇，原驰蜡象，欲与天公试比高，须晴日，看红装素裹，分外妖娆，*如此多娇，引无数英雄竞折腰，惜秦皇汉武，略输文采，唐宗宋祖，稍逊风骚，一代天骄，成吉思汗，只识弯弓射大雕，俱往矣，数风流人物，还看今朝。
</p>
</div>
<div style="width: 500px;">
<h2>第二栏</h2>
<ul>
<li><a href="#">最热新闻</a></li>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国际新闻</a></li>
<li><a href="#">娱乐新闻</a></li>
</ul>
</div>
<div style="width: 240px;">
<h2>第三栏</h3>
<figure>
<figcaption>美女图片</figcaption>
<img src="img/mv1.jpg" width="100px">
<img src="img/mv2.jpg" width="100px">
<img src="img/mv3.jpg" width="100px">
</figure>
</div>
</div>
</body>
</html>
官方推荐的一种栅格布局案例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
#content {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: minmax(100px,auto);
max-width: 960px;
margin: 0px auto;
grid-gap:10px;
grid-template-areas:
"header header header header"
"aside . main main"
"nav . main main"
"section section section section"
"section section section section"
"footer footer footer footer";
}
#content>* {
background-color: #3bbced;
padding: 30px;
}
header {grid-area: header;}
main {grid-area: main;}
section {grid-area: section;}
aside {grid-area: aside;}
nav {grid-area: nav;}
footer {grid-area: footer;}
</style>
</head>
<body>
<div id="content">
<header>Header</header>
<main>Main</main>
<section>Section</section>
<aside>Aside</aside>
<nav>Nav</nav>
<footer>Footer</footer>
</div>
</body>
</html>