03.css

Author：逸云先生
发布时间：October 15, 2019
1608 views
No comments
4924 words
Categories： Css笔记

**轮廓：**
        围绕在边框外围的一条线，作用起到突出显示功能
        outline:
            width style color
            none  无轮廓
            0  无轮廓
        使用场景：表单元素 去除轮廓

**按钮：**

<input type="button">
        普通按钮  没有功能的按钮
        <button></button>

**盒子模型  框模型**

盒子 框：一个元素就是盒子或者框（双标签）
        给一个元素设置宽高 放内容
    盒子模型：
        定义元素内容、内边距、边框、外边距的处理样式

当框模型介入到元素中
        元素的实际尺寸是：
            左内边框+左右内边距+内容宽度
            上下边框+上下内边距+内容高度
**外边距：**

概念：围绕元素边框周围的空白区域，拉开当前元素和其他元素之间的距离
        属性：
            margin
        值：
            px
            百分之  基于父元素宽/高百分比
            auto
            负数
        注意：
            一个值：
            控制上下左右四个方向
            两个值 
                x1 x2  x1 垂直方向  x2 水平方向
                取值为auto使用场景：
                    块元素水平居中 只需要设置margin-left:auto和margin-right:auto;
                    margin:0 auto;
                    水平居中有前提：需要有确定的宽度
            三个值：
                x1 x2 x3   x1是上 x2水平 x3下
            四个值：
                x1 x2 x3 x4  上右下左
**单向定义：**
            margin-方向：  left right top bottom
                值：同上
                px
                百分比
                auto
                负数
        什么时候使用负数：
            margin给正值，往相反方向移动
            给负数往相同方向移动
        使用场景：用于微调元素的位置
    页面上哪些元素具有默认的外边距：
        html,body,p,h1-h6,ul,ol,li(其实没有),dl,dt,dd
        css reset css重置
    注意：  
        行内元素margin如何表现：
            上下margin无效，水平可以
    问题？
        1，垂直外边距合并
            当两个垂直外边距相遇时，会合并成一个外边距，最终的值取决于两者中较大的一个
    
        2,垂直外边距溢出：
            当我们给一个字元素设置垂直margin时，如果子元素前面没有任何内容，且父元素没有边框，这个时候子元素垂直margin会溢出作用到父元素上
            怎么解决：
                1，给父元素加边框
                2,取消子元素的外边距，增加父元素的内边距
                3,在子元素前面加一个空的table
            内容生成：
                可以通过css向某个元素的前面（作为子一个子元素插入），或者后面（作为最后一个子元素插入），加入一个标签（定义标签属性）

元素:before{
                    content:"插入元素的文本内容";
                    width:;
                    height;
                    background
                    .....
                }

#box:before{
                    content:"";
                    display:table;
                }
                #box:after{
                    
                }
**内边距：**
        元素边框和内容之间的距离
    注意：当给一个元素设置内边距时，会撑开元素的实际宽高，需要宽高需要保持不变，需要width/height需要减去定义的尺寸
        属性： 
        padding
            一个值  上下左右四个方向
            两个值 第一个值 上下 第一个是左右
            三个值 上 左右 下
            四个值  上右下左
            px
             百分比（父元素宽/高）
        单向定义：
            padding-方向
        行内元素不可以设置宽高：可以padding撑开
    
    背景相关属性：
        1，背景颜色
            属性：background-color
            值：合法颜色值
            注意：背景颜色覆盖的范围：边框以内
        2，背景图片属性
            属性：  
                background-image
            值：
                url(图片路径)
        3,背景重复 （背景平铺）
            属性：  
                background-repeat
            值：
                repeat 重复 默认值
                no-repeat 不重复
                repeat-x 水平方向重复 垂直不重复
                repeat-y 垂直重复 水平不重复
        4,背景图片尺寸
            属性：
                background-size:
                    两个值：以空格分割
                        px
                        x1 x2 x1宽度 x2背景高度
                        百分比  
                        x1% x2% 宽度  高度  依据元素自身宽高的百分比
                    一个值：
                        contain
                            等比例放大背景图，直到背景图的宽度或者高度有一个适应元素宽高截止
                        cover
                            等比例放大背景图，直到背景图的宽度和高度都覆盖了元素宽高截止
        5，背景图片固定
            属性：  
                background-attachment
                值：
                    scroll 背景图会跟随滚动条的滚动而滚动 默认值
                    fixed 背景图固定 背景图的位置不会随着滚动条而发生位置的改变
        6,背景图定位：
            属性：
                background-position
            取值：
                两个值以空格分割
                px
                    x1 水平偏移距离（距离元素最左边距离） 正值 右移动
                    x2垂直偏移距离，距离元素最上面距离   正 下移动
                %
                    0% 0%  左上角
                    100% 100% 右下角
                    0% 50% 左中
                    50% 50% 居中
                关键字
                    left center right
                    top center bottom
                    left bottom
        背景属性：
            background:Color url（） repeat attachment position
        注意：不包含background-size，如果需要定义背景尺寸，不能使用背景属性必须使用background-size属性
        常用：
            background:url() repeat position;
        图片：
            网页上常用图片格式有哪些？
                jpg  支持真彩色 （相同质量图片一般比png小一点）
                png  支持真彩色 支持背景透明
                gif  支持背景透明 支持动画
        精灵图：sprite 雪碧图
            网页上将若干张小图合并成一张大图的操作
            好处：可以减少http请求，提高页面打开速度

ps
        设置单位：
            首选项-->单位与标尺-->单位
        移动图片：光标移入图标，按住空格拖动
        放大图片 
            1，ctrl + 放大  ctrl -缩小
            2，按住alt  鼠标滚轮
        设置前景色：
            alt delete
        设置背景色
            ctrl delete

Last modification：July 17, 2022