深入CSS | 青训营

SimplyPanda
87 阅读14分钟

层叠

选择器的特异度

什么是特异度

如果有多条指向同一元素的冲突CSS规则，浏览器会遵循一些原则来确定哪一条来决定该元素样式。

如何计算特异度

根据选择器的优先级 "!import > style > id > 类|伪类 > 元素 > * "的顺序，数出相应选择器的个数，然后排成数字进行比较，如果相同则后者生效。

#nav .list li a:link

.hd ul.links a

第一行特异度为122——1(#nav)，2(.list，a:link)，2(Li，a)

第二行特异度为22 ——2(.hd，a:links)

继承

什么是继承

某些属性会自动继承父元素的计算值，除非显式指定一个值，即子标签会继承父标签的某些样式，如文本颜色和字号

<p>This is a <em>test</em> of <strong>inherit</strong></p> 
<style>
    body { 
        font-size: 20px;
    } 
    p { 
        color: blue; 
    } 
    em { 
        color: red;
    } 
    </style>

这段代码中，最终的显示结果是除em是红色外，其他都是蓝色。如果这里em不给color属性，那么它将要继承p标签的color属性

可继承的属性有哪些

一般与文字相关的属性（text-,font-,line- 这些元素开头的，以及color属性）都可以继承，但与盒模型相关的属性不能继承（宽度）

显示继承

  • 显示继承常用于将不可继承的元素变为可继承的
* { 
    box-sizing: inherit; 
} 
html { 
    box-sizing: border-box; 
} 
.some-widget { 
    box-sizing: content-box; 
}

在通配符选择器里面给box-sizing加上inherit属性值，表示让所有元素的box-sizing这个属性默认从父级继承

初始值

  • CSS中，每个属性都有一个初始值
    • background-color的初始值为transparent
    • margin-left的初始值为0
  • 可以使用initial关键字显示充值为初始值
    • backgournd-color：initial

CSS求值过程

image.png

image.png

image.png

布局

什么是布局

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

  • 常规流（文档流）
    • 行级、块级
    • 表格布局
    • FlexBox
    • Grid布局
  • 浮动
  • 绝对定位

盒模型

image.png

width

  • 指定 content box 宽度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其它属性确定
  • 百分数相对于容器的 content box 宽度

height

  • 指定 content box 高度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box 高度
  • 容器有指定的高度时，百分数才生效

Padding（内边距）

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度
  • 10px 20px 表示上下10，左右20，1px 2px 3px 4px 则是按照上右下左的顺序

margin（外边距）

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • 使用margin：auto可以有居中的效果

外边距塌陷

  • 兄弟元素：相邻兄弟元素的marin-bottom和margin-top的值发生重叠 ，只会挑选最大边界范围留下

  • 父子元素：当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移

父子元素出现塌陷原因

1.父元素没有上边框

2.为第一个子元素上设置外边框时

解决方案

1为父元素增加上边框 border-top

2通过为父元素设置上内边距来取代子元素的上外边距 padding-top

3在父元素中首部增加一个空 <table>元素（触发bfc）

4父元素加一个：before伪元素

    body:before{  
    content:"";  
    display:table;  
}

border（边框）

  • 指定容器边框样式、粗细和颜色

    • none 无边框
    • solid 实线
    • dashed 虚线
    • dotted 点线

  • 属性

    • border-width
    • border-style
    • border-color

  • 方向

    • border-top
    • boder-right
    • border-bottom
    • border-lef

利用border实现三角形

.arrow{
          height:0;
          width:0;
          border-width:50px 50px ;
          border-style:solid;
          border-color: red blue yellow pink ;
          display:inline-block;
        }

image.png

IE盒子模型

IE盒模型（也称为怪异盒模型）是在IE浏览器中使用的一种盒模型。在IE盒模型中，盒子的总宽度和高度包括了内容区域、内边距（padding）和边框（border），但不包括外边距（margin）。换句话说，内容区域的宽度和高度不包括内边距和边框的宽度和高度。

标准盒子模型

标准盒模型（也称为W3C盒模型）是在标准的CSS规范中定义的一种盒模型。在标准盒模型中，盒子的总宽度和高度包括了内容区域、内边距、边框和外边距。换句话说，内容区域的宽度和高度包括了内边距和边框的宽度和高度。

文字溢出（overflow）

  • 属性值

    • visible 往盒子下穿出显示
    • hidden 超出盒子的部分不显示
    • scroll 增加滚动条显示

块级、行级

Block Level BOXInline Level Box
不和其他盒子并列排放和其他行级盒子一起放在一行或拆成多行
使用所有的盒模型属性盒模型中的width、height不适用
body, article, div, main, section, h1~6, p, ul, li...span, em, strong, cite, code...
display: blockdisplay: inline

display属性

  • block 块级盒子
  • inline 行级盒子
  • inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
  • none 排版时被完全忽略

常规流

常规流布局 (normal flow) 是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

  • Inline Formatting Context (IFC)

  • 只包含行级盒子的容器会创建一个IFC

  • IFC 内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*
<div> 
    This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image 
    <img src="https://assets.codepen.io/59477/cat.png" alt="cat"> 
    And <em>Inline Block</em> 
</div> 
<style> 
    div { 
        width: 10em;
        //overflow-wrap: break-word; 
        background: #411; 
    } 
    em { 
        display: inline-block; 
        width: 3em; 
        background: #33c; 
    } 
    </style>

块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;

  • BFC 内的排版规则

    • 盒子从上到下摆放
    • 垂直 margin 合并
    • BFC 内盒子的 margin 不会与外面的合并
    • BFC 不会和浮动元素重叠
<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>

Flex Box

什么是Flex Box

  • 是一种用于网页布局的CSS3模块，它提供了一种灵活的方式来排列、对齐和分布元素，使得在不同屏幕尺寸和设备上的布局更加容易和响应式。

  • 它可以控制子级盒子的：

    • 摆放的流向 ( →  ←  ↑  ↓ )
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

Flex布局的特点包括

  1. 弹性容器：Flex容器的宽度可以根据剩余空间自动调整，使得元素自适应屏幕尺寸。
  2. 弹性项目：Flex项目可以根据容器的空间分配规则自动调整尺寸，实现灵活的布局。
  3. 主轴和交叉轴：Flex布局是基于主轴和交叉轴进行排列的，主轴决定了Flex项目的水平排列方式，交叉轴决定了Flex项目的垂直对齐方式。
  4. 对齐和分布：通过设置容器的对齐方式和项目的属性来实现不同的对齐和分布效果。

Flex布局相关属性

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
    border: 2px solid #966;
  }

  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }

  .a {
    background: #fcc;
  }

  .b {
    background: #cfc;
  }

  .c {
    background: #ccf;
  }
