前端Day15笔记

一、绝对定位高度塌陷问题
    1、什么是绝对定位高度塌陷？
        当一个元素设置了绝对定位时，它会脱离文档流，BFC的第四个特点（不会计算绝对定位和固定定位的高度）因此在这个绝对定位元素所处的开启了BFC的元素就发生了高度塌陷
        
    2、如何解决绝对定位高度塌陷？
        1）只能通过给一个固定高度来解决（开启BFC无法解决绝对定位的高度塌陷）
        2）在不确定内部高度是多少的时候，以后可以用js来操作
    
    
二、轮廓属性 outline
    1、outline-width 轮廓线条宽度
        1）取值：
            ？px            多少像素
            
    2、outline-style 轮廓线条样式
        1）取值：
            solid        实线
            dashed        虚线
            dotted        小圆点
            none        没有样式
            ...            （还有很多）
            
    3、outline-color 轮廓线条颜色
        1）取值
            具体颜色的英文表达
            十六进制
            rgb
            rgba
            
    4、outline 属性连写【简写】
        1）以上三个属性可以简写成outline属性
            outline: 1px solid red;
            表示设置轮廓属性宽度1px，实线，红色
        2）注意：
            a.清除轮廓样式:
                outline: none;
            b.清除边框样式:【补充】
                border: none;
            c.轮廓属性不占位！！！
            
    5、轮廓属性outline和边框属性border对比
        1）相同点：
            都可以属性连写，且分开写的属性以及属性取值都一样
        2）不同点：
            a.轮廓属性不占位，边框属性占位（轮廓不属于盒子模型，边框属于盒子模型）
            b.轮廓属性不能给某个方向单独加，要加就是四周一起加轮廓，边框可以单独给某一条边加
            
            
三、固定表单的大小 resize
    1、resize 是否可调整尺寸
        1）取值：
            none        禁止进行缩放
    
            
四、表格相关属性
    1、border-spacing 单元格之间的距离
        1）取值：
            ？px            多少像素
    
    2、border-collapse 是否合并单元格边框
        1）取值：
            collapse    合并单元格边框
    

五、单行文本溢出处理
    实现对单行文本的溢出部分用省略号代替，需要三个属性配合：
        1、white-space: nowrap;        文字不要还行
        2、overflow: hidden;            溢出隐藏
        3、text-overflow: ellipsis;    溢出内容出现省略号

六、透明度属性 opacity
    1、颜色的特殊取值 transparent
        1）举例：
            background-color: transparent;
            设置背景颜色属性值为透明，相当于rgba(0,0,0,0)
    2、opacity 透明度属性
        1）取值：
            0-1之间的小数，1不透明，0全透明，值越小越透明可以简写（0.5相当于.5）
        2）注意：
            opacity属性是给元素设置的透明度，并且对其子元素依旧生效
    3、opacity属性和transparent特殊取值的区别：
        1）transparent（或rgba）只针对于颜色的透明度选择，而opacity属性是对元素的透明度选择（如果既设置了颜色透明度又设置了元素透明度，会叠加计算而不会覆盖）
        2）opacity对当前元素的子元素也会生效（如果子元素再设置opacity属性，会在原来的基础上叠加计算透明度，原来透明的会更透明）

七、隐藏元素的方法
    1、display: none;
        特点：不会显示且不占位置
        
    2、opacity: 0;
        特点：不会显示但会占位置（可以选择透明度，可替代第3个方法使用）
        
    3、visibility: hidden;
        特点：不会显示但会占位置（不可以选择透明度，被第2个方法所取代）
    
    
八、鼠标经过控制元素的显示隐藏
    
    
九、选择器nth系列【常用】
    1、指定选择器:first-child {css}
        查找指定选择器选中的标签的父元素，判断父元素的第一个子元素是否是指定选择器选中的元素，是就选中它，不是就不选中
    
    2、指定选择器:last-child {css}    
        查找指定选择器选中的标签的父元素，判断父元素的最后一个子元素是否是指定选择器选中的元素，是就选中它，不是就不选中
    
    3、指定选择器:nth-child(n) {css}
        查找指定选择器选中的标签的父元素，判断父元素中第n个元素是否是指定选择器选中的元素，是就选中它，不是就不选中（n的取值为自然数0，1，2，3，4，5...）
        注意这里括号内也可以是其他表达式，比如：
            2n        第偶数个元素（也可以写even）
            2n+1    第奇数个元素（也可以写odd）
            -n+5    前五个元素
            n+5        第五个及之后的元素
            ...        （还有很多其他表达式，根据需要自己写）
    
十、选择器of-type系列【常用】
    1、指定选择器:first-of-type {css}
        查找指定选择器选中的标签的父元素，选中父元素中第一个指定选择器选中的元素
    
    2、指定选择器:last-of-type {css}
        查找指定选择器选中的标签的父元素，选中父元素中最后一个指定选择器选中的元素
        
    3、指定选择器:nth-of-type(n) {css}
        查找指定选择器选中的标签的父元素，选中父元素中第n个元素（n的取值为自然数0，1，2，3，4，5...）
        注意这里括号内也可以是其他表达式，比如：
            2n        第偶数个元素（也可以写even）
            2n+1    第奇数个元素（也可以写odd）
            -n+5    前五个元素
            n+5        第五个及之后的元素
            ...        （还有很多其他表达式，根据需要自己写）        
    
