前端学习记录9-CSS-盒子模型(边框，圆角，内外边距，阴影)

盒子模型（Box Model）

网页布局的本之是利用CSS设置好盒子大小。
然后摆放盒子，然后把网页内元素，添加入盒子内部。

border(边框)

属性	说明
border-width	控制边框的大小 单位基本都用px
border-style	控制边框样式 常用属性为 solid(实线) dashed(虚线) dotted(点线) 上述为常用,还有很多其他样式
border-color	所有常见颜色类型均可用
边框可指定具体的边的样式	border-top: border-bottom: border-left: border-right:

常用的样式写法为border:border-width(宽度) border-style(样式) border-color(颜色)

.box1{
     
	border:1px solid #000;
	border-top:2px solid #001;
	border-bottom:3px solid #002;
	border-left:4px solid #003;
	border-right:5px solid #004;
}

使用border:none;可清除表单input标签中一些默认的边框

border-collapse(控制表格相邻边框合并或独立)

th{
     
	border: 1px solid #000;
}
给单元格添加边框后 存在一个问题 相邻的边框存在重合问题 
两个相邻单元格之间本身 1px的边框变成了 2px

可以使用 border-collapse:collapse; 来解决这个问题  表格的单元格边框合并

border-collapse:separate; 表示为表格的边框独立 默认值

cellspacing=0 只能控制单元格之间的间距 但是不能控制边框

<table  cellspacing="0" width="500" align="center">
		<tr>
			<th>排名th>
			<th>关键词th>
			<th>趋势th>
			<th>今日搜索th>
			<th>最近七日th>
			<th>相关链接th>
		tr>
		<tr>
			<th>排名th>
			<th>关键词th>
			<th>趋势th>
			<th>今日搜索th>
			<th>最近七日th>
			<th>相关链接th>
		tr>
table>

border-radius(边框半径) - 圆角样式

ie8.0即以下版本不支持

border-radius (css3样式 具体可实现 圆角矩形 圆形 椭圆的样式) 可设定百分比属性和绝对单位属性 也可以单独设定某个角的样式
百分比属性	宽度和长度 同时作为形变参照物
绝对单位属性	宽度和长度中最大值 作为形变参照物 若是属性值超过了这个值效果是相同的
单独指定某个角	(左上角)border-top-left-radius: (右上角)border-top-right-radius: (右下角)border-bottom-right-radius: (左上角)border-bottom-left-radius:
只写border-radius时 也可以像padding一样 一个值：所有角 两个值：( top-left 和 bottom-right ) ( top-right 和 bottom-left ) (顺时针对角线) 三个值：( top-left ) ( top-right 和 bottom-left ) ( bottom-right ) (顺时针计算 中间值为对角线) 四个值：顺时针依次排列

盒子类型	效果
宽高相同的盒子(正方形)	50%可设定为圆形 小于50%的值可设置为圆角正方形 超过50%和50%的效果是一样的
宽高不等的盒子	若想实现圆角效果 需要把border-radius设定为 宽高中最大值的 一半 椭圆效果实现可设定 border-radius: 50%;

padding(内边距)

可单独设置某条边的内边距
padding-top(顶部内边距)	padding-bottom(底部内边距)	padding-right(右侧内边距)	padding-left(左侧内边距)
独立简写
padding:10px	表示 四条边的内边距均为10px
padding:10px 20px	表示 上下内边距为10px 左右内边距为20px
padding:10px 20px 30px	表示 上内边距为10px 左右内边距为20px 下内边距为30px
padding:10px 20px 30px 40px	表示 上为10px 右为20px 下为30px 左为40px (顺时针计算)

margin(外边距)

可单独设置某条边的内边距
margin-top(顶部外边距)	margin-bottom(底部外边距)	margin-right(右侧外边距)	margin-left(左侧外边距)
独立简写
margin:10px	表示 四条边的外边距均为10px
margin:10px 20px	表示 上下外边距为10px 左右外边距为20px
margin:10px 20px 30px	表示 上外边距为10px 左右外边距为20px 下外边距为30px
margin:10px 20px 30px 40px	表示 上为10px 右为20px 下为30px 左为40px (顺时针计算)

外边距塌陷

相邻块元素垂直外边距塌陷

当有两个相邻的盒子时

举例1 

a盒子 在 b盒子 正上方

a盒子设置了 margin-bottom: 20px;
b盒子设置了 margin-top: 10px;

按理来说显示应该是他们两个的距离应该是 30px
但是实际显示的是 20px

原因:
浏览器在识别塌陷时会取最大值进行判定

举例2 

a盒子 在 b盒子 正上方

a盒子设置了 margin-bottom: 100px;
b盒子设置了 margin-top: 500px;

两个盒子上下的实际距离是 500px

塌陷的样式 不是两者只和 也不是谁先写的就是谁 而是取最大值
并且区最大值后 保留最大值的盒子外边距 把另一个比最大值小的盒子的外边距归零

比如上面的例子1

a盒子的外边距 在浏览器解析后 下外边距的值为20px
b盒子解析后 上内边距的值为0

例子2 a盒子的下外边距为0 b盒子的上外边距为500px

解决方法为 只设一种 别干多余的事 用一个能解决别用俩

嵌套块元素垂直外边距塌陷

举例 a盒子 嵌套 b盒子

a盒子设置 margin-top:20px;
b盒子设置 margin-top:10px;

从数学角度讲
b盒子的顶部 与 a盒子的顶部 会有一个10px的距离

但是 实际显示的只有a盒子有一个上外边距20px

此处的塌陷同理 相邻块元素垂直外边距塌陷的原理

