CSS

HTML5 新特性、语义化

概念：合理使用语义化标签来进行更好的创建页面结构

• 1. 常见语义化标签(小部分)
  • header：网页页头
  • footer：网页页脚
  • label：input 绑定标题
  • nav：导航栏
  • canvas：画布
  • video：视频
  • audio：音频
  • main：内容快
• 2. 优点
  • 有利于 SEO 搜索引擎优化，搜索引擎会根据不同的标签来给不同的权重
  • 代码结构清晰，方便阅读，有利于开发和维护
  • 在没有 css 样式的情况下也可以展示不错的页面结构

CSS3 新特性

• 1. box-sizing：content-box | border-box 设置盒模型
• 2. 边框新属性
  • border-radius 边框圆角
  • box-shadow 边框阴影
  • border-image 图片边框
• 3. css3选择器
  • last-child 选择父元素的最后一个指定元素
  • first-child 选择父元素的第一个指定元素
  • nth-child(n) 选择父元素的第 n 个指定元素
• 4. transform 转换
  • transform：translate(x,y) 位移x
  • transform：scale(x,y) 缩放
  • transform：rotate() 旋转
• 5. animation 动画
• 6. 背景颜色渐变
• 7. fiex 弹性布局、Grid 栅n格布局

css 盒模型

设置盒模型：box-sizing：content-box | border-box - content-box：标准盒模型，元素的宽高只包含内容的宽高，不包含 border、padding、margin - border-box：IE 盒模型，元素的宽高包含 content + border + padding n

CSS BFC

概念：BFC(块级格式上下文) css 中一种布局方式，BFC 创建一个独立布局快，里面的子元素不影响外面的布局，计算 BFC 高度时浮动元素也参加计算高度。

• 1. 使用场景
  • 解决外边距重叠(塌陷)
  • 清除浮动，避免元素被浮动元素覆盖
  • 避免多列布局时宽度不够四舍五入进行换行
• 2. 如何创建 BFC
  • 根元素，HTML 元素
  • float 不为 none
  • display 不为 inline-block、table-call、table-caption
  • overflow 不为 visible
  • position 为 flexd 和 absolute
• 3. IE 浏览器如何创建 BFC
  • IE 浏览器中的 Layout 布局和 BFC 是等价的，IE 浏览器中需要添加 zoom:1 来触发 Layout

float 浮动和清除浮动

语法：float: left (向左浮动) | right (向右浮动) | none (默认不浮动) 概念：浮动会使元素脱离标准文档流，不占用布局空间，从而影响后面标准文档流元素的布局

• 清除浮动
  • 1. 给浮动的父元素设置高度
    • 父元素有了自己的高度，后面标准文档流盒子不受影响，如果没有设置高度在没有清除浮动的情况下父元素的高度为 0，从而影响后面元素的布局排列。
  • 2. 额外标签法
    • 在浮动元素的末尾添加额外的标签，添加样式 cleat：both
  • 3. 父元素设置样式 overflow：hidden | auto | scroll
  • 4. 伪元素清除浮动

       .cleat:after{
           content:'',
           display:block,
           height:0,
           clear:both,
       }

CSS 选择器和优先级

选择器

• id选择器、类选择器、属性选择器、标签选择器、子代选择器、后代选择器、通配符选择器

    *{ // 通配符选择器
        margin: 0;
    }
    #root{ //id选择器
        color:red;
    }
    .box{ //类选择器
        width: 100px;
    }
    div{ // 标签选择器
        height: 100px
    }
    div > p{ // 子代选择器
        color: red;
    }
    div p{ // 后代选择器
        width: 50px;
    }
    p[title]{ //属性选择器
        height: 20px;
    }
    
    <div id="root" class="box" >
        <p title="abc"></p>
    </div>

• 伪类选择器

    div > p:first-child{ color: red; } // 选择 div 下第一个 p 元素
    div > p:last-child{ color: green; } // 选择 div 下最后一个 p 元素
    div > p:nth-child(2){ color: yellow; } // 选择 div 下第二个 p 元素

    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>

优先级

• 1. !important 会覆盖页面内的元素样式
• 2. 内联样式 style="color:red;"
• 3. id 选择器
• 4. 类、伪类、属性选择器
• 5. 标签、伪元素选择器
• 6. 通配符、子类选择器、兄弟选择器
• 7.继承样式

position 有哪些属性

• absolute 绝对定位
  • 相对于有定位的父元素或者祖父元素定位，脱离标准文档流，不占用空间
• relatve 相对定位
  • 相对于元素自身位置定位，没有脱离标准文档流，占据空间
• flexd 固定定位
  • 相对于浏览器窗口定位，不会随着滚动条移动
• static 默认值
• sticky 粘性定位(固定定位和相对定位结合点)
  • 粘性定位占有原来元素的空间(相对定位特点)
  • 粘性定位以浏览器窗口定位,在添加偏移值时不会随着滚条移动(固定定位特点)
    • 偏移值指设置了 left、top、right、bottom 不为 0
  • overflow 值为 hidden、auto、scroll 时粘性定位会失效

display:none 与 visibility:hidden 区别

• display:none 元素隐藏后不占用布局位置(会触发重排重绘)
• visibility:hidden 元素隐藏后继续占用布局位置(只会触发重绘)

css 实现三角形

    div{
        width:0;
        height:0;
        border-top:10px solid transparent;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        border-bottom:10px solid red;
    }
    
    <div></div>

css 垂直水平居中

    <style>
        div{
            width:500px;
            height:500px;
        }
        p{
            width:50px;
            height:50px;
        }
    </style>
    
    <div>
        <p></p>
    </div>

• flex 布局，不需要知道元素宽高

    div{
        display:flex;
        justify-content:center;
        align-items:center;
    }

• position + transform 不需要知道子元素宽高

    div{
        position:relativ;
    }
    p{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%)
    }

• position + absolute + margin

    div{
        position:relative;
    }
    p{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }