CSS3+Sass：入门教程+进阶强化+最全笔记！！！

嗷呜ouu
328 阅读9分钟

准备阶段

1-参考资料

1-1 CSS

1-2 Sass

3-知识大纲

CSS3

1-基础

1-1 概述

  1. CSS
  • 定义：CSS (Cascading Style Sheets)层叠样式表，用于定义如何显示HTML元素；样式通常存储在样式表中，多个样式定义可层叠为一个。
  • 作用：可以精确地控制网页中的字体、颜色、字号、行距、边距等样式信息，提高用户体验
  1. CSS3

1-2 语法规范

  1. 语法
  • 设定元素样式：
    • 语法： image.png
    • selector选择器:要设置样式的HTML元素
    • property属性：要设置的样式属性
    • value属性值：属性的取值
  • 注释：
    • 语法：/* 这是个注释 */
  1. 引入方式
  • 内联样式：直接在HTML元素上设置样式
  • 内部样式：将样式信息写在<style>标签中，放在HTML文件的<head>标签内
  • 外部样式：将样式信息写在一个外部的CSS文件中，然后在HTML文件中使用<link>标签引入。
//内联
<p style="color: red;">这是一段红色的文字</p>  
//内部
<head>   
    <style> 
        p { color: red; } 
    </style> 
</head>
//外部
<head>   
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head>
  1. 特性：
  • 继承性：绝大多数文本字体样式可以被继承
  • 堆叠性：为一个标签定义多个样式规则可以同时作用
  • 优先级：内联样式高、内部样式中、默认样式低、外部样式就近原则；可以调整优先级，设置为!important

1-3 选择器

  1. 选择器 => 选择器及其权重【面试】
  • 定义：对html中的元素设定具体的样式，哪些元素设定样式由选择器决定，当出现样式层叠时（使用不同的选择器但是匹配到的是同一个元素且设置的是同一个样式属性）由选择器的权重或者在样式表中的位置决定
  • 常见CSS选择器：
    • 基本选择器：通配符选择器*匹配所有元素、标签选择器html标签名匹配某一标签的所有元素、id选择器#id匹配某一id名的元素、类选择器.class匹配所有同一类名的元素
    • 其他选择器：伪元素选择器:before和:after向指定元素的最前面和最后面插入内容content属性、伪类选择器包括链接元素a的伪类a:link,a:visited,a:hover,a:active,表单元素的伪类input:focus、结构伪类选择器、属性选择器
    • 复合选择器：后代选择器匹配所有后代、子代选择器匹配一个后代、并集选择器匹配多个元素、交集选择器匹配同时满足2个条件的元素、兄弟选择器匹配兄弟元素
  1. 基本选择器
  • 通配符选择器：用*匹配所有元素，权重是0,0,0,0，常用于清除浏览器的默认样式。
  • 标签选择器：用html标签名匹配所有同名的标签，为某一类标签指定统一的css样式，权重是0,0,0,1
  • 类选择器：用.classname匹配同一个类的所有元素，权重是0,0,1,0
    • 一个标签有多个类名时，则同时具有这些类选择器所设置的样式
  • id选择器：用#idname匹配唯一id名的元素，权重是0,1,0,0
* { background-color:yellow; }     //通配符选择器：匹配所有元素
div * { background-color:yellow; } //匹配div内的所有元素
span { color: red; }               //标签：匹配所有的span标签
.last { background-color:yellow; } //类：匹配类名为last的所有元素
#pwd { width: 300px; }             //id：匹配id为pwd的唯一元素
  1. 其他重要选择器
  • 伪元素选择器：用:before和:after分别向指定元素的最前面和最后面插入内容（新的元素），使用content属性指定插入的内容，权重是0,0,0,1
    • 用途：用于清除浮动或者用来添加不必出现在 html 结构文件中的元素以简化结构
  • 伪类选择器：匹配某些具有特殊特征的类型元素，这些元素和html结构无关，权重是0,0,1,0
    • 链接元素a的伪类：
      • a:link：用来选择未被访问过的链接。
      • a:visited：选择已经被访问过的链接。
      • a:hover：选择鼠标覆盖的链接，权重为0,0,1,1
      • a:active：选择鼠标按下的链接。
      • 注意：:link 和 :visited 必须写在 :hover 和 :active前面，否则 :hover 和 :active 的样式将被覆盖（层叠）掉；:hover 必须写在 :active 的前面，否则点击样式会被鼠标覆盖样式层叠
    • 表单元素input的伪类：
      • input:focus：用于获得焦点的表单元素
  • 结构伪类选择器：匹配具有某些特定特征的一类元素，特征与html结构（在html的位置）有关，权重是0,0,1,0
    • E:first-child：匹配其父元素中的第一个子元素且这个子元素是E元素。
    • E:last-child：匹配其父元素中的最后一个子元素且这个子元素是E元素。
    • E:nth-child(n)：匹配其父元素中的第n个子元素且这个子元素是E元素。
    • E:first-of-type：匹配子元素中的第一个E元素。
    • E:last-of-type：匹配子元素中的最后一个E元素。
    • E:nth-of-type(n)：匹配子元素中的第n个E元素。
    • n：可以是数字、关键字、表达式，数字n表示匹配第几个子元素，关键词n用even和odd分别表示偶数和奇数，表达式包括2n（偶数）、2n+1（奇数）、5n、n+n0（第n0个子元素及后面的子元素）、-n+n0（前n0个子元素）
  • 属性选择器：根据特定的属性和属性值特征来匹配元素，权重是0,0,1,0
    • E[att]:匹配具有 att 属性的E元素。
    • E[att=“val”]：匹配具有 att 属性且值等于val的E元素。
    • E[att^=“val”]：匹配att属性值以 val 开头的E元素，必须完全匹配
    • E[att$=“val”]：匹配att属性值以 val 结尾的E元素。
    • E[att*=“val”]：匹配att属性值中含有 val 的E元素。
    • E[att~=“val”]：匹配att属性的属性值中具有 val 这个值的E元素，只要求匹配其中一个
    • E[att|=“val”]：匹配 att 属性的属性值带有以指定值开头的元素，该值必须是整个单词
