CSS笔记

ONEJX
273 阅读14分钟

1.CSS概述

什么是CSS？

CSS(Cascading　Style　Sheet)中文译为“层叠样式表”,

CSS主要是对HTML标记的内容进行更加丰富的装饰，并将网页表现样式与网页结构分离的一种样式设计语言。可以使用CSS控制HTM页面中的文本内容、图片外形以及版面布局等外观的显示样式

为什么使用CSS？

CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。

只要修改保存着网站格式的CSs样式表文件就町以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。

CSS的基本语法

选择器{
    属性名:属性值;
    /*这里是注释*/
}

注意事项：

  • 所有符号都是英文符号,写错了浏览器会警告
  • 区分大小写,a和A是不同的东西
  • 没有//注释
  • 最后一个分号可以省略,建议不要省略

CSS的版本

1.png

2.标准文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

无标题.png

2.1标准文档流等级

分为块级元素和行内元素：

块级元素(block)：

  1. 独占一行，不能与其他任何元素并列
  2. 可以设置宽、高
  3. 如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽 行内元素(inline)：
  4. 与其他元素并排
  5. 不能设置宽、高。默认的宽度就是content的宽度 可以使用display属性自行设置等级

2.2脱离文档流

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间

那么怎么脱离文档流呢？

  1. float:left/right
  2. position:absolute/fixed

3.CSS盒模型

什么是盒模型？

我们可以把HTML元素看作一个盒子
盒模型(Box Model)是规定了网页元素如何显示，元素间的相互关系。
盒模型的组成为分为以下几个部分：
content（内容区）：元素的宽和高；
border（边框区）：盒子的边缘；
padding（填充区）：为了使页面布局看起来美观大方，盒子里的内容区会用padding来解决父元素和子元素的位置关系；
margin（外边界区）：控制同辈元素之间的位置关系。

2.png

CSS盒模型分为两种，一种是content-box(内容盒),一种是border-box(边框盒)。

  • content-box(内容盒)：盒子宽度只包含content内容
  • border-box(边框盒)：盒子宽度包含了content（内容区）+border（边框区）+padding（填充区）的总和 一般优先使用后者

4.CSS布局

CSS布局方式用很多种，怎么根据需要选择呢?

3.png

4.1 float布局

float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

img{
    float:left;
}

上面代码就会使图片向左浮动

但元素浮动之后就会使其脱离标准文档流，造成父元素高度坍塌
所以我们要清除浮动所带来的影响:

.clearfix::after{
    content:'';
    display:block;
    clear:both;
}

上面代码给浮动元素的父元素写上就可以解决这个问题

4.2 flex布局

Flex(Flexible Box)布局表示弹性布局，可以为盒状模型提供最大的灵活性，他可以作用到任何一种元素上

4.2.1container容器

1.png

flex container有一下几个样式：

  1. 让一个元素变成flex容器
.container{
    display:flex;
}
  1. 改变items流动方向(主轴)

2.png

.container{
    flex-direction: row | row-reverse | column | column-reverse;
}
  • row：从左往右排序
  • row-reverse：从右往左排序
  • column：从上往下排序
  • column-reverse：从下往上排序
  1. 改变折行

3.png

