css样式总结--2019-04-30

CSS样式总结

CSS相关概念

    1. CSS的定义

        Cascading Style Sheets 层叠样式表（级联样式表）

    2.  CSS的作用

        定义网页外观，如字体、背景、颜色等

    3. CSS特点

        ① 精确的定位 准确的控制页面的任何元素

        ② 精细的控制 可以做到像素级别的调整

        ③ 样式与内容的分离 便于维护，便于重用

CSS的使用方式

    1. 内联样式（行内样式）

        在标签里面添加style属性，属性值 写css 代码

    2. 内部样式（通常定义在head头中）

        把css代码写在style标签中

        注意：style标签可以写在文件内部的任何一个地方，但是建议都放在head头内

    3. 外部样式（使用link标签引入单独的css文件）

        link标签      <link href="css文件地址" rel="stylesheet" />

        @import       @import "css文件地址";    注意：要写在css代码的前面

    ★：当样式的定义有冲突的时候，行内样式的优先级最高；其他两种看代码出现的顺序，后面的会覆盖前面的；

CSS的基本语法

    1. CSS语法

        选择器：是你需要改变样式的 HTML 元素

        声明：

            声明都被包含在{}中；

            每条声明由一个属性和值组成，中间用冒号隔开；

            定义多条声明的时候，用分号隔开；

        实例：

            h1{color:red; background:blue;}

    2. CSS注释

        /* 注释内容 */

    3. 单位

        3.1 长度单位

            px      像素(推荐)，屏幕上显示的最小单位；（字体大小默认16px）

            em      倍数   字体大小相对于默认的16px来翻倍

            %       百分比 字体大小相对于默认的16px来取百分比

            ========以上3个都是相对单位===========

            in      英寸

            pt      磅 (1 pt 等于 1/72 英寸)，标准长度单位，通常用于印刷业

            mm/cm   毫米/厘米

        3.2 颜色单位

            1.颜色单词

                red green blue yellow pink purple lightblue...

            2.以16进制表示, 取值范围0~f

                #121212

                提示：如果表示三原色的数值相同，可以简写

                #00 00 00 = #000

            3.rgb

                数字：     color:rbg(0~255, 0~255, 0~255)

                百分比：   color:rbg(0~100%, 0~100%, 0~100%)

                注意：不能混用！

CSS的选择器

    通配符选择器

        *{margin:0px}

    HTML标签选择器

        p{color:red}

    CLASS类选择器

        .class名{color:red}

    ID选择器

        #ID名{color:red}

    ========= 注意：以上4种是基本选择器；请保持ID名的唯一性；class和ID选择器区分大小写，标签不区分

    

    后代选择器

        爹 后代{color:red}

        空格分隔，相当于找ul的后代中左右的a标签

    群组选择器

        a, h1, p{color:red}

    伪元素选择器（不能在行内样式使用）

        选择器:link        设置没访问前的样式

        选择器:visited     设置访问过后的样式

        选择器:hover       设置鼠标放上来的时候的样式（最常用）

        选择器:active      设置鼠标点击还没放开的时候的样式

选择器的优先级

    ID选择器 > CLASS选择器 > 标签选择器

