首页 > 其他分享 >H5 C3随手记

H5 C3随手记

时间：2023-02-27 16:02:35浏览次数：48  
标签：随手 样式 标签 元素 H5 设置 C3 选择器 属性

HTML5+CSS3回顾复习

构成 语言 说明
结构 HTML（超文本标记语言） 页面元素和内容
表现 CSS 网页元素的外观和位置等样式（如：颜色，大小等）
行为 JavaScript 网页模型的定义和页面交互

HTML5学习

注释的作用

  1. 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
  2. 浏览器执行代码时会忽略所有的注释

HTML标签结构

  1. 由<、>、/、英文单词或字母组成，例如
  2. 常见的标签由开始标签与结束标签组成，称之为双标签
  3. 少数标签只有开始标签，称之为单标签

HTML标签学习

标题标签 h*

  1. h系列标签

    <h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>

  2. 语义：1~6级标题，逐级递减

  3. 特点：文字加粗；字号逐级递减；独占一行

段落标签 p

  1. 在新闻和文章的页面中，用于分段显示
  2. 代码：

    一段文字

  3. 特点：段落之间存在间隙；独占一行

换行标签 br

  1. 强制让文字换行显示
  2. 单标签

水平线标签 hr

  1. 分割不同主题内容的水平线
  2. 单标签
  3. 在页面中显示一条水平线

文本格式化标签

  1. 需要让文字加粗、下划线、倾斜、删除线等效果

    标签 说明 标签
    b 加粗 strong
    u 下划线 ins
    i 倾斜 em
    s 删除线 del

  2. 突出重要性的强调语境

媒体标签

图片标签 img
  1. 在网页中显示图片
  2. 替换文本，当文件显示不出来时出现
  3. 特点：单标签；需要对src属性进行设置
音频标签 audio

  1. 在页面中插入音频

  2. <audio src="音频文件路径" controls></audio>
  3. 属性名 功能
    src 音频路径
    controls 显示播放控件
    autoplay 自动播放（部分浏览器不支持）
    loop 循环播放
视屏标签 video

  1. 在页面中插入视频

  2. <video src="视频文件路径"></video>

  3. 属性同音频标签类似

  4. 属性名 功能
    src 音频路径
    controls 显示播放控件
    autoplay 自动播放（谷歌浏览器需配合muted实现静音播放）
    loop 循环播放
路径
  1. 绝对路径（了解）：指目录下的句对未知，例如完整的网络地址或盘符（D:\Users\FontEnd study note）
  2. 相对路径（常用）：从当前文件出发寻找目标文件的过程，分为三种
    1. 同级目录：./pig.img 或 pig.img
    2. 下级目录：./img/pig.img
    3. 上级目录：../pig.img

链接标签 a

  1. 点击后，从一个页面跳转到另一个页面

  2. 称呼：a标签、超链接、锚链接

  3. 代码：

    <a href="./目标网页.html">超链接</a>	
<!-->
	href：跳转路径\
	空连接为#
<-->

  4. 特点：双链接，内部可以包裹内容；跳转指定页面，需设置a标签的href属性

  5. a标签的target属性的属性值，表明目标网页的打开形式

    取值 效果
    _self 默认值，在当前窗口中跳转（覆盖原网页）
    _blank 在新窗口中跳转（保留原网页）

列表标签 ul/ol li

  1. 列表的应用场景：无序状态用无序列表，有排序的用有序列表，自定义的用自定义列表

  2. 无序列表：在网页中表示一组无顺序之分的列表，如新闻

    <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>
    标签名 说明
    ul 表示无序列表的整体，用于包裹li标签
    li 表示无序列表的每一项，用于包裹每一行的内容
    属性名 属性值
    type circle：空心圆点；square：方块；disc：实心圆点

    注意点： 有序列表一样

    ​ 1、ul标签内只允许包含li标签

    ​ 2、li标签可以包含任意内容

  3. 有序列表：在网页中表示一组有顺序之分的列表，如排行榜

    <ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ol>
    标签名 说明
    ol 表示有序列表的整体，用于包裹li标签
    li 表示有序列表的每一项，用于包含每一行的内容
    属性名 属性值说明
    type A:序号为大写字母；a：序号为小写字母；I:大写罗马数字；i：小谢罗马字母；默认为1
    start 设置起始数字

  4. 自定义列表 ：通常在网页的底部导航中使用自定义列表实现

    <dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
</dl>
    标签名 说明
    dl 表示自定义列表的整体，用于包裹dt/dd标签
    dt 表示自定义列表的主题
    dd 表示自定义列表的针对主题的每一项内容（会默认显示缩进效果）

    注意点：

    ​ 1、dl只能包含dt、dd标签

    ​ 2、dt、dd可以包含任意标签

表格标签 table

  1. 在网页中以行+列的单元格的方式整齐展示和数据

    标签名 说明
    table 表格整体，可用于包裹多个tr
    tr 表格行，可用于包裹td
    td 表格单元格，可用于包裹内容

  2. 常见相关属性

    属性名 属性值 效果
    border 数字 边框宽度
    width 数字 表格宽度
    height 数字 表格高度
    caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示
    th 表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中
    thead 表格头部 三者是表格的结构标签，了解即可，可省略，用于包裹tr标签
    tbody 表格主题
    tfoot 表格底部

  3. 单元格合并

    • 将水平或垂直多个单元格合并成一个单元格

    • 步骤：

      1. 明确合并哪几个单元格

      2. 通过左上原则，确定保留与删除的单元格

        • 上下合并 -> 只保留上面的，删除其他
        • 左右合并 -> 只保留最左的，删除其他的

      3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

        属性名 属性值 说明
        rowspan 合并单元格的个数 跨行合并，将多行的单元格垂直合并
        colspan 合并单元格的个数 跨列合并，将多列的单元格水平合并

        只有同一个结构标签中的单元格能够合并，不能跨结构标签合并（不能跨：thead，tbody，tfoot）

  4. 示例代码

    <table border="1" width="400">		<!--> table > tr = caption > td = th <-->
    <caption>学生成绩单</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>排名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>李明</td>
            <td>89</td>
            <td rowspan="2">2</td>
        </tr>
        <tr>
            <td>李红</td>
            <td>99</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="2">不错</td>
        </tr>
    </tfoot>
</table>

表单标签

​ 表单标签需要配合form域标签使用，用form标签把表单标签一起包裹起来

  1. input系列标签

    1. 在网页中显示收集用户信息的表单效果，如登录页、注册页

    2. 通过type属性，设置不同的效果

      属性名 属性名 说明
      type属性值
      text 文本框，用于输入单行文本
      password 密码框，用于输入密码
      radio name属性：相同为一组 单选框，用于多选一
      checkbox checked属性：表示默认选中 多选框，用于多选多
      file multiple：多文件选择 文件选择，用于之后上传文件
      submit value属性：更改提示文字 提交按钮，用于提交
      reset 重置按钮，用于重置
      button type值：submit；reset
      双标签      		 普通按钮，默认无功能，需配合js添加功能
      placehold属性名 提示用户输入

  2. button按钮标签

    1. 可以通过设置type属性为submit、reset、button等属性值设置button按钮功能
    2. button标签为双标签

  3. select下拉菜单标签

    1. 在网页中提供多个选择想的下拉菜单表单控件

    2. 组成

      • select标签：下拉菜单的整体
      • option标签：下拉菜单的每一项

    3. 创建属性：

      • selected：下拉菜单中默认选中

    4. 示例代码

      <select name="area" id="sele">
    <option value="北京">北京</option>
    <option value="上海" selected>上海</option>
    <option value="广州">广州</option>
    <option value="深圳">深圳</option>
</select>

  4. textarea文本域标签

    ​ 注意点

    ​ 1、右下角可以拖拽改变大小

    ​ 2、实际开发中针对于样式效果推荐使用CSS设置

    1. 在网页中提供可输入多行文本的表单控件
    2. 常见属性
      • cols：规定文本域内可见宽度
      • rows：规定文本域内可见行数

  5. label标签

    1. 常用于绑定内容与表单标签的关系

    2. 使用方法

      1. 第一种
        • 使用label标签把内容（如：文本）包裹起来
        • 在表单标签上添加id属性
        • 在label标签的for属性中设置对应的id属性值
      2. 第二种
        • 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
        • 需要把label标签的for属性删除即可

    3. 代码示例

      <!-->第一种<-->
<input type="radio" name="sex" id="man"> <label for="man">man</label> <br>
<input type="radio" name="sex" id="woman"> <label for="woman">woman</label>
<!-->第二种<-->
<label>优秀<input type="radio" name="pj"></label>
<label>良好<input type="radio" name="pj"></label>

语义化标签 div/span

  1. 用于网页布局

  2. div标签：行标签（独占一行）

  3. span标签：块标签（一行可以显示多个）

  4. 在HTML5新版本中，推出了一些有语义的布局标签供开发者使用（大多用于手机网页制作）

    标签名 语义
    header 网页头部
    nav 网页导航
    footer 网页底部
    aside 网页侧边栏
    section 网页区块
    article 王爷文章

    以上标签显示特点和div一致，但多了不同的语义

CSS3：层叠样式表

关于样式的层叠问题，若同一个标签设置了相同的样式，此时样式会层叠，写在后面的覆盖前面的

CSS引入方式

  1. 内嵌式：CSS写在style标签内，style标签通常卸载head标签中

  2. 外联式：CSS写在一个单独的.css文件中，通过link标签引入

  3. 行内式：CSS写在标签的style属性中

    <style>
    h1 {
        color: blue;
    }
</style><!-->内嵌式<-->
<link rel="stylesheet" href="指向css文件路径"></link>	<!-->外联式<-->

<div style="color=blue;"><!-->行内式<-->
    CSS修饰了网页真的很美
</div>

基础选择器

标签选择器

  1. 通过标签名，找到页面中所有这类标签，设置样式
  2. 结构： 标签名

类选择器

  1. 通过类名，找到页面中所有带有这个类名的标签，设置样式

  2. .类名

注意点：

​ 1、所有标签上都有class属性，class属性的属性值成为类名

​ 2、类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

​ 3、一个标签可以同时有多个类名，类名之间以空格隔开

​ 4、类名可以重复，一个类选择器可以同时选中多个标签

id选择器

  1. 通过id属性值，找到页面中带有这个id属性值的标签，设置样式

  2. id属性值

注意点：

​ 1、所有标签上都有id属性

​ 2、id属性值在一个页面中是唯一的，不可重复

​ 3、一个标签只能有一个id属性值

​ 4、一个id选择器只能选中一个标签

通配符选择器

  1. 对页面中所有的标签设置样式

  2. *

    注意点：

    ​ 1、可用于去除标签默认的margin和padding

字体和文本样式

字体样式

  1. 文字大小：font-size

    • 取值：数字+px（或em等单位）
    • 谷歌浏览器默认字体大小为16px

  2. 字体粗细：font-weight

    • 取值：
      • 关键字
        • 正常：normal
        • 加粗：bold
      • 纯数字100~900的整百数
        • 正常：400
        • 加粗：700
    • 不是所有字体都提供了九种粗细，不分取值页面中无变化

  3. 字体样式：font-style

    • 取值：
      • 正常（默认值）：normal
      • 倾斜：italic

  4. 字体类型：font-family

    • 常见取值：具体字体1,具体字体2,...,字体系列

      • 具体字体："Microsoft YaHei"、微软雅黑、黑体...
      • 字体系列：sans-serif、serif、monospace 等......

    • 渲染规则：

      • 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
      • 如果都不支持，则根据操作系统，显示最后字体系列中的默认字体

      注意点：

      ​ 1、如果字体名称中存在多个单词，推荐使用引号包裹

      ​ 2、最后一项字体系列不需要引号包裹

      ​ 3、网页开发中，尽量使用系统常见自带字体，保证不同用户浏览网页可正确显示

  5. 字体类型：font属性连写

    • 属性复写

      • font: style weight size family;

    • 只能省略前两个，相当于设置为默认值

      如果需要同时设置单独和连写的形式

      ​ 要么单独样式写在连写的下面

      ​ 要么单独的样式写在连写里面

文本样式

  1. 文本缩进：text-indent

    • 取值
      • 数字+px
      • 数字+em（推荐，1em=当前标签的font-size的大小，即等于一个字的大小）

  2. 文本水平对齐方式：text-align

    1. 取值

      属性值 效果
      left 左对齐
      center 居中对齐
      right 右对齐

      text-align：center; 可让文本、span、a、input、img标签居中，只需给这些标签的父标签设置即可

  3. 文本修饰：text-decoration

    1. 取值

      属性值 效果
      underline 下划线（常用）
      line-through 删除线（不常用）
      overline 上划线（几乎不用）
      none 无装饰线（常用

      开发中常用text-decoration: none; 清楚a标签默认的下划线

行高

  1. 作用：控制一行的上下行间距
  2. 属性名：line-height
  3. 取值：
    • 数字+px
    • 倍数（当前标签font-size的倍数）
  4. 应用：
    1. 让单行文本垂直居中可以设置line-height: 文字父元素高度
    2. 网页精准布局时，会设置line-height: 1; 可以取消上下间距\
  5. 行高与font连写的注意点：
    • 如果同时设置了行高和font连写，注意覆盖问题
    • font: style weight size/line-height family;

拓展：

颜色的常见取值

  1. 属性名：如文字颜色color；背景颜色：background-color

  2. 属性值

    颜色表示方式 表示含义 属性值
    关键字 预定义的颜色名 red、green、blue...
    rgb表示法 红绿蓝三原色，每项0~255 rgb(0,0,0)、rgb(255,255,255)...
    rgba表示法 红绿蓝三原色+a表示透明度，取值0~1 rgba(255,255,255,0.5)...
    十六进制表示法 #开头，将数字转换成十六进制表示 #000000、#ff0000、简写：#000、#f00
标签水平居中方法总结

  1. 使div、p、h（大盒子）水平居中

    • 通过设置 margin: 0 auto; 实现

    1、如果让大盒子水平居中，直接给当前元素设置即可

    2、margin: 0 auto; 一般针对固定宽度的盒子，若大盒子没有设置宽度，此时默认沾满父元素的宽度

CSS进阶

选择器进阶

复合选择器

后代选择器：空格

  1. 根据HTML标签的嵌套关系，选择父元素 后代中满足条件的元素

  2. 语法：选择器1 选择器2 {css}

  3. 结果：在选择器1所找到标签的后代（儿子、孙子...）中，找到满足选择器2的标签，设置样式

    注意点：

    ​ 1、后代包括儿子、孙子、重孙子......

    ​ 2、后代选择器中，选择器与选择器之间通过空格隔开

子代选择器：>

  1. 根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

  2. 语法：选择器1 > 选择器2 {css}

  3. 结果：在选择器1中所找到的标签的子代（儿子）中，找到满足选择器2的标签，设置样式

    注意点：

    ​ 1、子代只包括：儿子

    ​ 2、子代选择器中，选择器与选择器之间通过 > 隔开

并集选择器 ,

  1. 通过选择多组标签，设置相同的样式

  2. 语法：选择器1,选择器2,...

  3. 结果：为多个选择器设置相同的样式

    注意点：

    1. 并集选择器中的每组选择器之间通过 , 分割
    2. 并集选择器中的每组选择器可以是基础选择器或者是复合选择器
    3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

交集选择器

  1. 选中页面中同时满足多个选择器的标签

  2. 语法：选择器1选择器2

  3. 结果：（既又原则）找到页面中同时满足选择器1、2的标签，设置样式

    注意点：

    1. 交集选择器中的选择器之间紧挨着，没有分割
    2. 交集选择器中如果有标签选择器，则标签选择器必须写在最前面

伪类选择器

hover悬停

  1. 选中鼠标悬停在元素上的状态，设置样式

  2. 语法：选择器:hover

    注意点：

    1. 伪类选择器选中的元素的某种状态
    2. 任何标签都可以设置hover

Emmet语法

  1. 通过简写语法，快速生成代码

  2. 语法：(很多，不一一列举)

    记忆 示例 结果
    标签名 div
    类选择器 .red
    id选择器 #one
    交集选择器 p.red#one

结构伪类选择器

  1. 作用：根据元素在HTML中的结构关系查找元素
  2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁
  3. 场景：常用于查找某父级选择其中的子元素
其他伪类选择器参考如下

​ CSS伪类选择器CSDN文章：转载－－－＞　http://t.csdn.cn/RBZkP

伪元素

  1. 一般页面中的非主体内容使用为元素

  2. 区别：

    1. 元素：HTML设置的标签
    2. 伪元素：由CSS模拟出的标签效果

  3. 种类：

    伪元素 作用
    ::before 在父元素内容的最前添加一个伪元素
    ::after 在父元素内容的最后添加一个伪元素

    注意点：

    1. 必须设置content属性才能生效

    2. 伪元素默认时行内元素

    3. #one::before {
    content: "内容";
}
#one::after {
    content: "内容";
}

    4. 相当于添加了一个标签

背景

背景颜色

  1. 属性名：background-color (bck)

  2. 属性值：颜色取值

    1. 背景颜色默认值是透明：rgba(0,0,0,0)、transparent
    2. 不会影响盒子大小，并可看清盒子的大小和位置

背景图片

  1. 属性名：background-image (bgi)

  2. 属性值：background-image: url('图片路径');

    注意点：

    1. 背景图片中url中可以省略引号
    2. 背景图片默认是在水平和垂直方向平铺的
    3. 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，不会撑开盒子

背景图片大小

  1. 属性名：background-size

  2. 属性值：background-size: 100% 100%; //铺满盒子

    body {
    width: 100%;
    height: 100%;
    background: url(图片路径) no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed; /* 不设置的话页面滑动时，背景会不铺满*/
}

背景平铺

  1. 属性名：background-repeat（bgr）

  2. 属性值：background-repeat: xxxx;

    取值 效果
    repeat （默认值）水平和垂直方向都平铺
    no-repeat 不平铺
    repeat-x 沿着水平方向（x轴）平铺
    repeat-y 沿着垂直方向（y轴）平铺

背景位置

  1. 属性名：background-position（bgp）

  2. 属性值：background-position: 水平方向位置 垂直方向位置;

    1. 方位名词（最多只能表示9个位置）

      水平方向 垂直方向
      left top
      center center
      right bottom

    2. 数字+px(坐标)

      • 坐标系

        • 原点(0,0) 盒子的左上角
        • x值：水平向右
        • y值：垂直向下

      • 操作，将图片左上角与坐标点重合即可

        注意点：

        ​ 方位名词取值和坐标取值可以混合使用，第一个取值表示水平方向，第二个取值表示垂直

背景相关属性连写

  1. 属性名：background （bg）

  2. 属性值：单个属性值的合写，取值间用空格隔开

  3. 推荐书写顺序：background: color image repeat position

    注意点

    1. 若需要设置单独的样式和连写
      • 单独的样式写在连写的下面
      • 单独样式写在连写的里面

元素显示模式

块级元素

  1. 显示特点
    1. 独占一行（一行只显示一个）
    2. 宽度默认是父元素的宽度，高度默认由内容撑开
    3. 可以设置宽高
  2. 代表标签：
    1. div、p、h系列、ul、li、dl、dt、dd、form、header......

行内元素

  1. 显示特点
    1. 一行可以显示多个
    2. 宽度高度由内容撑开
    3. 不可设置宽高
  2. 代表标签
    1. a、span、b、u、i......

行内块元素

  1. 显示特点
    1. 一行可以显示多个
    2. 可以设置宽高
  2. 代表标签
    1. input、textarea、botton......
    2. 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

元素显示模式转换

  1. 目的：改变元素默认的显示特点，让元素符合布局要求

  2. 语法

    属性 效果 使用频率
    display: block 转换成块级元素 较多
    display: inline-block 转换成行内块元素 较多
    display: inline 转换成行内元素 较少

  3. 拓展1：HTML嵌套规范注意点

    1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等
      • 但p标签不要嵌套div、p、h等块元素
    2. a标签内部可以嵌套任一元素（但不要嵌套a标签）

CSS特性

继承性

  1. 特性：子元素有默认继承父元素样式的特点

  2. 可以继承的常见属性（文字控制属性都可以继承）

    1. color
    2. font-style、font-weight、font-size、font-family
    3. text-indent、text-align
    4. line-height
    5. ......

    注意点：可以通过调试工具判断样式是否可以继承

    如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

    1. a标签的color会继承失败，需要单独设置样式
    2. h系列的font-size会继承失败

层叠性

  1. 特性：

    1. 给同一个标签设置不同的样式➡️此时样式会层层叠加➡️会共同作用在标签上

    2. 给同一个标签设置相同的样式➡️样式会层叠覆盖，后面的样式会生效

      注意点：

      ​ 当样式冲突时，只有当选择器优先级相同时，才能通过层叠行判断结果

选择器的优先级特性

  1. 特性，不同的选择其具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
简单选择器优先级
  1. !important （在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式）
  2. 行内样式，在style属性里面写的样式
  3. id选择器
  4. 类选择器
  5. 标签选择器
  6. 通配符选择器 *{}
  7. 浏览器的自定义属性和继承
复杂选择器优先级，后代选择器优先级多种情况
  1. id个数多的优先级高
  2. id和class个数相同，元素个数多的优先级高
  3. 优先级相同，后面的样式会覆盖前面的样式，不分先后顺序，只看选择器类型和个数

盒子模型

圆角边框

  1. 语法：border-radius: length; (可用精准数字或用百分比)

    div {
    border-radius: 15px;	/*用于四个角，远角都一样*/
    border-radius: 15px 15px; 	/*第一个用于左上角和右下角，第二个值用于右上角和左下角*/
    border-radius: 15px 15px 30px; /*第一个用于左上角，第二个用于右上角和左下角，第三个用于右下角*/
    border-radius: 15px 50px 30px 5px; /*依次分别用于左上、右上、右下、左下*/
}

盒子阴影

  1. 语法：box-shadow: inset h-shadow v-shadow blur-radius color;

    box-shadow: inset h-shadow v-shadow blur-radius color;
/* inset 表示阴影类型为内阴影 */
/* outset 表示阴影类型为外阴影  （不添加时默认为外阴影，但是添加后反而无效  故想表示外阴影时不添加即可）*/
/* h-shadow 表示阴影水平位移量 可以为负值*/
/* v-shadow 表示阴影垂直位移量 可以为负值*/
/* blur-radius 表示阴影模糊半径 即阴影向外模糊的模糊范围  值越大越模糊 */
/* color 表示阴影颜色，定义绘制阴影时所使用的颜色 */

文字阴影

  1. 语法：text-shadow: h-shadow v-shadow blur color;

    text-shadow: h-shadow v-shadow blur color; 
/* h-shadow 必需，水平阴影的位置，允许负值 */
/* v-shadow 必需，垂直阴影的位置，允许负值 */
/* blur     可选，模糊距离     如果设置的是0，那么将和正常的文字清晰度一样 */
/* color    可选，阴影的颜色 */

CSS3盒模型自动内减

  • 需求：给盒子设置border和padding时，盒子不会被撑大
  • 解决方法：
    • 方法1：手动内减
    • 方法2：设置box-sizing: border-box 即可；浏览器会自动计算多余大小，从内容中减去

  1. 盒子模型的介绍

    1. 概念：页面中的每个标签，都可看做一个“盒子”；网页中的元素可看作一个个的矩形区域，成为“盒子”

    2. 盒子模型：CSS规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（borer）、外边距（margin）构成，这就是盒子模型

      image-20230109191742706 边框线：纸盒子；内边距：内容与盒子边缘之间；外边距：盒子间间距

  2. 内容区域的宽度和高度

    1. 利用width和height属性设置盒子内容区域的大小

  3. 边框（border）

    1. 语法

      1. border: 边框宽度 边框样式 边框颜色;

    2. border-style值

      image-20230109195924395

    3. border-color值（边框颜色）

      image-20230109200144940

    4. 具体参考菜鸟教程：CSS边框

  4. 内边距（padding）

    1. 语法：
      • padding: 上 右 下 左;
      • padding: 上下 左右;
      • padding: 上 左右 下;

  5. 外边距（margin）(同上)

    ​ 效果与语法同内边距类似，不过是盒子之间的距离

    1. 外边距折叠现象：合并现象
      1. 垂直布局的块级元素，上下的margin会合并，两者距离由margin值大的决定
      2. 解决办法：给其中一个盒子设置margin即可
    2. 外边距折叠现象：塌陷现象
      1. 互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起往下移动
      2. 解决办法：
        • 给父元素设置border-top或者padding-top（分隔父子元素）
        • 给父元素设置overflow: hidden
        • 转换成行内块元素
        • 设置浮动

  6. 清除默认内外边距

    1. 浏览器会默认给部分标签设置默认的margin和padding

    2. 解决办法：

      * {
    margin: 0;
    padding: 0;
}

  7. 行内元素的垂直内外边距

    1. 行内标签的(margin/padding)-(top/bottom)不生效
    2. 通过line-height设置上下边距

弹性盒子模型

  1. 定义：CSS3的一种新的布局模式；

    CSS３弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式；

    引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

弹性盒子内容

  1. 弹性盒子由弹性容器和弹性子元素组成

  2. 弹性容器通过设置display属性的值为flex，将其定义为弹性容器

  3. 弹性容器内包含了一个或多个弹性子元素

    弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

  4. 父元素上设置dispaly: flex; 属性，子元素默认水平排列

flex-direction属性

  1. 定义：该属性指定弹性子元素在父容器中的位置

  2. 语法:

    flex-direction: row | row-reverse | column | column-reserse;
/*
	row: 横向从左到右排列（左对齐），默认的排列方式
	row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面
	column：纵向排列
	column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
*/

标准流

  1. 又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
  2. 常见的标准流排版规则
    1. 块级元素：从上往下，垂直布局，独占一行
    2. 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

浮动

  1. 用于创建浮动框，将其移动到一边，直到左或右边缘触及另一个浮动框的边缘

  2. 语法：选择器

    属性值 描述
    none 元素不浮动（默认）
    left 元素向左浮动
    right 元素向右浮动

  3. 特性

    1. 浮动元素会脱离标准流（脱标）：浮动的盒子不再保留原先的位置
    2. 浮动的元素会一行内显示并且元素顶部对齐
    3. 浮动元素具有行内块的特性

    注意点：

    1. 浮动和标准流的父盒子搭配
      1. 标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置
    2. 一个元素浮动了，理论上其余的兄弟元素也要浮动（防止引起其他问题）

清除浮动

  1. 在结尾处添加空的div标签，添加clear: both;

    • 此方法在最后一个浮动元素后面添加空的div，但由于添加一个空的div，不推荐使用

  2. 利用伪元素清除浮动

    • 此方法优先级高于第一个方法，不会改变HTML结构的特点，但是较为繁琐

  3. 给父级定一个高度，或者使父级浮动，或者添加overflow: hidden/auto;

    1. 清除浮动一般放在最靠近浮动元素的尾部，清除浮动支队同级元素有效
    2. 检查是否正确清除浮动，看父级元素的高度，如果高度等于0，则说明，浮动没有清除

动画animation

  1. 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数

  2. 基本使用

    1. 先定义动画
    2. 再调用定义好的动画

  3. 语法：

    @keyframes 动画名称(name) {
    from | 0% {
        css样式
    }
    percent {
        css样式
    }
    to | 100% {
        css样式
    }
}

/*调用*/
div {
    /*调用动画*/
    animation-name: name;	/*动画名称*/
    /*持续时间*/
    animation-duration: time;
}

    name: 动画名称，开发人员自命名

    percent：百分比，可以添加多个

animition执行动画

animation: name duration timing-function delay iteration-count direction;
值 描述
name 设置动画的名称
duration 设置动画的持续时间
timing-function 设置动画效果的速率（如下）
delay 设置动画的开始时间（延时执行）
iteration-count 设置动画循环的次数，infinite为无限次数的循环
direction 设置动画播放的方向（如下）
animation-paly-state 控制动画的播放状态：running代表播放，而paused代表停止播放
timing-function值 描述
ease 逐渐变慢（ 默认）
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
属性 描述
@keyframes 规定动画
animation 所有动画属性的简写属性，除了animation-paly-state属性
animation-name 规定@keyframes动画的名称（必须）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0（必须）
animation-timing-function 规定动画的速度曲线，默认是“ease”
animation-delay 规定动画何时开始，默认是0
animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite
animation-direction 规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放
animation-paly-state 规定动画是否正在运行或暂停。默认是“running”，还有“pause”
animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards

标签：随手,样式,标签,元素,H5,设置,C3,选择器,属性
From： https://www.cnblogs.com/beiChengBh/p/17151519.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99