邂逅前端开发

周生辉
2月7日发布

一.编程语言大纲

服务器后端编程语言:Java、Nodejs、C++、Go、Python等

客户端开发编程语言:

  • Android端:Java、kotlin
  • iPhone端:OC、Swift
  • iPad端:
  • 网页开发:HTML、CSS、JavaScript
  • Win:C#
  • mac os端:OC、Swift

二.开发工具选择

[webstorm]、[sublime Text]、[visual studio code]、[atom]、[HBuilder]、[Intellij IDEA]、[Dreamweaver]等

特点:智能提示、高亮识别、语法检测、集成环境、开发效率高

1. webstorm:优点 集成开发工具,包罗万象;缺点:重(占用系统资源多)收费

2. VSCode:优点 轻(相当于一个编辑器)免费;缺点 需要安装一些插件来辅助开发

  • 用到的插件:
    • 中文插件:Chinese
    • 颜色主题:atom one dark
    • 文件夹图标:VScode Great lcons
    • 在浏览器中打开网页:open in browser、live sever(自动刷新浏览器)
    • 自动重命名标签:auto rename tag
  • 软件的配置:
    • 自动保存:文件->自动保存
    • 字体大小:文件->首选项->设置 控制字体大小(font size)
    • 自动换行:设置->editor:word wrap改成on
    • 空格渲染方式:render whitespace改成all
    • 代码缩进方式:tab size由4个字符改成2个

3. 推荐安装的软件

  • Chrome浏览器:开发必备浏览器
  • VScode编辑器:开发推荐编辑器(编写代码)
  • XMind:思维导图笔记软件
  • Typora:markdown笔记软件

三.浏览器的作用

网页的组成部分:HTML+CSS+JavaScript

浏览器最核心的部分是:“浏览器内核”

浏览器最核心的部分是渲染引擎(Rendering Engine)一般称为“浏览器内核”

  • 负责解析网页语法,并渲染(显示)网页

常见浏览器内核有:

  • trident(三叉戟):IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器
  • gecko(壁虎):Mozilla Firefox
  • presto(急板乐曲):blink(眨眼):Opera
  • webkit:safari、360极速浏览器、搜狗高速浏览器、移动端浏览器
  • webkit->blink:Google Chrome,edge

不同的浏览器内核有不同的解析、渲染规则,所以同一网页在不同内核的浏览器中的渲染效果也可能不同


HTML元素

一.概要(html基础)

超文本标记语言(hypertext markup language,简称HTML)是一种用于创建网页的标记语言

html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element

vscode快速html结构: [!回车]

标签元素可分为: 单标签元素/双标签元素

​ 双标签元素:html/body/head/h2/p/a等

​ 单标签元素:br/img/hr/meta/input等

元素中也可以拥有属性:<p class="editor-note">我是一个段落</p> class作为属性

1. 元素属性的分类

有些属性是公共的,每个元素都可以设置

​ 比如:class/id/title

有些属性是元素特有的,不是每一个元素都可以设置

​ 比如meta属性的charset属性/img元素的alt属性等

2. 元素的嵌套关系

<body>
  <p class="editor-note">我是一个段落</p>

  <ul>
    <!--快速复制上一行alt+shift+向下箭头-->
    <li>
      <div>
        <span>aaa</span>
        <span>bbb</span>
      </div>
    </li>
    <li></li>
  </ul>
</body>

3. 注释的语法

ctrl+/ 快速写注释快捷键

    <!-- 注释内容 -->

二.HTML常见的元素

1. HTML结构分析

HTML最上方第一行[<!DOCTYPE html>]文本我们称之为文档类型声明,用于声明文档类型

  • HTML文档声明,告诉浏览器当前页面是HTML5页面
  • 让浏览器用HTML5的标准去解析识别内容;
  • 必须放在HTML文档的最前面,不能省略,省略了会出现兼容性问题

lang属性=设置的语言["en"表示英文;"zh-CN"表示简体中文]

1.1 haed元素

HTML haed元素 规定文档相关的配置信息[也称为元数据],包括文档的标题,引用的样式和脚本等; 可以理解为对整个页面的配置

  • 常见设置的2个元素:[title]标题; [meta]元素-charset属性设置网页的字符编码 一般为[utf-8];<meta charset="UTF-8">

1.2 body元素

html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element

常见的元素(90%的时间都在写这几个)

  • p元素/h元素
  • img元素/a元素/iframe元素
  • div元素/span元素

