irai の 知识文档站

Appearance

🌈 ​CSS ​


CSS 层叠样式表 (英文全称：(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制，

支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 ,简单来说,美化页面

image-20200811191511732-1604123770300.DhHIFSSt

1. css 引入方式 ​


css 有三种引入方式：

名称语法描述示例
行内样式在标签内使用 style 属性，
属性值是 css 属性键值对		<h1 style="xxx:xxx;">中国新闻网</h1>
内部样式定义 <style> 标签，
在标签内部定义css样式。		<style> h1 {...} </style>
外部样式定义 <link> 标签，
通过 href 属性引入 外部css文件		<link rel="stylesheet" href="css/news.css">

对于上述3种引入方式，企业开发的使用情况如下：

  • 行内样式 : 会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。

  • 内部样式 ：通过定义css选择器，让样式作用于当前页面的指定的标签上。

    ​ （可以写在页面任何位置，但通常约定写在head标签中）

  • 外部样式 : html和css实现了完全的分离，企业开发常用方式。


2. 颜色表示方式 ​


在前端程序开发中，颜色的表示方式常见的有如下三种：

表示方式属性值说明取值
关键字颜色英文单词red、green、bluered、green、blue...
rgb表示法rgb(r,g,b)红绿蓝三原色，每项取值范围：0-255rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
rgba表示法rgba(r,g,b,a)红绿蓝三原色，a表示透明度，取值：0-1rgb(0,0,0,0.3)、rgb(255,255,255,0.5)
十六进制表示法#rrggbb#开头，将数字转换成十六进制表示#000000、#ff0000、#cccccc，简写：#000、#ccc

3. css 选择器 ​


顾名思义：选择器是选取需设置样式的元素（标签），

但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种。

  • 选择器通用语法为：
css
选择器名   {
    css样式名：css样式值;
    css样式名：css样式值;
}

3.1 基本选择器 ​


选择器写法示例示例说明
元素选择器元素名称{...}h1{...}选择页面上所有的 <h1> 标签
类选择器.class{...}.cls{...}选择页面上所有
class属性为 cls 的标签
id 选择器#id属性值{...}#hid{...}选择页面上id属性为hid的标签
分组（组合）选择器选择器1，选择器2{...}h1,h2{...}选择页面上
所有的<h1>和<h2>标签
多类选择器.class1.class2{...}.cls1.cls2选择既有cls1属性
又有cls2属性的标签
属性选择器（1）元素名称[属性]{...}input[type]{...}选择页面上有
type属性的<input>标签
属性选择器（2）元素名称[属性="值"]{...}input[type="text"]{...}选择页面上type 属性
为text的<input>标签
后代选择器选择器1 选择器2{...}form input{...}选择<form>标签内
的所有<input>标签
子代选择器选择器1>选择器2{...}div>p{...}选择div 标签
的子代 p 标签
相邻（兄弟）选择器选择器1+选择器2{...}li+li{...}选择 li 标签
相邻的 li 标签

3.2 特殊选择器 ​


  • 伪类选择器：不改变任何DOM内容。只是插入了一些修饰类的元素
css
:first-child {}     //第一项
:last-child {}      //最后一项
:nth-child(n) {}    //第n项 
:nth-child(2n+1){}  //奇数项
:nth-child(2n) {}   //偶数项
:not()              //否定伪类 除了第n项

a:link {color:#FF0000;}     /*未访问的链接*/
a:visited {color:#00FF00;}  /*已访问的链接*/
a:hover {color:#FF00FF;}    /*⿏标悬浮后的链接*/
a:active {color:#0000FF;}   /*已选中的链接*/

  • 伪元素选择器
css
::first-letter  //第一个
::first-line    //第一行 只能用于块级元素
::selection     //选中
::before        //在开始位置
::after         //在结束位置

4. 盒子模型 ​


  • 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，

    由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。


  • 盒子模型组成：内容区域（content）、内边距区域（padding）、 边框区域（border）、外边距区域（margin）。


bf6ecc66-cfbd-4f7c-a046-8069c6478b33

CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如：

623247a6-bb66-4f1a-8bd7-008b90785fa1

盒子的大小，其实就包括三个部分： border、padding、content，

而 margin 外边距是不包括在盒子之内的。


  • 盒子的大小 （content）
    • 元素的大小
  • 盒子的内边距（padding）
css
padding-left:10px   //左边距10px
padding-top:10px    //上边距10px
padding-right:10px  //右边距10px
padding-bottom:10px //下边距10%，相对于父级元素的width

/*简写*/
padding:10px 10px 10px 10% //顺序是顺时针(上右下左) 百分比是对应父标签的大小
padding:5px 10px    //上下边距5px、左右边距10px
padding:5px 10px 20px  //上边距 左右边距 下边距
padding:10px        //上下左右边距10px
  • 盒子的边框（border）
css
border-left:3px solid #000  //左边距10px 
/*solid实线 dotted点线 dashed虚线 */
border-top:3px solid #000 //上边距10px
border-right:3px solid #000 //右边距10px
border-bottom:3px solid #000  //下边距10%，相对于父级元素的width

/* 简写: border:大小 样式 颜色 */
border:3px solid #000 //等同于上面四行
  • 盒⼦的外边距 (margin)
css
margin-left:10px  //左边距10px
margin-top:10px   //上边距10px
margin-right:10px //右边距10px
margin-bottom:10% //下边距10%，相对于父级元素的width

/*简写*/
margin:10px 10px 10px 10% //顺序是顺时针(上右下左),百分比是对应父标签的大小
margin:5px 10px   //上下边距5px、左右边距10px
margin:10px       //上下左右边距10px

  • 盒子怪异模型

    • W3C标准的盒子模型（标准盒模型 )
    css
    /*(默认) 盒子宽度 = 内容宽度 */
boxWidth=contentWidth
    • IE标准的盒子模型（怪异盒模型）
    css
    box-sizing:border-box /*需要添加这句修改*/

/* 盒子宽度 = 内容 + 内边距 + 边框 */
boxWidth=contentWidth+border+padding

5. flex 布局 ​


  • flex是 flexible Box 的缩写，意为"弹性布局"。采用flex布局的元素，

    称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。

  • 通过给父容器添加 flex 属性,来控制子元素的位置和排列方式。

68c7baf2-e554-4e1b-a5a6-5b7a10103d71

  • 常用的 flex 属性：


    • display : 定义了元素生成的显示框类型

      • 常见的几个属性值有：block、inline、inline-block、inherit、none、flex 。
      • 使用 flex 时为 display:flex

    • flex-direction : 设置主轴方向

      • flex-direction:row : 主轴方向为 x 轴，水平向右。（默认）
      • flex-direction:column : 主轴方向为 y 轴，垂直向下。

    • justify-content : 子元素在主轴上的对齐方式
      • flex-start : 从头开始排列
      • flex-end : 从尾部开始排列
      • center : 在主轴居中对齐
      • space-around : 平分剩余空间
      • space-between : 先两边贴边，再平分剩余空间

    如果主轴设置为 row，其实就是横向布局。 主轴设置为column，其实就是纵向布局。

    2db95730-ab53-4284-8f9f-ff2f8b58ca52

  • 详细属性查询：


    • 父元素容器属性：
    css
    /* 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/
display: flex;

/* 决定主轴的方向（即项目的排列方向）*/
flex-direction: row | row-reverse | column | column-reverse;

/* 是否换行 */
flex-wrap: nowrap | wrap | wrap-reverse; 

/* 定义水平方向对齐方式 */
justify-content: flex-start | flex-end | center | space-between | space-around;

/* 定义垂直方向对齐方式 */
align-items: flex-start | flex-end | center | baseline | stretch;

/* 定义多个轴线（多行/多列）对齐方式 */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    • 子元素容器属性：
    css
    /* 定义子元素的排列顺序，默认为0 */
order: -10 | -1 | 0 | 1 | 10;

/* 定义子元素的放大比例，默认为0 */
flex-grow: 0 | 1 | 2 | 3;

/* 定义子元素的缩小比例，默认为1 */
flex-shrink: 0 | 1;

/* 定义了在分配多余空间之前，项目占据的主轴空间 */
flex-basis: <length> | auto;

/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;

  • 常用举例：

    • 比如说现在有个需求，一个父元素 div 里面有两个子元素 div 是左右布局的
    • 现在需要这两个 div 在父元素内部占据 左边3份比例 和 右边7份比例 就可以这样设置
    css
    .father-div {
    display:flex
}

.div-left {
    /* flex-grow, flex-shrink 和 flex-basis的简写 */
    /*只写第一个的话就是代表是 flex-grow */
    flex:3
}

.div-left {
    flex:7
}

6. CSS 三大特性 ​


6.1 CSS 层叠性 ​

  • 概念：

    所谓层叠性是指多种 CSS 样式的叠加。

    是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，

    那么这个时候一个属性就会将另一个属性层叠掉


    20层叠性.BFQhGOjW

    • 原则：

      样式冲突，遵循的原则是 就近原则

      那个样式离着结构近，就执行那个样式。

      样式不冲突，不会层叠


6.2 CSS 继承性 ​


  • 概念：

    子标签会继承父标签的某些样式，如文本颜色和字号。

    想要设置一个可继承的属性，只需将它应用于父元素即可。

    简单的理解就是：子承父业。

  • 注意：

    • 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

      比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

    • 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及 color 属性）


6.3 CSS 优先级 ​

  • 优先级是怎么计算 ( 下面数字越高优先级越高 )
    • 通配符选择器 1： *
    • 标签选择器 2：div/span/p/li
    • 类选择器 3：class
    • id选择器 6：id
    • 行内样式 5
    • !important 6（尽量不要在公⽤代码⾥使⽤）

7. 归纳常用属性 ​


  • 文本颜色 ： color
  • 文本水平对齐方式 ： text-align （水平方向上的 left、center、right）
  • 行间距：line-height (有时可以行间距设为容器的高度，则可以文字垂直居中)
  • 首行缩进 ： text-indent (1em就是一个字的宽度)

  • 盒子的位置和大小

    • 布局
    css
    浮动：float
定位：position
弹性布局：flex
盒⼦内容超出部分：overflow：hidden | scroll | auto
    • 尺寸
    css
    宽度 width: ⻓度|百分⽐|auto
⾼度 height
边界 margin padding 上右下左|上下 左右

  • 背景
css
background-image	 	/*背景图片样式*/
background-repeat		/*背景图片重复*/
background-attachment 	/*背景图片固定*/
background-position		/*背景图片位置*/
background-color		/*背景颜色*/

  • 文字属性
css
/*px 像素   em相对当前文本字体尺寸(1em就是一个字的宽度)*/
字体⼤⼩ font-size			

/*normal 默认值（不加粗的）  bold 定义粗体（加粗的）*/
/*100~900	400 等同于 normal，而 700 等同于 bold 我们重点记住这句话*/
是否加粗 font-weight

/*normal 默认值   italic 斜体*/
是不是斜体 font-style

/*可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，
则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准*/
字体是什么 font-family

  • CSS3 边框
css
圆角  border-radius
盒阴影 box-shadow
边界图片 border-image

  • CSS3 渐变


    • 基本
    css
    /* 从上到下（默认情况下）*/
background-image: linear-gradient(#e66465, #9198e5);

/* 从左到右 */
background-image: linear-gradient(to right, red , yellow);

/* 对角 */
background-image: linear-gradient(to bottom right, red, yellow);

    • 使用角度
    css
    /* 从上到下 */
background-image: linear-gradient(180deg, red, yellow); 

/* 从左到右 */
background-image: linear-gradient(90deg, red, yellow);

    • 多个颜色
    css
    /* 从上到下 */
background-image: linear-gradient(red, yellow, green);

/* 从左到右 */
background-image: linear-gradient(to right, red, orange, yellow);

    • 透明度
    css
    background-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));

    • 重复
    css
    background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

  • CSS3 文本效果


    • 文本阴影
    css
    text-shadow: 5px 5px 5px #FF0000;

    • 文本溢出
    css
    /* 超过1行省略/裁剪 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis | clip; 

/* 超过2行省略/裁剪 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

    • 文本换行

      • 长文本换行
      css
      word-wrap:break-word;
      • 单词拆分换行
      css
      word-break: break-all;

8. 显示模式 ​


  • 标签显示模式（display）

    • 块级元素 （block）：

      • 常见的块级元素有 <h1>~<h6> 、<p> 、<div> 、<ol> 、<li> 等 ...

        其中 div 是最典型的块级元素


      • 块级元素的特点

        1. 比较霸道，自己独占一行
        2. 高度，宽度、外边距以及内边距都可以控制。
        3. 宽度默认是容器（父级宽度）的 100%
        4. 是一个容器及盒子，里面可以放行内或者块级元素。

    • 行内元素 （inline）：

      • 常见的行内元素有 <a> 、<strong> 、<b> 、<em> 、<del> 、<ins> 、<span> 等 ...

        其中 span 是最典型的块级元素

      • 行内元素的特点：

        1. 相邻行内元素在一行上，一行可以显示多个。
        2. 高、宽直接设置是无效的。
        3. 默认宽度就是它本身内容的宽度。
        4. 行内元素只能容纳文本或则其他行内元素。

    • 行内块元素 ( inline-block )
      • 在行内元素中有几个特殊的标签：<img/> 、<input/> 、<td>
      • 行内块元素的特点：
        1. 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。一行可以显示多个
        2. 默认宽度就是它本身内容的宽度。
        3. 高度，行高、外边距以及内边距都可以控制。

  • 三种模式总结区别：

元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器级可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或其他行内元素
行内块元素一行放多个行内块元素可以设置宽度高度它本身内容的宽度

  • 标签显示模式转换 display
    • 块转行内：display:inline ;
    • 行内转块：display:block ;
    • 块、行内元素转换为行内块：display: inline-block ;

10. 浮动布局 ​


  • float 布局 :


    • 使用
    css
    float: none;  //默认值，元素不浮动
float: left;  //元素像左浮动
float: right; //元素像右浮动

    • 特点
      • 浮动元素会脱离文档流，不再占据文档流空间
      • 浮动元素彼此之间是从左往右排列，宽度超过一行自动换行
      • 在浮动元素前面元素不浮动时，浮动元素无法上移
      • 块级元素和行内元素浮动之后都变成行内块级元素
      • 浮动元素不会盖住文字，可以设置文字环绕效果

    • 消除浮动
    css
    clear:both;
content:'';
display:block;

    • 扩展 ： BFC

      • 定义

        • 块格式化上下文（Block Formatting Context，BFC）是Web⻚⾯的可视化CSS渲染的⼀部分，

          是块盒⼦的布局过程发⽣的区域，也是浮动元素与其他元素交互的区域。

          即：形成了⼀块封闭的区域，能检测到区域内脱离⽂档流的元素

      • 特点

        • 开启后不会被浮动的元素覆盖
        • BFC 元素可以包含浮动元素
        • BFC 元素的子元素和父元素外边距不重叠

      • 开启（都会有副作用）

        • 设置元素浮动 float：left
        • 设置为行内块元素 display：inline-block
        • overflow：hidden （推荐）

      • 作⽤

        • 清除浮动带来的影响

        • 解决边距塌陷问题 (外边距折叠（Margin collapsing）

          也只会发⽣在属于同⼀BFC的块级元素之间)


11. 定位布局 ​


CSS 定位使你可以将一个元素精确地放在页面上你指定的地方。

联合使用定位和浮动，能够创建多种高级而精确地布局。其中，定位共有 4 种方式。

这 4 种方式都是通过 position 属性来实现的，其中 position 属性取值如下表所示。

属性说明
fixed固定定位
relative相对定位
absolute绝对定位
static静态定位（默认）

  • 固定定位 fixed

在 CSS 中，我们可以使用 “ position:fixed; ” 来实现固定定位。

所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。

  • 语法
css
position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
  • 说明：

position:fixed; 是结合 top、bottom、left 和 right 这 4 个属性一起使用的。

其中，position:fixed; 使得元素成为固定定位元素，

接着使用 top、bottom、left 和 right 这 4 个属性来设置元素相对浏览器的位置。

top、bottom、left 和 right 这 4 个属性不一定全部都用到，一般只会用到其中两个。

注意，这 4 个值的参考对象是浏览器的 4 条边。


  • 相对定位 relative

在 CSS 中，我们可以使用 position:relative; 来实现相对定位。

所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。

  • 语法：
css
position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

  • 绝对定位 absolute

绝对定位常搭配相对定位来使用，设置绝对定位的子元素会往父元素找有没有设置 relative

它会相对于设置了 relative 的那个父元素来做绝对定位

如果都没有设置的话，就会相对于 body 来做绝对定位


  • 相关的属性：
css
z-index  /*使⽤场景：当定位的盒⼦重叠在⼀起,  用于设置层级*/

12. 矢量图的使用 ​


  • 阿里巴巴矢量库地址 ： https://www.iconfont.cn/

  • 流程：

    • 注册
    • 搜索图片
    • 加入购物车
    • 添加进项目、选择 symbol 格式
    • 生成在线链接

  • 引入第三方 icon

html
<!-- 根文件html引入  注意：xxxxxxxx是自己项目的在线链接 -->
<script src="http:xxxxxxxx"></script>


<!-- 使用 注意 xxxx是icon的代码 -->
<svg class="icon" aria-hidden="true">
    <use xlink:href="#xxxx"></use>
</svg>

Copyright © 2025 irai. All rights reserved | 粤ICP备2024313367号-1