p:after { display:block; content:"添加的内容"; }  \\伪元素：匹配所有的p元素，在其后添加一个新元素
a:link { color:black; }                          \\链接未被访问前
a:visited { color:green; }
a:hover{ color: yellow; }
a:active { color: blue; }
input:focus { background-color:yellow; }         \\点击文本输入框后，可以看到黄色背景
p:nth-child(1) { color: red; }                   \\匹配第一个子元素且是p元素
  1. 复合选择器
  • 后代选择器：用s1 s2匹配指定元素s1的【所有】后代元素s2，包括子子元素
  • 子代选择器：用s1>s2匹配指定元素s1的【一个】子元素s2，不包括子子元素
  • 并集选择器：用s1,s2匹配多个元素并指定样式
  • 交集选择器：用s2s2匹配既是s1元素又是s2的元素，即同时满足两个条件
  • 兄弟选择器：用s1+s2匹配指定元素s1之后紧跟着的元素s2
.topnav a { font:18px/54px "微软雅黑"; }  \\匹配.topnav元素中的所有a标签
.topnav>a { font:18px/54px "微软雅黑"; }  \\.topnav元素的子元素的a标签
h2,a{ font:18px/54px "微软雅黑"; }        \\同时匹配h2元素和a元素并为他们设置相同的样式
button.search_btn { width:88px; }        \\匹配类名是search_btn同时是button标签的元素
h2+p { background-color:yellow; }        \\匹配h2兄弟元素中的第一个p元素,如果紧跟在后面的第一个兄弟元素不是p则无效
  1. 选择器的权重
  • 定义：用四个彼此独立的a,b,c,d表示权重
  • 增加权重：!important
  • 比大小：四个部分独立，无进位，根据a,b,c,d的顺序依次比较，高位相同时比较低位
    • 无穷大：！important
    • 1,0,0,0：style 属性
    • 0,1,0,0：id选择器
    • 0,0,1,0：类、伪类、结构伪类、属性选择器
    • 0,0,0,1：标签、伪元素选择器
    • 0,0,0,0：通配符选择器
    • 没有权重：继承的样式
  • 运算：
    • 后代、子代、兄弟、交集：权重相加，无进位
    • 并集：
    • 注意：伪类

2-文本和背景

2-1 fonts字体

2-2 color颜色和单位

  1. 颜色：
  • 表示方式：
    • 十六进制：如："#ff0000"
    • RG：如"rgb(255,0,0)"
    • 颜色名称：如"red"
  1. 单位 => 常用单位【面试】
  • 定义：用于width, margin, padding, font-size, border-width等表示长度
  • 绝对单位：固定的值，它反应一个真实的物理尺寸，不依赖于环境（显示器、分辨率、操作系统等
    • cm：厘米
    • mm：毫米
    • in：英寸 (1in = 96px = 2.54cm)
    • px：像素 (1px = 1/96th of 1in)，实际上是一个按角度度量的单位
    • pt：point，大约1/72英寸； (1pt = 1/72in)
    • pc：pica，大约 12pt，1/6英寸； (1pc = 12 pt)
  • 相对单位：指定了一个长度相对于另一个长度的属性
    • em：
    • ex：
    • ch：
    • rem：
    • vw：Viewport Width，视窗宽度的百分比，1vw=视窗宽度的1%
    • vh：Viewport Height，视窗高度的百分比，1vh=视窗高度的1%
    • vmin：vw和vh中较小的那个。
    • vmax：vw和vh中较大的那个。
    • %：父值宽度的百分比

2-3 text文本和link链接

  1. 文本

  2. link链接

