css尺寸与边框

尺寸与边框

    一、CSS单位
        1、尺寸单位
            1、%
                占据父元素尺寸的占比
            2、in
                英寸，1in=2.54cm
            3、cm
                厘米
            4、mm
                毫米
            5、px
                像素，计算机屏幕上的一个点
            6、pt(point)
                磅/点
                1pt=1/72in
            7、em
                1em 相当于 当前字体尺寸
                2em 相当于 当前字体尺寸的2倍
            注意：css中描述尺寸的单位是不能省略的。
        2、颜色单位
            1、rgb(r,g,b)
                r:red
                g:green
                b:blue
                r,g,b的范围分别是 0~255
                background-color:rgb(125,28,96);
            2、rgb(r%,g%,b%)
            3、#rrggbb
                由6位16进制数字表示颜色
                16进制范围:
                    0-9 A-F
                    
                    #ff0000 : 红色
                    #123456 : 
            4、#rgb
                #rrggbb的缩写
                #001122 --》 #012
            5、表示英文的单词
                red,green,blue,yellow,
    二、尺寸属性
        1、作用
            尺寸属性一般用于设置元素的宽度和高度
        2、宽度
            属性：
                width
                min-width
                max-width
                注意：min-width/max-width 与 width 属性相冲突，最终以width属性值为准
        3、高度
            属性：
                height
                min-height
                max-height
        4、注意
            1、不是所有的元素都支持修改尺寸
                支持修改尺寸属性的元素如下：
                1、块级元素
                2、非块级元素中，存在width，height属性的html元素
                    table，img
        5、溢出
            使用尺寸属性控制元素大小时，如果内容所需的空间大小大于元素本身的空间，会导致内容溢出
            处理溢出的属性:
                overflow:
                overflow-x:横向溢出处理
                overflow-y:纵向溢出处理
                    取值：
                        1、visibile
                            默认值，溢出可见
                        2、hidden
                            隐藏
                        3、scroll
                            让元素显示滚动条，溢出时可用
                        4、auto
                            自动，溢出时显示滚动条，并可用
    三、边框
        1、作用
            在元素周围绘制一条线
        2、属性
            1、简写方式
                border:width style color;
                    width:边框粗细，以px为单位
                    style:边框样式
                        solid : 实线
                        dotted : 虚线
                        dashed : 虚线
                    color:边框颜色
                        合法的颜色值
                作用：控制元素的上下左右四个边框的粗细，样式，颜色
            2、单边定义
                border-方向:width style color;
                方向：
                    top：上
                    bottom：下
                    left：左
                    right：右
            3、单属性定义
                border-属性:值;
                属性：
                    width : 边框粗细
                    style : 边框样式
                    color : 边框颜色
                作用：控制四条边的对应属性
            4、单方向单属性定义
                border-方向-属性:值;
            5、注意
                1、边框颜色可取值为 transparent，意味透明
                2、取消边框显示
                    border:0;
                    border:none;

                    border-方向:0;
                    border-方向:none;

边框

    一、边框倒角
        属性：border-radius
            该属性为简写属性，可以设置四个角的倒角半径
        取值：以px为单位 或 以 % 为单位

        单角定义:
            border-top-left-radius:左上角
            border-bottom-right-radius:右下角
            border-bottom-left-radius:左下角
            border-top-right-radius:右上角
    二、边框阴影
        给元素增加阴影
        属性：box-shadow
        取值：多属性值列表
            box-shadow:h-shadow v-shadow blur spread color inset;
            h-shadow:必须 阴影的水平偏移距离，取值为正，向右偏，取值为负，向左偏
            v-shadow:必须 阴影的垂直偏移距离，取值为正，向下偏，取值为负，向上偏
            blur:可选，模糊距离
            spread:可选，阴影的扩充尺寸
            color:可选，阴影的颜色
            inset:可选值，将默认的外阴影改为内阴影
    三、轮廓
        1、什么是轮廓
            绘制于元素边框周围的一条线
        2、属性
            outline:width style color;
            outline-width:宽度
            outline-style:样式
            outline-color:颜色

            常用：
                outline:0;
                outline:none;

框模型(重难点)

    一、框模型
        框：盒子(box)
            页面元素皆为框
        框模型：(box-model)定义了元素处理内容，内边距，外边距，边框的一种方式

        元素的 width和height属性 指定了内容区域的宽度和高度

        元素的边框是绘制于元素外围的一条线，会扩大元素的占地尺寸

        内边距和外边距 也会增加元素的占地尺寸，但不会影响元素的内容区域

        元素的实际宽度=左右外边距+左右边框+左右内边距+width

        元素的实际高度=上下外边距+上下边框+上下内边距+height
    二、外边距
        1、什么是外边距
            围绕在元素边框周围的空白区域
            作用：
                1、控制元素与元素之间的距离
                2、移动元素位置
        2、属性
            margin:四个方向的外边距
            margin-方向:单边设置
            margin-top:上外边距
            margin-bottom:下外边距
            margin-left:左外边距
            margin-right:右外边距

            取值：
                1、px 像素
                2、%
                3、auto(自动)
                4、负值
        3、取值-auto
            左右方向设置为 auto 时，允许元素在其父元素中水平居中对齐，前提，必须设置该元素的宽度
        4、取值-负值
            移动元素，向着反方向移动
            margin-left:-10px;向左移动10px
            margin-top:-10px;向上移动10px
        5、margin 属性的取值数量
            margin:value;四个方向外边距
            margin:v1 v2;上下  左右
            margin:v1 v2 v3;上  左右  下
            margin:v1 v2 v3 v4;上右下左
            ex:
                margin:0 auto;水平居中标准写法
        6、页面中具备默认外边距的元素
            h1,h2,h3,h4,h5,h6,p,ol,ul,pre,dl,dd
            通过 CSS Reset 的方式 重写默认外边距
        7、特殊效果
            1、外边距合并
                当两个垂直外边距相遇时，它们将形成一个外边距
                合并后的外边距的高度等于两个发生合并外边距高度重的较大者
            2、外边距的溢出
                在某种特殊场合下，给子元素设置外边距时，效果却作用在父元素的外边距效果上了。
                特殊场合：父元素不设置边框时，为父元素中的第一个子元素设置上外边距时，或为最后一个子元素设置下外边距时
                解决方案：
                1、为父元素添加边框
                    有瑕疵，父元素高度会发生改变
                2、为父元素添加内边距来取代子元素外边距
                    有瑕疵，影响元素的尺寸
            3、块级元素，行内元素，行内块元素的上下外边距
                上下外边距对行内元素 无效
                上下外边距对行内块元素的影响是，整行元素都会受到影响
    三、内边距
        1、什么是内边距
            内容区域与边框之间的空间
            会扩大元素边框所占用的区域
        2、属性
            padding:四个方向内边距
            padding-top:
            padding-bottom:
            padding-right:
            padding-left:
            取值：
                1、px
                2、%
            取值数量：
            padding:value;四个方向内边距
            padding:v1 v2;上下  左右
            padding:v1 v2 v3;上  左右  下
            padding:v1 v2 v3 v4;上右下左
        3、特殊影响
            为行内元素设置上下内边距时，只会影响元素自身，并不会影响到其他元素
    四、属性-box-sizing
        1、作用
            指定边框，内边距，内容区域的计算模式
            默认：width和height只负责定义内容区域的尺寸，border，padding额外添加到元素上的
        2、属性 & 值
            属性：box-sizing
            取值：
                1、content-box
                    默认值，在元素的width和height之外绘制边框和内边距
                2、border-box
                    边框和内边距会包含在width和height之中