html+css高频知识点总结

选择器

选择器类型

id选择器

用法：#id名 {}

    <style>
        #name {}
    </style>
    <div id="name"></div>
    

类选择器

用法：.类名 {}

    <style>
        .name {}
    </style>
    <div class="name"></div>

标签选择器

用法：标签名 {}

    <style>
        div {}
    </style>
    <div></div>

通配符

作用： 选取html所有的标签,作用是初始化html标签的属性

用法：* {}

    <style>
        *{}
    </style>
    <div></div>
    <div></div>
    <div></div>

并列选择器

作用：准确选择标签名一样,但是clss,id不一样的标签

用法：标签选择器class选择器 {}

    <style>
        div.name {}
    </style>
    <div></div>
    <div class="name"></div>

分组选择器

作用：提高代码效率,降低代码的耦合度

用法：class选择器,class选择器,class选择器 {}

    <style>
        name1,
        name2,
        name3 {
            color:red;
        }
    </style>
    <div class="name1">我想变成红色</div>
    <div class="name2">我也想变成红色</div>
    <div class="name3">俺也一样</div>

后代选择器

用法：某元素 某元素后代 {}

    <style>
        .grandparent .grandson{}
    </style>
    <div class="grandparent"></div>
    <div class="grandson"></div>

子选择器

用法：某元素>某元素子元素 {}

    <style>
        .parent>.son{}
    </style>
    <div class="parent"></div>
    <div class="son"></div>

相邻兄弟选择器

用法：元素名+相邻元素 {}

    <style>
        .brother1+.brother2 {}
    </style>
    <div class="brother1"></div>
    <div class="brother2"></div>

伪类选择器

用法：元素名:属性 {}

    <style>
       .name:hover {}
    </style>
    <div class="name"></div>

属性选择器

用法：属性名[属性名=属性值]

    <style>
        a[id=name] {}
    </style>
    <a id="name"></div>

选择器权重

!important:Infinity / 行间样式:1000 / id:100 / class|属性:10 / 标签选择器：1 / 通配符：0 (都为256进制)

选择器优先级

!important>行间样式>id>class|属性>标签选择器>通配符

计算权重

直接相加，权重相等的后来覆盖前面的

父级边框塌陷问题

问题描述

布局时使用float，如果父级元素的子元素浮动了，会影响到父级元素的边框。

知识点

clear:both; 意为两侧不允许右浮动元素，若有，排到下一行

:after 主要作用是在元素内容前后加上指定内容

clear 用于块级元素，伪类中的元素都是行内元素

解决方法

1. 增加父级元素高度 (不建议使用，元素假设没有固定高度会被限制)

2. 增加空div标签清除浮动 {clear:both;margin:0;padding:0;} (不建议使用，代码中应尽量避免空div)

3. 设置overflow: hidden/scroll; (下拉场景避免使用)

    /*4.为父元素增加伪类(推荐使用)*/
    #father:after {
        content: '';
        display: block;
        clear: both;
    }

margin塌陷及margin合并问题

margin塌陷解决方法

1. 触发BFC:设定position:absolute/fixed; /dispaly:inline-block;/ float:left/right; /overflow:hidden

2. 父级元素加边框(不建议使用)：如border-top:1px soild #000;

margin合并解决方法

1. 两容器外都套上相同容器（class/id相同的）并在容器中设定overflow:hidden

2. 实际解决：调节最大值达到要求即可

文字溢出容器打点展示问题

知识点

white-space:nowrap; 文字到容器边界不换行

overflow:hidden; 溢出部分隐藏

text-overflow:ellipsis; 溢出文本用...展示

解决方法

    .text {
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

三角形绘制问题

    .triangle{
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-bottom-color:#000;
    }

line-height属性值知识点

百分比 子元素继承父元素的line-height计算后的最终值而非百分比。

normal 子元素根据子元素自身的 font-size进行计算。

纯数字 纯数字方式与 normal 唯一的不同，就是数值的大小可以自己随意设定，而 normal 的值是浏览器决定的。