2-5 background背景

  1. 背景
  • 定义：用于定义HTML元素的背景
  • 常见属性及摘要
    • background-color：背景颜色，不能继承，默认为transparent
    • background-image：背景图片，默认平铺重复以全覆盖
    • background-repeat：
    • background-attachment：
    • background-position：
  1. background-color
  • 定义：用于定义h1、p、div等元素的背景颜色，如body {background-color:#b0c4de;};
  • 特点：不能继承，其默认值是 transparent，如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。
  1. background-image
  • 定义：增加元素的背景图像，如background-image: url('https://static.runoob.com/images/mix/paper.gif');
  • 特点：默认情况下，背景图像进行水平方向和垂直方向平铺重复显示，以覆盖整个元素实体
  1. background-repeat平铺(重复)方向：
  • 定义：用于背景图像的平铺
  • 水平方向：background-repeat:repeat-x;
  • 只显示一次：background-repeat:no-repeat;
  1. background-position背景位置：
  • 关键词：
    • left top
    • left center
    • left bottom
    • right top
    • right center
    • right bottom
    • center top
    • center center
    • center bottom
  • xpos ypos:(对应x轴位置和y轴位置)[www.runoob.com/cssref/pr-b…]
  1. background-attachment固定还是滚动：
  • scroll：背景图片随着页面的滚动而滚动，这是默认的。
  • fixed：背景图片不会随着页面的滚动而滚动。
  • local：背景图片会随着元素内容的滚动而滚动。
  • initial：设置该属性的默认值。

3-尺寸和边框

3-1 dimension尺寸

1、height高度：

  • auto：默认。浏览器会计算出实际的高度。
  • length：使用 px、cm 等单位定义高度。
  • %：基于包含它的块级对象的百分比高度，注意是原大小的百分比高度！！！
  • inherit：规定应该从父元素继承height属性的值。
  • 最大高度：max-height
  • 最小高度：min-height

2、width宽度：同上

  • max-width
  • min-width

3、行高：大多数浏览器的默认行高约为110%至120%

  • normal：默认。
  • number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距，默认行高为“1”。
  • length：设置固定的行间距，默认行高约20 px。
  • %：基于当前字体尺寸的百分比行间距，默认行高约为110%至120%
  • inherit：规定应该从父元素继承line-height 属性的值。

3-1 border边框

1、border-style边框类型

  • none：无边框
  • dotted：点线边框
  • dashed：虚线边框
  • solid：实线边框
  • double：双边框，宽度与border-width 的值相同
  • groove：3D沟槽边框，效果取决于边框的颜色值
  • ridge：3D脊边框，同上
  • inset：3D嵌入边框，同上
  • outset：3D突出边框，同上
  • hidden：隐藏边框
  • 混合边框：
    • 上、右、底、左：border-style: dotted dashed solid double;
    • 上底、左右：border-style:dotted solid；
    • 上、左右、底：border-style:dotted solid double;

2、border-width边框宽度

  • 指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
  • 关键词：thick 、medium（默认值）和 thin，对应5px、3px 和 2px或者3px、2px 和 1px

3、border-color边框颜色

  • name：指定颜色的名称，如 "red"
  • RGB：指定 RGB 值, 如 "rgb(255,0,0)"
  • Hex：指定16进制值, 如 "#ff0000"
  • transparent

4、单独设置边框：

  • border-top（单独设置+简写属性）
    • border-top-style（单独设置）
    • border-top-color
    • border-top-width
  • border-right
  • border-bottom
  • border-left

5、简写属性：

  • 宽度+类型（必）+颜色：border:5px solid red;

6、border-radius圆角：

  • 外边框圆角：当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果。
    • 左上、右上、右下、左下：border-radius: 15px 50px 30px 5px;
    • 左上、右上左下、右下:border-radius: 15px 50px 30px;
    • 左上右下、右上左下：border-radius: 50px 20px;
    • 四角：border-radius: 15px;
  • 椭圆角：^[apis.bestapis.net/api/v1/clie…]

3-2 outline轮廓

3-3 margin外边距

1、定义元素周围的空间。 image

  • 除周围的（边框外的）元素区域。
  • margin 没有背景颜色，是完全透明的。
  • 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

2、margin外边距：

  • auto：设置浏览器边距，这样做的结果会依赖于浏览器
  • length：定义一个固定的margin（使用像素，pt，em等）
  • %：定义一个使用百分比的边距

3、设置单边：

  • 上：margin-top:100px;
  • 底：margin-bottom:100px;
  • 右：margin-right:50px;
  • 左：margin-left:50px;

4、简写属性：

  • 上、右、下、左：margin:25px 50px 75px 100px;
  • 上、左右、下：margin:25px 50px 75px;
  • 上下、左右：margin:100px 50px;
  • 四边：margin:25px;

5、意义：

  • 定义上下元素之间距离：margin:8px 0;
  • 定义左右元素之间距离：margin：0 8px;

3-4 padding填充

  1. padding：定义元素边框与元素内容之间的空间，即上下左右的内边距。image
  • padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充
  • 单独使用padding属性可以改变上下左右的填充
  • 填充内边距之后会自动调节内容的大小
  1. padding填充：
  • length：定义一个固定的填充(像素, pt, em,等)
  • %：使用百分比值定义一个填充
  1. 设置单边：
  • 上内：padding-top:25px;
  • 右内：padding-bottom:25px;
  • 下内：padding-right:50px;
  • 左内：padding-left:50px;
  1. 简写属性：
  • 上右下左：padding:25px 50px 75px 100px;
  • 上、左右、下：padding:25px 50px 75px;
  • 上下、左右：padding:25px 50px;
  • 四边：padding:25px;

3-5 分组和嵌套

3-6 Box Model盒模型

  1. 盒模型
  • 定义：所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括边距、边框、填充和实际内容。
  • 作用：允许我们在其它元素和周围元素边框之间的空间放置元素
  • 内容：image
    • Margin(外边距)：清除边框外的区域，外边距是透明的。
    • Border(边框)：围绕在内边距和内容外的边框，受到盒子的背景颜色影响。
    • Padding(内边距)：清除内容周围的区域，内边距是透明的。
    • Content(内容)：盒子的内容，显示文本和图像。
  • CSS的两种盒模型 => 盒子模型和怪异盒模型以及如何设置【面试】
    • W3C的标准盒模型：width指content部分的宽度，通过box-sizing: content-box设置
    • IE的怪异盒模型：width包含content、border和padding，通过box-sizing: border-box设置
  1. 标准盒模型
  • 定义：image.png
  • 特点：width和height只包括内容，即元素宽度=width，元素高度=height
  • 场景：指定一个 CSS 元素的宽度和高度属性时，只设置内容区域的宽度和高度是不够的，还需要添加内边距、边框和外边距。
已知元素的盒子数据求元素总宽度
width: 250px;border: 25px solid green;padding: 25px;margin: 25px;
解：250px内容+50px左右边框+50px左右内边距+50px左右外边距=400px
  • 总元素的宽度=内容宽度+内边距*2+边框*2+外边距*2 = width + 2padding + 2border + 2margin
  • 总元素的高度=内容高度+内边距*2+边框*2+外边距*2 = height + 2padding + 2border + 2margin
  1. 怪异盒模型
  • 定义：image.png
  • 特点：width 和 height 属性的范围包含了content、border和padding。

4-定位和浮动

4-1 position定位

  1. position定位 => position的取值和作用【面试】
  • 定义：用来控制元素定位的属性，可以使用元素的顶部，底部，左侧和右侧属性进行定位
  • 语法：position: xxx;，xxx可以是static静态定位（默认值）、fixed固定定位（导航栏）、relative相对定位（动画效果）、absolute绝对定位（弹出菜单）、stiky粘性定位（提示信息）
    • 注意：只有static与文档流相关，其他都无关，因为它们会使元素脱离文档流的常规排列
  • 适合：适用于大多数元素，使其按照文档流正常排列
  1. static静态定位
  • 定义：即没有定位，元素会被插入到正常的文档流中，其位置由其在 HTML中的顺序决定。
  • 语法：position: static;
  • 特点：不可偏移，不会受到 top, bottom, left, right 影响
  1. relative相对定位
  • 定义：元素的定位是相对其正常位置进行偏移，但是仍然保留其在文档流中的空间
  • 语法：position: relative;
  • 适用：可以用于创建动画效果，如元素的位置稍微向下移动或向右移动
  • 特点：可偏移，使用 top、right、bottom 和 left 属性来指定相对于其正常位置的偏移量。
  1. fixed固定定位
  • 定义：元素的位置相对于浏览器窗口<html>是固定位置，即使窗口是滚动的，元素的位置也不会改变
  • 语法：position: fixed;
  • 适用：创建在页面滚动时始终保持在视图窗口特定位置的元素，如导航栏、广告条、页眉和页脚等
  • 特点：可偏移，使用 top、right、bottom 和 left 属性来指定相对于浏览器窗口的偏移量
  1. absolute绝对定位
  • 定义：元素的位置相对于最近的已定位父元素（position 属性值不是 static 的元素）进行定位；如果没有已定位的父元素，那么它的位置相对于最初的包含块（通常是浏览器窗口<html>）进行定位
  • 适用：用于创建覆盖效果，例如弹出式菜单或悬浮提示框；将元素放置在文档流之外时，如在页面角落固定一个广告栏或浮动导航
  • 特点：元素的位置与文档流无关，因此不占据空间；可重叠，元素和其他元素重叠；可偏移，使用 top、right、bottom 和 left 属性来指定相对于其包含块的偏移量。
  1. sticky粘性定位
  • 定义：基于用户的滚动位置来定位，让元素在滚动到特定位置时 "粘" 在那里，然后在滚动继续时跟随滚动
  • 原理：在position:relative与position:fixed定位之间切换，表现为在跨越特定阈值前为相对定位，之后为固定定位，其中特定阈值是top、right、bottom或left；只有指定阈值后才是粘性定位，不然就是相对定位
  • 语法：position: sticky;
  • 适用：创建在滚动时保持在特定位置的元素，如固定导航栏、表格标题、侧边栏、提示性信息
  • 特点：
  1. z-index堆叠属性
  • 定义：如果元素的定位与文档流无关（除了static），它就可以覆盖页面上的其它元素，z-index属性指定了一个元素堆叠的前后顺序
  • 语法：z-index:-1;，数值可正可负，数值越大顺序越前
  • 补充：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面

4-2 overflow溢出

4-3float浮动

  1. 浮动float => 浮动及其消除【面试】
  • 定义：浮动会使元素向左或向右移动，其周围的元素也会重新排列
  • 作用：让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次，从而能在一行显示多个块元素
  • 语法：float: xxx;，其中xxx可以是left和right，分别是漂浮起来靠左边缘和靠右边缘
  • 排列：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列
  • 清除：
    • 定义：清除浮动只能影响使用清除的元素本身，不能影响其他元素。
    • clear：clear: xxx;，xxx可以为none（默认）允许两边都可以有浮动对象、left不允许左侧有浮动，right不允许右边有浮动，both不允许有浮动；
    • overflow: overflow: hidden;，将父元素的overflow，设置成hidden。
    • after伪类：对子元素的after伪类进行设置。

4-4 对齐

5-布局

5-1 visibility可见性和display显示

  1. visibility可见性 => visibility和display的区别【面试】
  • 定义：指定一个元素应可见还是隐藏，且不影响其在文档流中的布局
  • 语法：visibility: xxx;，取值为visible（可见）和hidden（隐藏）
    • visibility: hidden;：【隐身】隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。该元素虽然被隐藏了，但仍然会影响布局
    • 区别display: none;：【删除】隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
  1. display显示
  • 定义：控制元素在页面上的布局方式、元素是否在页面上可见
  • 语法：display: xxx;
    • 取值为block、inline、inline-block、flex、grid等：设置元素的布局方式
    • 取值为none：元素会从文档流中移除，即隐藏效果
  • css常见布局：flow流动布局、float浮动布局、flex弹性布局、grid网格布局、定位布局、多列布局、响应式布局

5-2 块级元素和行级元素

  1. 块级元素和行级元素 => 块级元素和行元素及转化【面试】
  • 标签的显示模式：HTML标签分为块标签和行内标签两种，即块元素和行内元素
  • 块级元素block：
    • 常见：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>等
    • 特点：独占一行，宽度默认是容器的100%；可以设置高度、行高、内外边距；里面可以放行内或者块级元素；
    • 注意：文字类块级标签<h1>-<h6>、<p>里面不能放块级元素
  • 行内元素：
    • 常见：<span>,<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>等
    • 特点：相邻行内元素在一行上，一行可以显示多个；默认宽度就是它本身内容的宽度；不可以设置高度、行高、内外边距；行内元素只能是文本或者其他行内元素；
    • 注意：特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全
  • 行内块元素inline-block：
    • 常见：<img/>,<input/>,<td>
    • 特点：一行可以放多个行内块元素，和相邻内元素在一行上，但是彼此有缝隙；默认宽度就是它本身内容的宽度；可以设置高度、行高、内外边距；
  • 转换：
    • 块转行：display：inline;
    • 行转块：display: block;
    • 行、块转行内块：display: inline-block;

5-3 布局

  1. 布局 => css常见布局【面试】
  • 定义：
  • 常见：
    • 流式布局flow：默认的文档流布局，元素按照其在 HTML 中的顺序一个接一个地排列。元素会在父容器内自上而下，自左而右地排列。
    • 浮动布局float：float: xxx，将元素浮动到容器的左侧或右侧，用于实现文本环绕效果。
    • 定位布局position：使用position和top、right、bottom、left属性来定位元素，通常与relative、absolute 或 fixed一起使用
    • 弹性布局flex：display: flex;，使用弹性容器和弹性项目，可以在一维空间内方便地布局元素。
    • grid网格布局：display: grid;，使用网格容器和网格项目，可以在二维空间内灵活地布局元素。
    • 多列布局multi-column：column-count: n;和column-width，将元素内容分割成多列。
    • 表格布局table：display: table;、display: table-row;和display: table-cell;来模拟表格布局

5-4 flex弹性布局（未完）

  1. flex => flex布局的理解【面试】
  • 定义：CSS3 中用于创建灵活的布局的模块，主要思想是将容器内的元素调整、排列和对齐，以适应不同的屏幕大小和设备
  • 语法：display: flex;，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
  • 概念：所有的属性都是围绕容器和轴设置的image.png
    • 容器：应用了 Flexbox 布局的父元素
    • 项目：容器内的子元素，根据规则进行排列
    • 父容器：display: flex;
    • 子容器：display: inline-flex;
    • 主轴main axis：Flex 容器的主要方向，默认水平方向向右
    • 交叉轴cross axis：默认垂直方向向下
  • 父容器属性：
    • flex-direction方向：主轴的方向，值为row→、row-reverse←、column↓、column-reverse↑
    • flex-wrap换行：超出父容器子容器的排列样式，值为nowrap不换行、wrap换行且先填充一行、wrap-reverse换行且先填充二行；
    • flex-flow流：flex-direction属性 + flex-wrap属性
    • justify-content：子容器在主轴的排列方向，值为flex-start左对齐、flex-end右对齐、center居中对齐、space-between两端对齐、space-around两端对齐且前后留空；
    • align-items：子容器在交叉轴的排列方向。
    • align-content：多根轴线的对齐方式。
  1. flex-direction主轴方向
  • 定义：决定主轴的方向，默认水平向右，设置后主轴顺时针旋转90°为交叉轴方向
  • 语法：flex-direction: xxx;，其中xxx为row、row-reverse、column、column-reverse image.png
.ele {
  flex-direction: row;             //【→】默认值，主轴为水平方向，起点在左端。
  flex-direction: row-reverse;     //【←】主轴为水平方向，起点在右端。
  flex-direction: column;          //【↓】主轴为垂直方向，起点在上。
  flex-direction: column-reverse;  //【↑】主轴为垂直方向，起点在下。
}
  1. flex-wrap换行
  • 定义：默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义一条轴线排不下的情况下如何换行
  • 语法：flex-wrap: xxx;，xxx为nowrap、wrap、wrap-reverse；
    • flex-wrap: nowrap;：不换行（默认）image.png
    • flex-wrap: wrap;：换行，第一行在上方image.png
    • flex-wrap: wrap-reverse;：换行，第一行在下方image.png
  1. flex-flow流
  • 定义：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  • 语法：flex-flow: xxx xxx;，前者为方向，后者为换行
  1. justify-content属性
  • 定义：项目在主轴上的对齐方式
  • 语法：justify-content: xxx;，其中xxx为flex-start左对齐、flex-end右对齐、center居中对齐、space-between两端对齐、space-around两端对齐且前后留空;image.png
    • justify-content: flex-start;：（默认）左对齐
    • justify-content: flex-end;：右对齐
    • justify-content: center;：居中对齐
    • justify-content: space-between;：两端对齐，项目之间的间隔都相等
    • justify-content: space-around;：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
  • 注意：
    • space-between：将额外的空间均匀地分配给项目之间
    • space-around：将额外的空间分配给项目之间以及项目与容器边缘之间，使项目之间的间距相等
  1. align-items属性
  • 定义：定义项目在交叉轴上如何对齐
  • 语法：aligh-items: xxx;，xxx的值为flex-start、flex-end、center、baseline、stretch;image.png
    • aligh-items: flex-start;：交叉轴的起点对齐
    • aligh-items: flex-end;：交叉轴的终点对齐
    • aligh-items: center;：交叉轴的中点对齐
    • aligh-items: baseline;：项目的第一行文字的基线对齐
    • aligh-items: stretch;：（默认）如果项目未设置高度或设为auto，将占满整个容器的高度
  1. align-content属性
  • 定义：
  • 语法：align-content: xxx;，xxx的值为flex-start、flex-end、center、baseline、stretch;

image.png

6-表格

列表

table表格

组会选择符

伪类

伪元素

导航栏

下拉菜单

提示工具

图片廊

图像透明/不透明

图像拼合技术

媒体类型

属性选择器

input表单元素

举例：<form><input type="text" name="search" placeholder="搜索.."></form> 1、属性选择器：设置指定类型的输入框

  • 选取文本输入框：input[type=text]
  • 选择密码的输入框：input[type=password]
  • 选择数字的输入框：input[type=number]

2、type=text输入框：在input上加border

  • width输入框宽度：
    • 叠加box-sizing: border-box;，即输入框的宽度，而不是文字的宽度
  • padding输入框内边距：
    • 叠加box-sizing: border-box;，即文字开始的位置
  • border边框：
    • border-style
    • border-color
    • border-radius
  • background-color背景颜色：
  • font-size文字大小：显示文字和输入文字
  • 无文字颜色选择

6、:focus选择器：设置输入框的聚焦效果

  • outline: none;：忽略浏览器自带的聚焦效果
  • 聚焦时改变边框颜色：input[type=text]:focus{border: 3px solid #555;}
  • 0.5s改变颜色：input[type=text] {-webkit-transition: 0.5s; transition: 0.5s;}，叠加上面

7、type=textarea文本框：

  • 重置大小： 禁止重置大小：resize: none;

8、type=select下拉菜单：

  • 举例：<form><select id="country" name="country"><option value="au">O1</option><option value="ca">O2</option></select>
  • 在select上修改：
    • width宽度：菜单框的宽度
    • padding填充：内文字选项初始位置
    • border边框：设置菜单框的样式
    • background背景：菜单框的背景
  • 在form上修改：
    • width宽度：包裹菜单栏的一个框的宽度
    • padding填充：菜单栏在框的初始位置

9、'type=button'按钮样式：

  • background背景：
  • border边框：
  • color字体颜色：
  • padding填充：字体居中，按钮大小
  • margin边缘：两个元素间的间隔更大
  • cursor: pointer;改变光标形状

计数器

网页布局

1、网页包括：头部区域、菜单导航区域、内容区域、底部区域。 image

2、头部区域

!important

7-业务需求

7-1 隐藏元素

  1. 隐藏元素 => 隐藏元素的方法【面试】
  • 定义：设置元素可见和不可见，
  • 常见方法：①设置为不可见visibility: hidden;，不影响布局，且不会触发事件；②删除元素display: none;和<p hidden>content</p>，会影响布局，且不会触发事件；③堆叠在元素下z-index: -999;；④调整透明度为0opacity: 0;和filter: opacity()；⑤颜色隐藏color: rgba(0, 0, 0, 0);background-color: rgba(0, 0, 0, 0);border-color: rgba(0, 0, 0, 0);；⑥缩小和平移transform: scale(0);或translate： -9999px 0px;⑦创建剪切区clip-path: circle(0);；⑧绝对定位position: absolute;buttom: -9999px;将元素移出屏幕以外；
  1. 设置为不可见：
  • 语法：visibility: hidden;设置元素为不可见
  • 特点：不影响布局，且不会触发事件；保留它在布局中占用的空间，辅助技术仍然可以访问隐藏元素的内容
  1. 删除元素：
  • 语法：display: none;和<p hidden>content</p>删除元素
  • 特点：会影响布局，且不会触发事件；无法设置动画，并且应用时会触发布局更改，从而影响页面上其他元素的位置
  1. 堆叠在元素下：
  • 语法：z-index: -999;在视觉上隐藏下方的元素
  • 特点：不会影响布局，且不会触发事件；
  1. 调整透明度为0：
  • 语法：opacity: 0;和filter: opacity()设置元素完全透明
  • 特点：不影响布局，元素仍保留在页面上并且仍然可以触发事件
  1. 颜色隐藏：
  • 语法：color: rgba(0, 0, 0, 0);background-color: rgba(0, 0, 0, 0);border-color: rgba(0, 0, 0, 0);设置特殊的颜色属性
  • 特点：不影响布局，会触发事件；不适用于具有图像背景的元素，除非它们是使用线性渐变或类似方法生成的
  1. 缩小和平移：
  • 语法：transform: scale(0);或translate： -9999px 0px;设置元素缩放和x轴y轴平移
  • 特点：不影响布局，且不会触发事件；
  1. 创建剪切区：
  • 语法：clip-path: circle(0);将元素全部裁剪掉
  • 特点：不影响布局，且不会触发事件；不是所有浏览器都支持它，也可能存在兼容性问题，使用前要进行充分的测试和兼容性处理
  1. 绝对定位：
  • 语法：position: absolute;buttom: -9999px;将元素移出屏幕以外
  • 特点：会影响布局，且可以触发事件（实际不行）；更改位置可能会影响页面的整体布局，屏幕外的元素也无法交互

7-2 水平垂直居中

  1. 居中
  • 水平居中：
    • 定义：水平方向处于中间位置，即<-><-><->★<-><-><->
    • 操作：
  • 垂直居中：
    • 定义：垂直方向处于中间位置
  • 水平垂直居中
    • 定义：水平和垂直方向同时处于中间位置
    • 操作：①已知当前元素的宽度和高度：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;；②已知当前元素的宽度和高度：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: 元素宽度的一半px; margin-top: 元素高度的一半px;；③未知当前元素的宽度和高度：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);；④未知当前元素的宽度和高度：设置父元素为flex定位，justify-content: center; align-items: center;；
  1. 水平居中
  • 当前元素是行内元素，父元素是块级元素，设置父元素text-align: center;
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;   
       }