塌陷即会合并

显示样式上只会显示 a盒子的顶部外边距 并且值是这两个盒子设定的相同外边距的最大值

如果想实现数学角度的样式 让b盒子的顶部 与 a盒子有距离 可使用如下方法：

1.
给a盒子定义上边框 理想样式就会实现
border-top: 1px solid red;(也可给transparent透明色)

缺点 这样会改变原本盒子的大小 

2.
可以给a盒子内边距 设定一个比较小的数

但是问题也来了 这种做法基本就没必要 你又给了a内边距 又给了b上边距

3.
给a盒子 添加 overflow:hidden; 隐藏溢出

box-shadow(盒子阴影)

box-shadow: 水平阴影 垂直阴影 模糊距离(扩散) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;

此语句顺序不能更改 有标准模式 css3样式 ie9.0 以下不支持

box-shadow属性介绍(每个属性的位置不能改变) 以及内外阴影区分
x offset(水平阴影) 必要值
外阴影	实际控制对象:阴影 正值(向右移动距离) 负值(向左移动距离)	内阴影	实际控制对象:原本的盒子 正值(向右移动距离) 负值(向左移动距离)
y offset(垂直阴影) 必要值
外阴影	实际控制对象:阴影 正值(向下移动距离) 负值(向上移动距离)	内阴影	实际控制对象:原本的盒子 正值(向下移动距离) 负值(向上移动距离)
blur(模糊距离) 非必要值 只能为正值
外阴影	实际控制对象:阴影 向外扩散	内阴影	实际控制对象:原本的盒子 向内收缩
spread(阴影尺寸) 非必要值 只能为正值
外阴影	实际控制对象:阴影 向外扩散 若设定了blur 则会加重颜色	内阴影	实际控制对象:原本的盒子 向内收缩 若设定了blur 则会加重颜色
color(阴影颜色) 可设定所有种类颜色
inset(内阴影)/Outset(外阴影) 非必要值 只能写inset 不能写Outset
Outset(作为默认 不可写进box-shadow中 写完后会出现警告 并且样式失效)	inset 若想改变样式需要写进box-shadow中

居中问题

块级元素(block)水平居中对齐

必须是块级(block)元素
盒子必须有宽度(width)
给左右的外边距设置为auto(自动)

按理来说是充满
例如盒子大小为500 屏幕为1920 此时的auto左右给的值 会把左右边距充满 实现居中

常见写法:

1.	margin-left: auto;
	margin-right: auto;
	
2.	margin: auto;
3.	margin: 0 auto;

文字居中()

行内元素(inline) 和 行内块元素(inline-block) 中的文字
使用margin:auto是不管用的

具体的实现居中方式为:

text-align:center; 水平居中
line-height:(height)px;垂直居中

图片使用以及位置问题

插入的图片 例如产品的展示图 基本都是使用插入图片 img标签

想移动 img标签的位置 可通过 padding 移动(但是最好别用这个 会改变外部盒子的大小)

也可以指向性的移动
例如使用margin外边距 来移动盒子中图片的位置 这样不会改变外部盒子大小:

 .phone img{
     
	margin:30px;
}

企业logo和小图标以及海报背景图 这些 基本都是使用 背景来作的 background-image:

此时想改变背景的位置 只能使用 background-position 来移动位置

内外边距需要注意的问题

行内元素的内外边距 只有左右可以更改 上下是无法更改的

浏览器可以识别你写的属性 并且在开发者模式中可 盒子模型构造中也会写入属性

但是在样式上是不会显示的(最新的谷歌浏览器也不会显示)

所以最好不要给inline(行内元素) 设定上下 内外边距 以免出现问题

盒子整体大小的计算（不计算外边距值）

.box1{
     
	width:200px;
	height:400px;
	border:5px solid #000;
	padding:40px;
}
此时类名为box1的div 
宽度实际应该为 width + border(left & right) + padding(left & right) 而不是200px
高度实际应该为 height + border(top & bottom) + padding(top & bottom) 而不是200px

.box1{
     
	width:200px;
	height:400px;
	border:5px solid #000;
}
.box1 p{
     
	height: 30px;
	background-color: skyblue;
	padding: 20px;
}
存在继承情况时 宽度是从继承中获得的 设置padding值一般情况不会改变盒子本身的大小
p标签 宽度 不会 因为设定了20px的内边距而改变 
但是当 内边距 超过一定大小时 (大小取决于 盒子存储的内容剩余宽度) 该盒子就会发生形变(会被撑大)

例如设定 padding: 100px; p标签盒子就会发生 撑大的现象

可使用padding来控制 一些本身不好指定宽度的标签

.nav a {
     
	height: 41px;
	line-height: 41px;
	display: inline-block;
	text-decoration: none;
	padding: 0 20px;
	background-color: #FCFCFC;
	color: #000;
}
.nav a:hover{
     
	background-color: #EDEEF0;
	color: #FF8500;
}

<div class="nav">
	<a href="#">设为首页a>
	<a href="#">手机新浪网a>
	<a href="#">移动客户端a>
	<a href="#">博客a>
	<a href="#">微博a>
	<a href="#">关注我a>
div>

由于链接标签 a 其中的文字在作为导航时 很难每一个都给一个具体的宽度 并且你要删除这个 或者修改这个都很麻烦
所以 我们可以 通过 padding 来控制每个链接标签的距离 使其在水平排列上显示的整齐

盒子模型布局稳定性

width>padding>margin

margin 在垂直的角度会出现塌陷问题 低版本浏览器margin存在加倍问题

padding 设置会影响盒子大小 需要进行计算

width 毛病相对少