其他元素:

  • ul/ol/li元素
  • button元素/input元素
  • table/thead/tbody/thead/th/tr/td

HTML5新增元素: 后面讲解

2. h1-h6/p元素

  • h1-h6 = 标题元素
  • p = 段落元素
  <h1>这是一级标题</h1>
  <h2>这是二级标题</h2>
  <h3>这是三级标题</h3>
  <h4>这是四级标题</h4>
  <h5>这是五级标题</h5>
  <h6>这是六级标题</h6>
  <p>这是一个段落</p>  
<br> = 段落换号符

3. img/a/iframe元素

3.1 img元素:两个属性(src="图片的地址" alt="1.资源加载不成功时以文本显示;2.给屏幕阅读器使用")

<img src="https://123.ka81.cn/2024pic/202403111526001.jpg" alt="秀人网模特">

3.2 a元素(超链接):两个常见属性

  • href="指定要打开的url地址;也可以是本地地址"
  • target="_self(默认值,当前窗口打开); _blank(在新窗口打开)"
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
a元素本页面的锚点链接:
  1. 在跳转到的元素上添加id
  2. 定义a元素,并且a元素的href属性指向id
  <a href="#time01">跳转到一级标题</a>
  <a href="#time02">跳转到二级标题</a>
  <a href="#time03">跳转到三级标题</a>

  <h1 id="time01">这是一级标题</h1>
  <h2 id="time02">这是二级标题</h2>
  <h3 id="time03">这是三级标题</h3>
a元素与img元素结合使用: a元素中嵌套img元素即可实现
  <a href="https://www.baidu.com/" target="_blank">
    <img width="330" src="https://123.ka81.cn/2024pic/202403111526001.jpg" alt="秀人网模特">
  </a>
a标签指向其他协议地址: mailto
  <a href="mailto:123@qq.com">发邮件给123@qq.com</a>

iframe元素: 在一个网页中嵌套其他网页

  <iframe src="https://www.taobao.com/" width="800" height="600" frameborder="0"></iframe>
  
  <!-- frameborder值0和1;开启或不开启 -->

a元素target的其他值: 需要和iframe结合使用(嵌套关系下使用)

​ _parent:在父窗口打开

​ _top:在顶层窗口中打开


4. div/span元素

(特殊的;无所用无所不用)

div/span区别:div和span元素都是"纯粹的"容器, 也可以把它们理解成"盒子",它们都是用来包裹内容的

div元素: 多个div元素包裹的内容会在不同的行显示

  • 一般作为其他元素的父容器,把其他元素包住,代表一个整体
  • 用于把网页分成多个独立的部分

span元素:多个span元素包裹的内容会显示在同一行

  • 默认情况下 根普通文本几乎没区别
  • 用于区分特殊文本和普通文本,比如用来显示一些关键字

5. 不常见元素

strong元素: 内容加粗

i元素: 内容斜体(开发中偶尔会用它来做字体图标)

code元素:用于显示代码(偶尔会使用用来显示等宽字体)

br元素:用于换行

html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element


6. HTML全局属性

全局数量列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/global_attributes

6.1 常见属性:

id: 定义唯一标识符(ID),该标识符在整个文档中必须是唯一的. 其目的是在链接(使用片段标识符), 脚本或样式(css)时标识元素

class: 一个以空格分隔的元素的类名(classes)列表, 它允许css和JavaScript通过类选择器或者DOM方法来选择和访问特定的元素

style: 给元素添加内联样式CSS

title: 包含表示与其所属元素相关信息的文本. 这些信息通常可以作为提醒呈现给用户,但不是必须的

三.额外知识点补充

1. 字符实体:

定义: 段落文本中有特别的字符 会影响浏览器的解析, 此时就要用字符实体包括该内容

html实体是一段以连字号(&)开头,以分号(;)结尾的文本

image-20240312015258915

2. URL的规则和URI的区别

URL代表是统一资源定位符(Uniform Resource Locator). URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说,每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面,一个 CSS 文档,一幅图像,等等。

URL标准格式:

