css-part1 | 青训营笔记

用户1417010775793
113 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

1. 什么是CSS?

CSS(层叠样式表)

一份文档是由标记语言组织起来的文本文件，html是最常见的标记语言，展示一份文档给用户实际上是将文档变为用户可用的文件。（Chrome, firefox等都可以将文档在电脑屏幕，投影仪等设备上进行可视化）。CSS可以用于给文档添加样式，也可以用来创建布局，或者做一些特效。

2. CSS语法

CSS是一门基于规则的语言,利用选择器选择我们要添加样式的HTML元素。

selector {
    property： value;
}

3. 如何使用CSS

1.外部样式表

将CSS编写在扩展名为.CSS的单独文件中，并且从HTML中<link>元素引用它,中rel属性，让浏览器知道有CSS文档存在，

<link rel="stylesheet" href ="styles.css">

2.内部样式表

将CSS放在html文件<head>标签的<style>标签之中。

3.内联样式表

内联样式表存在于html元素的style属性之中，每个CSS只会影响一个元素。

4. CSS如何工作？

1. 浏览器载入HTML文件
2. 将HTML文件转化为一个DOM,其中DOM是文件在计算机内存中的表现样式。
3. 接下来拉取该HTML相关的大部分资源， 比如加载到页面的图片、视频、CSS样式。**（JS的处理在这之后）**
4. 浏览器拉取到CSS之后进行解析，将不同的规则应用在对应的DOM节点，并添加节点依赖的样式（渲染树）
5. 渲染树之后，渲染树会依照出现的结构进行布局。
6. 网页展示在屏幕上（着色）

⚡ Tips:

当浏览器在解析CSS代码时候遇到了无法理解的属性或者值，他会忽略这些并继续解析下面的CSS声明。

5. CSS选择器

通配符选择器：

    * {
        
    }

标签选择器（类型选择器/ 元素选择器）：

它在文档中选中了html标签/元素。

类选择器:

以一个句点.开头，选择到文档中所有的该类。

标签选择器:

以#开头，在一篇文档，一个ID只会用到一次。

属性选择器[]

使用属性选择器可以选中带有特定属性的元素

选择器示例说明
[attr]a[title]
[attr = value]a[href = "www.baidu.com"]匹配带有一个名为attr的属性的元素 （下例中选中Item 2）
[attr~=value]a[class~="special"]匹配带有一个名为attr的属性的元素,其值为value;匹配一个带有attr属性的元素，其值有一个或者多个，至少一个与value匹配（下例中选中Item 2 以及Item 3）
[attr|=value]div[lang|="zh"]匹配一个带有attr属性的元素，其值为value;或者开始为value,后面紧随一个连字符
[attr^=value]a[class^="a"]匹配带有一个名为attr属性的元素，其值开头为value子字符串
[attr$=value]a[class$="a"]匹配带有一个名为attr属性的元素，其值结尾为value子字符串
[attr*=value]a[class*="a"]匹配带有一个名为attr属性的元素，其值的字符串的任何地方至少出现了一次value子字符串
<ul>
    <li>Item 1</li>
    <li class="a">Item 2</li>
    <li class="a b">Item 3</li>
    <li class="ab">Item 4</li>
</ul>

伪类

伪类是选择器的一种，以冒号开头，用于选定处于特定状态的元素，表现得像是一个类在用户和元素交互的时候加到了元素上一样。

    ：last-child
    : only-child
    : invalid

还有一些伪类只会在用户以某种方式与文档交互的时候应用，称为动态伪类

    ：hover 
    : focus

伪元素

伪元素以双冒号::开头，表现得像是往标记文本中加入全新的html元素。

    ::first-line 选中第一行
    ::before  文本插入元素开头
    ::after 文本插入元素末尾

伪元素经常用于插入空字符串，其后可以像页面上的其他元素一样被样式化。
应用：

.box::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    border: 1px solid black;
}  

上例中，首先使用::before伪元素加入了一个空字符串，将其设置为了display：block;此时就可以使用width以及height进行样式化。

关系选择器

后代选择器： 常见单个空格字符组合两个选择器 例如A B(当AB直接组合，两者都要满足才会生效)
子代关系选择器： 采用>，只会在选择器中选中直接子元素进行匹配；
邻接兄弟： 同一继承关系的元素旁边的元素

   p + img

表示选中所有紧随在<P>元素之后的<img>元素

通用兄弟：

    p ~ img

表示选中p元素之后任何地方的img元素

示例：

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

在body内部紧跟在h1后边的p元素的内部类名为special 为其添加样式

6. 盒模型

盒模式布局规则：

块级block level box： 不会和其他盒子并排摆放 适用于所有的盒模型

行级liline level box: 和其他行级盒子一起放在一行或者拆开多行，盒模型中的width /height不再适用

完整的CSS盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。

