2021/6/8 CSS基础记忆

标签：布局   滚动   :active   att   之间   默认值   ali   indent   解决方法   

‘‘‘
一、CSS语法
    1. 基本语法
    选择器 声明
    h1 {
        属性名:属性值;
        ...
    }
    2. 注释
    /*单行注释多行注释都一个*/
二、CSS选择器
    基本选择器
        label
        #id
        .class
        *
    组合选择器
        后代：label label {}
        儿子：label>label {}
        邻居：label+label {}
        兄弟：label~label {}
    属性选择器
        [attr]
        [attr=‘‘]
        [attr^=‘‘]
        [attr$=‘‘]
        [attr*=‘‘]
        [attr~=‘‘]
    伪类选择器
        :link
        :active
        :hover
        :visited
        :focus
    伪元素选择器
        :first-letter 首字母
        :before 前
        :after  后
    选择器的优先级
        内联1000>id100>class10>元素选择器1>继承0

三、CSS分组、嵌套、继承
    label1,
    label2,
    ... {
    }
    label1, #id {
    }
    父类的样式子类会有条件的继承，但继承后的样式优先级最低，为0
    不可继承样式属性有：margin、background、padding、border
四、CSS属性相关
    width height    只有块级标签，该属性才有意义
    font-family 字体家族
    font-size   字体大小
    font-weight 字体粗细
        normal bold    bolder  lighter inherit 100-900
    color   字体颜色

    text-align
        left 默认值    right   center  justify inherit
    text-decoration
        none 默认值    underline   overline    line-through    inherit
    text-indent
        px

    font-style:italic;">    background-image: url("");
    background-repeat:
        repeat  默认  no-repeat   repeat-x repeat-y
    background-position: left top;默认值
        left/right/top/bottom/center
    background-attachment: fixed

    border-left/right/top/bottom:
        border-width
        border-style
            none dotted  dashed  solid
        border-color
        border-radius %
    display
        none    标签存在，但浏览器不显示，且不占用布局空间 （visibility: hidden 标签消失但还会占用布局）
        block   标签转换为块级标签
        inline  标签转换为行内标签
        inline-block    标签变为块级、行内

五、CSS盒子模型
    margin  标签之间的距离
        left/right/bottom/top/0 auto
        遵循上右下左定律
        默认8px
    border  标签边框
        width   宽度
        style   样式
            none    无样式
            dotted  圆点虚线
            dashed  矩形虚线
            solid   实线边框
        color   颜色
    padding 标签内容距离边框
        left/right/bottom/top
    content 标签内容

    float
        left/right/none默认值
    clear
        left/right/both/none/inherit
    父级标签塌陷问题
        如果父级标签没有设置标签高度，那么正常情况会根据子标签的大小来撑开父级标签的空间
        但是如果设置子标签浮动，脱离文档流，那么就会脱离父级标签，从而导致父级标签无法根据子浮动标签
        来扩展空间，即父标签塌陷
    解决方法：
        1. 设置父级标签高度>=浮动标签高度
        2. 设置父级标签属性 display: inline-block;
        3. 设置父级标签属性 overflow: hidden;
        4. 设置父级标签 伪元素清除法
            :after { content: ""; display: block; clear: both; }
        5. 在子浮动标签后面增加一个标签，并设置clear:both;
    overflow溢出属性
        -x/-y
            visible 默认，不修剪
            hidden  修剪 不显示
            scroll  修建，显示滚动条
            auto    自动，如果修建 显示滚动条
            inherit 继承父类该属性值
    position定位
        static  默认值，静态、即不定位
        relative    相对定位，相对原来的位置    不脱离文档流
        absolute    绝对定位，相对父级定位标签，如果父级没有定位，则相对body标签，脱离文档流
        fixed   固定定位，相对浏览器固定定位，脱离文档流
    left、right、top、bottom
    x-index模态框
        0-正数
        1. 只有设置了定位，才能使用该属性
        设置定位的元素，永远压着没有设置定位的元素
        2. 遵徐值大覆盖值小
        3. 遵循父级怂了，儿子再牛也没用
        4. 浮动元素，不能使用模态框
    opacity透明度
        opacity可以设置颜色、字体的透明度
        0-1 值越大，越清晰，越小、越透明



‘‘‘

2021/6/8 CSS基础记忆

标签：布局   滚动   :active   att   之间   默认值   ali   indent   解决方法   

原文地址：https://www.cnblogs.com/zhangzhuowei/p/14864700.html