[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

image-20240312020835834

和uri区别

uniform resource identifier 统一资源标志符,用于标识web技术使用的逻辑和物理资源

Uniform Resource Locator 统一资源定位符,俗称网络地址 相当于网络中的门牌号

3. 元素语义化

元素语义化: 用正确的元素做正确的事情

4. SEO优化

搜索引擎优化(Search Engine Optimization) 是通过了解搜索引擎的运作规则来调整网站,以提高网站在有关搜索引擎内排名的方式

image-20240312025215768

百科: https://baike.baidu.com/item/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96/3132?fromtitle=SEO&fromid=102990

5. 字符编码

最常见的编码是(UTF-8)

其他编码: https://www.runoob.com/w3cnote/charset-encoding.html

CSS样式

一.概要(CSS基础)

1. 认识css

CSS (Cascading Style Sheets,层叠样式表)是为网页添加样式的代码

2. 编写css样式

如何将CSS样式应用到元素上?

  • 内联样式

内联样式表存在于HTML元素的style属性之中

  <div style="color: red; font-size: 30px;">我是div元素</div>
  <h1 style="font-size: 50px;">我是一级标题</h1>
  • 内部样式表

内部样式表存在于HTML页面的head元素的尾部 添加style 通过选择器定位某元素

<head>
  <style>
    /* 通过元素选择 */
    div {
      color: red;
      font-size: 30px;
      background-color: orange;
    }
    /* 通过class选择 */
    .h1-one {
      color: aqua;
    }
  </style>
</head>
<body>
  
  <div>我是div元素</div>
  <h1 class="h1-one">我是一级标题</h1>
  
</body>
  • 外部样式表

外部样式表是将css编写在一个独立的文件中[后缀为css],并且通过元素引入[写在head尾部]进来

image-20240312171157806

扩展: 在css文件夹中创建名为index.css的文件,在中通过@import url(样式路径);引入其他css文件; 后在html引入此文件即可实现css的全部引用

image-20240312171836441

3. css注释

/* 注释文本 */ vscode可通过快捷键[ctrl+/]快速注释

4. 常见的css属性

官方文档:https://www.w3.org/TR/?tag=css

wdn文档(推荐):https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95

查询css属性的可用性(哪些浏览器支持的属性):https://caniuse.com/

CSS样式规则顺序coderwhy

CSS常见属性分类coderwhy

最基础最常用的css属性:

  • font-size: (文字大小)
  • color: (前景色/文字颜色)
  • background-color: (背景色)
  • width: (宽度)
  • height: (高度)
  <style>
    .title {
      font-size: 24px;
      color: red;
      background-color: rgb(43, 40, 40);

      width: 200px;
      height: 200px;
    }
  </style>

-- 额外知识补充

1. link元素

link元素是外部资源链接元素,规范了文档与外部资源的关系

  • link元素通常写在head元素中

最常用的链接是样式表CSS

  • 此外也可以被用来创建站点图标(比如"favicon"图标)
  <link rel="引入类型" href="地址">

link元素常见的属性:

2. 计算机进制

计算机通常采用二进制/八进制/十六进制; 通常计算机底层逻辑只有0和1组成

通俗理解: 当数字达到某个值时,进一位(比如从1位变成2位)

理解一下十进制(人们通常采用10进制): 当数字到9的时候 到10,用1位已经表示不了了,那么就进一位变成2位

3. CSS颜色表示方法

90种表达色彩的单词指南: 英语学习 - 90 种表达色彩的单词指南 | 贝立兹 (berlitz.com)

RGB颜色:

  • RGB是一种色彩空间,通过R(red,红色)、G(green,绿色)、B(blue,蓝色)三原色来组成了不同的颜色; 也就是通过调整这三个颜色不同的比例,可以组合成其他的颜色;
  • RGB各个原色的取值范围是0~255;

RGB表示方法:

  • RGB颜色可以通过以#为前缀的十六进制字符和函数(rgb()、rgba())标记表示
  • 方式一:十六进制符号:#RRGGBB[AA]

    • R(红)、G(绿)、B (蓝)和A (alpha)是十六进制字符(0–9、A–F);A是可选的。
    • 比如,#ff0000等价于#ff0000ff;
  • 方式二:十六进制符号:#RGB[A]

    • R(红)、G(绿)、B (蓝)和A (alpha)是十六进制字符(0–9、A–F);
    • 三位数符号(#RGB)是六位数形式(#RRGGBB)的减缩版。

      • 比如,#f09和#ff0099表示同一颜色。
    • 四位数符号(#RGBA)是八位数形式(#RRGGBBAA)的减缩版。

      • 比如,#0f38和#00ff3388表示相同颜色。
  • 方式三:函数符: rgb[a]--R, G, B[, A] ---不常用

    • R(红)、G(绿)、B (蓝)可以是(数字),或者(百分比),255相当于100%。
    • A(alpha)可以是0到1之间的数字,或者百分比,数字1相当于100%(完全不透明)。

4. Chrome调试工具

打开Chrome调试工具:

  • 方式一:右键– 检查
  • 方式二:快捷键– F12

其他技巧:

  • 快捷键:ctrl+ 可以调整页面或者调试工具的字体大小
  • 可以通过删除某些元素来查看网页结构;
  • 可以通过增删css来调试网页样式

image-20240313001630230

5. 浏览器渲染流程

image-20240313003528789

二.CSS文本的属性

1.text-decoration[装饰]

text-decoration: 用于设置文字的装饰线

1.1 text-decoration常见取值:

  • none: 无任何装饰线

    • 可以去除a元素默认的下划线
  • underline: 下划线
  • overline: 上划线
  • line-through: 删除线

2.text-transform[变换]

text-transform: 用于设置文字的大小写转换

2.1 text-transform 常见取值:

  • capitalize: 将每个单词的首字母变为大写
  • uppercase: 将每个单词的所有字母大写
  • lowercase: 将每个单词的所有字母小写
  • none: 没有任何影响

[实际开发中用JavaScript代码转化的更多]

3.text-indent[缩进]

text-indent: 用于设置第一行内容的缩进

"[em]单位==相对于字体的大小"

text-indent: 2em  ==首行缩进2字符

4.text-align(重要)[对齐]

text-align: 设置文本的对其方式 / 定义行内内容(例如文字)如何相对它的块 父元素对其;

4.1 常见的值:

  • left: 左对其
  • right: 右对其
  • center: 正中间对齐
  • justify: 两端对其

5.word/letter-spacing[单词/字母间距]

word-spacing/letter-spacing: 用于调整单词/字母间距

三.CSS字体的属性

1.font-size[尺寸]

font-size: 决定文字的大小

1.1 常见的设置

  • 具体数值+单位

    • 比如100px
    • 也可以使用em单位(不推荐): 1em代表100%,2em代表200%
  • 百分比

    • 基于父元素的font-size计算,比如50%等于父元素font-size的一半

2.font-family[字体]

font-family: 用于设置文字的字体名称

  • 可以设置1个或多个字体名称
  • 浏览器会选择第一个该计算机中有安装的字体
  • 或者是通过[@font-face] 指定的可以直接下载的字体

3.font-weight[加粗]

font-weight: 用于设置文字的粗细

常见的取值:

  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 : 每一个数字表示一个重量(粗细程度)
  • normal: 等于400 (默认值)
  • bold: 等于700

4.line-height[行高]

line-height: 用于设置文本的行高

注意区分height 和 line-height 的区别

  • height: 元素的整体行高
  • line-height: 元素中每一行文字所占据的高度

应用实例: 假设div中只有一行文字, 如何让这行文字在div内部上下居中

  • 让line-height等同于height

5.其他不常用的

5.1 font-variant[变形]

font-variant: 可以影响小写字母的显示形式

可以设置的值:

  • normal: 常规显示
  • small-caps: 将小写字母替换为缩小过的大写字母

5.2 font-style[样式]

font-style: 用于设置文字的常规/斜体显示

常见取值:

  • normal: 常规显示
  • italic(斜体): 用字体的斜体显示(通常会有专门的字体)
  • oblique(倾斜): 文本倾斜显示(仅仅是让文字倾斜)

6.font缩写属性

当需要设置字体多个属性时, 可以缩写font: 跟上对应值 ; 简化书写流程

font是一个缩写属性:

  • font 属性可以用来作为font-style, font-variant, font-weight, font-size, line-height 和font-family 属性的简写;
  • 格式: font-style font-variant font-weight font-size/line-height font-family

书写规则:

  • font-style、font-variant、font-weight可以随意调换顺序,也可以省略
  • /line-height可以省略,如果不省略,必须跟在font-size后面
  • font-size、font-family不可以调换顺序,不可以省略

image-20240313033210308

四.CSS常见选择器

--其他选择器

通用选择器:

  • [*]通配符 ; 将所有的元素全部选中 * {css属性}

注: 默认在没有设置任何样式的情况下, 浏览器会默认给HTML元素增加一些css属性; 这时我们想取消这些属性, 可以在样式内设置通配属性取消这些默认值; 例:

* {
    margin: 0;
    padding: 0;
}
或---
body, p, div, h2, span {
    margin: 0;
    padding: 0;
}

[重要]简单选择器: 前面学习过

  • 元素选择器(type selectors), 使用[元素的名称]
  • 类选择器(class selectors), 使用[.类名]
  • id选择器(id selectors), 使用[#id]

    • 强调: 在同一个HTML文档中, id不要重复, 应该是唯一的
    • id值如果由多个单词组成, 单词之间可以用中划线- / 下划线_连接, 也可以使用驼峰标识
    • 最好不要用标签名 作为id值

1.属性选择器-了解

通过元素中的属性名 进行选择: 使用方式"[属性名/属性名="值"]" --例

  <style>
    [title] {
      color: red;
    }
    /* 或是使用具体的值 */
    [title="h2"] {
      background-color: blue;
    }
  </style>
</head>
<body>
  
  <div>我是div元素</div>
  <div  title="div">我也是div元素</div>
  <p>我是p元素</p>
  <h2 title="h2">我是h2元素</h2>

</body>

image-20240313143039936

2.后代选择器

后代选择器一: 所有的后代(包括直接或间接的后代)

  • 选择器直接以空格分隔 .属性值 元素
  • image-20240313145638639

后代选择器二: 直接子代选择器(必须是直接子代)

  • 选择器之间以 > 分隔 .属性值 > 元素
  • image-20240313145658584

3.兄弟选择器

兄弟选择器 选择的 不包括自己

兄弟选择器一: 相邻兄弟选择器

  • 使用符号[+]连接 .属性值 + 元素或属性名
  • image-20240313150439757

兄弟选择器二: 全兄弟选择器

  • 使用符号[~]连接 .属性值 ~ 元素或属性名
  • image-20240313150559213

4.选择器组

4.1 选择器组-交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

  • 在开发者通常是为了精准的选择某一元素
  •   <style>
        div.one {
          color: red;
        }
      </style>
    </head>
    <body>
      
      <div>我是div元素</div>
      <div class="one">我也是div元素</div>
      <p>我是p元素</p>
      <h2 class="two">我是h2元素</h2>
    
    </body>

    4.2 选择器组-并集选择器: 符合任意一个选择器条件即可(选择器直接以[,]分隔)

  • 在开发中通常为了给多个元素设置相同的样式
  •   <style>
        .one, .two {
          color: red;
        }
      </style>
    </head>
    <body>
      
      <div>我是div元素</div>
      <div class="one">我也是div元素</div>
      <p>我是p元素</p>
      <h2 class="two">我是h2元素</h2>
    
    </body>

5.伪类选择器

伪类选择器(简称:伪类)通过冒号来定义; 它定义了元素的状态; 如点击按下,点击完成等,通过伪类可以为元素的状态修改样式。

常见的伪类有:

  • 动态伪类

    • :link / :visites / :hover / :active / :focus
  • 目标伪类

    • :target
  • 语言伪类

    • :lang()
  • 元素状态伪类

    • :enabled / :disabled / :checked
  • 结构伪类

    • :nth-child() / :nth-last-child() / :nth-of-type() / :nth-last-of-type()
    • :first-child / :last-child / :first-of-type / :last-of-type
    • :root / :only-child / :only-of-type / :empty
  • 否定伪类

    • :not()

所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

菜鸟教程: CSS 伪类 | 菜鸟教程 (runoob.com)

使用举例:

  • 动态伪类

    • a:link [未访问的链接]
    • a:visited [已访问的链接]
    • a:hover [鼠标挪动到链接上(重要)]
    • a:active [激活的链接(鼠标在链接上长按未松开的状态)]
  • 使用注意

    • :hover必须放在:link和:visited后面才能完全生效
    • :active必须放在:hover后面才能完全生效
    • 建议编写顺序是: :link / :visited / :hover / :active
  • 输了a元素, :hover / :active也能用在其他元素上

  • :focus指当前 拥有输入焦点的元素(能接受键盘输入的)

    • 文本输入框一聚焦后.背景就会变红色
  • 应为链接a元素可以 被键盘的tab键选中聚焦, 所以:focus也适用于a元素
  • 动态伪类编写顺序建议为:

    • :link 、 :visited 、 :focus 、 :hover 、 :active
  • 直接给 a 元素设置样式,相当于给 a 元素的所有动态伪类都设置了

    • 相当于 a:link 、 a:visited 、 a:hover 、 a:active 、 a:focus 的 color 都是 red

6.伪元素(重要)

伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式; 一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后

常见的伪元素有:

  • ::sirst-line
  • ::first-letter
  • ::before
  • ::after

为了区分伪元素和伪类,建议伪元素使用 2 个冒号,比如 ::first line

::sirst-line: 可以针对首行文本设置属性

::first-letter: 可以针对首字母设置属性

例:

p::first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

::before: 向选定的元素插入内容

::after: 向选定的元素插入内容

::before 和 ::after 用来在一个元素的 内容之前或之后插入其他内容 (可以是文字、图片

常通过 content 属性 来为一个元素添加修饰性的内容。

image-20240313200902482

位置不好看  --简单调整
position: relative; /* 相对定位 */
left: 5px;
top: 2px;

五.CSS属性的特性

1.CSS属性的继承

在默认情况下, 某元素的子代会继承父元素的

(有些CSS属性是不能被继承的)但可以强制继承; 定位继承的子代元素-属性写border: inherit 即可强制继承父元素CSS

CSS中的某些属性具有继承性

  • 如果一个 属性具备继承性 , 那么 在该元素上设置后 , 它的 后代元素都可以继承这个属性
  • 当然 , 如果 后代元素自己有设置该属性 , 那么 优先使用后代元素自己的属性 不管继承过来的属性权重多高

如何知道一个属性具有继承性呢?

  • 常见的font-size/font-family/font-weigth/line-heigth/color/text-aligen 这些都具有继承性
  • 这些 不用刻意去记 , 用的多自然就记住了
  • 另外可以查询文档
  • 注意:继承过来的属性是计算值,而不是设置值

image-20240313205645632

2.CSS属性的层叠

一个元素设置多个属性的情况下, 首先显示权重最大的值/相同权重情况下, 会被越后(梢)的样式覆盖

CSS的翻译是层叠样式表 , 什么是(层叠)呢?

  • 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置; 那么属性就会被一层层覆盖上去; 但是最终只有一个生效;

那么多个样式属性覆盖上去, 哪个会生效呢?

  • 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级
  • 判断二: 先后顺序, 权重相同时 后面(梢)设置的生效;

如何知道权重呢? 按照经验, 为了方便比较CSS属性的优先级, 可以给CSS属性所处的环境定义一个权重(权值):

  • !important: 10000(权重最大)
  • 内联样式: 1000
  • id选择器: 100
  • 类选择器/属性选择器/伪类: 10
  • 元素选择器/伪元素: 1
  • 通配符: 0(权重最小)

MDN解释表格:

image-20240314002214936

3.CSS属性的类型

块级元素(独占一行): h元素/p/div元素

行内级元素(一行有多个): span/a/img/strong/i元素

display属性可更改元素的特性(跨级与行内级变换) 值为block/inline(跨级/行内级)

在前面我们会经常提到div是块级元素 会独占一行 ,span是行内级元素 会在同一行显示; 那么到底什么是块级元素, 什么是行内级元素呢?

  • HTML定义元素类型的思路:

    • HTML 元素有很多 , 比如 h 元素 /p 元素 /div 元素 /span 元素 img 元素 /a 元素等等;
    • 当我们把这个元素放到页面上时 , 这个元素到底占据页面中一行多大的空间呢? 为什么我们这里 只说一行 呢 ? 因为垂直方向的高度通常是内容决定的;
    • 比如我们的h1元素的标题, 我们必然是希望它独占一行的, 其他内容不应该和我的标题放在一起;
    • 比如我们的p元素的段落, 必然应该独占一行, 其它内容不应该和我的段落放在一起;
    • 而类似于img/span/a元素, 通常是对内容的某一个细节的特别描述, 没有必要独占一行;
  • 所有, 为了区分哪些元素可以独占一行, 哪些元素不需要独占一行, HTML将元素区分成了两类(本质上是通过CSS实现的(浏览器赋予的))

    • 块级元素 (独占一行)
    • 行内级元素 (多个行内级元素可以在同一行显示)

div/h1/p元素之所以是块级元素是因为浏览器默认设置了display属性而已

那么就可以通过display来更改元素的特性

  • CSS中display属性有4个常见值:

    • block: 让元素显示为块级元素
    • inline: 让元素显示为行内级元素
    • inline-block: 让元素同时预备行内级/块级元素的特性
    • none: 隐藏元素
    • 事实上display还有其他的值,比如flex , 后面专门学习

4.display属性

块级元素可以设置宽度和高度; 行内级元素不可设置宽度和高度(img/input除外,它是行内可替换元素)

inline-block: 作为行内级元素显示 ; 可以随意设置宽高

  • 对外来说, 它是行内级元素
  • 对内来说, 它是块级元素

可以通过display来更改元素的特性 ; 4个常见值:

  • block: 让元素显示为块级元素
  • inline: 让元素显示为行内级元素
  • inline-block: 让元素同时预备行内级/块级元素的特性
  • none: 隐藏元素
  • 事实上display还有其他的值,比如flex , 后面专门学习

image-20240314014429567

  • [x] 编写HTML时的注意事项:
  • 块级元素 | inline-block元素

    • 一般情况下,可以包含其他任何元素(如块级元素/行内级元素/inline-block元素)
    • 特殊情况, p元素不能包含其他块级元素的
  • 行内级元素(如: a/span/strong等)

    • 一般情况下, 只能包含行内级元素

5.元素的隐藏(display)

  • 方法一: display设置为none

    • 元素不显示, 并且不占据位置, 不站任何空间(和不存在一样)
  • 方法二: visibility设置为hidden

    • 设置为hidden, 虽然元素不可见, 但是会占据元素空间;
    • 默认值为visible, 可见的
  • 方法三: rgba设置颜色, 将a值设置为0

    • rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
  • 方法四: opacity设置透明度, 设置为0

    • 设置整个元素的透明度, 会影响所有的子元素;

CSS样式不生效技巧:

  • 选择器的优先级太低
  • 选择器没选中对应的元素
  • CSS属性使用的形式不对

    • 元素不支持此CSS属性, 比如span默认不支持width和height的
    • 浏览器不支持此css属性, 比如旧版本的浏览器不支持一些css module3的某些属性
    • 被同类型CSS属性覆盖, 比如font覆盖font-size

建议: 充分利用浏览器的开发者工具进行调试(增加/修改样式) 查错

6.overflow属性

如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为;

  • overflow: visible (默认) -->溢出的内容照样可见
  • overflow: hidden -->溢出的内容直接裁剪
  • overflow: scroll -->溢出的内容被裁剪, 但可以通过滚动条查看(会一直显示滚动条区域, 滚动条区域占用的空间属于width/height)
  • overflow: auto -->自动根据内容是否溢出决定是否提供滚动条

菜鸟文档: CSS overflow 属性 | 菜鸟教程 (runoob.com)

六.CSS的盒子模型

1.认识盒子模型

盒子有四个边, 所有margin(外边)/padding(内边)/border(边框)都包括top/right/bottom/left(上/右/下/左)四个边

image-20240314222047946

image-20240314222125770

image-20240314222207450

image-20240314222503209

2.内容width/heigth

HTML的内容是通过宽度和高度设置的:

  • 宽度设置: width:
  • 高度设置: height

注意: 对于行内级非替换元素来说, 设置宽高是无效的

另外还可以设置以下属性:

  • min-width: 最小宽度
  • max-width: 最大宽度

移动端适配是,可以设置最大/最小宽度

下面这两个属性不常用的:

  • min-height: 最小高度
  • max-height: 最大高度

3.内边距padding

内边距padding是设置内容至边框直接的间距;

包括四个值:

  • padding-top :上内边距
  • padding-right :右内边距
  • padding-bottom :下内边距
  • padding-left :左内边距

padding单独编写是一个缩写属性:

  • 缩写属性是从0点钟开始顺时针转动360度, 也就是上右下左

padding并非四个值, 也可以是其他值:

image-20240314231111108

4.边框/圆角border

边框相对于content/padding/margin来说特殊一些: 有三个值

  • 具备宽度width
  • 具备样式style
  • 具备颜色color

边框宽度:

  • border-top-width / border-right-width / border-bottom-width / border-left-width
  • border-width 是上面的简写属性

边框颜色:

  • border-top-color/ border-right-color/ border-bottom-color/ border-left-color
  • border-color 是上面的简写属性

边框样式:

  • border-top-style/ border-right-style/ border-bottom-style/ border-left-style
  • border-style 是上面的简写属性

总简写属性: border 是宽度/颜色/样式的简写属性, 顺序随意(样式不能省)

边框样式设置值:

  • solid/dashed/dotted/double/insert/outset/groove/ridge
  • image-20240314233136847

如果我们相对某一边同时设置 宽度 样式 颜色 , 可以进行如下设置:

  • border-top
  • border-right
  • border-bottom
  • border-left
  • border: :统一设置 4 个方向的边框

盒子圆角 border-radius: 常见的值:

  • 数值: 通常用来设置小的圆角; 如比6px;
  • 百分比: 通常用来设置一定的弧度或者圆形

border-radius 事实上是一个缩写属性:

  • 将这四个属性 border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius ,和 border-bottom-left-radius 简写为一个属性。
  • 开发中比较少见一个个圆角设置

如果一个元素是正方形, 设置border-radius大于或等于50%时,就会变成一个圆


4.1.外轮廓: outline

特点: 不占用空间, 默认显示在border的外面

相关属性:

  • outline-width: 外轮廓的宽度
  • outline-style:取值跟border的样式一样,比如solid、dotted等
  • outline-color: 外轮廓的颜色
  • outline:outline-width、outline-style、outline-color的简写属性,跟border用法类似

应用实例:

  • 去除a元素/input元素的focus轮廓效果(即tab标记状态)

5.外边距margin

上下两个元素同时设置margin时会出现折叠现象(如设置30px,间距应该是60,折叠后还是30); 左右不会折叠.

margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;

margin包括四个方向, 所以有如下的取值:

  • margin-top:上内边距
  • margin-right:右内边距
  • margin-bottom:下内边距
  • margin-left:左内边距

margin单独编写是一个缩写属性:

  • margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左

margin也并非必须是四个值, 也可以有其他值:

image-20240315001406761


上下margin的传递:

  • margin-top传递: 如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素
  • margin-bottom传递: 如果块级元素的底部线和父元素的底部线重叠,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素

如何防止出现传递问题?

  • 给父元素设置padding-top\padding-bottom
  • 给父元素设置border
  • 触发BFC: 设置overflow为auto

@建议:

  • margin一般是用来设置兄弟元素之间的间距
  • padding一般是用来设置父子元素之间的间距

上下margin的折叠:

垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin,这种现象叫做collapse(折叠)

水平方向上的margin(margin-left、margin-right)永远不会折叠

折叠后最终值的计算规则:

  • 两个值进行比较, 取较大的值

如何防止margin折叠?

  • 只设置其中一个元素的margin

块级元素水平居中问题?

在一些需求中,需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)

行内级元素(包括inline-block元素)-->水平居中:在父元素中设置text-align: center

块级元素-->水平居中:margin: 0 auto

6.盒子/文字阴影

6.1.盒子阴影: box-shadow

box-shadow属性可以设置一个或者多个阴影

  • 每个阴影用表示
  • 多个阴影之间用逗号,隔开,从前到后叠加

的常见格式如下: 5px 5px 5px 5px color insert

  • 第1个:offset-x, 水平方向的偏移,正数往右偏移
  • 第2个:offset-y, 垂直方向的偏移,正数往下偏移
  • 第3个:blur-radius, 模糊半径
  • 第4个:spread-radius, 延伸半径
  • :阴影的颜色,如果没有设置,就跟随color属性的颜色
  • inset:外框阴影变成内框阴影

image-20240315021354175

在线测试网站: https://html-css-js.com/css/generator/box-shadow/

6.2.文字阴影: text-shadow

text-shadow 用法类似于box-shadow ,用于给文字添加阴影效果

的常见格式如下:

image-20240315021912661

相当于box-shadow, 它没有spread-radius(延伸半径)的值;

在线测试网站: https://html-css-js.com/css/generator/box-shadow/

7.box-sizing

box-sizing用来设置盒子模型中 盒子宽高的行为

包含值:

  • content-box(默认): 内边距+边框在盒子宽高之外
  • image-20240315030544434
  • border-box: 内边距+边框在盒子宽高之内
  • image-20240315030557198

--额外知识点:

1.行内非替换元素的注意事项:

  • 以下属性对行内级非替换元素不起作用

    • width、height、margin-top、margin-bottom
  • 以下属性对行内级非替换元素的效果比较特殊

    • padding(内边距)上下会撑起来, 但是不占空间
    • border(边框)上下会撑起来, 但是不占空间
    • margin(外边框)上下的margin是不生效的
© 版权声明
THE END
喜欢就支持一下吧
点赞 0 分享 收藏
评论 抢沙发
取消