盒子模型基础笔记
盒子模型
- 什么是盒子模型
对于每幅画来说，都有一个边框，在英文中称为border,每个画框中，画和画框通常都会有一定 的距离，这个距离称为内边距，在英文中称padding,每一幅画之间不是紧挨着的，也存在一些距离，称为外边距，在英文中称为margin.
因此，padding-border-margin模型是一个极其通用的描述矩形队形布局形式的方法。这些矩型对象统称为盒子，英文为box。
在CSS中，一个独立的盒子模型由content（网页内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成。
2.边框
有三个属性，分别是color、width和style。
（1）border-color
border-top-color:上边框颜色
border-right-color:右边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border-color:四个边框颜色（顺序为上右下左）
（2）border-width
border-top-width:上边框宽度
border-right-width:右边框宽度
border-bottom-width:下边框宽度
border-left-width:左边框宽度
（3）border-style
border-top-style:solid = =上边框实线
border-right-style:solid = =右边框实线
border-bottom-style:solid = =下边框实线
border-left-style:solid = =左边框实线
（4）border的简写属性
示例：border：9px #F00 dashed 即设置某网页元素的下边框为红色 9px、虚线显示。
注意当同时设置三个属性时，统通常的顺序为粗细、颜色和样式。
3.外边距
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px
在CSS中，margin除了使用像素值设置外边距之外，还有一个特殊值—auto，这个值通常在设置盒子在它的父容器中居中显示时才使用。
示例：margin：0px auto；会让整个盒子居中
4.内边距
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
5.盒子模型的尺寸
6.box-sizing拯救布局
（1）box-sizing的语法
box-sizing：content-box | border-box | inherit;
（2）浏览器兼容性
（3）box-sizing的使用
box-sizing：border-box;
1.2 圆角边框
1border-radius的语法
border-radius: length｛1，4｝
示例:border-radius: 20px 10px 50px 30px;
四个属性值按顺时针排列:
2. border-radius的浏览器兼容性
属性名 IE Firefox Chrome Opera Safari
border-radius 9+ 3.0+ 1.0+ 10.5+ 3.0+
3. border-radius的使用
示例：border-radius：20px; 即四个角都是圆角
border-radius：20px 40px;
border-radius：20px 10px 50px;
border-radius:20px 10p 50px 30px
（1）圆形
利用border-radius属性制作圆角是有两个要点
①元素的高度和宽度必须相同
②圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
示例：div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
（2）半圆形
利用border-radius属性制作半圆形的两个要点
①制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值。
②制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值。
（3）扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同
1.3 盒子阴影
box-shadow是CSS3新增的一个重要属性，用来定义元素的盒子阴影。
语法：
box-shadow:inset x-offset y-offset blur-radius color;
3.box-shadow的使用
示例：box-shadow：20px 10px 10px #06c;
效果为阴影在< div >元素右边便移20px,下边偏移10px,模糊半径10px如果设置了inset值，则表示盒子为内阴影。
网页布局
1.标准文档流
是指元素根据块元素或行内元素的特性按从上到下、从左到右的方式自然排列。
1.2 display属性
display属性的常用值
display属性的特性：
块级元素与行级元素的转变（block inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）
1.3浮动概述
1.浮动在网页上的应用
要实现浮动需要在CSS直中设置float属性，默认值为none，也就是标准文档流块元素通常显示的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧浮动，默认情况下，盒子的宽度不再伸展，而是根据盒子里的内容和宽度来确定。
2.float属性
float属性值
属性值 说明
Left 元素向左浮动
Right 元素向右浮动
None 默认值，元素不浮动，并会显示在文本中出现的位置
（1）设置左浮动
float：left
（2）设置右浮动
float：right
1.4 清除浮动
在CSS中clear属性可以清除浮动元素多其他元素的影响
- clear属性
clear属性值
（1）
清除左浮动
clear：left
（2）清除右浮动
clear：right
（3）清除两侧浮动
Clear:both
2.解决父级边框塌陷的方法
（1）浮动元素后面加空div
示例：< div id=“father”>
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" />div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />div>
<div class="layer04">浮动的盒子……< /div>
<div class="clear">div>
div>
.clear{ clear: both; margin: 0; padding: 0;}
（2）设置父元素的高度
示例：< div id=“father”>
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" />div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />div>
<div class="layer04">浮动的盒子……div>
div>
#father {height: 400px; border:1px #000 solid; }
（3）父级添加overflow属性
示例：div id=“father”>
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" />div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />div>
<div class="layer04">浮动的盒子……< /div>
div>
#father {overflow: hidden;border:1px #000 solid; }
overflow属性的常见值
visible:默认值，内容不会被修剪，会呈现在盒子之外
hidden:内容会被修剪，并且其余内容是不可见的
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
（4）父级添加伪类after
<div id="father" class="clear">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" />div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />div>
<div class="layer04">浮动的盒子……div>
div>
.clear:after{
content: ‘’; /在clear类后面添加内容为空/
display: block; /把添加的内容转化为块元素/
clear: both; /清除这个元素两边的浮动/
}
小结：清除浮动，防止父级边框塌陷的四种方法：
①浮动元素后面加空div
简单，空div会造成HTML代码冗余
②设置父元素的高度
简单，元素固定高会降低扩展性
③父级添加overflow属性
简单，下拉列表框的场景不能用
④父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用
inline-block和float的区别：
display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
1.1 定位在网页面的应用
在CSS中有三种基本的定位机制，分别是标准流、浮动和绝对定位。本届重点讲解点位
1.2 position属性
position属性：
①static：默认值，没有定位
②relative：相对定位
③absolute：绝对定位
④fixed：固定定位
1.static
static为默认值，它表示盒子保持在原本的位置，没有任何移动的效果，
2.relative
相对自身原来位置进行偏移
偏移设置：top、left、right、bottom
示例：
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
position:relative;
right:20px;
bottom:30px;
偏移量方向：
相对定位元素的规律：
①设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
②设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
③设置相对定位的盒子原来的位置会被保留下来
④层级提高了
另外设置了相对定位的网页元素，无论是标准文档流中还是在浮动时，都不会对它的父级元素和相邻元素有任何影响，只针对自身原来的位置进行偏移。
3.Absolute
absolute属性值：
偏移设置： left、right、top、bottom
绝对定位小结：
①使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
②如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
③绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
④元素位置发生偏移后，它原来的位置不会被保留下来
绝对定位不设置偏移量
示例：
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
position:absolute;
right:30px;
经验：设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况
4.Fixed
即固定定位，它和绝对定位有些类似，区别在于定位的基准不是祖先元素，而是浏览器窗口
小结：
相对定位的特性
相对于自己的初始位置来定位
元素位置发生偏移后，它原来的位置会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
绝对定位的特性
绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
元素位置发生偏移后，原来的位置不会被保留
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
设置绝对定位的元素脱离文档流
绝对定位的使用场景
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
固定定位的特性
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
1.3 z-index属性
在CSS中，z-index属性用于调整元素定位是重叠层的上下位置。
z-index属性在立体空间中表示垂直于页面方向的z轴，取值为整数，可以是正数，也可以是负数
调整元素定位时重叠层的上下位置:
z-index属性值：整数，默认值为0
设置了z-index属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
设置层的透明度：
| 属性 | 说明 | 举例 |
|---|---|---|
| opacity:x | x值为0~1，值越小越透明 | opacity：0.5 |
| filter:alpha(opacity=x) | x值为0~100，值越小越透明 | filter:alpha(opacity=40) |
小结：
网页中的元素都含有两个堆叠层级
未设置绝对定位时所处的环境，z-index是0
设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定
改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可
总结
盒子模型：
边框：border-color 、border-width、border-style
内边距：padding
外边距：margin
盒子总尺寸：border+padding+margin+内容宽/高
box-sizing：content-box、border-box
border-radius语法
border-radius制作特殊图形
盒子阴影：box-shadow
浮动：
常见网页布局
标准文档流
display属性：block
inline
inline-bloc
none
浮动属性：左浮动 left
右浮动 right
不浮动 none
清除浮动：clear属性 清除左浮动 left
清除右浮动 right
清除两侧浮动 both
不清楚浮动 none
解决父级边框塌陷的方法：浮动元素后面加div
设置父元素的高度
父级添加overflow属性
父级添加伪类after
inline-block和浮动
定位网页元素：
定位属性：static
relative：相对定位
absolute：绝对定位
fixed：固定定位
z-index属性蛇者定位元素的堆叠顺序
opacity:x或filter:alpha(opacity=x)方式设定网页元素透明度