.container{
    flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap：默认值。不换行
  • wrap：内容到头换行
  • wrar-reverse：内容到头以相反的顺序换行
  1. 主轴对齐方式 默认主轴是横轴，除非你改变了flex-direction的方向

4.png

.container{
    justify-content: flex-start | flex-end | center | space-between | space-around;
}
  • flex-start：默认值。内容位于容器的开头
  • flex-end：内容位于容器的结尾
  • center：内容位于容器的中心
  • space-bwtween：内容位于各行之间留有空白的容器内(效果如图)

5.png

  • space-around：内容位于各行之前、之间、之后都留有空白的容器内(效果如图)

6.png 4. 次轴对齐方式 默认次轴是纵轴

7.png

.container{
     align-items: stretch | flex-start | flex-end | center | baseline;
}
  • stretch：默认值。元素被拉伸以适应容器
  • flex-start：元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
  • flex-end：元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
  • center：元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置
  • baseline：元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  1. 多行内容

8.png

.container{
     align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
  • stretch：默认值。元素被拉伸以适应容器
  • flex-start：内容位于容器的开头
  • flex-end：内容位于容器的结尾
  • center：内容位于容器的中心
  • space-bwtween：内容位于各行之间留有空白的容器内
  • space-around：内容位于各行之前、之间、之后都留有空白的容器内

4.2.2 flex item

  1. oder属性 可以设置或检索弹性盒模型对象的子元素出现的順序

9.png 2. flex-grow属性 用于设置或检索弹性盒子的扩展比率

1.png 3. flex-shrink属性

属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值

一般写作 flex-shrink:0,默认为1

4.3.Grid布局

  • CSS Grid（网格）布局，是一个二维的基于网络的布局系统。
  • 采用grid布局的元素，被称为grid容器(grid container)，简称“容器”。其所有直接子元素（直接子元素的子元素不包含在内）自动成为容器成员，称为grid项目(grid item)，简称“项目”

通过设置CSS属性display: grid;  可以定义一个CSS网格

.container{ 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
}

<div class="container">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>

1.png 上面的例子创建了一个有三列的显式将行

4.3.1 Grid属性列表

Grid Container的全部属性

  • display：将元素定义为grid container，并为其内容建立新的网格格式化上下文(grid formatting context)
  • grid-template-columns，grid-template-rows：使用以空格分隔的多个值来定义网格的行和列，这些值表示网格轨道(Grid Track) 大小，它们之间的空格表示网格线
.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto; 
}

2.png

  • fr单元允许等分网格容器剩余可用空间来设置网络轨道的大小。例如，下面的代码会将每个网格项设置为网格容器宽度的三分之一：
.container{ 
    grid-complate-columns: 1fr 1fr 1fr;
}
  • grid-template-areas：通过引用grid-area属性指定的网格区域的名称来定义网络模板

示例：创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。 最后一行由footer区域组成


        .a {
            grid-area: header;
            background-color: green;
        }

        .b {
            grid-area: main;
            background-color: blue;
        }

        .c {
            grid-area: sidebar;
            background-color: red;
        }

        .d {
            grid-area: footer;
            background-color: gray;
        }

        .container {
            grid-template-columns: 200px 200px 200px 200px;
            grid-template-rows: auto;
            grid-template-areas:
                "header header header header"
                "main main . sidebar"
                "footer footer footer footer";
    }

3.png

  • grid-template：grid-template-columns，grid-template-rows和grid-template-areas的简写
  • grid-column-gap，grid-row-gap：指定网格线的宽度，可以理解为设置列/行之间的间距宽度
.container{ 
    grid-template-columns: 100px 50px 100px; 
    grid-template-rows: 80px auto 80px; 
    grid-column-gap: 10px;
    grid-rows-gap: 15px;
     }

4.png

  • grid-gap：grid-row-gap 和 grid-column-gap 的简写
.container{ 
    grid-gap: grid-row-gap | grid-column-gap;
}
  • justify-items，align-items：沿着行/列轴对齐网格内的内容，适用于容器内的所有的grid items，属性值有四个 1.) stretch（默认值）：内容宽度/高度占据整个网格区域空间

1.4.png

2.) start：内容与网格区域的左端/顶端对齐

1.1.png

3.) end：内容内容与网格区域的右端/底部对齐

1.2.png

4.) center：内容位于网格区域的中间/垂直中心位置

1.3.png

  • place-items：align-items 和 justify-items 的简写
.container{ 
    place-items: align-items | justify-items;
}
  • justify-content，align-content：可以设置网格容器的内的网格对齐方式，沿着行/列轴对齐网格，属性值有7个： 1.) start：网格与网格容器的左边/顶部对齐

1.png

2.)end：网格与网格容器的右边/底部对齐

2.png

3.)center：网格与网格容器的中间对齐

3.png

4.)stretch：调整grid item 的大小，让宽度/高度填充整个网格容器

4.png

5.)space-around：在 grid item 之间设置均等宽度/高度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半

5.png

6.)space-between：在 grid item 之间设置均等宽度/高度空白间隙，其外边缘无间隙

6.png

7.)space-evenly：在每个 grid item 之间设置均等宽度/高度的空白间隙，包括外边缘

7.png

  • place-content：- 设置 align-content 和 justify-content 的简写
.container{ 
    place-content: align-content | justify-content; 
}

Grid Items 的属性

  • grid-column-start，grid-column-end，grid-row-start，grid-row-end： 使用特定的网格线确定 grid item 在网格内的位置。grid-column-start/grid-row-start属性表示grid item的网格线的起始位置，grid-column-end/grid-row-end属性表示网格项的网格线的终止位置，属性值有：

1.) <line>：可以是一个数字来指代相应编号的网格线，也可以使用名称指代相应命名的网格线
2.) span<number>：网格项将跨越指定数量的网格轨道
3.) span<name>：网格项将跨越一些轨道，直到碰到指定命名的网格线
4.) auto：自动布局，或者自动跨越，或者跨越一个默认的轨道

  • grid-column，grid-row：grid-column-start+ grid-column-end，和grid-row-start+ grid-row-end 的简写形式，属性值为<start-line> / <end-line>，每个值的用法都和属性分开写时的用法一样，例：
.c{ 
    grid-column: 3 / span 2; 
    grid-row: 1 / 4;
}
  • grid-area：给 grid item 进行命名以便于使用 grid-template-areas属性创建模板时来进行引用

5.position定位

布局和定位的区别

布局是屏幕平面上的，定位是垂直于屏幕的

一个div的分层

10.png