块级盒子

  • 每个盒子都会换行
  • [width] 和 [height]可以发挥作用
  • 内边距padding, 外边距margin,边框border会将其他元素从当前盒子周围推开。

内联盒子

  • 盒子不会产生换行。
  • [width] 和 [height]属性将不起作用。
  • 垂直方向的内边距，外边距会被应用但是不会影响其他处于inline状态的盒子；

例如对<span>应用了宽度、高度、边距、边框和内边距。宽度和高度被忽略了外边距、内边距和边框是生效的。

⚡： display提供一个特殊的inline-block属性值，对不希望换行但是想要设置宽度以及高度的情况适用。此时：

  • width和height将会生效

  • padding, margin, border会推开其他元素

注意： display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式

完整的盒模型

image.png

标准盒模型

在标准模型下，给盒子设置width以及height,实际上设置的是content box；padding以及border(margin:不计入实际大小，他会影响盒子在页面中所占的空间，但是影响的是外部空间。)再加上width/height才是真正的宽高。

替代盒模型

浏览器默认使用的是标准盒模型，box-sizing: border-box设置为替代模型。该模型中所有宽度就是可见宽度，内容宽度就是该宽度减去边框以及填充部分。

元素布局

块级元素的内容是其父元素的100%，其高度与内容高度一致；
内联元素的`width`,`height`与内容一致，

外边距折叠：

以下三种情况会触发外边距重叠

  • 当存在两个外边距相接的元素，两个外边距会合并成为一个外边距，即最大的单个外边距的大小。

  • 没有内容将父元素和后代元素分开 如果没有边框，内边距，行内内容或块级格式上下文或清除浮动来分开一个块级元素的边界与多个后代块级元素的边界，父代元素会和后代块元素边界重叠。

  • 空的块元素

CSS的溢出

首先，css默认不会隐藏内容，overflow属性是控制元素溢出的方式， 默认值为visible.

    overflow: hidden;
    overflow: scroll;
    overflow: auto;

当使用scroll/auto时候，就建立了一个块级排版上下文。

flex模型

想要设置行内元素为 flexible box，也可以置 display属性的值为 inline-flex。
指定主轴方向： flex-direction
换行： flex-wrap
控制flex项占用空间的比例：

article {  
        flex: 1;
    }

无单位的比例值，表示每个flex项沿主轴的可用空间的大小。

控制flex项在侧轴上的位置: align-items

控制flex项在主轴上的位置: justify-content

块级排版上下文BFC

一个BFC区域包含创建该上下文元素的所有子元素，但是不包含创建了新的BFC的子元素的内部元素，即每一个BFC区域只包含其子元素，但是不包括子元素的子元素。 每一个BFC区域之间互相独立，互不影响。

某些容器会创建一个BFC:

  • 根元素(html本身就是一个独立的BFC环境)
  • 浮动,不包括none
  • 绝对定位 （absolute, fixed）
  • inline-block
  • flex子项 和grid子项
  • overflow值不是visible的块盒
  • display: flow-root;

规则：

  • 内部的盒子从上到下挨着摆放
  • 垂直方向上的间距由margin决定
  • 在同一个BFC,相邻box之间的margin会折叠
  • 在BFC，每个元素左边缘都是紧挨着包含块的左边缘

BFC的作用

解决外边距塌陷

常见示例： 两个盒子都有100px的外边距，但是实际上两个盒子的距离只有100px

分析：这是因为box1,box2同属于html这个BFC，在同一个BFC,相邻的box之间会产生的折叠。

此时给盒子box1本身加上BFC是不行的，因为此时两个盒子还是同属于html这个BFC,需要给当前box1的父元素添加BFC，此时盒子属于一个新的BFC （假定命名为container.）则与box2不再产生折叠问题。（此时container和box2同属于一个BFC,如果有margin还是会折叠。）

    /*将一个元素设置为BFC*/
    .bfc {
        overflow: hidden;
    }

解决包含塌陷

常见示例：子元素距离父元素50px,但是给子元素加margin，此时父元素就会随之塌陷；

解决方案：将父元素变成BFC区域

防止文字环绕

浮动的盒子会遮住下面的盒子，但是文字不会被遮住，环绕浮动的盒子（这正是float）设计的初衷。此时可以使用BFC防止文字环绕。

解决浮动元素的高度塌陷问题：

需要满足的两个条件：

  1. 浮动元素的父元素触发BFC
  2. 浮动元素的父元素高度是auto的

<style>

.container {
      background-color: orange;
}
.item {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    float: left;
    background-color: #fff;
}
</style>
<div class="container clear_fix">
    <div class = "item"></div>
    <div class = "item"></div>
    <div class = "item"></div>
    <div class = "item"></div>
</div>

上例代码中，浮动是脱离标准流的，不会再将高度汇报给父元素，父元素最终高度为0，不会产生背景色。在container添加 BFC即可改变，不设置高度默认为auto。

avatar
文章
阅读
粉丝