1 HTML and CSS

admin2024-07-08  5

HTMl(超文本标记语言)


HTML 概述

1. HTML标签功能区分

<!DOCTYPE html>
<!-- * 语言设置 -->
<html lang="en">
  <head>
    <!-- ** 元信息 -->
    <!-- * 字符集设置 -->
    <meta charset="UTF-8" />
    <!-- * IE 兼容 -->
    <!--
      ? http-equiv="X-UA-Compatible" IE 特有属性
      ? content="IE=edge" 规定 IE 使用最新版本的标准模式渲染
     -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- * referrer 设置 -->
    <meta name="referrer" content="no-referrer" />

    <!-- * 移动端兼容 -->
    <!-- 
      ? name="viewport" 移动端设置
      ? width=device-width 可视区域的宽度为设备宽度
      ? height=device-height 可视区域的高度为设备高度
      ? initial-scale=1.0 页面首次被显示时可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
      ? maximum-scale=1.0, minimum-scale=1.0 可视区域的缩放级别
      ? user-scalable 是否可对页面进行缩放,no 禁止缩放
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- * 标题 -->
    <title>功能区分</title>
    <!-- * 介绍 -->
    <meta name="description" content="网页介绍" />
    <!-- * 关键字 -->
    <meta name="keywords" content="网页关键字" />

    <!-- * 链接默认地址、默认打开方式 -->
    <!-- 
      ? 1. href:url;
      ? 2. target:在何处打开链接; 
      ? _blank:新窗口;_parent:上一级窗口;_self:当前窗口(默认);_top:在浏览器的整个窗口打开链接,忽略任何框架
    -->
    <base href="" target="_blank" />

    <!-- * 引入首页样式 -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- * 引入首页脚本 -->
    <script src="index.js" async></script>
  </head>
  <body>
    <!-- ** 语义化标签 -->
    <h1-h6>一 ~ 六级标题</h1-h6>
    <p>段落</p>
    <div>块</div>
    <span>行内块</span>

    <!-- ** HTML5 新增HTML语义化标签 -->
    <header>头部</header>
    <nav>导航</nav>
    <main>主体</main>
    <article>章</article>
    <section>节</section>
    <aside>侧边栏</aside>
    <footer>底部</footer>

    <!-- ** 超链接 -->
    <a href="http://www.baidu.com" target="_blank"></a>

    <!-- ** 图像 -->
    <img src="./image/logo.png" alt="图像替换文本" />

    <!-- * 列表 -->
    <!-- * 有序列表 -->
    <ul>
      <li>列表项</li>
    </ul>
    <!-- * 无序列表 -->
    <ol>
      <li>列表项</li>
    </ol>
    <!-- * 定义列表 -->
    <dl>
      <dt>列表项目</dt>
      <dd>列表项目描述</dd>
    </dl>

    <!-- ** 表格 -->
    <!-- 
      ? border:边框
      ? cellpadding:单元格间距
      ? cellspacing:单元格内边距 
    -->
    <table border="1" cellpadding="0" cellspacing="0">
      <!-- * 表格头部 -->
      <thead>
        <tr>
          <th>表头</th>
        </tr>
      </thead>
      <!-- * 表格脚注 -->
      <tfoot></tfoot>
      <!-- * 表格主体 -->
      <tbody>
        <tr>
          <td>单元格</td>
        </tr>
      </tbody>
    </table>

    <!-- ** 表单 -->
    <!-- 
      ? action:提交地址;
      ? method:提交方式 
    -->
    <form action="http://www.baidu.com" method="post">
      <!-- 
        ? value="初始值"
        ? placeholder="提示文本"
        ? checked="加载时是否选中(true、false)"
        ? disabled 加载时输入字段禁用
        ? readonly 加载时输入字段只读
        ? autofocus 加载时自动获取焦点
       -->
      <!-- * input 输入框 -->
      <input type="text" />
      <!-- 输入框 -->
      <input type="password" name="name" id="id" />
      <!-- 密码框 -->
      <input type="button" value="value" />
      <!-- 按钮(不触发提交) -->
      <input type="checkbox" name="name" id="id" />
      <!-- 复选框 -->
      <input type="radio" name="name" id="id" />
      <!-- 单选框 -->
      <label for="name">元素标注</label>
      <!-- 元素标注  -->
      <input type="file" name="name" id="id" />
      <!-- 文件提交 -->
      <input type="image" src="src" alt="alt" />
      <!-- 图像形式文件提交 -->
      <input type="reset" value="value" />
      <!-- 表单重置 -->
      <input type="submit" value="value" />
      <!-- 表单提交 -->

      <!-- * input HTML5新增属性 -->
      <input type="search" name="name" id="id" />
      <!-- 搜索框 -->
      <input type="color" name="name" id="id" />
      <!-- 颜色选择器 -->
      <input type="range" name="name" id="id" />
      <!-- 滑动选择框 -->
      <input type="date" name="name" id="id" />
      <!-- 日期选择框 -->
      <input type="time" name="name" id="id" />
      <!-- 时间选择框 -->
      <input type="datetime-local" name="name" id="id" />
      <!-- 日期,时间选择框 -->
      <input type="url" name="name" id="id" />
      <!-- url输入框:提交验证 -->
      <input type="email" name="name" id="id" />
      <!-- email输入框:提交验证 -->
      <input type="number" name="name" id="id" />
      <!-- 数字输入框:提交验证 -->
      <input type="tel" name="name" id="id" />
      <!-- 手机号码输入框:提交验证 -->

      <!-- * button 按钮(触发提交操作) -->
      <button></button>

      <!-- * textarea 文本域 -->
      <textarea name="name" id="id" cols="30" rows="10"></textarea>

      <!-- * select 下拉框 -->
      <select name="name" id="id"></select>
      <!-- 下拉框选项 -->
      <option value="value"></option>
    </form>

    <!-- ** 脚本 -->
    <script src="./js/vue.js"></script>

    <!-- ** 样式 -->
    <style></style>

    <!-- ** 音、视频 -->
    <!-- 
      ? src:url地址
      ? autoplay:是否自动播放
      ? loop:重复播放
      ? muted:是否静音
      ? controls: 显示控件
    -->
    <audio src="url" autoplay loop muted controls></audio>
    <video src="url" autoplay loop muted controls></video>

    <!-- ** 图形 -->
    <canvas></canvas>

    <!-- ** 格式化标签(不推荐) -->
    <i>斜体</i>
    <em>强调文本</em>
    <b>粗体</b>
    <strong>强调文本</strong>
    <u>下划线</u>
    <ins>插入</ins>
    <s>删除线</s>
    <del>删除文本</del>
    <sup>上标</sup>
    <sub>下标</sub>
  </body>
