CSS快速记忆笔记（三）

版权声明：知识改变命运，科技改变生活，学习适应改变！ https://blog.csdn.net/superaistar/article/details/81266748

知识点17：css三大特性---层叠性、继承性、优先级
    ①层叠性是指多种CSS样式的叠加，样式不冲突，不会层叠，层叠浏览器处理的原则以目标最近的对象显示（就近原则：长江后浪推前浪，前浪死在沙滩上）
    注意：层叠性的条件：样式属性冲突；选择器相同（权重一致）。
    ②继承性：子元素会继承父元素的 某些属性和样式，如文本的颜色和字号等，想要设置一个继承的属性，只需要应用给他的父元素。继承可以简化代码，
    ③优先级：如果选择器不同，就会出现优先级的问题；选择器相同，执行层相加。
    权重分配
        继承或者通配*        0,0,0,0
        标签选择器        0,0,0,1
        类、伪类选择器        0,0,1,0
        id选择器            0,1,0,0
        style=行内样式表        1,0,0,0
        属性后面加!important    权重最大        例：color：red!important；
    0，0，0，0：行内样式，id选择器，类、伪类选择器，标签选择器
    权重数位之间没有进制，从左到右，以及比一级大；
知识点18：权重的叠加--经常用交集选择器，后代选择器，是由多个基础选择器组成，那么此时，就会出现权重叠加；
    例如：    <div class="nav">
            <a href="" class="first">
        </div>
    a的类权重=0，0，1，0+0，0，1，0=0，0，2，0
    权重是没有进制的；
    继承的权重为0，如果没有选中到被继承的子级元素，只给到父级元素，则子级标签的权重最大；
    例：    <div class="nav">
            <p class="fisrt"></P>
        </div>
        p {属性} 的权重>.nav{属性}的权重，因为.nav没有直接选中p标签
    修改样式，一定看该选择器标签有没有被选中；
知识点19：看透网页布局的本质---学习css的重点：盒子模型、浮动、定位
    盒子是网页布局的关键点，网页布局的本质：① 设置好盒子的尺寸② 进行填充盒子的内容。
    盒子模型：相当于一个矩形，由内容大小，边框（border），内边距（padding），外边距（margin）组成
    ①盒子边框border：border-width边框宽度、border-style边框样式：none，solid实线，dashed虚线，dotted点线，transparent透明；、border-color：三种颜色样式都可；
    综合写法:border：边框粗细  边框样式   边框颜色；例：border：5px  dotted   pink;写法没有顺序规定，但推荐如上写法。
    ②分别指定边框：border-top/left/right/bottom；可以单独指定。
    注意：凡是综合写的，先写大的，后写小的，防止层叠掉；
    细线表格：border-collapse：collapse；表示相邻边框合并在一起。
    ③内边距padding：就是内容到边框的距离，可以分别指定：padding-top/left/right/bottom；修改数值会改变盒子的大小，会撑开盒子。
    综合写法：font：上下左右（1个值）；或者font：上下  左右（2个值）；font：上  左右  下（3个值）或者font：上  右   下   左（4个值），顺时针；
    盒子的实际大小：等于内容+内边距+边框大小的和；我们测量盒子的大小实际是盒子的大小。
    padding不影响盒子的大小的情况：如果盒子没有宽度，则padding不会撑开盒子。
    ④外边距margin：盒子与盒子之间的距离，其样式和padding同样。
    让块级元素盒子水平居中：①必须设置盒子的宽度，②左右边距设置为auto；
        margin-left：auto；        margin-right：auto；
        margin：auto；
        margin：0，auto；
知识点20：清除元素默认的内外边距---通配符选择器*{}
    清楚设置元素默认的内外边距用通配符选择器来清除
    通常不设置行内元素的垂直方向的内外边距；
知识点21：并列垂直外边距合并---垂直外边距塌陷
    垂直方向，相邻的两个盒子外边距会合并，只显示其中margin值较大的那个，水平方向没有问题；
    解决方法：尽量只给一个盒子添加外边距。
    注意：只有标准流才会出现塌陷。
知识点22：嵌套垂直外边距合并
    解决方法：1、可以给父元素定义上边框
        2、可以给父元素定义上内边距
        3、可以为父元素添加overflow：hidden；推荐第三种，前两种会改变父元素样式
知识点23：网页布局的稳定性
    按稳定性来分，有时使用宽度剩余法和高度剩余法，其次用padding，会麻烦写，最后使用margin，在低版本中ie6以下会加倍，不推荐。
    width>padding >margin
知识点24：ps基本操作及常用的快捷键
    文件--打开--需要的文件    Ctrl+O ；
    打开标尺--视图--标尺       Ctrl+R;
    放大或缩小          Ctrl++/Ctrl+-；
    ……
知识点25：去掉列表默认的样式
    语法 ：list-style：none；
知识点26：圆角边框
    border-radius：10px;   上下左右四个角的半径为10圆弧
    border-radius：50%；   以（正方形为正圆，矩形为椭圆）盒子的半径为半径为圆。
    综合写法：border：10px  5px  8px  10px;左上角圆角半径10px，右上角圆角半径5px，右下角圆角半径8px，左下角半径10px。
