深入CSS|青训营

coder_黑仔
92 阅读5分钟

这次笔记将不跟上两次一样,这次尽量长话短说,用六个问题解决这一次课的内容.至于字数嘛,我还是非常相信我自己的.

选择器的特异度&结构伪类选择器?

特异度这个名字听起来很高深啊,其实简单来说就是权重. 我记得我之前画过一个表格啊,大概就是这

css选择器权重
继承,通配符选择器0,0,0,0
元素选择器0,0,0,1
类选择器,伪类选择器0,0,1,0
id选择器0,1,0,0
行内样式1,0,0,0
!important正无穷

然后要注意一下:①这个权重是可以叠加的,例如 .box p,这就是 0,0,1,0 + 0,0,0,1 得 0,0,1,1.②如果权重相同,谁在后面执行谁的

这我本来还想分一个点的,因为本人不太会用Markdown语法这种编辑器,刚刚删序号删闷了,所以现在就懒得再起一个点,这边简单提一下结构伪类选择器.问就是因为我学过的全忘了.我还特地去b站看了一下pink老师的视频,这个知识点是真坑

html代码如下:

 <div class="section">
    <p>光头强</p>
    <div>熊大</div>
    <div>熊二</div>
  </div>

css代码如下:

.section div:nth-child(1) {
​
   background-color: red;
​
    }
 .section div:nth-of-type(1) {
​
   background-color: red;
​
    }

这边大家猜一下这两坨css代码分别的执行结果会是啥?

实际上,第一坨是无效代码,第二坨执行结果是熊大变色.

为什么?这确实是个坑.因为nth-child 他会先排序,排序之后,他会判断你符合顺序的元素是否是:前面的类型,如果不是,那你就白写啦.

而nth-of-type 这家伙比较老实,他会先找div,给div排序,排完序号再选.

  1. 继承?

    -默认情况下子元素会继承父元素的某些属性, 一般跟文字相关的都可以继承,和盒模型相关的都不可以继承.

    手动继承: 设置属性的值为inherit. 另外,设置为初始值的话,就是用initial(了解)

  2. 边框颜色问题?

    -这边有一个画三角形的案例啊,其实学了那么久我也还是没理解(哭)

    .box1 {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }

  3. vertical-align?

    -这玩意讲道理我自己几乎没用过,听过但是不曾用过,今天查漏补缺吧.

    MDN上的定义:CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

vertical-align 属性可被用于两种环境：

  • 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片
  • 垂直对齐表格单元内容。

这个是行内元素跟图片对齐用的,块级元素不好使.这个属性是给图片设置的,但是字动了,图片好像没有动的样子....

  1. flex布局?

-flex布局我已经学了不下三次,但是到现在仍然一言难尽.....所以,今天我将再一次学习一下flex布局.

justify-content :设置主轴子元素排列 ; align-content: 设置侧轴上的子元素排列方式 注意这两个属性都是给父亲加的

align-items: 设置子元素整体排列 align-self: 设置某个子元素的排列

flex-grow:拉伸比. 这个不好解释. 视频里是这么讲的: 假设这边我父元素宽度400,三个子元素一人占一百,那还剩下100.那这个100就按照flex-grow来分.没设置的就是一份

flex-shrink 这个是压缩比 如果为0就表示不能压缩

  1. grid布局?

-CSS Grid 是一种用于网格布局的 CSS 模块，它提供了一种强大而灵活的方式来创建复杂的网格结构。你可以在容器元素上应用 Grid 属性，将其子元素划分为行和列，并定义它们之间的关系。

下面是一些 CSS Grid 的基本概念和属性：

  1. 容器和项目：

    • 容器：应用 Grid 布局的父级元素称为容器。通过设置 display: grid; 可将其设置为网格容器。
    • 项目：容器中的子元素称为项目。每个项目都被放置在网格中的一个单元格中。

  2. 网格行和列：

    • 行：网格布局可以划分为多行。你可以使用 grid-template-rows 属性来定义行的大小和数量。
    • 列：网格布局也可以划分为多列。你可以使用 grid-template-columns 属性来定义列的大小和数量。

  3. 网格单元格：

    • 单元格：网格中的交叉区域称为单元格。每个项目都被放置在一个单元格中。
    • 单元格线：网格由水平和垂直的线组成，分别称为行线和列线。它们可以用于定位和对齐项目。

  4. 网格轨道：

    • 轨道：相邻的行线或列线之间形成一个轨道。水平轨道被称为行轨道，垂直轨道被称为列轨道。你可以使用 grid-template-rows 和 grid-template-columns 属性确定轨道的大小和数量。

  5. 网格模板：

    • 模板：使用 grid-template-rows 和 grid-template-columns 属性，你可以定义网格的布局模板。通过指定行和列的大小，数量和间距，你可以创建自定义的网格结构。

除了上述基本概念外，CSS Grid 还提供了其他属性和功能，如项目定位、对齐方式、网格间距等。你可以使用属性（例如 grid-row, grid-column, justify-items, align-items 等）来控制项目在网格中的位置和对齐方式。

avatar
文章
阅读
粉丝