CSS中常见的属性和值

    1、字体属性

        font            设置字体所有属性

        font: [粗细] [斜体] 30px '楷体';

        font-size       字体大小（常用的）

        font-family     用哪一种字体

        font-weight     字体粗细    值：100-900的整百数！600以上为粗体，其他为正常大小

        font-style      字体样式       italic  设置为斜体

    2、颜色属性

        color   值参考基本语法中的颜色单位

    3、背景属性

        background              任意组合各种子属性

        background-color        背景颜色

            background-color:#ccc;

        background-image        背景图片

            background-image:url('../html03/img/f.gif');

        background-repeat       背景图片的平铺方式  

            值：repeat(默认)  no-repeat(不平铺)  repeat-x  repeat-y

            background-repeat:no-repeat;

        background-position     背景图片的位置（九宫格或者像素）

            值：left center right top bottom 像素

            background-position:10px 100px;

        background-attachment   背景图片相对于谁滚

            值：fixed(相对于窗口滚)     scroll(相对于元素滚)    local(默认，跟着内容滚)

        

    4、文本属性

        letter-spacing      设置字间距   （值：长度单位）

        word-spacing        设置词间距   （值：长度单位；空格区分一个词）

    ### text-indent         设置首行缩进 （值：长度单位；通常为2em，缩进两个汉字） 

        text-transform      大小写转换

            值：capitalize(每个单词的首字母大写)  uppercase(全大写)  lowercase（全小写）

    ### text-decoration     设置线

            值：none（没有）  underline(下划线)  overline(上划线)  line-through(删除线)

    ### text-align          水平对齐方式

            值：left   center     right

    ### vertical-align      行级元素基于本行的垂直对齐方式

            值：

                baseline 默认

                middle  默认与下标位置之间

                sub     下标位置

                super   上标位置

                top     会找到最上面的哥们对齐

                bottom  会找到最下面的哥们对齐

                100px   直接设置长度单位

    ### line-height         设置行高，通常用于文本垂直居中

        word-wrap           break-word:设置超长变态的单词自动换行

    5、边框属性

        border          必须记住，设置元素的边框

            border:1px solid red;   //顺序无所谓

        border-width    设置边框的宽度

        border-color    设置边框的颜色

        border-style    设置边框的样式：solid|dashed|dotted...        #可以单独设置上下左右某一条边框

        border-top

            border-top-width

            border-top-color

            border-top-style

        border-bottom

            border-bottom-width

            border-bottom-color

            border-bottom-style

        border-left

            border-left-width

            border-left-color

            border-left-style

        border-right

            border-right-width

            border-right-color

            border-right-style

    6、鼠标指针样式属性

        cursor  设置鼠标指针样式

            值：pointer|move|not-allowed|wait|progress...     7、列表属性

        list-style              通常是去掉前面的点：list-style:none;

        list-style-type         设置图标类型：circle|square... 

        list-style-image        设置图标图片

        list-style-position     设置图标位置：inside|outside

    8、表格属性

        table-layout:   设置表格为固定布局：auto|fixed

        border-collapse:  设置td的边框相邻合并；默认为独立的        值：separate(默认独立)  collapse（相邻合并）

网页布局（DIV + CSS）

    HTML网页：标准文档流（从左往右，从上往下）由标签构成

    浏览器把每一个标签都看做是一个盒子！

布局相关概念：

    1.盒子模型

        1.1 定义： 任何一个元素都可以抽象一个盒子模型， 盒子里面可以嵌套盒子

        1.2 组成： 元素内容（有宽高）、内边距（补白）、边框、外边距（补白）

        1.3 相关属性：

                   width  height  盒子的宽高

                   border       盒子的边框

                   padding      盒子的边框距离盒子的内容的距离

                   margin       盒子的边框距离上一个盒子或父元素的距离，可以为负值

        1.4 盒子模型的宽高

             盒子的宽 = 内容的宽 + 左右内补白 + 左右边框

    2.标签分为块级元素和行级元素

        块级元素（标签）

            一般用来搭建网站架构、布局、承载内容……像这些大体力活都属于块级元素的

                如：div|ul|li|dl|dt|p。。。

            特点：

                1、从左到右撑满页面，独占一行。

                2、如果没有设置宽度，默认是它容器宽度的100%

                3、块级元素可以包含其他块级元素或者行级元素（P标签除外）

                    部分标签：h1~h6、p、dt。。。（html语法检测的编辑器会报错，只有p标签会影响结构）

            <ul>、<ol>、<dl>、<table>，它们的子一层必须是指定元素

        行级元素（标签）

            一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，如：span|a|b|i|strong|img|input。。。

            特点：

                1、从左到右在同一行显示，触碰到页面边缘时会自动换行

                2、设置的宽、高、行高属性没用（部分标签例外），在容器允许的范围内，实际的宽高度是由内容决定的！padding有效；margin左右有效，上下没用！

                    部分标签：img|input|select|textarea|button|label

                3、行级元素只能包含其他行级元素或者文本内容，不能包含块级元素！

    3.无意义的块级元素（div）和行级元素（span）

        3.1、布局标签

            <div></div>

            <span></span>

            没有任何内涵和样式，常用于布局！

        3.2、行级元素和块级元素的转换（display）

            display    inline|block|inline-block|none

            扩充：IE7不支持inline-block，解决方法：首先将其变成行内元素，使其具有行内元素的特性，然后触发haslayout，使其具有块级元素的特性，如此就可以模拟出inline-block的效果

            div{

                display:inline-block;

                *display:inline;

                *zoom:1;

            }

    4.盒子的浮动

        浮动的盒子可以脱离文档流；脱离了文档流后，其他的块级元素会无视这个盒子的存在

        需要注意的是：元素中的文本依然会为它让出位置，环绕在它周围

        float属性，值有right|left|none

    5.盒子的定位

        相对定位

            相对于自己原先的位置定位，配合left|right|top|bottom使用，不会脱离文档流，不影响其他元素的布局；可以与其他元素重叠，但它原本所占的空间不会改变

        绝对定位

            相对于离自己最近的已定位父元素，如果没有找到，那么它的位置相对于浏览器的可视窗口；脱离了文档流，其他元素（包括元素中的文本）会无视它

        固定定位

            固定定位，固定在浏览器的某个位置，不随滚动条的滚动而滚动

    6.margin的特性

        1、两个盒子的水平外边距margin值会相加（正常理解），累加显示

        2、两个盒子的垂直外边距margin值会重叠，以最大的为显示标准

        3、父元素的第一个子元素的[上边距](只有上边距)margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。将自己的margin应用到“领导”的身上;

            解决：

                1、给父元素加有效的border或者padding（不能为0）

                2、或者设置父元素的overflow:hidden

    7.盒子的嵌套

        1、如果子元素的宽高超出了父元素，可以通过overflow来控制超出部分

            auto 自动 | hidden 隐藏 | scroll 滚动条

        2、当子元素浮动后，父元素的高度不会被撑开了！就像橡皮筋一样

            解决：

                1、让父元素也浮动起来

                2、给父元素加上overflow属性

    8.居中

        水平居中

            text-align  可以让文本和行级元素水平居中，设置在要居中元素的父级元素上

            margin:0 auto  可以让块级元素水平居中，设置在要居中的元素本身上

        垂直居中

            line-height 和父元素的height相等，可以让文本和行级元素垂直居中，设置在要居中元素的父级元素上（只能有1行文本）

            块级元素垂直居中：（画图中心点演示）

                position:absolute;

                top:50%;

                margin-top:当前元素高度的一半

    9.隐藏元素

        visibility:hidden   隐藏元素，但保留其物理空间

        display:none    隐藏元素，不保留空间

