CSS笔记整理

Carsonhuang
180 阅读10分钟

一、盒模型

两种盒模型的比较，

  • content-box的宽高=内容的宽高
  • border-box的宽高=内容宽高+border+padding

默认情况下是content-box，当指定border、padding的时候，border-box更好用。通过box-sizing：border-box来指定。

二、外边距合并

有两种情况会合并：

  • 父子margin合并
  • 兄弟margin合并

只有上、下margin会合并，左、右margin不会合并。并且合并后的高度等于两者中的最大值。

如何阻止合并：

  • 父子合并可以用过设置padding、设置border、设置display：flex、设置overflow：hidden来阻止合并
  • 兄弟合并可以用inline-block消除

三、position属性

通过定位可以将元素摆放在任意位置

可选值：

  • static：默认值，元素是静止的，没有开启定位
  • relative：开启元素的相对定位
  • absolute：开启元素的绝对定位
  • fixed：开启元素的固定定位
  • sticky：开启元素的粘滞定位
1、相对定位（relative）

特点：

  1. 从元素开启相对定位之后，如果不设置偏移量元素不会发生任何的变化
  2. 相对定位是参照于元素在文档流中的位置进行定位的
  3. 相对定位会提升元素的层级
  4. 相对定位不会使元素脱离文档流
  5. 相对定位不会改变元素的性质，块还是块，行内还是行内

偏移量：

​ 当元素开启相对定位之后，可以通过偏移量来改变元素的位置

  • top：定位元素和定位位置上边的距离
  • bottom：定位元素和定位位置下边的距离
  • left：定位元素和定位位置左边的距离
  • right：定位元素和定位位置右边的距离
2、绝对定位（absolute）

特点：

  1. 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
  2. 开启绝对定位后，元素会从文档流中脱离
  3. 绝对定位会改变元素的性质，行内会变成块，块的宽高被内容撑开
  4. 绝对定位会使元素提升一个层级
  5. 绝对定位元素时相对于其包含块进行定位的
    • 包含块正常情况下，就是离当前元素最近的祖先块元素
    • 开启绝对定位后，包含块就是离它最近的开启了定位的祖先元素，如果所有祖先元素都未开启定位，则相对于根元素html进行定位
3、固定定位

也是一种绝对定位，大部分特点都和绝对定位一样

不同的是，固定定位永远参照于浏览器的视口（可视窗口）进行定位

固定定位不会随网页的滚动条滚动

4、粘滞定位

特点：

  1. 可以说是relative和fixed的结合
  2. 它主要用在对scroll事件的监听上，简单说在滑动过程中，某个元素的距离其父元素的距离达到 sticky 粘性定位要求时；position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。
  3. 不会脱离文档流

使用条件：

  1. 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性；

  2. 必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位；

  3. 父元素的高度不能低于sticky 元素的高度；

  4. sticky 元素仅在其父元素内生效；

5、绝对定位布局

开启绝对定位之后，水平方向的布局等式就需要添加left和right两个值，当发生过度约束时，

  • 如果9个值（left，margin-left，border-left，padding-left，width，padding-right，border-right，margin-right，right）中没有auto，则自动调整right值，以使等式成立
  • 如果有auto，则自动调整auto的值以使等式满足
  • 等式：left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块width
  • 可以设置auto值的有：margin，left，right，width
  • 因为left和right默认值为auto，所以如果不指定left和right，则等式不满足时，会自动调整这两个值

垂直方向布局等式也必须要满足

6、元素的层级

对于开启定位的元素，可以通过z-index来指定元素的层级，值越大，元素层级越高，优先显示

如果元素层级一样，则优先显示靠下的元素

祖先元素层级再高，也不会盖住后代元素

四、float属性

使元素浮动，脱离文档流

可选值：

  • none：默认值，元素默认在文档流中排列
  • left：元素会立即脱离文档流，向页面左侧浮动
  • right：元素会立即脱离文档流，向页面右侧浮动

特点：

  1. 元素会脱离文档流，下边的元素会立即向上移动
  2. 元素浮动后，会尽量向页面的左上或右上漂浮，直到遇到父元素边框或者其它浮动元素
  3. 如果浮动元素上面是一个没有浮动的元素，则浮动元素不会超过块元素
  4. 浮动的元素不会超过它上边的兄弟元素，最多一边齐
  5. 块元素脱离文档流后，高度和宽度都被内容撑开
  6. 行内元素脱离文档流后，会变成块元素
  7. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，可以通过浮动来设置文字环绕图片的效果

清除浮动：

​ clear属性：

​ 可选值：

  • none：默认值，不清楚浮动
  • left：清除左侧浮动元素对当前元素的影响
  • right：清除右侧浮动元素对当前元素的影响
  • both：清除两侧浮动元素对当前元素的影响

五、选择器

1、元素选择器

​ 作用：根据标签名来选中指定的元素

​ 语法：标签名{}

​ 例子：p{} h1{} div{}

2、ID选择器

