WEBBASE篇: 第四篇, CSS知识2

时间:2024-08-28 17:36:32

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;

  }