</style>

flex-direction

flex-direction：设置主轴的方向。

  • row（水平方向，默认）
  • row-reverse（反向水平方向）
  • column（垂直方向）
  • column-reverse（反向垂直方向）

image.png

justify-content

justify-content：设置Flex项目在主轴上的对齐方式。

  • flex-start（起点对齐，默认）
  • flex-end（终点对齐）
  • center（居中对齐）
  • space-between（两端对齐，项目之间间隔相等）

image.png

align-items

align-items：设置Flex项目在交叉轴上的对齐方式。

  • flex-start（起点对齐）
  • flex-end（终点对齐）
  • center（居中对齐）
  • baseline（基线对齐，默认）
  • stretch（拉伸对齐）

image.png

align-content

  • align-content：设置多行Flex项目在交叉轴上的对齐方式。
  • flex-start（起点对齐）
  • flex-end（终点对齐）
  • center（居中对齐）
  • space-between（两端对齐，项目之间间隔相等）
  • stretch（拉伸对齐，默认）

order

order：设置Flex项目的排列顺序。可以通过指定整数值来改变项目的排序方式，默认为0。

flex-grow

flex-grow：设置Flex项目的放大比例。默认为0，即不放大。

这里是将原本的剩余空间给a和b进行2：1的分配
<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2;
  }

  .b {
    flex-grow: 1;
  }
</style>

image.png

flex-shrink

flex-shrink：设置Flex项目的缩小比例。默认为1，即可以缩小

flex-basis

flex-basis：设置Flex项目在主轴上的初始尺寸。可以是长度值（如px、em等）或auto，默认为auto。

align-self

align-self：设置单个Flex项目在交叉轴上的对齐方式，覆盖容器的align-items属性。可以是flex-start、flex-end、center、baseline或stretch。

flex

flex：设置Flex项目的flex-grow、flex-shrink和flex-basis的简写方式。

flexflex-
flex: 1flex-grow: 1
flex: 100pxflex-basis: 100px
flex: 2 1flex-grow: 2; flex-shrink: 1
flex: 1 100pxflex-grow: 1; flex-basis: 100px
flex: 2 0 100pxflex-grow: 2; flex-shrink: 0; flex-basis: 100px
flex: autoflex: 1 1 auto
flex: noneflex: 0 0 auto

Grid布局

什么是Grid布局

Grid布局是一种用于网页布局的CSS模块，它提供了一种更灵活、更强大的布局方式，可以实现复杂的网格结构和对齐方式

image.png

Grid布局特点

  1. 需要更直观、更自由的布局方式：在传统的布局方法中，如使用float、position等，需要繁琐的计算和调整才能实现复杂的布局结构。而Grid布局通过直观的网格系统，可以更轻松地定义和调整布局。
  2. 响应式布局的需求：随着移动设备的普及，响应式布局变得越来越重要。Grid布局提供了更简单、更灵活的方式来实现响应式布局，通过定义网格的列数和行高，可以根据不同屏幕尺寸和布局要求调整网格结构。
  3. 对齐和间距的控制：传统布局方法在对齐和间距控制方面存在一些限制。而Grid布局提供了丰富的对齐和间距控制方式，如通过设置网格线、网格单元格间的间隔等，可以更精确地控制元素的位置和间距。
  4. 多列布局的需求：在一些网页设计中，需要以多列的方式展示内容，传统布局方法如float实现起来比较困难。Grid布局提供了简便的多列布局方式，通过定义网格模板和自动布局功能，可以轻松实现多列网页布局。