布局相关的属性

    1、尺寸

        width       设置内容的宽

        height      设置内容的高

    2、内边距

        padding

            padding：四边

            padding：上下  左右

            padding：上  左右  下

            padding：上  右  下  左

        padding-top     上

        padding-right   右

        padding-bottom  下

        padding-left    左

    3、外边距

        margin

            margin:四边

            margin:上下  左右

            margin:上  左右  下

            margin:上  右  下  左

        margin-top      上外边距

        margin-right    右外边距

        margin-bottom   下外边距

        margin-left     左外边距

    4、布局

        display     设置元素的显示方式

            值：

                none    隐藏元素，很彻底的隐藏，不保留物理空间

                block   显示为块级元素

                inline  显示为行级元素

                inline-block    显示为行内块级元素（类似于img、input标签，可以设置宽高）

        float       设置元素浮动方式

            值：

                left    往左浮动

                right   往右浮动

                none    不浮动（默认）

        clear       清除浮动。一般用于被浮动所影响的(块状)元素上

            值：

                both    清除两边的浮动（常用）

                left    清除左浮动

                right   清除右浮动

        overflow

            值：

                auto    溢出就显示滚动条，没超出就算了

                hidden  溢出隐藏

                scroll  溢出滚动（有没有超出都有滚动条的位置）

        overflow-x  设置水平方向的溢出方式，值和overflow一样

        overflow-y  设置垂直方向的溢出方式，值和overflow一样

        visibility  设置元素的可见性

            值：

                hidden  隐藏可见元素

                visible 显示元素（默认）

    5、定位

        position    设置元素的定位方式

            值：

                relative    相对定位

                absolute    绝对定位

                fixed       固定定位，固定在浏览器的某个位置，不随滚动条的滚动而滚动

        z-index     设置元素的堆叠层级

            值为一个整数，越大优先级越高；可以有负值

            注意：必须设置了postion的属性才有效！如果值相同，写在后面的会覆盖前面的

布局

    1.取消标签的默认样式

        body、h1~h6、p、ul 的margin值

        img的border值(IE默认有边框)

        a标签的text-decoration:none

    2.子元素继承父元素的属性设置

        字体、颜色、文本相关的属性，子元素会继承父元素的

            比如：在body中设置了字体样式，所有元素都会生效

        跟布局相关的属性，不会被继承；

            比如：边框、内边距、外边距、宽高、背景。。。

