四.尺寸和边框
1.尺寸属性
| 作用，设置元素的宽高 属性： width: 设置宽 height:设置高 ---------------------- max-width 最大宽度 min-width 最小宽度 max-height 最大高度 min-height 最小高度 使用场合，响应式布局 取值：以px为单位的数字 父元素尺寸的%百分比 |
附加知识点：单位
| 尺寸的单位 1.px像素 2.in英寸 1in=2.54cm 3.pt 磅值，多用于修饰字体大小粗细 1pt=1/72in 4.cm 5.mm ---------相对单位------------- 6. % 父元素的百分之多少 7.em 是相对于父元素数值的单位 8.rem 是相对html标签数值的单位 |
2.页面中允许设置尺寸的元素
①块级元素
| 所有的块级元素都可以设置尺寸 块级元素不设置宽，宽度占父元素100%。 块级元素不设置高，高度靠内容撑开，没有内容，就没有高。 |
②行内元素
| 行内元素设置宽高无效， 行内元素宽高，是靠内容撑开 但是，自带宽高属性的行内元素，可以设置尺寸 |
③table
| table自带宽高属性，可以设置宽高 |
④行内块
| input 行内块可以设置宽高 |
3.溢出处理
| 当内容较大，元素区域较小，就会发生溢出效果 默认是纵向溢出 属性 overflow 取值 1.visible 默认值，溢出部分可见 2.hidden 溢出部分隐藏 3.scroll，不管是否溢出，都添加滚动条。 不溢出的时候，滚动条不能拖动 4.auto 自动，溢出的时候，溢出的方向有滚动条。 不溢出的时候，没有 控制滚动条的方向 overflow-x/overflow-y 如何让内容横向溢出 需要在宽度比较小的容器内部，添加一个宽度较大的元素盛放内容 在父容器上写overflow:auto。就可以做到横向溢出 |
附加知识点---颜色
| 合法颜色值 1.颜色的英文单词(red,blue,yellow,pink,purple......) 2.#rrggbb #000000---黑 #ffffff---白 #ff0000---红 #00ff00---绿 #0000ff---蓝 3.#aabbcc---->#abc #000 #fff #f00 #0f0 #00f #666 4.rgb(0~255,0~255,0~255) rgb(255,0,0) 5.rgba(r,g,b,alpha) alpha透明度 0~1 1不透明，0透明 #f00 #0f0 #00f #ff0 #0ff #f0f #faa #afa #aaf #ffa #aff #faf |
4.边框
①边框属性---简写方式---4个方向边框一起设置
| border:width style color; width:边框的宽度，取值以px为单位的数字 style:边框的样式 取值：solid实线 dotted 点点虚线 dashed 线状虚线 double 双实线 color：边框的颜色 取值 合法的颜色值/transparent(透明) 最简方式 border:style; 取消边框 border:0; 或者 border:none; |
②单边定义边框
| 只设置某一条边的3个属性 border-top：width style color; border-right border-bottom border-left |
③单属性定义
| border-width: border-style: border-color: ex: border-width:3px; border-style:solid; border-color:#f00; border:3px solid #f00; |
④单边单属性
| border-top-width: border-top-style: border-top-color: border-right-width: border-right-style: border-right-color: border-bottom-width: border-bottom-style: border-bottom-color: border-left-width: border-left-style: border-left-color: |
5.边框的倒角(圆角)
| 将直角设置成倒角，圆角 border-radius： 取值：以px为单位数字 % 50%就是个圆 单角设置 border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius |
6.边框阴影
| box-shadow 取值：h-shadow v-shadow blur spread color inset; h-shadow:水平方向的阴影偏移量 +：往右移动， -：往左移动 v-shadow:垂直方向的阴影偏移量 +：往下 -：往上 blur：阴影模糊距离，越大越模糊 无负值 spread：阴影尺寸，在基础阴影上扩出来的大小 负值，尺寸变小 color:阴影颜色 inset:向内扩撒阴影 |
7.轮廓
| 轮廓指的是边框的边框，绘制于边框外的线条 outline:width style color; outline:none;或者outline:0 去除 轮廓 |
五.框模型---盒子模型
| 框模型--元素在页面上实际占地空间的计算方式 默认情况，一个元素在页面的实际占地宽度 左外边距+左边框宽度+左内边距+内容区域宽度+右内边距+右边框+右外边距 实际占地高度 上外边距+上边框宽度+上内边距+内容区域高度+下内边距+下边框+下外边距 |
1.外边距margin
| 元素边框以外的距离，改变margin，元素有位移的效果 |
①语法
| margin:v1; 设置4个方向的外边距 margin:v1 v2; v1上下 v2左右 margin:0 auto; 块级元素水平居中 auto对垂直外边距无效 margin:auto; auto只对设置了宽的块级元素生效 margin:v1 v2 v3; v1上 v2左右 v3下 maring:v1 v2 v3 v4; 上右下左 单方向外边距设置 margin-top: margin-right: margin-bottom: margin-left: 取值：1.以px为单位数字 2.% 3.+ margin-top ↓ margin-left → - margin-top ↑ margin-left ← 4.auto 自动计算块级元素外边距，让块级元素水平居中 auto只对设置了宽度的块级生效 auto对下上外边距无效 |
2.外边距的特殊效果
①外边距合并
| 两个垂直外边距相遇时，他们将合并成一个，值以大的为准 只能在布局设计的时候，尽量避免发生 |