WEBBASE篇： 第四篇， CSS知识2
CSS知识2
一， 尺寸 与 边框
CSS单位
1,尺寸单位：（1）px 像素 （2）% （3） in 英寸 lin = 2.54cm （4）pt 磅 1pt = 1/72in ppi : Pixel Per Inch = 72 （5）mm 毫米（6）cm厘米
2，颜色单位（取值）
（1） rgb（r , g, b）:
r : red (0-255)
g: green (0-255)
b: blue (0-255)
eg: rgb(255,0,0)
rgb(0,0,0) --- 黑色
rgb（255,255,255） --- 白色
（2）rgba(r,g,b,alpha)
alpha:0-1 小数， 0 完全透明， 1完全不透明
（3）#rrggbb
由6位16位进制数字表示一种颜色；
#000000 : 黑色
#fffffff : 白色
#1a2b3c : ??
（4） #rgb
#rrggbb的缩写，每两位数字相同时，可以采用缩写；
#112233 ： #123
#ff0000 ： #f00
尺寸：
作用： 改变元素的宽度和高度；
属性：（1）width 改变元素宽度； （2） hight 改变元素高度；
块级元素的默认尺寸： （1）宽度：占父元素的100% （2）高度：以内容为准；
行内元素的默认尺寸： （1）宽度： 以内容为准 （2）高度： 以内容为准；
允许修改尺寸的元素：（1）所有的块级元素都可以修改；
（2）所有的行内块（表单控件）元素都可以修改；
（3） table允许修改尺寸的；
（4）除img以外的行内元素们，不允许修改尺寸；
溢出处理：
概念： 当使用尺寸属性限制元素的尺寸时，如果内容所需要的空间大于元素尺寸时，就会产生溢出效果；
溢出处理属性：
属性：overflow
取值：（1）visible : 可见的，默认值； （2）hidden：隐藏 （3）scroll 显示滚动条，溢出时可用；
（4）auto 自动，溢出方向会产生滚动条；
边框：
边框的实现：
1，简写方式：
通过1个属性设置4个方向边框的所有效果（宽度、样式、颜色）；
属性： border
取值： width / style / color
width : 边框的宽度， 以px为单位；
style： 边框的样式（3种）： （1）solid 实线 （2） dotted： 虚线（点） ；（3） dashed：虚线（线）
color： 边框的颜色 或 transparent（透明）
特殊：border：none ； 或 transparent（透明）
2， 单边定义：
只设定某一条边的边框的宽度，样式，颜色 ；
语法： border-方向： width \ style \ color
方向： top / bottom / left /right
练习1： 上边框： 1px宽度 实线 黑色
左边框： 2px宽度 虚线 红色
特殊： border-方向：none
3， 单属性定义：
设置四条边框的某一个属性值；
属性： border-属性：值；
属性： width / style / color
eg: 设置四个方向边框样式为虚线；
设置四个方向边框颜色为green色；
4，单边单属性设置；
设置某一方向边框的某一属性值；
属性： border-方向-属性：值；
方向：top / bottom / left /right
属性： width / style / color
eg: 1, 右边框的样式改为 虚线（dashed）；border-right-style:dashed;
2，下边框的颜色改为粉色（pink）； border-bottom-color:pink;
二、轮廓：outline:none
三、边框倒角： 将元素的四个直角变为圆角；
属性：border-radius
取值：（1）以 px 为单位的数值 ； （2）以 % 为单位的数值 - 50%
四，边框阴影：
属性：box-shadow
取值： h-shadow 、v-shadow、blur、 spred、color ;(5个值)
（1）h-shadow: 水平偏移距离（必须的）： 取值为正，阴影右偏移 ，取值为负，阴影左偏移；
（2）v-shadow 垂直偏移距离，（必须的）： 取值为正，阴影下偏移，取值为负，阴影上偏移；
（3）blur ：模糊距离， 数值越大，模糊效果越强烈；
（4）spread: 阴影尺寸；
（5）color: 颜色
eg: box-shadow: 0px 0px 1px 1px red ;
box-shadow:0px 0px 5px red;
框模型：
一，什么是框模型？
框： Box， 页面元素皆为框；
框模型（Box Model），定义了元素的尺寸和距离的一种计算方式；
包含： 尺寸属性，边框属性，外边框属性，内边距属性 四种；
当框模型的属性们应用到元素中的时候，那么元素整体的所占尺寸就会发生变化；
元素的实际宽度 = 左右外边距 + 左右边框 + width + 左右内边距；
元素的实际高度 = 上下外边距 + 上下边框 + height + 上下内边距；
二，外边距：
外边距就是围绕在元素边框/边缘之外的空白距离就是外边距；
语法：属性：（1）margin 控制4个方向的外边距；
（2）margin-top 上外边距；
（3）margin-right 右外边距；
（4）margin-bottom 下外边距；
（5）margin-left 左外边距；
取值：（1）、以 px 为单位的数值
（2）、以 % 为单位的数值
（3）、取值为负数
移动元素时使用；
为元素设置上外边距为正数时元素向下移动；
为元素设置上外边距为负数时元素向上移动；
为元素设置左外边距为正数时元素向右移动；
为元素设置左外边距为负数时元素向左移动；
（4）、取值为 auto
自动
注意：
（1）、只对左右外边距有效，上下无效
（2）、只能为设置宽度的块级元素设置左右外边距为 auto - 让块级元素水平居中对齐
margin属性的简洁用法：
（1） margin:value; value表示的是上下左右四个方向的外边距值；
（2） margin: v1 v2; v1 : 表示上下外边距的值; v2 : 表示左右外边距的值
（3）margin:v1 v2 v3; v1 : 表示上外边距的值；v2 : 表示左右外边距的值；v3 : 表示下外边距的值
（4）margin:v1 v2 v3 v4;
v1 : 上；v2 : 右；v3 : 下；v4 : 左 （顺时针）
三， 页面中具备默认外边距的元素；
body、p、h1~h6、 ul、 ol 都具备默认的外边距；
会通过css重写的方式， 取消默认的外边距：
body、p、h1~h6、ul、ol{
margin:0;
}
