【前端笔记】css知识点记录

晨光微路
215 阅读4分钟
css知识点，先记录下，之后再慢慢整理和补充。

css命名原则

1. 根据内容命名 intro product
2. 根据内容的功能命名 menu nav 
3. 根据位置命名 first second left right

css布局原则

- 从大到小 从外到里
- 先分行 再分列 
- 注意内容的相关性
- 不同类型的元素不要混着用
- 浮动元素的同级都要浮动 并且父级要清浮动

文档流

页面上的元素 按照从上到下，从左到右排列

可替换元素

显示内容取决于元素属性 类似于行块盒 可设置宽高 img video audio

行盒盒模型

盒子沿内容延伸 不能设置宽高 内外编剧水平方向上有效 垂直方向上不会占据实际空间

视觉格式化模型

指多个盒子的排列规则

BFC（块级格式化上下文）

一块独立的渲染区域 规定了在该区域中常规流块盒的布局方式(水平方向上撑满 垂直方向上依次排列)
产生：
    - float值不为none;
    - overflow值不为visible
    - display的值为inline-block、table-cell、table-caption
    - position的值为absolute 、 fixed
作用：
    - 解决父级高度塌陷问题（清除浮动）
    - 阻止margin传递
    - 不被浮动元素覆盖

表格的基本组成

<table>  表格
    <caption></caption> 表格标题
    <thead> 表格头部
        <tr> 行
            <th></th> 列
            <th></th> 列
        </tr>
    </thead>
    <tbody> 表格主体
        <tr> 行
            <th></th> 列
            <th></th> 列
        </tr>
    </tbody>
    <tfoot> 表格底部
        <tr> 行
            <th></th> 列
            <th></th> 列
        </tr>
    </tfoot>
</table>

表格的样式
- 样式表样式
  border-spacing(单元格margin 相当于cellspacing)
  border-collapse:collapse(单元格合并：separate分离，默认值collase 边框合并为单一边框)
- 操作单元格合并
 rowspan 行合并（使用：<td rowspan="2">哈哈</td>）
 colspan 列合并（使用：<td colspan="5">嘿嘿</td>）

结构伪类选择器

  • 结构伪类选择器列表

    参考文档 MDN（鼠标下滑找到伪类列表这一块）

    1. nth-child
    p:nth-child(3){} // p标签父级下的，正数第3个子级如果是p标签，则添加样式
p:nth-last-child(3){} // p标签父级下的，倒数第3个子级如果是p标签，则添加样式
p:first-child{} // p标签父级下的，正数第1个子级如果是p标签，则添加样式
p:last-child{} // p标签父级下的，倒数第1个子级如果是p标签，则添加样式
    1. nth-of-type
    p:nth-of-type(3){} // 找到p标签父级下的，正数第3个为p标签的子级，添加样式
p:nth-last-of-type(3){} // 找到p标签父级下的，倒数第3个为p标签的子级，添加样式
p:first-of-type{} // 找到p标签父级下的，正数第1个为p标签的子级，添加样式
p:last-of-type{} // 找到p标签父级下的，倒数第1个为p标签的子级，添加样式
    1. empty
    body *:empty{} // 找到body下的空标签
    1. only-child
    body *:only-child{} // 找到body下，标签中只有一个子级的元素
    1. not
    body *: not(.p){} // 选中body下所有的标签，除了class为.p的
    1. target
    #div:target{} // 该选择器必须结合锚点，当url地址和id命名一致时，添加该样式

  • 结构选择器

    参考文档 MDN

    1. ~：毗邻元素选择器
    .p ~ h3{} // 选中class为.p的元素后所有的同级h3标签
    1. +：相邻选择器
    p + h3 // 选中p标签的下一个兄弟节点，如果为h3，则添加样式

    3.>：子元素选择器

    ul > li{} // 选择当前ul下的li，该li是直接子级（而不是子级里面的子级）

  • 针对文本类型

    1. first-letter
    p:first-letter{} // 选中第一个文字
    1. first-line
    p:first-line{} // 选中第一行位置
    1. selection
    p::selection{} // 被选中时候的样式

  • CSS3动画 属性|可选值|描述 ---|--|:---: animation-duration|-|指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0。 animation-timing-function|linear、ease、ease-in、ease-out、ease-in-out|指定动画计时函数，即动画的速度曲线，默认是 "ease"。 animation-delay|-|指定动画延迟时间，即动画何时开始，默认是 0。 animation-iteration-count|-|指定动画播放的次数，默认是 1。 animation-direction|normal、reverse、alternate、alternate-reverse |指定动画播放的方向。默认是 normal。 animation-name|-|指定 @keyframes 动画的名称 animation-fill-mode|forwards、backwards、both、|指定动画填充模式。默认是 none。 animation-play-state|running、paused|指定动画播放状态，正在运行或暂停。默认是 running。

avatar
文章
阅读
粉丝