Web前端之CSS（2）——框

一.尺寸和属性

1.尺寸属性

2.溢出处理
当内容多，元素区域小的时候，就会产生溢出效果
默认都是纵向溢出的

属性 overflow / overflow-x / overflow-y

取值：
（1）visible 默认值，溢出可见
（2）hidden 溢出部分隐藏
（3）scroll 显示滚动条，不管是否溢出都显示滚动条
只有在溢出时，滚动条可用
（4）auto 自动，溢出方向有滚动条，没溢出的方向没有滚动条

如果想显示成横向溢出
需要在内容和容器之前再套一层容器
内部容器宽度要比外部容器宽

3.边框
（1）border:width style color;
width:边框的宽度
style:边框的样式
取值：
solid 实线
dotted 虚线(圆点)
dashed虚线(线)
double 双实线

color:边框颜色，合法的颜色值，支持透明色(transparent)
border直接设置上右下左4个方向的边框

取消边框 border:none/0;

练习
创建一个div#d2 尺寸200*200
设置边框，2px 实线 橙色

2.单边定义
只设置某一条边的3个属性
border-top/right/bottom/left:width style color;

3.单属性定义
border-color:#00f;
border-style:dashed;
border-width:10px;

4.单边单属性定义(12个)
border-top/right/bottom/left-width/style/color:

5.边框的倒角
把直角变成圆角
border-radius:
取值：
1° 以px为单位的数字
2° %——50%设置圆形

单角设置
border-top-left-radius:10%; 左上
brer-bottom-right-radius:10%;右下
border-top-right-radius:10%;右上
border-bottom-left-radius:10%;左下

练习：画出一个柠檬(芒果)

6.边框的阴影
box-shadow
取值：
h-shadow v-shadow blur spread color inset;
h-shadow:水平方向阴影的偏移，正：往右，负：往左
v-shadow:垂直方向阴影的偏移，正：往下，负：往上
后面4个值，可以不写
blur：阴影模糊距离，值越大，越模糊，负值就消失
spread:阴影尺寸，指阴影在基础上扩出来的具体
color:阴影的颜色
inset:将默认的外部阴影变为内部阴影

练习：设置一个圆形的向外发光的效果(太阳，日食)

7.轮廓
轮廓是指边框的边框，绘制于边框外边的线条
outline:width style color;
给input去掉轮廓 outline:none/0;

练习：尝试设置一个乒乓球拍的效果(宇智波的族徽)

球拍的把手，margin-left:10px

二.框模型，盒子模型(重点)

1.什么叫框模型
页面元素皆为框（盒子）
框模型，盒子模型 box model
定义了元素框处理元素内容，内边距，外边距以及边框的计算方式

默认的计算方式
元素的实际占地宽度=左外边距+左边框+左内边距+内容区域的宽度+右内边距+右边框+右外边距
元素的实际占地高度=上外边距+上边框+上内边距+内容区域的高度+下内边距+下边框+下外边距

2.外边距，围绕在元素边框外的空白间距（元素与元素之间的距离）
语法:margin 定义4个方向的外边距
单边定义 margin-top/right/bottom/left
取值：
（1）以px为单位的数字
（2）%,占父级宽度的百分比
（3）取值为正数，margin-left 元素往右移动
margin-top 元素往下移动
取值为负，就是相反方向
（4）auto 自动计算块级元素的外边距，对于上下外边距无效
块级元素水平居中，要设置作用外边距auto
简写方式
margin:value 定义4个方向的外边距
margin:v1 v2; v1:设置上下，v2设置左右
margin:0 auto;设置块级元素水平居中
margin:v1 v2 v3; v1:上，v2：左右，v3：下
margin:v1 v2 v3 v4; 上 右 下 左

练习
04_ex.html 两个div，尺寸300*300
设置背景颜色，随意
设置两个div之间的距离为50px，
设置第二个div水平居中

3.自带外边距的元素
h1~h6 p body ol ul dl pre
一般在开发时候，通过样式重写的方式，来重置具有外边距的元素

*{margin:0;padding:0;}

body,button,......th,ul{margin:0;padding:0}

4.外边距的特殊效果
（1）外边距合并
当两个垂直外边距相遇时，他们讲合并成一个，最终的距离取决于两个外边距中较大的值

练习
在04_ex中再创建两个span,内容随意，然后为两个span，都设置4个方向的外边距
创建两个input text, 给其中一个设置4个方向的外边距

（2）行内元素对外边距表现
行内元素垂直外边距无效(img除外)

（3）行内块对外边距的表现
同一行中，一个行内块设置了垂直外边距，同行其它行内会跟着发生变化
练习
05_ex.html中，创建两个div #d1 #d2，尺寸都是200200，设置不同背景颜色
在#d2中添加div#d3 100100，设置不同背景色
设置d3的上外边距为50px，f12中改变上外边距，查看效果

5.外边距溢出
在特殊条件下，为子元素设置上外边距，会作用到父元素
条件：
（1）父元素没有上边框
（2）为第一个子元素设置上外边距

解决方案：
1°为父元素添加上边框 弊端：影响了父元素的实际高度
2°为父元素添加上内边距 弊端：影响了父元素的实际高度
3°在父元素第一个子元素的位置，添加一个空的table标签

内边距
不会影响其他元素，但是会改变自己的占地尺寸，视觉上大小会发生变化

语法：
padding:value; 设置4个方向的内边距
padding:v1 v2; v1:上下，v2：左右 没有auto
padding:v1 v2 v3; v1:上 v2：左右 v3：下
padding:v1 v2 v3 v4; 上右下左

单方向设置
padding-top/right/bottom/left

box-sizing属性
指定框模型的计算方式
box-sizing:content-box; 默认值

默认的计算方式
元素的实际占地宽度=左外边距+左边框+左内边距+内容区域的宽度+右内边距+右边框+右外边距
元素的实际占地高度=上外边距+上边框+上内边距+内容区域的高度+下内边距+下边框+下外边距

box-sizing:border-box;
元素的实际占地宽度为=左外边距+width+右外边距
元素的实际占地高度为=上外边距+height+下外边距

作业
使用边框，倒角，外边距完成下图