grid相关属性

display:grid

display：设置为grid，将元素设置为Grid容器。

grid-template-columns

grid-template-columns：定义网格的列宽。可以使用固定值（如100px）或百分比（如25%）指定列宽，也可以使用重复函数（如repeat(3, 1fr)）指定多个相同宽度的列。

grid-template-rows

  1. grid-template-rows：定义网格的行高。与grid-template-columns类似，可以使用不同的单位和函数来定义行高。
grid-template-columns：100px 100px 200px
grid-template-rows：100px 100px

image.png

/*auto表示剩余的占满*/
grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto

/*这里1f 表示指定的确定后，身下的各占一份*/
grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr

grid-template-areas

grid-template-areas：通过指定命名区域的方式创建网格模板，使得项目可以轻松地放置到特定的区域中。

grid-area

grid-area：通过指定网格模板中的命名区域，将项目放置到特定的区域中。

frid line 网格线

image.png 如何标记出黄色线左边这一块的区域

  1. 这里先给每条线加上编号

image.png 2. 然后在把a选中为行开始线1，列开始线1，行结束线3，列结束线3，有两种书写方式

 .a {
   grid-row-start: 1;
   grid-column-start: 1;
   grid-row-end: 3;
   grid-column-end: 3;
 }

.a {
  grid-area: 1/1/3/3;
}

浮动

什么是浮动

浮动（float）是CSS中一种常用的布局属性，用于控制元素在文档中的位置。通过设置浮动属性，可以使元素向左或向右浮动，脱离正常的文档流，并允许其他元素环绕在其周围。

当一个元素浮动时，它会尽量向左或向右移动，直到它的外边缘碰到包含它的容器的边缘或另一个浮动元素。其他内容将根据浮动元素的位置来重新定位。浮动元素会覆盖在非浮动元素之上，但会被文字环绕。

定位

postion:stati/relative/absolute/fixed

相对定位

relative 相对自身原本位置偏移，不脱离文档流

特点

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用 top、left、bottom、right 设置偏移长度
  • 流内其他元素当它没有偏移一样布局

绝对定位

absolute 绝对定位，相对非 static 祖先元素定位

特点

  • 脱离常规流
  • 相对于最近的非 static 祖先定位
  • 不会对流内元素布局造成影响

固定定位

fixed 相对于视口绝对定位

  • 固定位置：固定定位的元素会相对于视窗进行定位，永远保持在指定的位置不动，即使页面发生滚动。它的位置不会随着父元素或其他元素的变化而改变。
  • 脱离文档流：与其他定位方式不同，固定定位的元素脱离了文档流，不会对其他元素的布局产生影响。其他元素会忽略固定定位的元素，就好像它不存在一样。
  • 相对于视窗定位：固定定位的元素相对于视窗的左上角进行定位。通过设置top、right、bottom和left属性，可以确定元素相对于视窗的偏移位置。
  • 悬浮效果：由于固定定位的元素会随着页面滚动而保持在屏幕上的固定位置，因此它常常用于创建页面中的悬浮效果，例如固定导航栏、回到顶部按钮等。
  • 叠加顺序：固定定位的元素具有较高的叠加顺序（z-index），会覆盖其他非固定定位的元素。可以通过z-index属性来控制固定元素与其他元素之间的叠加关系。

总结

  • 选择器：CSS使用选择器来选择要应用样式的元素。常见的选择器包括元素选择器（如div、p），类选择器（以.开头，如.class），id选择器（以#开头，如#id），属性选择器（如[type=“text”]），伪类选择器（如:hover）、伪元素选择器（如::before）等。
  • 盒模型：CSS中的元素都被视为一个矩形的盒子，盒模型由内容区域、内边距、边框和外边距组成。可以使用相关属性（如width、height、padding、border、margin）来控制盒子的尺寸和间距。
  • 样式属性：CSS提供了各种样式属性来改变元素的外观。常见的样式属性包括背景属性（background），字体属性（font），文本属性（color、text-align、text-decoration等），定位属性（position、top、left等），尺寸属性（width、height），边框属性（border）等。
  • 布局技术：CSS提供了多种布局技术。其中，流动布局（Flow Layout）用于元素按照其在文档中出现的顺序自动排列。浮动布局（Float Layout）用于创建多栏布局及图片环绕文本等效果。弹性盒子布局（Flexbox）和网格布局（Grid）则提供了更灵活和强大的布局方式。
  • 继承和层叠：CSS中的样式可以通过继承和层叠的方式来应用到元素。继承指的是子元素会继承父元素的某些样式属性，例如文字颜色和字体。层叠指的是当多个样式规则应用到同一个元素时，浏览器通过一定的层叠规则来确定最终的样式。
avatar
文章
阅读
粉丝