知识点27:盒子阴影数
    box-shadow:水平阴影  垂直阴影  模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  阴影位置(外置还是内置，外置默认，不用写，不然报错)；
    例：box-shadow: 2px  1px  3px  5px  #000;   外置写法，外置不用写，不然会报错。
    box-shadow: 2px  1px  2px  2px  gray  inset; 内置写法，可以运用在文字类。
    拓展：文字阴影：text-shadow：x y blur #fff；练习：凹凸字。
知识点28：网页布局的三种机制---普通流（标准流）、浮动、定位（重点理解）
    网页的核心就是用css来摆放盒子。
    ①普通流（标准流）：块级元素从上向下顺序排列；行内元素从左到右顺序排列；这些都是标准流。
    ② 浮动：让盒子从普通流中浮起来，可以让块级元素一行多个显示，文字环绕效果。
    ※  作用：解决两个问题：浮动可以恰到好处的处理掉盒子与盒子之间的空白间隙。
            盒子按需求左右对齐。
        特点：浮动会脱离普通流的控制；移动到指定位置。
        语法：float：none，left，right（三个属性值）；
    浮：  指元素设置了浮动以后脱离标准流，飘在普通流的上面（元素不在标准中保留位置了）俗称“脱标”。            
    漏：把自己原来的位置给下面标准流盒子，后面的元素会按照普通流补充到第一个元素的位置上去。。
    特：float属性会改变元素display属性，浮动元素会生成一个块级元素，但是此元素跟行内块元素极其相似，但盒子之间没有空白间隙。
    总结：浮起来，不占有原来的位置，改变display属性，类似行内块元素，在同一行显示，但没有空白间隙，浮动的元素我们习惯用标准流盒子包裹起来。
    浮动元素与标准流父级搭配应用：先用一个标准流的父盒子包括浮动的盒子，这样就不会影响其他的标准流位置了。
    浮动与父盒子关系：浮动的盒子不会与父盒子的边框重叠，也不会超过父盒子的内边距，只参考内容对齐；
    浮动与兄弟盒子的关系：浮动只会影响当前的或后面的标准流盒子，前面的标准流盒子不会受影响；如果一个盒子里有多个盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，防止出现其他问题；
    例如两个块级盒子，第一个不浮动，第二个浮动，但第二个盒子上不去，只能跟着第一个盒子在二行显示，第一个盒子独占一行；
    ③ 定位：可以让盒子布局到页面的任意位置。
知识点29:清除浮动（又叫闭合浮动）---为什么要清楚浮动
    为什么要清除浮动？浮动的子元素无法撑开父元素的高度的问题就是我们要清楚浮动的原因；
    因为父级盒子很多情况下，不方便给高度，但是子盒子浮动不占有位置，父盒子高度为0，会影响下面的标准流盒子。
    清除浮动的本质是什么？
    清除浮动主要为了解决父级元素因为清除浮动没有高度的问题，清除浮动之后，父盒子元素会根据子盒子的高度自动检测和撑开盒子，这样，就不会影响下面的标准流了。
知识点30：清除浮动的方法---clear、overflow
    ①额外标签法（隔墙法）：选择器{clear：left，right，both；}，一般我们常用clear：both（两侧都清除浮动）；
    ②父级添加overflow属性方法：overflow：hidden；设置元素超出部分内容隐藏；另外两个scroll，auto都可以实现；但有一定的局限性，内容增多的时候容易造成不会自动换行导致内容被隐藏掉，不会显示更多溢出的内容
    ③使用after伪元素清楚浮动
    .clearfix：after {
        content：" .";    必须要有此属性，里面的 “点”是为了兼容火狐浏览器
        display：block；    /*默认伪元素创建出来的是一个行内元素*/
        height：0；    /*高度没有。*/
        visibility：hidden；    /*可见隐藏*/
        clear：both；
    }
    .clearfix {
        *zoom: 1;        /*声明IE6专门清除浮动的样式*/
    }
    然后在浮动对象父元素属性class中调用clearfix；
    ④双伪元素清楚浮动
    .clearfix:before,
    .clearfix:after {
    content: "";
    display: table;
    }
    clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;        /*声明IE6专门清除浮动的样式*/
    }
    父级没高度；子盒子浮动了，影响下面布局了，那我们就应该清除浮动了。
    注意：float：none；是取消浮动。
知识点31：ps切图---cutterman工具
    1、用切片工具切出图片，然后选择   “文件---保存到为web所用格式”
    2、用选择工具---选中图层---在图层下---新建基于图层的切片
    3、基于辅助线的切图
    4、切片工具：cutterman
知识点32:CSS属性书写顺序
    开发工具=PS切图+subline代码+chrome检测
    1、先设置ing为布局属性
    2、盒子自身的属性
    3、文本内容相关的属性
    4、CSS3及其他外挂属性
    布局流程：1、必须确定页面的版心（可视区），我们测量可得知。
    2、分析页面中行模块，以及每个行模块中的列模块，其中页面布局，就是一行行罗列而成。
    3、制作页面框架，先有结构HTML，后有样式CSS，结构最重要。
    value和placeholder的区别
    都是文本默认占位符，①但value输入时默认文本不会消失，placeholder会消失
    ②value属性设置会改变文本颜色等，placeholder不会，
知识点33：CSS常见错误和纠正
    chrome错误纠察：感叹号黄色的，单词有错误；
    css无显示，element style，有可能样式名与结构名不一致；
    html结构不对称；
    根据颜色判断样式有没有用上
    输入法状态一定要在英文状态下，
    标点符号引用丢失