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;

　　}