</html>

2. HTML标签显示区分

块元素

<div></div>
<h1-h6></h1-h6>
<p></p>
<ol></ol>
<ul></ul>
<dl></dl>
<table></table>
<form action=""></form>

内联元素(行内元素)

<a href=""></a>
<span></span>
<label for=""></label>
<code></code>
<!-- 格式化标签 -->
<i>斜体</i>
<em>强调文本</em>
<b>粗体</b>
<strong>强调文本</strong>
<u>下划线</u>
<ins>插入</ins>
<s>删除线</s>
<del>删除文本</del>
<sup>上标</sup>
<sub>下标</sub>

行内块元素

<img src="" alt="">
<input type="text">
<select name="" id=""></select>
<button></button>
<textarea name="" id="" cols="30" rows="10"></textarea>

3. HTML语义化

语义化的优点

  • 在没CSS样式的情况下 页面整体也会呈现很好的结构效果
  • 代码结构清晰 易于阅读
  • 利于开发和维护 方便其他设备解析(如屏幕阅读器)根据语义渲染网页
  • 有利于搜索引擎优化(SEO) 搜索引擎爬虫会根据不同的标签来赋予不同的权重

CSS(层叠样式表)


CSS 概述

1. 盒模型

标准盒模型

  • 盒子总宽度(width) = (contentWidth ) + padding + border + margin
  • 盒子总高度(height) = (contentHeight ) + padding + border + margin
box-sizing: content-box

怪异盒模型

  • 盒子总宽度(width) = Width(contentWidth + padding + border) + margin
  • 盒子总高度(height) = Height(contentHeight + padding + border) + margin
box-sizing: border-box

2. 格式化上下文

BFC(块级格式化上下文)

  • BFC形成
    1. 根元素
    2. 脱离普通文档流的元素(浮动,固定定位,绝对定位等)
    3. 非块级元素(display设置了inline-block,table,flex)
    4. overflow属性值不为visible的块级元素
  • BFC影响
    1. BFC是页面上的独立作用域,内部元素不会和外部元素产生影响
    2. 同一个BFC内的相邻元素会发生垂直边距的折叠,即两者的边距取决于双方边距的最大值而不是总和
    3. 计算BFC时,内部浮动元素也会被计算在内
  • BFC应用场景
    1. 防止margin重叠(塌陷)
    2. 清除内部浮动

IFC(内联格式化上下文)

  • IFC形成
    1. 多个内联元素排列在一起的时候就形成一个IFC,这些内联元素直接不能穿插块级元素
  • IFC影响
    1. 一个IFC内的元素都是水平排列的
    2. 横向的margin、border、padding属性对这些元素都有效
    3. 垂直方向可以调整对齐方式

3. 三大特性

层叠性

  • (权重相同)样式作用到标签上,发生了样式冲突,后边的样式会把前边的样式给覆盖掉(层叠掉)
  • 就近原则
  • 复合属性不写的值,取默认值

继承性

  • 子元素和父元素样式没有冲突的时候,子元素会继承父元素的某些样式
    1. 字体属性(font)
    2. 文本属性(text)
    3. 元素可见性(visibilit)
    4. 表格布局属性
    5. 列表属性(list)
    6. 光标属性(cursor)
  • a 标签的字体颜色不能被继承
  • h1-h6标签字体的大小也是不能被继承的

优先级

!important
1,0,0,0
    行内样式(style)