</style>
<div id="father">
    <span id="son">我是行内元素</span>
</div>
  • 当前元素是行内元素，父元素不是块级元素：设置父元素为块级元素，再设置为text-align: center;
<style>
    #father {
        display: block;
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>
 
<span id="father">
    <span id="son">我是行内元素</span>
</span>
  • 当前元素是块级元素，且给定宽度：设置当前元素margin:0 auto;，使盒子自己居中
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }
</style>
<div id="father">
    <div id="son">我是块级元素</div>
</div>
  • 当前元素是块级元素，且不定宽度：
    • 默认子元素的宽度和父元素一样
    • 设置子元素为display: inline-block;或display: inline;，将子元素转换成行内块或行内元素
    • 给父元素设置text-align: center;
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }
    #son {
        background-color: green;
        display: inline;  //将#son转换成行内元素，#son的内容高度撑起了#son的高度，设置高度无用
    }
</style>
<div id="father">
    <div id="son">我是块级元素</div>
</div>
  • 当前元素是块级元素：
    • 设置父元素为相对定位position: relative;，再设置子元素为绝对定位position: absolute;，设置子元素的left:50% ，即让子元素的左上角水平居中
    • 给定宽度：设置绝对定位子元素的margin-left: -元素宽度的一半px;或者设置transform: translateX(-50%);
    • 不定宽度：transform: translateX(-50%);
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
    #son {                              /* 给定宽度 */
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        margin-left: -50px;
}
</style>
<div id="father">
    <div id="son">我是块级元素</div>
