02.css

02.css

October 15, 2019

1637 views

3431 words

**单位：**
            尺寸单位：
                px 像素 
                cm mm pt 
                em：当前字体大小
                rem 根字体大小 (html标签字体大小)  css3
**颜色单位：**
            三基色
                红绿蓝
            rgb(x1,x2,x3);   0-255
              rgb(255,0,0)  纯红
              rgb(0,0,0)   黑色
              rgb(255,255,255)   白色
            rgba(x1,x2,x3,a)
                a透明度：  0-1 
                    0 完全透明
                    1 完全不透明
            16进制
                0-9 a-f
             #rrggbb
                #ff0000;  正红色
                #ffffff;  白色
                #000000;黑色 
            简写：
                当三基色  16进制每一个色值两位 的值都是相同 可以省略一个值
                eg:
                    #aabbcc    #abc
                    #ff0000   #f00;

#ffbc00  ---> #fbc0  错误
**尺寸属性：**
        宽高
        宽度属性：
            width:
                px
                % （基于父元素宽度的百分比）
                流式宽度
            max-width  
                最大宽度
                单位同上
            min-width 
                最小宽度
                单位同上
        高度属性
            height
                px
                %
            流式宽度：
                max-height
                min-height
        注意：
            块元素 尺寸属性可以设置，行内元素，尺寸属性无效
            块元素 宽度默认值是 100%
            高度如果没有设置 默认值是auto 由内容撑开

**溢出：**
        当我们给一个元素设置了宽高，如果内容的面积超出了你设置的尺寸的面积，就会产生溢出
        溢出属性定义了元素内容溢出时怎么处理
    overflow:
        visible 可见 默认值 （溢出可见）
        hidden 溢出隐藏
        scroll  滚动  默认显示滚动条 在内容溢出时可用
        auto  自动  如果内容没有溢出，就不显示滚动条，内容溢出，显示滚动条并可用
    单向溢出
    overflow-x   控制x方向元素溢出时处理
        值同上
    overflow-y  控制y轴方向内容溢出处理
        值同上
    注意：
        单向
        当我们只设置一个方向的溢出属性时，另一个方向的值默认是auto

**边框属性：**
        宽度  样式（实线虚线） 颜色
    属性：
        border (控制上下左右四条表框的样式)
        值：width style color;
        width:
            px
        style: 线条样式
            solid  实线
            dotted 虚线  实心圆
            dashed  虚线 实心方块
        color 颜色
            合法颜色值
    单方向定义（单边定义）
        方向：上下左右  top bottom left right
        border-方向
            值：同上
    单属性定义： 注意 同时控制上下左右四条边框属性
        属性：width style color
        border-属性:值
        如:
            border-color:red;
            border-width:10px;
            border-style:solid;
    单边单属性
        border-方向-属性

注意：  
        边框颜色除了可以取值为合法的颜色值外还可以是transparent
        使用场景：
            某种状态下，加上边框，尺寸变化，导致元素抖动
            在变化就加上边框颜色透明，保证前后状态尺寸无变化
    边框组成？
        边框是由三角形或者梯形组成的
    
    边框倒角：
        设置元素 四个角的角度
            (左上 右上 左下 右下)
        属性：  
            border-radius
            取值：
                px  最多
                百分比 （当前元素宽或者高百分比某些浏览器下可能有兼容性问题。如移动端浏览器）
            注意：同时控制四个角 的倒角
        单独定义每个角的角度：
            a,
                border-垂直方向-水平方向-radius 
                值：同上
                eg:
                    border-top-left-radius:10px; 可以
                    border-left-top-radius:10px; 错误
        border-radius:取四个值 以空格分割
            x1 x2 x3 x4;
            左上角开始 顺时针
**边框阴影：**
        box-shadow:
        值列表：
            offsetx offsety blur spread color inset
        offsetx：水平偏移距离  必选
        offsety 垂直偏移距离   必选
        blur 模糊距离   必选
        spread 阴影超出面积（默认是0 阴影尺寸默认跟元素是一样的，超出元素尺寸，） 可选
        color 阴影颜色  必选
        inset  外部改内部阴影  可选
        推荐常用：
            四个值
            offsetx offsety blur color;

Last modification：July 17, 2022