CSS-笔记-尺寸与边框

1， CSS支持的尺寸单位
    1， px 像素
    2， %  占据父元素对应属性的占比
    3,  in  英寸inch； 1 in = 2.54cm    一般表示硬件尺寸
    4,  pt  磅point    1pt = 1/72in    一般设置文字大小
        计算机中一般设置PPI(Pixel Per Inch)72；
    5， cm 厘米
    6,  mm 毫米
    注意：css中，所有的尺寸单位是不可以省略的；(HTML可以省略)
2， 颜色单位（颜色取值）
    1, rgb(r,g,b)
        r: red 红色范围值， 0-255
        g：green 绿色范围值， 0-255
        b: blue 蓝色范围值， 0-255
        eg: 
            background-color:rgb(255,0,0) 红色
            rgb(255,255,255) 白色
    2, rgba(r,g,b,alpha)
        alpha: 颜色透明度，取值 0-1之间的数字
        0：完全透明
        1：完全不透明
        eg:
            background-color:rgba(155,0,0,0.5)
    3, #rrggbb (red,red,green,green,blue,blue)
        由6位16进制数字来组成的颜色
        #ff0000
    4, #rgb        --> 
        #rrggbbd的缩写，当每两位数字相同时，可以使用缩写方式
        #ff0000 -> #f00
        #11ff33 -> #1f3
        #333 -> #333333
    5, 表示颜色的英文单词
        red,gree,blue,yellow,black,white,....
        
    注意：取色的时候一般美工会给出效果图，或者给出颜色的值；或者自己用取色工具取出

3， 尺寸属性
    1，作用
        改变元素的宽度和高度
    2，属性
        1， 宽度
            属性：width
            取值： px或%为单位的数值
        2， 高度
            属性：height
            取值： 以px或%为单位的数值
    
        所有块级元素的尺寸：
            宽度： 占父元素100%的宽
            高度： 已内容为准
        所有行内元素的尺寸：
            宽度和高度均以内容为准；
        注意：
            html和css中，除了img以外所有的行内元素尺寸都不允许修改；
    3， 溢出的处理
        1，什么是溢出：
            当使用尺寸属性限制元素尺寸时，如果内容所需要的空间大于元素尺寸的话，则产生溢出效果；
        2，溢出属性
            overflow：
            1， visible    可见的，默认值
            2， hidden    溢出内容会隐藏
            3， scroll    溢出时滚动条可用，不溢出有滚动条，不可用
            4， auto    溢出时产生滚动条，不溢出无滚动条；
4,    边框属性
    1，边框实现：
        1， 边框简写方式：
            属性： border
            取值： width style color
                width: 边框宽度，px为单位
                style: 边框样式， solid实线/dotted点状虚线/dashed线状虚线
                color: 边框颜色
                        1，合法颜色值
                        2， transparent透明的
                特殊用法： border:none; 取消边框
        2,    单边定义：
            定义上下左右，某一条边的宽度，样式，颜色
            属性：border-方向: width style color;
                border-top
                border-bottom
                border-left
                border-right
        3,    单属性定义
            设置四个方向边框的某一属性值
            语法： border-属性：值
                border-width
                border-style
                border-color
        4， 单边单属性的定义
            设置某一个方向某一个属性的值
            语法： border-方向-属性：值；
            eg: border-bottom-color:black;
                border-bottom-style:dashed;
                border-right-width:3px;
    2, 轮廓
        边框外围的一条线框；
        outline:none; 取消轮廓
    3，边框倒角
        1， 作用
            将边框的四个角变为圆角
        2， 语法
            属性： border_radius
            取值：
                1， 以px为单位的取值；弧长
                2， 以 %为单位的数值，以当前矩形的宽和高的占比,一般取 50%;
    4， 边框阴影
        属性： box-shadow：h-shadow v-shadow blur spread
        取值：    x-shadow    阴影的水平偏移距离，数字
                    取值为正，阴影向右便宜
                    取值为负， 阴影向左便宜
                v-shadow    阴影的垂直偏移距离，数字
                    取值为正，阴影向下偏移
                    取值为负：阴影向上偏移
                blur         阴影模糊大小，数字
                    数字越大，越模糊
                spread        阴影大小，数字
                                
                color：阴影颜色

            eg: 
                #uname:focus,#upass:focus{
                border-color:rgb(139,177,239);
                box-shadow: 0px 0px 2px rgb(139,177,239)
                outline:none;
                }