</div>

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
    #son {                               /* 不定宽度 */
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
}
</style>
<div id="father">
    <div id="son">我是块级元素</div>
</div>

  1. 垂直居中

  2. 水平垂直居中 => 水平垂直居中【面试】

  • 已知当前元素的宽度和高度：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}
</style>
<div id="father">
    <div id="son">我是块级元素</div>
</div>
  • 已知当前元素的宽度和高度：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: 元素宽度的一半px; margin-top: 元素高度的一半px;
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
}
</style>
<div id="father">
    <div id="son">我是块级元素</div>
</div>
  • 未知当前元素的宽度和高度：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
    #son {
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);   //translateX在x轴方向上进行移动，反之translateY则是在y轴方向，而translate括号里的两个参数是先x后y的
}
</style>
<div id="father">
    <div id="son">我是块级元素</div>
</div>
  • 未知当前元素的宽度和高度：设置父元素为flex定位，justify-content: center; align-items: center;
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
}
    #son {
        background-color: green;
}
</style>
<div id="father">
    <div id="son">我是块级元素</div>
</div>

Sass

1-基础

1-1 概述

  1. Sass安装：①App内安装；②命令行安装；
  2. Sass功能：
    • Css预处理器：变量$；
    • 特性嵌套：模块@import；混合@mixin``@include；继承@extend；操作符@use "sass:math"；
  3. 我的理解：直接编写css文件存在很多重复，不方便后期优化；重复的css文件代码部分可以通过定义变量、混合、继承、拆成模块、简单数学处理后更加精简，此时就是.sass或.scss文件；以后直接根据Sass的语法规则编写.scss文件，编译成.css文件后等效于直接写css样式。
  4. Sass：
  • 定义：Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言
  • 作用：可以帮助我们减少 CSS 重复的代码，节省开发时间。
  1. 区别.sass与.scss（更常用）
  • 名称&扩展名不同：
    - sass：缩进式sass->.sass文件
    - scss：3.0的sassy css->.scss文件
  • 注释不同：
    - sass：/*开头*/结束；单行//
    - scss：/*开头；多行//
  • 语法不同：
    - sass：使用严格缩进
    - scss：使用大括号“{}”和分号“;”

1-2 安装

  • 终端：npm install -g sass全局（-g）安装
  • 终端：sass --version查看安装版本

1-3 编译：将.scss文件编译为.css文件

1.  一次编译：

  • 单文件：sass input.scss output.css
  • 文件夹：sass app/sass:public/stylesheets
  1. 监听（保存后自动编译）：wtach
  • 单文件：sass --watch sass/style/scss css/style.css
  • 文件夹：sass --watch input.scss output.css
  • 停止监视：ctrl+c
  1. 编译后有四种格式
  • nested嵌套：sass --watch input.scss output.css nested
  • compact紧凑：sass --watch input.scss output.css compact
  • expanded扩展：sass --watch input.scss output.css expanded
  • compressed压缩：sass --watch input.scss output.css compressed

3-语法

3.0-注释：//+/**/

  • 单行注释： / / css文件里不会显示 压缩方式的css不会显示
  • 多行注释： /**/ css文件里会显示 压缩方式的css不会显示
  • 强制注释：/* ! */ css文件里会显示 压缩方式的css会显示

