CSS样式编辑器

目录

css选择器：

        4中基本选择器：

        5种符号选择器：

        其他选择器：

CSS样式属性：

        字体相关：font

        文本相关：text

        背景：background

        列表：list-style

包围盒（border、 padding、 margin）

CSS的display：

CSS中的定位：

CSS中的浮动与清除

---

CSS是网页的皮肤

编写方式：内部样式编辑（优先级最高）直接用style属性写在标签里面，针对某一特定标签进行

                   内部样式表：

                    外部样式表：一般都写在css文件中，通过内部的link标签引入HTML中

                    一般都是先引入外部样式表，再写内部样式表

css选择器：

        4中基本选择器：

                *：通配符选择器

                tag：标签选择器

                .类名：类名选择器

                #id：id选择器

        5种符号选择器：

                ，：左右两个都会被选择

                空格：子孙选择器

                >：子级选择器

                +：相邻的下一个

                ~：下面多个选择器

        其他选择器：

                属性选择器：[attr]，拥有属性的都会被选中

                伪类选择器：

                        状态：

                                ：hover  划入状态

                                ：active   使用鼠标

                        顺序：

                                first-of-type

                                last-of-type

                                nth-of-type(n)

                                nth-last-of-type(n)

CSS样式属性：

        字体相关：font

               font-family：字体样式

               font-size：字体大小

               font-color：字体颜色

               font-style：文本字体样式

               font-width ：字体宽度

        文本相关：text

                text-transform：capitalize-首字母大写， lowercase-全小写， uppercase-全大写

                text-indent：缩进2em（缩进两个字符），em为当前字体大小的像素

                text-align：文本显示位置，left-默认居左，right-居右，center-居中

        背景：background

                background-color：背景颜色

                background-image：url函数，指定图片路径

                background-repeat：背景图片重复设置

                        no-repeat：关闭重复

                        repeat-x：沿x轴重复

                        repeat-y：沿y轴重复

                background-position：背景图片位置设置

                        left：居左展示

                        right：居右展示

                        center：居中展示

                        (x,y)：绝对位置的像素值设置

                background-size：背景尺寸设置

                        contain：短边补空，长边展示

                        cover：短边展示，长边隐藏

        列表：list-style

                list-style-type：列表前端序号设置

                        circle：空心圆形

                        disc：实心圆形

                        square：正方形

                        lower-lain：小写字母

                        upper-lain：大写字母

                        lower-romain：罗马字母

                list-style-position：序号展示位置

                       outside：默认选项，在列表选项外侧

                        inside：在列表选项内部

                list-style-image：插入图片

                        url（）路径设置

                list-style：none

                        去除所有样式

包围盒（border、 padding、 margin）

 包围盒是一个元素占用空间信息

        border：width  style  color（px solider color）

        padding：内补（只有宽高，使用自己的颜色）

        margin：外补（只有宽高，使用父元素的颜色）

        padding与margin支持四种写法

                一个数值：表示上下左右都是一个数值

                两个数值：表示上下，左右

                三个数值：表示是上，左右，下

                四个数值：表示是，上、右、下、左（逆时针）

        box-sizing：控制元素的框模型如何计算其高度与宽度

                border-box：给定的宽高不包含包围盒的border和margin的內补和外补

                content-box：给定的宽高包含包围盒的border和margin的內补和外补

CSS的display：

        inline：行内元素，不可以设置宽高

        block：块内元素，可以给宽高

        inline-block：行内的块，多个块在一起。可以给定宽高     

        none：没有内容，将其隐藏

        flex：弹性元素，能够更方便地布局子元素，实现弹性布局

        弹性容器：(display:flex)

                flex-direction:主轴方向（默认横轴从左向右，纵轴从下向上）

                flex-direction：当选定横轴或纵轴为主轴时，另一个横轴或纵轴就会是交叉轴

                                        row（横轴默认）、column（纵轴默认）

                                        相反情况：row-reverse、 column-reverse

                flex-wrap：控制弹性项目在容器内是否换行

                          wrap：项目在必要的时候会换行，第一行在最上面

                          nowrap：项目不会换行，所有内容都汇集在一行上，默认选项

                          wrap-reverse：项目会在必要的时候换行，第一行在最下面

                justfy-content：设置弹性项目在弹性容器在主轴方向的排列方式

                        flex-start：默认值，项目位于容器的开头点

                        flex-end：项目位于容器的末尾

                        center：项目位于容器的中心

                        space-between：项目位于容器内，并且项目之间的间距相等

                        space-around：项目位于容器内，项目与容器边框的距离是项目间距的一半

                align-items：设置弹性项目在弹性容器的交叉轴的排列方式

                        flex-start：默认值，项目位于交叉轴的开头点

                        flex-end：项目位于交叉轴的末尾

                        center：项目位于交叉轴的中心

                 

CSS中的定位：

        static：静态定位-默认从左向右，从上到下排列

        relative：相对定位-相对文档流位置发生偏移(left/top)，占用文档流位置

        absolute：绝对位置-参考外层第一个非static，不占用文档流位置（left/right/top/bottom）

        fixed：固定位置-参考位置，浏览器窗口

        sticky：粘性定位-没有达到粘性定位位置就相当于静态定位，当到达粘性位置就是固定定位

CSS中的浮动与清除

        float：

                left：排列在左侧，排列在上一个左浮动元素的右侧

                right：排列在右侧，排列在上一个有浮动元素的左侧

        clear：

                right：右边不能有浮动元素

                left：左边不能有浮动元素

                both：两侧都不能有浮动