0,1,0,0
    ID选择器(#id)
0,0,1,0
    类选择器(.class)
    伪类选择器(:hover)
    属性选择器([type="radio"])
0,0,0,1
    元素选择器(div)
    伪元素选择器(::before)
0,0,0,0
    通配符选择器(*)
  继承
    浏览器自带
其他选择器(对权重的计算没影响,即不参与计算)
    选择连接符:+,>,-, ,||
  • 多个(样式作用到同一个(类.标签),发生了样式冲突,权重高的先执行
  • !important > 行内式 > id > class > element > * > 浏览器自带 > 继承
  • 不同的选择器作用到同一个类(标签),权重会叠加(相加);权重可以叠加但不可以进位
  • 当子元素和父元素样式发生冲突的时候,权重相同的情况下,永远会执行子元素自身的样式

4. CSS 属性书写(顺序)

内容显示

display { // 元素显示模式
  display: block; // 块级
  display: inline; // 内联
  display: inline-block; // 行内块
  display: flex; // 弹性盒子
  display: grid; // 网格布局
  display: none; // 不显示(占据空间消失,引起回流/重排和重绘)
}

visibility { // 元素是否可见
  visibility: visible; // 元素可见(默认)
  visibility: hidden; // 元素不可见(占位置,引起重绘)
  visibility: collapse; // 表格元素中使用时,此值可删除一行或一列
}

overflow { // 元素溢出
  overflow: visible; // 内容不会被修剪(默认)
  overflow: hidden; // 内容会被修剪,并且其余内容是不可见的
  overflow: scroll; // 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
  overflow: auto; // 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
}

opacity { // 元素的不透明级别(支持过度)
  opacity: 1; // 不透明
  opacity: 0; // 透明
}

vertical-align { // 元素垂直对齐方式
  vertical-align: baseline; // 默认(对齐父元素基线)
  vertical-align: middle; // 父元素中部
  vertical-align: top; // 元素顶端与行内元素最高元素顶端对齐
  vertical-align: bottom; // 元素底端与行内元素最底元素底端对齐
}

position(定位)

position { // 定位
  position: relative // 相对定位(基于偏移前位置)
  position: absolute // 绝对定位(脱标,基于最近一级带有定位的父元素定位(最终为浏览器窗口,若浏览器滚对则随之滚动),左右margin失效)
  position: fixed // 固定定位(脱标,基于浏览器窗口,浏览器滚对不随之滚动)
  position: sticky // 粘性定位(可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位)
  position: static // 静态定位(默认)
}

float(浮动)

float { // 浮动(脱标)
  float: left // 左浮动
  float: right // 右浮动
  float: none // 无浮动
}

尺寸

width { // 宽度
  width: auto; // 宽度
  min-width: none; // 最小宽度
  max-width: none; // 最大宽度
}

height { // 高度
  height: auto; // 高度
  min-width: none; // 最小高度
  max-width: none; // 最小高度
}

box(布局盒子)

border { // 边框
  border: 1px solid #ccc; // 简写属性
    border-width: 1px; // 边框宽度
    border-style: solid; // 边框样式(solid:实线, dashed:虚线, dotted:点状, double:双线, none:无)
    border-color: #ccc; // 边框颜色
  
  border-radius: 50%; // 圆角边框(上左/上右/下右/下左)
}

outline { // 轮廓
  outline: 1px solid #ccc; // 简写属性
    outline-width: 1px; // 轮廓宽度
    outline-style: solid; // 轮廓样式(solid:实线, dashed:虚线, dotted:点状, double:双线, none:无)
    outline-color: #ccc; // 轮廓颜色
}

margin { // 外边距
  margin: 10px; // 简写属性(上/右/下/左; 上/左右/下; 上下/左右)
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

padding { // 内边距
  padding: 10px; // 简写属性(上/右/下/左; 上/左右/下; 上下/左右)
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

box-shadow { // 阴影
  * ? h-shadow 水平阴影位置,允许负值
  * ? v-shadow 垂直阴影位置,允许负值
  * ? blur 模糊距离
  * ? spread 尺寸
  * ? color 颜色
  * ? inset 将外部阴影 (outset) 改为内部阴影; 
  
  box-shadow: 1px 1px 5px 2px #ccc inset;
}

background(背景)

注意: positionsize 属性共同声明时:需用 / 进行分割

background { // 背景
  background: #ccc cover/center no-repeat content-box border-box fixed url(./image/logo.png); // 简写属性
    background-color: #fff; // 背景颜色
    background-size: cover; // 背景大小(x, y, cover, contain) // ? cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位																																	区域中; contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
    background-position: center; // 背景位置(x, y)
    background-repeat: no-repeat; // 背景是否重复(repeat, no-repeat, repeat-x, repeat-y)
    background-origin: content-box; // 背景定位区域(content-box, padding-box, border-box)
    background-clip: border-box; // 背景裁剪区域(content-box, padding-box, border-box)
    background-attachment: fixed; // 背景是否固定(fixed:固定, scroll:随着滚动)
    background-image: url(./image/logo.png); // 背景图片(none, url())
}

font(字体)

注意: 简写时 font-size and font-family 必须书写

font { // 字体
  font:12px/1 Arial, Helvetica, sans-serif; // 简写属性
    font-size: 12px; // 字体大小
    line-height: 1; // 行高
    font-family:Arial, Helvetica, sans-serif; // 字体系列
  font-weight: bold; // 字体粗细(400:normal, 700:bold)
}

text(文本)

text { // 文本
  color: #000; // 颜色
  line-height: 1; // 行高
  text-align: center; // 文本对齐方式(left:左对齐, right:右对齐, center:居中对齐, justify:两端对齐)
  text-decoration: none; // 文本装饰(underline:文本下的一条线, overline:文本上的一条线, line-through:穿过文本下的一条线, blink:闪烁的文本)
  text-indent: 2em; // 文本首行缩进
  text-transform: none; // 文本大小写(capitalize:单词首字母大写开头, uppercase:全大写, lowercase:全小写,)
  word-spacing: 1em; // 单词间距 
  white-space: nowrap; // 如何处理元素中的空白(normal:空白会被浏览器忽略(默认), nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止,)
  text-overflow: ellipsis; // 文本溢出(clip:修剪文本, ellipsis:显示省略符号来代表被修剪的文本, string:使用给定的字符串来代表被修剪的文本,)
  text-shadow: none; // 文本阴影
}

list-style(列表样式)

list-style { // 列表样式
  list-style-type: none; // 标记类型(none)
  list-style-position: inside; // 标记位置(none)
  list-style-image: none; // 标记图片(none)
}

cursor(光标)

cursor { // 光标样式
  cursor: pointer; // 小手
  cursor: default; // 箭头
  cursor: crosshair; // 十字线
  cursor: move; // 移动
  cursor: text; // 指示文本
  cursor: wait; // 正忙(表或沙漏)
  cursor: help; // 可用的帮助(问号或一个气球)
}

table(表格样式)

table { // 表格样式
  border-collapse: collapse; // 是否合并表格边框()
  border-spacing: 0; // 单元格边框之间的距离(x, y)
  caption-side: center; // 表格标题的位置(left, right, top, bottom, center)
  empty-cells: show; // 隐藏表格中空单元格上的边框和背景(show:绘制, hide:不绘制)
  table-layout: auto; // 显示表格单元格、行、列的算法规则(auto:自动, fixed:列宽由表格宽度和列宽度设定)
}

transform(2D/3D转换)

transform { // 2D/3D转换
  transform: translate(x, y, z) scale(x, y, z) rotate(x, y, z); // 简写属性
    transform: translate(x, y, z); // 转换
    transform: scale(x, y, z); // 缩放(一般为: 1/2 倍数)
    transform: rotate(x, y, z); // 旋转
}

transition(过度)

transition { // 过度
  transition: all 1s linear 0s; // 简写属性
    transition-property: all; // 属性名称(all:所有属性)
    transition-duration: 1s; // 花费时间(以 s 为单位)
    transition-timing-function: linear; // 时间曲线(linear平均速度)
    transition-delay: 0s; // 何时开始(以 s 为单位)
}

animation(动画)

@keyframes identifier { // 定义关键帧
  from{ } // 起始
  to{ } // 结束
  %{ } // 百分比设置
}

animation { // 动画
  animation: identifier 1s linear 0s infinite alternate; // 简写属性
    animation-name: identifier; // 动画名称
    animation-duration: 1s; // 花费时间(以 s 为单位)
    animation-timing-function: linear; // 时间曲线(linear平均速度)
    animation-delay: 0s; // 何时开始(以 s 为单位)
        // 特有设置
    animation-iteration-count: infinite; // 播放次数(n:Number, infinite:无限)
    animation-direction: alternate; // 是否逆向播放(normal:正常播放, alternate:逆序播放)
    // 设置 infinite 后无效
    animation-play-state: paused; // 运行或暂停(running:正常播放, paused:暂停动画))
    // 设置 direction 后无效
    animation-fill-mode: forwards; // 动画时间之外状态(backwards:回归第一帧, forwards:保持最后帧)
}

5. CSS 布局

1. 普通流

2. 浮动

float { // 浮动(脱标)布局
  float: left // 左浮动
  float: right // 右浮动
  float: none // 无浮动
}

3. 定位

position { // 定位布局
  position: relative // 相对定位
  position: absolute // 绝对定位(脱标)
  position: fixed // 固定定位(脱标)
  position: sticky // 粘性定位(相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位,须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同)
  position: static // 静态定位(无定位)
}

4. flex

flex { // flex 布局
  display: flex; // 定义 flex 容器
  display: inline-flex; //定义行内 flex 容器
  // flex 容器
  flex-flow: flex-direction flex-wrap; // 简写属性
    flex-direction: row; // 主轴方向(row:水平start, row-reverse:水平end, column:垂直start, column-reverse:垂直end)
    flex-wrap: nowrap; // 是否换行显示(wrap:换行, nowrap:不换行)

  place-content: align-content justify-content; // 简写属性
    align-content: center; // 纵轴空间分配(该属性对单行弹性盒子模型无效)
    justify-content: center; // 主轴空间分配(flex-start:从左至右排列项目, flex-end:从右至左排列项目, center:居中排列项目, space-between:均匀排列每个元素、首个元素放	  置于起点,末尾元素放置于终点, space-around:每个元素周围分配相同的空间、两侧间距较少(显示), space-evenly:均匀排列每个元素、每个元素之间的间隔相等, stretch:均匀分布项目 		、拉伸‘auto’-大小的项目以充满容器)

  gap: row-gap column-gap; // 简写属性
    row-gap: 10px; // 元素行之间的间隙大小
    column-gap: 10px; // 元素列之间的间隙大小
  
  place-items: align-items justify-items; // 简写属性
    align-items: center; // 控制十字轴上项目的对齐方式(flex-start:从左至右排列项目, flex-end:从右至左排列项目, center:居中排列项目, stretch:均匀分布项目 、拉                                     伸‘auto’-大小的项目以充满容器)
    justify-items: center; // 为所有盒中的项目定义了默认的 justify-self(弹性布局中,该属性被忽略)

  // item 项目
  flex: flex-grow flex-shrink flex-basis; // 简写属性
    flex-grow: 1; // flex 增长系数
    flex-shrink: 1; // flex 收缩系数
    flex-basis: auto; // flex 元素初始大小

  justify-self: auto; // 单个盒子在其布局容器适当轴中的对齐方式(弹性布局中,该属性被忽略)
  
  align-self: center; // 对齐当前 grid 或 flex 行中的元素,并覆盖已有的 align-items 的值(属性不适用于块类型的盒模型和表格单元;如果任何 flexbox 元素的侧轴方向 margin 						  值设置为 auto,则会忽略 `align-self`)
}

5. grid

grid { // grid 布局
  display: grid; // 定义 grid 网格
  display: inline-grid; // 定义行内 grid 网格
  // gird 容器 
  grid-template-columns: 100px auto 100px; // fr 容器剩余空间单位 minmax(最小,最大) r
  grid-template-rows: 100px 100px;

  gap: column-gap row-gap; // 简写
    column-gap: 10px; // 列轨道宽度
    row-gap: 10px; // 行轨道宽度

  // 定义一个区域并为区域内项目进行命名(不需要命名使用 . )
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';

  grid-auto-flow: row; // 项目排序方式(先行后列)默认,也可以设置 column 先列后行

  place-content: align-content justify-content; // 简写属性
    align-content: center; // 总体项目排列(需容器还有空间)
    justify-content: center; // 总体项目排列(需容器还有空间)

  grid-auto-columns: auto; // 隐式网格列设置
  grid-auto-rows: auto; // 隐式网格行设置

  // item 项目
  align-items: center; // 项目在轨道内垂直对齐方式(与flex相似)
  justify-items: center; // 项目在轨道内水平对齐方式(与flex相似)

  grid-column-start: 2; // 2 列轨道开始
  grid-column-end: 4; // 4 列轨道结束
  grid-row-start: 2; // 2 行轨道开始
  grid-row-end: 4; // 4 行轨道结束

  grid-area: b; // 制定项目放到哪个区域(需与 grid-template-areas 配合使用)

  justify-self: auto; // 单个盒子在其布局容器适当轴中的对齐方式(弹性布局中,该属性被忽略)
  
  align-self: center; // 对齐当前 grid 或 flex 行中的元素,并覆盖已有的 align-items 的值(属性不适用于块类型的盒模型和表格单元;如果任何 flexbox 元素的侧轴方向 margin 						  值设置为 auto,则会忽略 `align-self`)
}

6. 选择器

基础选择器

序号类型选择器例子例子描述CSS权重
1通配符选择器**选择所有元素。0,0,0,0
2标签选择器elementp选择所有
元素。
0,0,0,1
3类选择器.class.intro选择 class=“intro” 的所有元素。0,0,1,0
4id选择器#id#firstname选择 id=“firstname” 的所有元素。0,1,0,0

复合选择器语法

序号类型选择器例子例子描述CSS权重
1后代选择器element elementdiv p选择
元素内部的所有
元素。
0,0,0,1
2子代选择器element>elementdiv>p选择父元素为
元素的所有
元素。
0,0,0,1
3相邻兄弟选择器element+elementdiv+p选择紧接在
元素之后的所有
元素。
0,0,0,1
4通用选择器element1~element2p~ul选择前面有
元素的每个
元素。
0,0,1,0
5并集选择器element,elementdiv,p选择所有
元素和所有
元素。
0,0,0,1

伪元素选择器

序号类型选择器例子例子描述CSS权重
1伪元素选择器:first-letterp:first-letter选择每个
元素的首字母。
0,0,0,1
2伪元素选择器:first-linep:first-line选择每个
元素的首行。
0,0,0,1
3伪元素选择器:beforep:before在每个
元素的内容之前插入内容。
0,0,0,1
4伪元素选择器:afterp:after在每个
元素的内容之后插入内容。
0,0,0,1
5伪元素选择器::selection::selection选择被用户选取的元素部分。0,0,0,1

动态伪类选择器

序号类型选择器例子例子描述CSS权重
1链接伪类选择器:linka:link选择所有未被访问的链接。0,0,1,0
2链接伪类选择器:visiteda:visited选择所有已被访问的链接。0,0,1,0
3用户行为选择器:activea:active选择活动链接。0,0,1,0
4用户行为选择器:hovera:hover选择鼠标指针位于其上的链接。0,0,1,0
5用户行为选择器:focusinput:focus选择获得焦点的 input 元素。0,0,1,0

结构伪类选择器

序号类型选择器例子例子描述CSS权重
1结构伪类选择器:first-childp:first-child选择属于父元素的第一个子元素的每个
元素。
0,0,1,0
2结构伪类选择器:lang(language)p:lang(it)选择带有以 “it” 开头的 lang 属性值的每个
元素。
0,0,1,0
3结构伪类选择器:first-of-typep:first-of-type选择属于其父元素的首个
元素的每个
元素。
0,0,1,0
4结构伪类选择器:last-of-typep:last-of-type选择属于其父元素的最后
元素的每个
元素。
0,0,1,0
5结构伪类选择器:only-of-typep:only-of-type选择属于其父元素唯一的
元素的每个
元素。
0,0,1,0
6结构伪类选择器:only-childp:only-child选择属于其父元素的唯一子元素的每个
元素。
0,0,1,0
7结构伪类选择器:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个
元素。
0,0,1,0
8结构伪类选择器:nth-last-child(n)p:nth-last-child(2)同上,从最后一个子元素开始计数。0,0,1,0
9结构伪类选择器:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个
元素的每个
元素。
0,0,1,0
10结构伪类选择器:nth-last-of-type(n)p:nth-last-of-type(2)同上,但是从最后一个子元素开始计数。0,0,1,0
11结构伪类选择器:last-childp:last-child选择属于其父元素最后一个子元素每个
元素。
0,0,1,0
12结构伪类选择器:root:root选择文档的根元素。0,0,1,0
13结构伪类选择器:emptyp:empty选择没有子元素的每个
元素(包括文本节点)。
0,0,1,0
14结构伪类选择器:target#news:target选择当前活动的 #news 元素。0,0,1,0
15结构伪类选择器:enabledinput:enabled选择每个启用的 元素。0,0,1,0
16结构伪类选择器:disabledinput:disabled选择每个禁用的 元素0,0,1,0
17结构伪类选择器:checkedinput:checked选择每个被选中的 元素。0,0,1,0

属性选择器

序号类型选择器例子例子描述CSS权重
1属性选择器[attribute][target]选择带有 target 属性所有元素。0,0,1,0
2属性选择器[attribute=value][target=_blank]选择 target=“_blank” 的所有元素。0,0,1,0
3属性选择器[attribute~=value][title~=flower]选择 title 属性包含单词 “flower” 的所有元素。0,0,1,0
4属性选择器[attribute|=value][lang|=en]选择 lang 属性值以 “en” 开头的所有元素。0,0,1,0
5属性选择器[attribute^=value]a[src^=“https”]选择其 src 属性值以 “https” 开头的每个 元素。0,0,1,0
6属性选择器[attribute$=value]a[src$=“.pdf”]选择其 src 属性以 “.pdf” 结尾的所有 元素。0,0,1,0
7属性选择器[attribute*=value]a[src*=“abc”]选择其 src 属性中包含 “abc” 子串的每个 元素。0,0,1,0

否定伪类选择器

序号类型选择器例子例子描述CSS权重
1否定伪类选择器:not(selector):not§选择非
元素的每个元素。
不计算权重

7. CSS 函数

函数描述CSS 版本
attr()返回选择元素的属性值。2
calc()允许计算 CSS 的属性值,比如动态计算长度值。3
cubic-bezier()定义了一个贝塞尔曲线(Cubic Bezier)。3
conic-gradient()定义了一个圆锥渐变。3
counter()设置计数器。3
hsl()使用色相、饱和度、亮度来定义颜色。3
hsla()使用色相、饱和度、亮度、透明度来定义颜色。3
linear-gradient()创建一个线性渐变的图像。3
max()从一个逗号分隔的表达式列表中选择最大的值作为属性的值。3
min()从一个逗号分隔的表达式列表中选择最小的值作为属性的值。3
radial-gradient()用径向渐变创建图像。3
repeating-linear-gradient()用重复的线性渐变创建图像。3
repeating-radial-gradient()类似 radial-gradient(),用重复的径向渐变创建图像。3
repeating-conic-gradient()重复的圆锥渐变。3
rgb()使用红®、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。2
rgba()使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。3
var()用于插入自定义的属性值。3

8. CSS 单位

  • CSS 有几个不同的单位用于表示长度
  • 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等
  • 长度有一个数字和单位组成如 10px, 2em, 等
  • 数字与单位之间不能出现空格;如果长度值为 0,则可以省略单位
  • 对于一些 CSS 属性,长度可以是负数
  • 有两种类型的长度单位:相对和绝对

浏览器支持

长度单位ChromeIEFirefoxSafariOpera
em, ex, %, px, cm, mm, in, pt, pc13113.5
ch2791720
rem493.64.111.6
vh, vw20919620
vmin209.0*19620
vmax26不支持19不支持20

注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin ;

相对长度

单位描述
em它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;(自身存在字体大小设置时以自身为主,字体大小逐层复合会有连锁反应,不好调整
ex依赖于英文字母小 x 的高度
ch数字 0 的宽度
remrem 是根 em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。(除IE8即更早版本,均已支持)
vwviewpoint width,视窗宽度,1vw=视窗宽度的1%
vhviewpoint height,视窗高度,1vh=视窗高度的1%
vminvw和vh中较小的那个。
vmaxvw和vh中较大的那个。
%百分比

注意: rem与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素;

绝对长度

单位描述
cm厘米
mm毫米
in英寸 (1in = 96px = 2.54cm)
px像素 (1px = 1/96th of 1in)
ptpoint,大约1/72英寸; (1pt = 1/72in)
pcpica,大约 12pt,1/6英寸; (1pc = 12 pt)

备注: 像素或许被认为是最好的"设备像素",而这种像素长度和你在显示器上看到的文字屏幕像素无关;px实际上是一个按角度度量的单位;

9. 预处理器

CSS 预处理器主要目的

  • CSS语法不够强大(例如: CSS选择器无法进行嵌套,导致CSS中存在较多重复的选择器语句); CSS中无法定义变量以及没有合理的样式复用机制,导致整体CSS样式难以维护
  • 为了减少CSS代码冗余,为CSS提供样式复用机制,提高CSS代码的可维护性

CSS 预处理器工作流程

  • 以 Sass/Less/Styus 提供的语法规则编写样式代码
  • 经过编译器把 Sass/Less/Styus 编写的代码转换成标准的CSS代码
  • 浏览器加载解析转换后的CSS样式(浏览器只能解析标准的CSS代码,而不能是 Sass/Less/Styus 等)

Scss、Sass

Less

Stylus

10. CSS 布局方案

水平垂直居中

1. text-align + line-height
.layout {
  text-align: center;
  line-height: height;
}
2. position + 负margin
.layout {
  position: relative;
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
      margin-top: -50%;
       margin-left: -50%;
  }
}
3. position + transform
.layout {
  position: relative;
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
4. position + margin:auto
.layout {
  position: relative;
  .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
}
5. display: table-cell
.layout{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  .content {
      display: inline-block
  }
}
6. display: flex
layout {
  display: flex;
  justify-content: center;
  align-items: center;
}

单列布局

1. 全等宽,自适应

原理说明:对header、content、footer统一设置width或max-width,并通过margin:auto实现居中

/* HTML */ 
<div class="layout">
  <div id="header">头部</div>
  <div id="content">内容</div>
  <div id="footer">尾部</div>
</div>

/* less */
.layout {
  /*   width: 1200px; */
  /*设置width当浏览器窗口宽度小于1200px时,单列布局不会自适应;*/
  max-width: 1200px;
  margin: 0 auto;
}
2. 头、尾全等宽,内容自适应

原理说明:header、footer的内容宽度为100%,但header、footer的内容区以及content统一设置width 或 max-width,并通过margin:auto实现居中

/* HTML */ 
<div id="header">
  <div class="layout">头部</div>
</div>

<div id="content" class="layout">内容</div>

<div id="footer">
  <div class="layout">尾部</div>
</div>
/* less */
.layout {
    /*   width: 1200px; */
    /*设置width当浏览器窗口宽度小于1200px时,单列布局不会自适应;*/
  max-width: 1200px;
  margin: 0 auto;
}

双列&三列布局

1. float+(margin / overflow: hidden)

原理说明:设置两个侧栏分别向左向右浮动,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据浏览器窗口自适应

/* HTML */ 
<div id="content">
  <div class="sub">sub</div>
  <div class="extra">extra</div>
  <div class="main">main</div>
</div>

/* less */
.sub{
  width: 100px;
  float: left;
}
.extra{
  width: 200px;
  float: right;
}
.main{
  margin-left: 100px; 
  margin-right: 200px;
  // overfrow: hidden;
}

一些说明:

  • 注意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到);
  • 这种布局方式比较简单明了,但缺点是渲染时先渲染了侧边栏,而不是比较重要的主面板

二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同;反之亦然

2. position+margin

原理说明:设置两个侧栏分别向左向右定位,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据浏览器窗口自适应

/* HTML */ 
<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

/* less */
.sub, .extra {
  position: absolute;
  top: 0; 
  width: 200px;
}
.sub { 
  left: 0;
}
.extra { 
  right: 0; 
}
.main { 
  margin: 0 200px;
}

一些说明:

  • 本方法不限制DOM书写顺序,先写主面板会使主面板部分优先渲染(一般主面板会比侧栏内容重要)
  • 与上一种方法相比,本种方法是通过定位来实现侧栏的位置固定
  • 如果中间栏含有最小宽度限制,或是含有宽度的内部元素,则浏览器窗口小到一定程度,主面板与侧栏会发生重叠

二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同;反之亦然

3. 圣杯布局(float + 负margin)

原理说明
主面板设置宽度为100%,主面板与两个侧栏都设置浮动,常见为左浮动,这时两个侧栏会被主面板挤下去;通过负边距将浮动的侧栏拉上来,左侧栏的负边距为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负的自身宽度刚好浮动到主面板对齐的右边;为了避免侧栏遮挡主面板内容,父元素设置左右padding值为左右侧栏的宽度,给侧栏腾出空间,此时主面板的宽度减小;由于侧栏的负margin都是相对主面板的,两个侧栏并不会像我们理想中的停靠在左右两边,而是跟着缩小的主面板一起向中间靠拢;此时使用相对布局,调整两个侧栏到相应的位置
布局步骤:

  1. 三者都设置向左浮动
  2. 设置main宽度为100%,设置两侧栏的宽度
  3. 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度
  4. 设置父元素的padding值给左右两个子面板留出空间
  5. 设置两个子面板为相对定位,sub的left值为负的sub宽度,extra的right值为负的extra宽度
/* HTML */ 
<div id="bd">         
  <div class="main"></div>        
  <div class="sub"></div>        
  <div class="extra"></div>  
</div>

/* less */
#bd {
  padding: 0 230px 0 190px;

  .main {
    float: left;
    width: 100%;
  }

  .sub {
    float: left;
    width: 190px;
    margin-left: -100%;
    position: relative;
    left: -190px;
  }

  .extra {
    float: left;
    width: 230px;
    margin-left: -230px;
    position: relative;
    right: -230px;
  }
}

一些说明

  • DOM元素的书写顺序不得更改
  • 主面板部分优先渲染(一般主面板会比侧栏内容重要)
  • 当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉;可以通过设置main的min-width属性或使用双飞翼布局避免问题

二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的padding-right值,其他操作相同;反之亦然

4. 双飞翼布局( float + 负margin )

原理说明
双飞翼布局和圣杯布局的思想有些相似,都利用了浮动和负边距,但双飞翼布局在圣杯布局上做了改进,在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言,main的margin值变化便不会影响两个侧栏,因此省掉了对两侧栏设置相对布局的步骤
布局步骤:

  1. 三者都设置向左浮动
  2. 设置main-wrap宽度为100%,设置两个侧栏的宽度
  3. 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度
  4. 设置main的margin值给左右两个子面板留出空间
/* HTML */ 
<div class="main-wrap">
  <div class="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>

/* less */
.main-wrap {
  float: left;
  width: 100%;

  .main {
    margin: 0 230px 0 190px;
  }
}

.sub {
  float: left;
  width: 190px;
  margin-left: -100%;
}

.extra {
  float: left;
  width: 230px;
  margin-left: -230px;
}

一些说明

  • 主面板部分优先渲染(一般主面板会比侧栏内容重要)
  • 圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局main的最小宽度不能小于左侧栏的缺点
  • 双飞翼布局不用设置相对布局,以及对应的left和right值
  • 通过引入相对布局,可以实现三栏布局的各种组合,例如对右侧栏设置position: relative; left: 190px;,可以实现sub+extra+main的布局(元素移出返回)

二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置main-wrap的margin-right值,其他操作相同;反之亦然

HTML and CSS 特性要点


HTML5 新特性

  1. 拖拽释放: (Drap and drop) API ondrop,拖放是一种常见的特性,即抓取对象以后拖到另一个位置;在HTML5中,拖放是标准的一部分,任何元素都能够拖放
  2. 自定义属性: data-id
  3. 语义化标签: header, nav, footer, aside, article, section, main
  4. 音 / 视频: audio / video
  5. 画布: Canvas
  6. 地理: (Geolocation) API其实Geolocation 就是用来获取到当前设备的经纬度(位置)
  7. localStorage: 本地离线存储,用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动删除
  8. sessionStorage: 该数据对象临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
  9. 新增表单控件: search,color,range,date,time,datetime-local,url,email,number,tel
  10. 新的技术: web worker(为 Web 内容在后台线程中运行脚本提供了一种简单的方法),web socket(提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API),Geolocation(获取设备地理位置的可编程的对象)

CSS3 新特性

  1. 新增颜色模式: RGBA,HSLA
  2. 文字阴影:text-shadow
  3. 边框:圆角边框(border-radius);边框阴影(box-shadow);图片边框(border-image)
  4. 盒子模型:box-sizing
  5. 背景:background-size background-origin background-clip
  6. 渐变:linear-gradient , radial-gradient
  7. 过渡:transition,可实现属性的渐变
  8. 自定义动画: animate @keyfrom
  9. 媒体查询: 多栏布局@media screen and (width:800px) (…)
  10. 2D 转换/3D 转换:transform: translate (x, y) rotate (x, y) skew (x, y) scale (x, y)
  11. 字体图标:iconfont/icomoon
  12. 弹性布局:flex布局
  13. 网格布局:Grid布局

Canvas和SVG的区别是什么

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

Canvas 与 SVG 的比较

Canvas
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

位图跟矢量图的区别

位图

位图图像也称为点阵图像,位图使用我们称为像素的一格一格的小点来描述图像

矢量图

矢量图是根据几何特性来绘制图形,是用线段和曲线描述图像,矢量可以是一个点或一条线,矢量图只能靠软件生成,矢量图文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合

区别
  • 矢量图形与分辨率无关,可以将它缩放到任意大小和以任意分辨率在输出设备上打印出来,都不会影响清晰度
  • 而位图是由一个一个像素点产生,当放大图像时,像素点也放大了,但每个像素点表示的颜色是单一的,所以在位图放大后就会出现咱们平时所见到的马赛克状。

浏览器兼容性前缀

-moz-: 代表firefox浏览器私有属性
-ms-: 代表IE浏览器私有属性
-webkit-: 代表chrome、safari私有属性
-o-: 代表opera私有属性

优雅降级,渐进增强

响应式设计

  1. 媒体查询方案
  2. 百分比 方案
  3. VH/VW 方案
  4. rem 方案

媒体查询

@media screen and (max-width: 1920px) { ... }
// 设置更多条件
@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px
  }
}

readonly 和 disabled 的区别

  1. 两个属性都可以作用于input等表单元素上,都使得元素成为“不可用”的状态;
  2. 两者的字面意义
  • readonly表示“只读”,一般表示对于文字内容只读,即不可更改内容,对于非文字的表单“只读”与“不只读”似乎没有啥区别;
  • disabled表示“使残废,使无效”,都残废了,不管是什么内容,都是无效的。(禁用)

HTML and CSS 实现方案


rem 适配方案

1. 通用方案

  1. 设置根font-size: 625%(或其它自定的值,但换算规则1rem不能小于12px)
  2. 通过媒体查询分别设置每个屏幕的根font-size
  3. CSS直接除以2再除以100即可换算为rem

优点: 有一定适用性,换算也较为简单
缺点: 有兼容性的坑,对不同手机适配不是非常精准;需要设置多个媒体查询来适应不同手机,单某款手机尺寸不在设置范围之内,会导致无法适配

2. 手淘方案

  1. 拿到设计稿除以10,得到font-size基准值
  2. 引入flexible
  3. 不要设置meta的viewport缩放值
  4. 设计稿px/ font-size基准值,即可换算为rem
@rootSize: 37.5rem; // 设计稿 / 10
(10 / @rootSize) // px / 基准值

优点: 通过动态根font-size、viewpor、dpr来做适配,无兼容性问题,适配精准
缺点: 需要根据设计稿进行基准值换算,在不使用编辑器插件开发时,单位计算复杂

清除浮动

1. clear: both 方案

.block { // 在盒子布局的尾部放置一个块级元素,设置不允许两侧有浮动元素
  clear: both;
}

2. 伪元素清除浮动方案

.clearfix:after {
  content: "."; // 伪元素必写,添加内容为兼容写法
  display: block; // 设置块级元素以设置清除浮动属性
  visibility: hidden; // 隐藏元素
  height: 0; // 高度为0,不显示此元素
  clear: both; // 清除浮动
}
/* for IE */
.clearfix{
  *zoom: 1; // 兼容IE
}

注意: 也可以给父级元素设置overflow: hidden;或overflow: auto;清除浮动方案本质上是将同一个BFC中的两个元素隔开

CSS画三角形

  1. border是由三角形组合而成的
  2. 如果想要其中一个,只需要把另外三个的颜色都设为 transparent(透明)
  3. 不过其他隐藏的左边框依然占据着空间,如果不想要,可以把右边框的 border-width 设为 0
/* HTML */ 
div {
    width:0;
    height:0;
    border-style: solid;
    border-width: 40px 0px 40px 40px;
    border-color: transparent transparent transparent red;
}

效果如下:

小于1px的边框

1. 渐变方案(效果较好)

.layout {
  position: relative;
  .layout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(0deg, transparent 50%, #000 50%); // 0 edg 向↑ 90edg 向→;-webkit 原理实现 为 90edg 向↑,0 edg 向→
  }
}

2. 缩放方案

.layout {
  position: relative;
  .layout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000; // border-top: 1px solid #000;
    transform: scaleY(0.5);
  }
}

3. 缩放方案加强版(四边)

.layout {
  position: relative;
  .layout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    transform-origin: 0 0; // 缩放定位设置为左上角
    transform: scale(0.5, 0.5);
  }
}

4. 边框阴影(最简便)

.layout {
    box-shadow: 0 0 1px 1px #000 inset;
}

小于12px的字体

.layout {
  display: inline-block; // 行内块,不影响布局
  transform: scale(0.8); // 10px
}

文本溢出显示

1. 单行文本溢出显示

.layout { // 前置条件: 设置宽度
  white-space: nowrap; // 是否折行
  overflow: hidden; // 溢出隐藏
  text-overflow: ellipsis; // 文本溢出部分以省略号代替
}

2. 多行文本溢出显示

.layout {
  overflow: hidden; // 溢出隐藏
  text-overflow: ellipsis; // 文本溢出部分以省略号代替
  display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 4; // 控制最多显示几行
  -webkit-box-orient: vertical; // 设置伸缩盒对象子元素的排列方式
}

精灵图(雪碧图)

background-position:x,y;(X和Y一般都取负值)把图片背景移动到自己需要的位置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!