3.1-定义变量：$

  1. 定义变量：$变量名: #样式值; 65dd905973dd5d0000000280.png

  2. 使用变量： $变量名；

  3. 注意：

  • 连字符-等于下划线_，但是最好统一；
  • 多个单词，变量名以-分割，如：$theme-color

3.2-嵌套：多层{}+&

  1. 选择器嵌套
  • 适用：子元素在父元素样式的一对大括号{}内 如：ul { li { } }
    // html结构
<div class="grandpa">  
    <div class="father">  
        <div class="son"></div>  
    </div>  
</div>
  • 语法：
.grandpa {  
    ...  
    .father {  
        ...  
        .son { ...   
}}}
  1. 伪类嵌套：
  • 适用：想给当前元素增加一个:hover样式
  • 语法：
.box {
        a {
            &:hover { color: red; }
        }
    }
  • &：直接调用父选择器，理解为它是&外面的所有父选择器，& => .box a

3.3-模块导入：@import+@use

  • 如果一个页面需要使用其他页面的样式，sass可以导入其他的scss文件，scss会把他们编译成一个css文件。这样在开发中可以把一个页面的样式分割成多个scss文件，然后在页面的scss文件中导入其他scss，可以实现css的模块化开发。- 
  1. 拆分：样式文件+局部文件
  • 语法：局部文件命名"_name.scss"
  1. 组合：foundation/_code.scss + foundation/_lists.scss
  • 语法1：@import 'foundation/code', 'foundation/lists';
  • 语法2：\