/********************* CSS3 **********************/

选择器

    元素选择器

        通配符 *

        标签选择器  li|div|a|b

        ID选择器

        类选择器

    关系选择器

        后代选择器   ul li{...}

            ul的后代li

        儿子选择器   ul > li{...}

            ul的儿子li（不包括孙子）

        相邻选择器   ul + div{...}

            ul后面紧挨着的div

        相邻选择器   ul ~ div{...}

            ul后面所有的div

    属性选择器

        E[attr]

            包含attr属性的E元素

        E[attr="val"]

            attr属性等于某个值的E元素

        E[attr^="val"]

            包含attr属性，并且值是以val开始的E元素

        E[attr$="val"]

            包含attr属性，并且值是以val结尾的E元素

        E[attr*="val"]

            包含attr属性，并且值里面包含val的E元素

        E[attr~="val"]

            包含attr属性，并且值用空格分割后还包含val的E元素

        E[attr|="val"]

            包含attr属性，并且值用|分割后还包含val的E元素

    伪类选择器

        E:link

        E:visited

        E:hover

        E:active

        E:first-child

        E:last-child

        E:nth-child(n)

        E:only-child

        E:not(选择器)

        E:empty

        E:focus

        E:checked

        ...

颜色

    设置元素的透明度：rgba(0~255, 0~255, 0~255, 0~1(透明度));

    transparent  设置为全透明

属性

    边框圆角

        border-radius

        border-left-top-radius

        border-left-right-radius

        border-bottom-top-radius

        border-bottom-right-radius

    盒子阴影

        box-shadow

    文字阴影

        text-shadow:5px 5px 10px yellow;

        -webkit-text-stroke:1px red;

    兼容写法：

        -webkit-        表示chrome谷歌浏览器

        -moz-           表示firefox火狐浏览器

        -o-             表示opera欧朋浏览器

        -ms-            表示IE浏览器

/****************** 以下均为扩充知识 ******************/

css hack

    由于各大浏览器对CSS的解析认识不完全一样，所以可以用css hack使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

    比如：

        比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不认识

        /*以下代码在IE7是蓝色，标准浏览器是红色*/

        p{

            color:red;  

            *color:blue;

        }

    比如判断浏览器

        <!--[if lte IE 8]>

            您的破浏览器太老了, 请到 <a href="http://browsehappy.com/">这里</a> 更新, 以获取最佳的体验

        <![endif]-->

            lt <

            gt >

            lte <=

            gte >=

关于inline-block后的换行符产生空格问题：

    ? block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；

    ? inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；

    ? font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；

    ? letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。

CSS的浮动

    float 用于设置css的浮动

        之所以会出现浮动，是为了实现文字的环绕效果，并不是为了高大上的布局

    浮动的特性：

        1. 包裹

            一般有3中表现形式：

                1. 收缩

                    没设置宽高的情况下，宽高会收缩到和内容差不多

                2. 隔绝

                    里面发生的事情，与外部无关

            具有包裹的其他属性：

                display:inline-block|table-cell

                position:absolute|fixed

                overflow:hidden|scroll //待定

        2. 破坏

            一般表现为父元素高度塌陷，主要目的是为了实现文字环绕效果

            具有破坏性的其他属性：

                display:none

                position:absolute|fixed

    减轻浮动破坏性的两大方法

        1. 在浮动元素底部插入clear:both 清除浮动

            插入一个block块状元素，并加属性clear:both

                如：<div style="clear:both"></div>

            可以延伸出追加伪元素清除浮动的写法：

                .fix::after{content:'';display:table;clear:both;}

                .fix{zoom:1;/*兼容IE6/IE7*/}

        2. 让父元素BFC(Block Formatting Context)

            能够让父元素BFC的属性：

                1. float:left|right

                2. position:absolute|fixed

                3. overflow:hidden|scroll (常用)

                4. display:inline-block|table-cell(IE8+)

                5. zoom:1 (IE6/IE7)

    浮动后的元素有两种情况，变得像砖块一样，所以被很多人用来布局砌墙：

        1. 会将元素块状化

            <button onclick="alert (document.defaultView.getComputedStyle(this).display)">按钮</button>

            button标签，默认为inline-block,浮动后变成了block

        2. 去空格化

position的absolute绝对定位

    1. 跟随性：元素设置了absolute后会留在原来的位置经常用于无依赖的绝对定位，脱离relative的掌控

    2. 包裹性

    3. 破坏性