十一、属性选择器
    1、[属性名] {css}
        1）表示选中有该属性的元素
    
    2、[属性名=属性值] {css}
        1）表示选中有该属性、且有对应的属性值的元素
    
    3、[属性名^=属性值] {css}
        1）表示选中有该属性、且属性值是以特定值开头的元素，例如[title^='abc']{}就是选中有title属性并且属性值以'abc'开头的元素
    
    4、[属性$=属性值] {css}
        1）表示选中有该属性、且属性值是以特定值结尾的元素，例如[title$='cba']{}就是选中有title属性并且属性值以'cba'结尾的元素
        
    5、[属性*=属性值] {css}
        1）表示选中有该属性、且属性值中包含特定值的元素，例如[title*='oo']{}表示选中有title属性并且属性值中含有'oo'的元素
    6、注意：
        以上的所有属性选择器都可以和其他选择器同时使用，例如a[title]表示选中满足既是a标签，又有title属性的元素

十二、表单选择器
    1、:focus {css}
        选中获取了焦点的表单，设置css样式
    
    2、:disabled {css}
        选中禁用的表单，设置css样式
    
    3、:enabled {css}
        选中可用的表单，设置css样式
    
    4、:read-only {css}
        选中只读的表单，设置css样式
    
    5、:required {css}
        选中带required属性的表单，设置css样式
    
    6、:checked {css}
        选中处于勾选状态的表单，设置css样式
        注意：
            这个选择器只能用于radio和checkbox类型的表单标签！！！
    
    7、::placeholder {css}
        选中表单的占位样式【常用】
        注意：
            这个选择器一般用于类型为文本的表单标签
            
            
十三、文本选择器
    1、查看某个css属性可以在浏览器中使用
        1）网址：
            https://caniuse.com
        2）输入想要查找的属性，会返回该属性在不同浏览器不同版本下是否支持
    
    2、和选择文本内容相关的选择器
        1）::selection{css}
            选中鼠标选中状态的文本，设置样式
            代码示例：
                p::selection{
                    color: pink;
                    }
                表示将p标签内被鼠标选中的文本文字变粉色
        2）::first-letter{css}
            也可以写成:first-letter{css}，选中文本内容中第一个字母，设置样式
        3）::first-line{css}
            也可以写成:first-line{css}，选中文本内容中第一行文本，设置样式
        4）:empty{css}
            选中文本内容为空的标签设置样式    
                

十四、目标选择器
    1、:target{css}
        选中点击超链接后，超链接锚点指向的标签（超链接锚点指向的id所在的标签），设置样式
        
    2、注意：
        当地址栏中锚点（hash）值变了之后，它会选择对应id所在的标签（因为标签的id属性具有唯一性，所以目标选择器一次只会选中一个标签）

十五、根选择器
    1、:root{css}
        完全等同于html{css}，选中根标签，设置样式，只是前者语义更强一些

十六、权重问题
    1、选择器权重由大到小分别是：
        1）!important(10000)
        2）行内样式(1000)
        3）id选择器(100)
        4）类选择器、伪类选择器、属性选择器(10)
        5）通配符(*)(0)

十七、兄弟选择器
    1、选择器1 + 选择器2 {css}
        先查找选择器1（指定选择器）所在元素的后一个兄弟元素，是否被选择器2所选中，是就选中它设置样式
        注意：
            这个选择器会先进行判断，满足条件才能选中，所以要注意需要选中的兄弟元素被选择器2所选中
    
    2、选择器1 ~ 选择器2 {css}
        选中选择器1所在元素后面的所有被选择器2选中的兄弟元素

十八、三角形绘制案例
    1、思路：先让元素宽高为0，再给元素设置四个方向不同背景色的border属性，使某两个方向的边框颜色变透明，实现三角形的绘制
    
    2、代码示例：
        给div设置如下css样式：
        div{
            width:0px;
            height: 0px;
            border: 50px solid blue;
            border-top-color: transparent;
            border-right-color: blue;
            border-left-color: transparent;
            border-bottom-color: blue;
        }

十九、梯形绘制案例
    1、思路：
        1）小矩形+三角形
        2）大矩形-三角形
        具体实现类似三角形的绘制
    

二十、字体图标
    1、字体图标下载-阿里图标库
        https://www.iconfont.cn
        
    2、具体下载流程
        从阿里图标库中找到想要的字体图标加入购物车，将字体图标打包下载代码，然后把代码文件放到项目文件夹中
        
    3、如何使用字体图标
        1）在html中用link标签引入iconfont.css文件，给需要使用字体图标的标签加上类名iconfont和具体图标的类名（这个类名在demo_index.html会有写）即可
        2）在html中用link标签引入iconfont.css文件，给需要使用字体图标的标签添加文本内容为对应字体图标的unicode编码，给这个标签设置font-family为字体图标的font-family属性值
        
    4、实现原理
        第一种方法是在iconfont.css中写入了具体图标类名的伪类(::before或者::after都可以)，使用图标类时将字体图标以伪类的方式写进来了；
        第二种方法是设置字体家族为字体图标所在的字体家族，unicode编码就是对应具体的字体图标