@use 'foundation/code';  
@use 'foundation/lists';

3.4-混合mixin：@mixin+@include

  • 适用：提取相同css样式的对象；提取css样式中相同规则的对象；
  1. 不含参数：相同css样式
*   定义：
    @mixin name {
        css样式
    }
  • 使用：@include name；
  1. 含参数：相同样式规律
  • 定义：
@mixin name ($param1，$param2， ...) {
    css样式
}
  • 使用：@include name(样式1，样式2，…)；

3.5-扩展继承：@extend+%占位符（需要补充）

  • 适用：如果一个元素的样式和另一个元素的样式完全一样，这个元素无需再写一遍重复的样式，只需要使用@extend 就可以把另一个元素的所有样式全部继承过来。
  • 慎用：继承要慎用，被继承相关的元素的样式也会继承过去
  • 语法：@extend name;

4-基本运算

4.1-数字运算：+、-、*、/

  • 语法：@use "sass:math";
  • 使用：width:math.div(a,b)*100%;

4.2-字符运算：+

  • 可以使用“+”（加号）来实现字符串的拼接。其中，结果字符串是否有引号，取决于左边字符串是否有引号。
  • 语法：content: "Welcome to " + lvyestudy;《=》content: "Welcome to lvyestudy";

4.3-颜色运算：+

  • 可以对颜色值进行运算的。颜色运算支持加、减、乘、除，并且是单独分段进行计算的。
  • 如果颜色值不是十六进制颜色值（如#010203），而是RGB或者HSL的话，我们都是将RGB或HSL先转换为十六进制颜色值，然后再进行加、减、乘、除运算的。
  • 语法：color: (#010203 + #040506);《=》color: #050709;

5-流程控制

5.1-@if语句：@if+@else if+@else

  • 语法：
    @if { 
    } @ else if {
    } @else

5.2-@for语句：@for $index from start through/to end { }

  • 语法1：从开始值开始，到结束值结束，包含结束值  index表示 1， 2，...结束值
    @for $index from 开始值 through 结束值 {
    }
  • 语法2：从开始值开始，到结束值结束，不包含结束值  index表示 1， 2，...结束值-1
  • @for $index from 开始值 to 结束值 {
    }

5.3-@while语句

  • 语法：只要条件为真，就执行语句体。
    @while 条件 {
    }
  • 没有do...while

5.4-@each语句

  • 适用：遍历一个列表，然后从列表中取出对应值。像border: 1px solied red;这种用空格隔开的复合属性便是列表
  • 语法：@each indexinindex in list {
    }

5.5-自定义函数

  • 语法：
    @function name(param1，param1，param2，...) {
    }
avatar
文章
阅读
粉丝