​ 作用：根据元素的id属性值选中一个元素

​ 语法：#id属性值{}

​ 例子：#box{} #red{}

3、类选择器

​ 作用：根据元素的class属性值选中一组元素

​ 语法：.class属性值{}

​ 例子：.box{}

4、通配选择器

​ 作用：选中页面中的所有元素

​ 语法：*{}

5、交集选择器

​ 作用：选中同时复合多个条件的元素

​ 语法：选择器1选择器2选择器3选择器n{}

​ 例子：.a.b.c{}

​ 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

6、并集选择器分组

​ 作用：同时选择多个选择器对应的元素

​ 语法：选择器1,选择器2,选择器3,选择器n{}

​ 例子：#b1,.p1,h1,span,div.red{}

7、子元素选择器

​ 作用：选中指定父元素的指定子元素

​ 语法：父元素 > 子元素 {}

​ 例子：.box1 >.box2 {}

8、后代元素选择器

​ 作用：选中指定元素内的指定后代元素

​ 语法：祖先 后代 {}

​ 例子：div p {}

9、相邻的兄弟选择器

​ 作用：选中指定元素的相邻同级元素，具有相同的父元素

​ 语法：前一个 + 后一个 {}

​ 例子：div + p {}

10、一般同级选择器

​ 作用：选中指定元素的所有同级元素

​ 语法：兄 ~ 弟 {}

​ 例子：div ~ p {}

11、属性选择器

  • [属性名] 选择含有指定属性的元素

    p[title] {}

    选择含有属性值title的元素

  • [属性名=属性值] 选择含有指定属性和属性值的元素

    p[title="abc"] {}

    选择属性值为abc的元素

  • [属性名^=属性值] 选择属性值以指定值开头的元素

    p[title^="abc"] {}

    选择属性值以abc开头的元素

  • [属性名$=属性值] 选择属性值以指定值结尾的元素

    p[title$="abc"] {}

    选择属性值以abc结尾的元素

  • [属性名*=属性值] 选择属性值中含有某值的元素的元素

    p[title*="abc"] {}

    选择属性值中包含abc的元素

  • [attr~=value] 匹配带有一个名为attr的属性的元素 ，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。

    li[class~="a"] {}

    会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值。

  • [attr|=value] 匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。

12、选择器的优先级

选择器的权重

  • 内联样式 1,0,0,0
  • id选择器 0,1,0,0
  • 类和伪类选择器 0,0,1,0
  • 元素选择器 0,0,0,1
  • 通配选择器 0,0,0,0
  • 继承的样式 没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器，如果优先级计算后相同，此时则优先使用靠下的样式

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎用！

六、单位

  1. 像素（px）

    • 屏幕（显示器）实际上是由一个一个的小点点构成的

    • 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰

    • 所以同样的200px在不同的设备下显示效果不一样

  2. 百分比

    • 也可以将属性值设置为相对于其父元素属性的百分比

    • 设置百分比可以使子元素跟随父元素的改变而改变

  3. em

    • em是相对于元素的字体大小来计算的

    • 1em = 1font-size（默认是16px）

    • em会根据字体大小的改变而改变

  4. rem

    • 与em类似，rem是相对于根元素<html>的字体大小来计算

七、高度塌陷问题

1、问题

在文档流中，父元素高度默认是被子元素撑开的，也就是子元素多高，父元素就多高

但是，当子元素设置浮动之后，子元素完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失之后，其下的元素会自动上移，导致页面的布局混乱

2、解决方法

  1. 可以将父元素高度写死，但一旦写死，父元素高度不能自动适应于子元素高度（不推荐）

  2. 在W3C标准中，页面中元素都有一个隐含属性叫Block Formatting Context(BFC)。该属性可以设置打开或关闭，默认是关闭的。关于BFC的详细内容见下面。

  3. clear属性用来清除其他浮动元素对当前元素的影响

    • none：默认不清楚浮动
    • left：清除左侧浮动元素对当前元素的影响
    • right：清除右侧浮动元素对当前元素的影响
    • both：清除两侧中最大影响的那侧

    原理是：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

  4. 终极解决方案：

    利用clearfix来解决

    .clearfix::before,
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

    before可以用来解决父子外边距重叠问题，after可以用来解决高度塌陷问题

3、BFC相关内容

开启BFC以后，元素会有如下特点：

  1. 开启BFC的元素不会被浮动元素所覆盖
  2. 开启BFC的元素子元素和父元素外边距不会重叠
  3. 开启BFC的元素可以包含浮动的子元素

开启BFC的方式：

  1. 设置元素浮动，使用这种方式，随可以撑开父元素，但会导致父元素宽度丢失，会导致下边的元素上移（不推荐）

  2. 设置元素为inline-block，虽可以解决，但也会丢失父元素的宽度（不推荐）

  3. 将元素的overflow设置为一个非visible的值

    --常用方式为元素设置overflow：hidden，开启其BFC以使其可以包含浮动元素

avatar
文章
阅读
粉丝