css_盒子模型_Firebug_border_盒子的尺寸问题_外边距的合并_行内标签的垂直外边距_盒子居中_网页设置的三个准备工作_区块控制属性_Unit_5;

topic 1 : 盒子模型

外边距margin：作用 -- 拉开两个盒子之间的距离

边框线border

内边距padding：作用 -- 拉开内容与边框线的距离panda

内容width和height -- 实体化范围

盒子模型代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
	.box{height:200px; width:400px; background:pink; text-align: center; line-height: 200px; border:3px solid blue; padding:30px; margin:100px; }	
</style>
</head>

<body>
	<div class="box">盒子模型的展示</div>
</body>
</html>

普通样式下的样子：

这个是我们盒子在firebug模式下显示的样子；

我们注意这个border这个属性

border:3px solid blue;

实线soild这个是没有默认值的要是我们不写这个属性就会显示不出来但是另外两个都有默认值；

topic 2 : Firebug

其实我们现在的浏览器都内嵌了firebug，在设置这里我们有一个Web开发者的选项；

里面内嵌了许多我们开发者需要的工具，其中就有取色器与firebug（他的快捷键是F12）等；

topic 3 : border设置（padding margin都一样）

1. border

书写border属性代表设置盒子四个方向边框线相同，如果想要设置四个方向边框线不同，方法：border中横线连接方向英文（top|left|right|bottom），例如：border-top代表顶部描边

1 border-top:1px solid #000; border-right:10px solid #000; border-bottom:20px solid #000; border-left:40px solid #000;

2. padding

书写padding代表的是盒子四个方向的内边距，单独设置不同方向内边距，做法：padding中横线连接方向英文，例如：padding-top代表顶部内边距，margin-top代表顶部外边距

1 padding-top:10px; padding-right:20px; padding-bottom:40px; padding-left:80px;

3.padding和margin的四种写法：

1. 四值写法

上左下右（顺时针）

padding:10px 20px 40px 80px;

2.三值写法

上左右下

padding:10px 40px 80px;

3.两值写法

上下左右

padding:10px 80px;

4.单值写法

四个方向相同

padding:10px;

topic 4 : 盒子的尺寸问题

盒子占位尺寸计算公式 = margin+border+padding+实体化尺寸

经验：如果盒子添加了padding和border属性，一定在有宽度和高度属性的前提下，在宽高基础之上减去相应的padding和border取值

topic 5 : 外边距的塌陷（合并）问题

1、当垂直排列的两个盒子，垂直外边距紧挨在一起，就会产生合并/塌陷问题，取值方法：取值为两者之间的较大值

2、嵌套排列的两个盒子也有外边距塌陷问题，解决办法：

1.给父级添加border属性，完整的划分出盒子边缘；

2.给父级或子级别添加float：left属性

3.给父级添加overflow：hidden属性

topic 6 : 行内标签的垂直内外边距；

他通过padding和margin不能改变垂直方向的；只能使用line-height才行；

topic 7 : 盒子居中；

核心属性：margin：上下随意 左右必须为auto

使用margin的前提条件就是盒子必须是块级的盒子必须设置了宽度；

topic 8 : 设计网页的三个准备工作

1. 清空标签的默认样式

需要清空所有用的到的想得到的标签的内外边距和列表样式

body,div,p,span,a,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,input{margin:0; padding:0; list-style:none;}

2. 设置全局样式

设置body的文字三属性

body{ font-size:12px; font-family:'宋体'; color:#ccc;}

3 .超链接的默认样式

设置超链接的颜色和下划线

a{ color:#0000ee;}

a:hover{}

区块控制属性：

宽度 -- width

高度 -- height

背景 --background（盒子默认是透明状态）

描边 -- border

外边距 -- margin

内边距 -- padding

列表项目符号 --list-style：none；

禁止任意拖拽 -- resize：none；