5.1 position的属性

  • static(默认值):待在文档流里
  • relative:相对定位，浮起来，但不会脱离文档流，一般都是用来给absolute定位当爹的
  • absolute：绝对定位，定位基准是第一个使用定位（非static）的祖先元素
  • fixed：固定定位，定位基准是整个视口
  • sticky:css3新属性,基于用户的滚动位置来定位

5.2 z-index

z-index 属性指定一个元素的堆叠顺序。 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

  • auto：默认值。堆叠顺序与父元素相等，不创建新的 层叠上下文
  • numder：设置元素的堆叠顺序。。。。-1/0/1/2

5.3 层叠上下文

层叠上下文(stacking context)，是HTML中一个三维的概念。每个层叠上下文就是一个新的世界(作用域)，这个小世界里的z-index与外界的无关，处在同一个世界里的z-index才可以比较

1.jpg

一些不正交的属性才可以创建它，比较重要的有:

  • 文档根元素（<html>）
  • position为absolute或relative 并且 z-index的值不为auto的元素
  • position为fixed或sticky的元素
  • flex容器的子元素 并且 z-index的值不为auto
  • grid容器的子元素 并且 z-index的值不为auto
  • 使用transform并且不为none的元素

6. CSS动画

一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。 动画属性可以逐渐地从一个值变化到另一个值，比如变形、尺寸大小、数量、百分比和颜色。

但在这之前我们需要先了解一下浏览器的渲染原理

6.1 浏览器渲染原理

浏览器的渲染过程：

1.) 浏览器根据HTML构建HTML树（DOM）
2.) 浏览器根据CSS构建CSS树（CSSOM）
3.) 将两棵树合并成一棵渲染树（render tree）
4.) 根据渲染树来布局，计算每个节点的位置
5.) 调用 GPU 绘制，合成图层，显示在屏幕上

1.png 一般我们都会用JS来更新样式,比如：

  • div.style.background = 'red'
  • div.style.display = 'none'
  • div.classList.add = 'red'
  • div.remove() 浏览器有三种不同的渲染方式，这些更新方法的渲染方式都有所不同

2.png

  1. 流程全走：div.remove()会触发当前消失，其他元素重新布局（relayout）
  2. 跳过Layout：改变背景颜色，直接重新绘制+合成
  3. 跳过Layout+Composite：改变transform，只需Composite

6.2 transform属性

四个常用功能：

  • translate：可以使元素沿X轴或Y轴位移
div{
    transform:translate(x,y);
}
  • scale：可以使元素放大或者缩小
div{
    transform:scale(1.5);
    /*元素放大1.5倍*/
}
  • rotate：可以使元素沿着一个方向旋转
div{
    transform:rotate(angle);
}
  • skew：可以使元素倾斜
div{
    transform:skew(x-angley,y-angle);
}

注意事项:

  1. 一般都需要配合transition过渡
  2. inline元素不支持transform，需要先变成display：block

6.3 transition过渡

transition过渡可以看到一个元素变化的过程，从小到大，从左到右...

语法：

div{
    transiton:属性名 时长 过渡方式 延迟;
}

1.) 属性名(transition-property)：定义应用过渡效果的 CSS 属性名，可以是all(所有属性都将获得过渡效果)
2.) 时长(transition-duration)：规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果
3.) 过渡方式(transition-timing-function)：规定以什么速度完成过渡

  • linear：以相同速度开始至结束的过渡效果
  • ease：慢速开始，然后变快，然后慢速结束的过渡效果
  • ease-in：以慢速开始的过渡效果
  • ease-out：以慢速结束的过渡效果
  • ease-in-out：以慢速开始和结束的过渡效果 4.) 延迟(transition-delay)：规定几秒或毫秒之后开始动画过渡

6.4 animation动画

定义一个有两种写法，一种是from to：

@keyframs slidein{
 from {
     transform:translateX(0%);
 }
 to{
     transform:translateX(100%);
 }
}

一种是用百分数:

@keyframs identifier{
 0%{top:0;left:0;}
 30%{top:50px;}
 60%{left:50px;}
 100%{top:100px;left:100%;}
}

amimation的缩写语法：

div{
    animation:动画名 时长 过渡方式 延迟 次数 方向 填充模式 是否暂停;
}

1.) 动画名(animation-name)：指定要绑定到选择器上的动画名称
2.) 时长(animation-duration)：指定动画需要多少秒或毫秒完成
3.) 过渡方式(animation-timing-function)：指定动画以什么速度从开始到结束
4.) 延迟(animation-delay)：设置动画在启动前的延迟间隔
5.) 次数(animation-iteration-count)：定义动画的播放次数

  • n：一个数字，次数
  • infinite：无限次 6.) 方向(animation-direction)：定义是否循环交替反向播放动画
    7.) 填充模式(animation-fill-mode)：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
    8.) 是否暂停(animation-play-state)：指定动画是否运行或暂停
  • running：开始
  • paused：暂停

本文部分内容引用： 饥人谷教育， MDN ，菜鸟教程，CSDN:blog.csdn.net/weixin_4420…

avatar
文章
阅读
粉丝