前端学习笔记____基础篇HTML&CSS

已于 2022-02-15 13:19:19 修改
阅读量760 收藏 3
点赞数 1
分类专栏： 自学前端 文章标签： 前端 html css
于 2022-02-11 13:46:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55181759/article/details/121036968
版权

🍈 作者主页： 💖仙女不下凡💖

🍈 前言介绍： 以下👇 内容都是我个人对于前端知识的总结，会定期更新欢迎持续关注！

🍈 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！

🍈 视频地址：黑马程序员pink老师前端入门教程

基本学习路线

基本学习路线

💙💙💙第一章 HTML5基础

💚💚一、HTML简介

💛1.网页

🍄什么是网页：网页是构成网站的基本元素，它通常有图片、连接、文字、声音、视频等元素组成。常见以.html或html后缀结尾的文件，因此将其称为HTML文件。
🍄什么是HTML：HTML是超文本标记语言，它是用来描述网页的一种语言。

💛2.常用浏览器

常用浏览器浏览器内核备注
IE浏览器TridentIE、猎豹安全、360极速浏览器、百度浏览器
火狐浏览器Gecko火狐浏览器内核
谷歌浏览器
Edge浏览器
Safari浏览器Webkit苹果浏览器内核
Opera浏览器BinkChrome/Opera浏览器内核。Blink其实是WebKit的分支

🍄浏览器内核(渲染引擎)作用： 负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

💛3.Web标准

🍄 Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3W(万维网联盟)是国际最著名的标准化组织。
🍄 Web标准的构成： 主要是包括结构、表现和行为三个方面。

标准说明
结构结构用于网页元素进行整和分类，现阶段主要学的是HTML
表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS
行为行为是指网页,模型的定义及交互的编写，现阶段主要学的是JavaScript

🍄Web标准提出的最佳体验方案：结构、样式、行为相分离。

💚二、HTML标签(上)

💛1.HTML语法规范

✨⑴基本语法概述

🍄①HTML标签是由尖括号包围的关键词，例如<html>。
🍄②HTML标签通常是成对出现的，例如<html></html>称为双标签。
🍄③有些特殊的标签必须是单个标签(极少情况)，例如<br/>称为单标签。

✨⑵标签关系

🍄双标签关系可以分为两类：包含关系和并列关系。

💛2.HTML基本结构标签

标签名定义标签说明
<html></html>HTML标签页面中最大的标签，也称为根标签
<head></head>文档的头部注意在head标签中必须设置的标签是title
<title></title>文档的标题让页面拥有属于字的网页标题
<body></body>文档的主体元素包含文档的所有内容，页面内容基本都是放在body里面的

💛3.开发工具与基本HTML代码结构

🍄 以vscode为例，了解一下常用的插件，安装插件之后需要重启软件

插件作用
Chinese language中文(简体)语言包
Open Broeser右击选择浏览器打开html文件
JS-CSS-HTML Formatter每次保存，都会自动化格式化js css和html代码
Auto Rename Tag自动重命名配对的HTML/XML标签
CSS Peek追踪样式

🍄在VSCode软件中点击! + ctrl快捷生成基础HTML结构，下面了解一下基础的.html页面的代码含义，代码内容如下图
HTML常用标签

✨⑴文档类型声明标签

<!DOCTYPE>文档类型声明，不是HTML标签，作用是告诉浏览器使用那种HTML版本来显示网页，需要放在文档最前面。

<!DOCTYPE html> // 当前页面采取的是HTML5版本来显示网页
✨⑵lang语言种类

lang用来定义当前文档显示的语言。

✨⑶字符集

字符集是多个字符的集合。以便计算机能够识别和存储各种文字，在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

<meya charset="UTF-8" />

charset常用的值有：GB2312 BIG5 GBK UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用的字符。

💛4.HTML常用标签

✨⑴标签语义

标签语义： 根据标签的语义，在合适的地方给一个最为合理的标签，让页面结构更加清晰

✨⑵标题标签<h1>-<h6>(重要)
✨⑶段落与换行标签（重要）

段落标签<p>，段落与段落之前有较大的空隙
换行标签<br />，换行后与上一行没有空隙

✨⑷文本格式化标签

标签语义：突出重要性，比普通文字更重要。

语义标签说明
加粗<strong></strong>或<b></b>推荐使用<strong>标签 语义更强烈
倾斜<em></em>或<i></i>推荐使用<em> 语义更强烈
删除线<del></del>或<s></s>推荐使用<del> 语义更强烈
下划线<ins></ins>或<u></u>推荐使用<ins> 语义更强烈
✨⑸<div>与<span>标签（重点）

<div>与<span>标签是没有语义的，就是一个盒子用来装内容的。
🍄特点：div标签用来布局一行只能放一个div，大盒子；span标签一行可以放多个，小盒子。

✨⑹图像标签和路径（重点）

🍄Ⅰ.图像标签img： 用于定义HTML页面中的图像。<img src="图像URL">，其中src是必须属性。
图像的其他属性如下表

属性属性值说明
src图片路径必须属性
alt文本替换文本、图像不能显示的文字
title文本提示文本、鼠标放到图像上、提示的文字
width像素设置图像的宽度
hight像素设置图像的高度
border边框设置图像边框，注意一般不会通过属性设定边框

🍄Ⅱ.路径可分为：相对路径、绝对路径。

相对路径就是图片相对于HTML页面的位置。

相对路径分类符号说明
同一级路径图像文件与HTML位于同一个文件夹中 <img src=“baidu.gif" />
下一级路径/图像文件与HTML位于下一级<img src=“images/baidu.gif” />
上一级路…/图像文件与HTML位于上一级<img src=“../baidu.gif” / >

绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。例如D:\web\img\logo.gif

✨⑺超链接标签（重点）

🍄Ⅰ.链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性作用
href用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

🍄Ⅱ.链接的分类：

  • 外部链接：例如<a href="https://www.baidu.com/">百度</a>。
  • 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>。
  • 空连接：如果当时没有确定链接目标时，<a href=“#”>首页</a>。
  • 下载链接：如果href里面地址是一个文件或严肃哦包，会下载这个文件。
  • 网页元素链接：在网页中的各种网页元素，如文本、图像、婊哥、音频、视频等都可以添加链接。
  • 🚩锚点链接：点击链接，可以快速定位到页面的某个位置。
    在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>；找到目标位置标签，里面添加一个id属性=名字，如：<h3 id="two">第二集介绍</h3>。

💛5.HTML中的注释和特殊字符

✨⑴注释

语法格式<!-- 注释内容-->，快捷键Ctrl + '/'。

✨⑵特殊字符
显示结果描述HTML 原代码
<小于号或显示标记&lt
>大于号或显示标记&gt
半个空白位&ensp
一个空白位&emsp
不断行的空白&nbsp

💚三、HTML标签(下)

💛1.表格标签

🍄表格的主要作用：主要用于展示、显示数据的。

🍄表格的基本语法

<table>
  <tr>
    <td>单元格内的文字</td>
    ... ...
  </tr>
  ... ...
</table>

🍄表头单元格<th>： 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗聚会总显示。

表格属性名表格属性值描述
alignleft、center、right规定表格相对周围元素的对齐方式
border1或“”规定表格单元是否拥有边框，默认为“”没有边框
cellpadding像素值规定单元沿与其内容之间的空白，默认像素
cellspacin像素值规定单元格之间的空白、默认2像素
width像素值或百分比规定表格的宽度

🍄表格结构标签：<thead> <tbody>

🍄合并单元格： 跨行合并rowspan=“合并单元格个数”；跨列合并colspan=“合并单元格个数”。合并单元格的步骤①先确定是跨行还是跨列合并②找到目标单元格，写上合并方式=合并单元格数量，如<td colspan='2'></td>③删除多余的单元格。

💛2.列表标签

🍄列表标签： 是用来布局的，最大的特点是整齐、整洁，他作为布局非常方便。分为三大类：无序列表、有序列表和自定义列表。

✨⑴无序列表（重点）

注意：无序列表<ul>中只可以放<li>标签，而<li>标签中可以放其他标签，同时无序列表带有自己的默认css样式属性。

<ul>
  <li>列表项1</li>
  ...
</ul>
✨⑵有序列表（理解）

注意项同⑴无序列表

<ol>
  <li>列表项1</li>
  ...
</ol>
✨⑶自定义列表（重点）

注意：<dl>只可以包含<dt>与<dd>，同时可以出现多组<dt>与<dd>，实际使用示例与语法规范如下。

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
</dl>

自定义列表

💛3.表单标签

使用表单的目的：为了收集用户信息。
表单组成：表单域、表单控件（表单元素）、提示信息。

✨⑴表单域

表单域是一个包含表单元素的区域。

<form action="url地址" method="提交方式" name="表单域名称">
  语法格式，各种表单元素控件
</form>
属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务程序的url地址。
methodget/post用于设置表单数据的提交方式。
name名字用于指定表单名称，以区分同一个页面中的多个表单域
✨⑵表单控件（表单元素）:input、select、textarea
  • <input type="属性值" name=“自定义” value=“自定义” chacked=“”>表单元素
    type属性的属性值及其描述如下：
属性值描述
button定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox定义复选框
file定义输入字段和“浏览”按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的按钮
password定义密码字段，该字段中的字符被掩码
radio定义单选按钮
reset定义重置按钮。重置按钮会清空表单中所有数据
submit定义提交按钮。提交按钮会把表单数据发送到服务器
test定义单行输入字段，用户可在其中输入文本，默认宽度为20个字符

<label>标签： 为input元素定义标注（标签），作用是用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到对应的表单元素上，增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />   // for与id对应
  • select下拉表单元素：比较简单不多做赘述。
  • textarea文本域表单元素：当用户输入内容较多的情况下，使用该标签，语法格式如下，其中属性row与cols不常用。
<textarea row="行数" cols="每行字符数">
  文本内容
</textarea>

💛4.综合案例-注册页

注册页
页面样式如上图，代码地址：综合案例__1.完全用html标签写一个注册页

💙第二章 CSS3基础 CSS层叠样式表（一）

💚一、CSS简介

💛CSS语法规范

🍄 CSS规则主要是有两部分构成： ⏩选择器 ⏩一条或多条声明。

🍄 CSS代码风格： ⏩紧凑格式⏩展开格式（推荐展开格式）

h3 { color: red;font-size: 20px; }  /紧凑格式/

h3 {  /展开格式/
  color: red;
  font-size: 20px;
}

🍄 空格规范： ①属性值前面，冒号后面，保留空格；②选择器（标签）he大括号中间保留空格

h3 {
  color: red;
  font-size: 20px;
}

💚二、CSS选择器

🍄CSS选择器分为两大类： ⏩基础选择器（标签选择器、类选择器、id选择器、通配符选择器）⏩复合选择器。

💛1.基础选择器

✨⑴标签选择器：可以把莫一类标签全部选择出来，如页面中所有的<div>标签。
✨⑵类选择器（最常用）：.类名

🍄 注意：一个标签是可以指定多个类名的，同时一个类名也可以被多个标签使用。

✨⑶id选择器：#id名

🍄 注意：id选择器名只允许一个标签使用，并且一个标签也只可以有一个id名。

✨⑷通配符选择器：*给所有的标签样式
* {
  color：red;  //这样所有的字体颜色为红色
}

💛2.复合选择器

🍄 复合选择器是建立在基础选择器之上的，分为：后代选择器，子选择器，并集选择器，伪类选择器。

✨⑴ 后代选择器：元素1 元素2 ｛样式声明｝，元素1是元素2的父元素。
✨⑵子选择器（重要）：元素1>元素2 ｛样式声明｝
✨⑶并集选择器（重要）：元素1, 元素2｛样式声明｝
✨⑷伪类选择器：可以向某些选择器添加特殊效果，例如:hover，:frist-child
  • 链接伪类选择器：注意事项a:link、a:visited、a:hover、a:active写样式的顺序不可以改变。
语法作用
a:link选择所有未被访问的链接
a:visited选择所有已被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择活动链接（鼠标按下未弹起的链接）
  • :focus伪类选择器：用于获得焦点的表单元素

💚三、CSS字体属性font

💛1.字体系列font-family

略

💛2.字体大小font-size

略

💛3.文字粗细 font-weight: 属性值

属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100-900400等于normal，而700等于bold，注意这个数字不加单位。

💛4.文字样式font-style: 属性值

🍄 属性值：normal（默认值），italic斜体。

💛5.字体复合属性

🍄语法结构font: font-style font-weight font-size/line-height font-family不能随意更换顺序，属性font-size与font-family不可以省略，其他项可以省略。

💚四、CSS文本属性

💛1.文本颜色color

表示属性值
预定义的颜色值red，green，blue等
十六进制#FF0000，#FF6600，#29D794等
RGB代码如rgb(255,0,0)等

💛2.对齐文本text-align: left/right/center

💛3.装饰文本text-decoration: 属性值

属性值描述
none默认，没有装饰线（最常用）
underline下划线。链接a自带下划线（常用）
overline上划线。（几乎不用）
line-through删除线（不常用）

💛4.文本缩进text-indent: 像素

text-indent通常是段落的首行缩进。

💛5.行间距line-height: 像素

行间距

💚五、CSS的引入方式

💛1.CSS的三种样式表

内部样式表，行内样式表，外部样式表（链接式）

💛2.内部样式表

<style>
  div {
    color: pink;
  }
<style>

💛3.行内样式表

<div style="color: pink"> 行内样式</div>

💛4.外部样式表

实际开发都是外部样式表，水喝与样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
使用步骤：1.新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中；2.在HTML页面中，使用<link>标签引入这个文件。<link rel="stylesheet" href="css文件路径">

💚六、CSS第二天

💛1.CSS的元素显示模式

CSS的元素显示模式包括：块元素、行内元素、行内块元素。

✨⑴块元素
✨⑵行内元素

特点：相邻行内元素在一行上，一行可以显示多个；高宽直接设置是无效的；默认宽度就是内容本身的宽度；行内元素只能容纳文本或其他行内元素；注意：<a>里面可以放块级元素，但是给<a>转换成块级元素最安全。

✨⑶行内块元素

在行内元素中有几个特殊的标签——<img />、<input/>、<td/>他们同时具有块元素和行内元素的特点。

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

🍄文字垂直居中：我们需要注意CSS并没有提供某个属性使文字在”盒子“中垂直居中，目前我们利用行高=”盒子“高度。

💛2.CSS的背景

✨⑴背景颜色 background-color: transparent/颜色;
✨⑵背景图片background-image: none/url(地址);
✨⑶背景平铺background-repeat: 参数;
参数值作用
repeat背景图在纵向和横向上平铺
no-repeat背景图不平铺
repeat-x背景图在横向上平铺
repeat-y背景图在纵向上平铺
✨⑷背景图片位置：改变图片在背景中的位置
background-position: x y;

参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位。

参数值说明
length百分数
positiontop/center/bottom/left/right 方位名词
✨⑸背景图像固定（背景附着）
background-attachment: scroll(默认，随内容滚动) | fixed(固定);
✨⑹背景复合写法：background: ;没有顺序要求
✨⑺背景色半透明CSS3

CSS3为我们另外提供了背景颜色半透明的效果。

background: rgba(0, 0, 0, 0.3);
  • 0.3参数是alpha透明度，取值范围在0~1之间；
  • 0.3我们习惯把0省略写成.3；
  • 背景色半透明是CSS3新增属性，是IE9+版本浏览器才支持，但是在实际开发中，不太关注兼容性写法了，可以放心使用。

💛3.CSS的三大特征

CSS有三个重要特性：层叠性、继承性、优先级。

✨⑴层叠性
  • 层叠性原则：
  • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式；
  • 样式不冲突，不会层叠；
✨⑵继承性

CSS中的继承：子标签会继承父标签的 某些样式，如文本颜色、字号、text-、font-、line-。可以恰当简化代码。

✨⑶优先级

💛4.CSS的注释

💚七、CSS盒子模型

💛1.盒子模型

盒子模型组成：边框border、内容content、内边距padding、外边距margin。

✨⑴边框border

border可以设置元素的边框，边框有三部分组成：边框宽度+边框样式+边框颜色。

border: border-width | border-style | border-color;  /没有顺序/
  • 表格细线边框
    使用原生table的写法画表格，细线模式属性border-collapse写法如下：
table,
td,
th {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
  • 边框会影响盒子的实际大小
✨⑵盒子模型内边距padding

内边距padding指的是盒子与内容之间的距离，内边距会影响盒子的宽width与高height。

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
  • padding的复合属性
值的个数表达意思
padding: 5px;1个值，代表上下左右都有5像素的内边距
padding: 5px 10px;2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding: 5px 10px 20px 30px;4个值，代表上是5像素，右是10像素，下是20像素，左是30，顺时针

🍄 padding不会影响盒子大小的情况： 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

✨⑶盒子模型外边距margin
  • 内边距margin指的是盒子与内容之间的距离，margin的复合属性与内边距padding相同。
属性作用
margin-left左内边距
margin-right右内边距
margin-top上内边距
margin-bottom下内边距

🍄外边距的典型应用：

  • 外边距可以让块级盒子水平居中，但是必须满足两个条件，①盒子给了宽度width②盒子左右外边距设置为auto。
✨⑷外边距合并
  • 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

🍄嵌套块元素垂直外边距的塌陷

  • 对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
    嵌套块元素垂直外边距的塌陷
  • 解决方案：①可以为父元素定义边框；②可以为父元素定义上内边距；③可以为父元素添加overflow: hidden。
✨⑸清除内外边距

🍄网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们再布局前，首先要清除下网页元素的内外边距。

* {
    padding: 0;
    margin: 0;
}

💛2.圆角边框（CSS3新增）

border-radius: length；

💛3.盒子阴影（CSS3新增-重点）

border-shadow: h-shadow v-shadow blur spread color inset;
值描述
h-shadow必须，水平阴影的位置，允许负值。
v-shadow必须，垂直阴影的位置，允许负值。
blur可选，模糊距离。
spread可选，阴影的尺寸。
color可选，阴影的颜色。
inset可选，将外部阴影（inset）改为内部阴影。

💛4.文字阴影（CSS3新增-了解）

text-shadow: h-shadow v-shadow blur color;  /解释同**盒子阴影**/

💙第三章 H5与C3高级

💚一、CSS 浮动

常见网页布局： 在学习浮动之前，我们要知道传统网页布局的三种方式：普通流（标准流）、浮动、定位。实际开发中一个页面基本都包含了这三种布局方式，后面移动端学习新的布局方式。

💛1.标准流（普通流/文档流）

  • 块级元素会独占一行，从上向下顺序排列；
  • 常用元素：div、hr、p、h1-h6、ul、ol、form、table；
  • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
  • 常用元素：span、a、i、em等。

🍄以上都是标准流布局，标准流是最基本的布局方式。

💛2.浮动（float）

✨⑴浮动特性（重难点）
  • 浮动元素会脱离标准流；
  • 浮动的元素会行内显示并且元素顶部对齐；
  • 浮动元素会具有行内块的特性。
✨⑵浮动的两个注意点
  • 浮动和标准流的父盒子搭配；
  • 一个元素府浮动了，理论上其余的兄弟元素也要浮动。

💛3.清除浮动

✨⑴为什么要清除浮动？
  • 由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
✨⑵清除浮动-额外标签法
选择器 {clear: 属性值;}
属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响），基本不用
right不允许右侧有浮动元素（清除右侧浮动的影响），基本不用
both同时清除左右两侧浮动的影响，常用
✨⑶清除浮动-父级添加overflow
  • 可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
    优点：代码简洁；缺点：无法显示溢出的部分。
✨⑷清除浮动-:after伪元素法

:after方式是额外标签法的升级版，也是给父元素添加。

.clearfix:after {
  content: "";
  display: block；
  height: 0;
  clear: both;
  visibility: hidden；
}
.clearfix {  /IE6、7专有/
  *zoom: 1;
}
  • 优点没有增加标签，结构更简单；缺点照顾低版本浏览器。
✨⑸清除浮动-双伪元素清除浮动
.clearfix:before, .clearfix:after {
  content: "";
  display: table；
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
  • 优点代码简洁，缺点照顾低版本浏览器。

💛4.学成在线案例

暂时不会插入代码，如果有需要私信我要文件。

💚二、CSS 定位

💛1.定位

✨⑴思考：为什么需要定位？
  • 使用标准流或者浮动，可以使某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子吗？
  • 当我们滚动窗口时，盒子固定屏幕某个位置？

🍄所以以上的情况标准流与浮动并不可以实现，因此我们引出了定位的概念。

✨⑵定位组成
  • 定位： 将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
  • 定位组成： 定位模式 + 边偏移

🍄定位模式

值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

🍄边偏移：指定位的盒子移动到最终位置，有top、bottom、left与right4个属性。

✨⑶静态定位 static（了解）

静态定位是元素的默认定位方式，无定位的意思，很少使用。

选择器 {position: static;}
✨⑷相对定位 relative（重要）

🍄相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

🍄相对定位的特点：

  • 它是相对于自己原来的位置来移动的。（移动位置的时候参照点是自己原来的位置）
  • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
✨⑸绝对定位absolute（重要）

🍄绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。

🍄绝对定位的特点：

  • 如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位。（Document文档）
  • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素参考点移动位置。
  • 绝对定位不再占有原先的位置。（脱标）
✨⑹固定定位fixed（重要）

🍄固定定位是元素 固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

🍄固定定位定位的特点：

  • 以浏览器的可视窗口为参照点移动元素；
  • 跟父元素没有关系；
  • 不随滚动条滚动；
  • 不占有原先的位置。
✨⑺粘性定位 sticky（了解）

🍄粘性定位可以被认为是相对定位与固定定位的混合。

🍄粘性定位的特点：

  • 以浏览器的可视窗口为参照点移动元素（固定定位特点）；
  • 粘性定位占有原先的位置；
  • 必须给top、bottom、left、right其中一个才有效果；
  • 跟页面滚动搭配使用，兼容性较差，IE不支持。
✨⑻定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（Z轴）。

✨⑼定位的拓展

🍄绝对定位的盒子居中：加了绝对定位的盒子不能通过margin: 0 auto;水平居中，但是可以通过计算方法来实现水平和垂直居中。

🍄定位特殊性：绝对定位和固定定位也和浮动类似
行内元素添加绝对定位或固定定位，可以直接设置高度和宽度；
块级元素添加绝对定位或固定定位，如果不给宽度或高度，默认大小是内容的大小

🍄脱标的盒子不会触发外边距塌陷：浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。

💛2.综合案例

暂时这部分没有更新

💛3.网页布局总结

🍄通过盒子模型，清晰知道大部分html标签是一个盒子。
🍄通过CSS浮动、定位可以让每个盒子排列成为网页。

  • 标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
  • 浮动：可以让多个块级元素一行显示或者左右对齐的盒子，多个块级盒子水平显示就用浮动布局。
  • 定位：定位最大的特点是有层叠性，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局。

💛4.元素显示与隐藏

✨⑴display属性

🍄display属性用于设置一个元素如何显示。

  • display: none;隐藏对象
  • display: block;除了转换为块级元素之外，同时还有显示元素的意思。

🍄display隐藏元素后，不在占有原来的位置，应用也十分广泛。

✨⑵visibility可见性

🍄visibility属性用于指定一个元素应可见还是隐藏。

  • visibility: visible;元素可视
  • visibility: hidden;元素隐藏

🍄visibility隐藏元素后，继续占有原来的位置。

✨⑶overflow溢出

🍄overflow属性指定了如果内容溢出一个元素的框（超过其指定高级及宽度）时，会发生什么。

属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll不管超出内容与否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条

💙第四章 CSS高级技巧

未完待续…

💚一、

💚二、

仙女不下凡
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1.1Web前端基础笔记
m0_64838786的博客
03-14 912
零基础，学web：第一篇！ 学习笔记~
前端基础（笔记）
X_zhikang的博客
02-21 136
一.HTML基础 html分为块级元素和内联元素。 1.1块级元素 1.1.1 基本格式和基本元素： <html> <head> <title>标题</title> </head> <body> <h1>标题一</h1> <h2>标题二</h2> <p&...
前端基础笔记
A2254536570的博客
08-01 201
CSS 1、选择器 1.1、基本选择器 1、标签选择器 body p{} p{ color: red; } 2、类选择器 class: .类名{} 3、id选择器 : 全局唯一! #id名{} 优先级 id>class>标签 1.2、层次选择器 /*层次选择器 ( )1.后代选择器： 在某个元素的后面 祖爷爷 爷爷 爸爸 你 (>)2.子选择器 一代 儿子 (+)3.相邻兄弟选择器 同辈,只选中下方相邻的一个指定类型元素
前端基础学习笔记（一）
weixin_45152278的博客
10-21 546
对HTML知识点的总结
前端技术基础--笔记
weixin_52375283的博客
08-18 339
目录 一 一,改造登录案例 –1,概述 –2,改造 二,HTML –1，概述 –2，入门案例 –3，使用Hbuilder 三,常用标签 –1,概述 –2,常用标签 –3,表格标签 –4,表单标签form –5,无法提交的问题 作业 二 一,HTML练习 –1,改造用户注册的表单 –2,创建学生系统的表单 二,CSS –1,概述 –2,入门案例 三,CSS选择器 –1,概述 –2,基本选择器 –3,高级选择器 四,盒子模型 –1,测试 五,练习 –1
day02_CSS预习笔记1
08-03
这篇笔记将详细介绍CSS的基础知识，包括其定义、语法规范、注释、开发人员工具以及CSS的四种引入方式。 1. 什么是CSS？ CSS，全称层叠样式表，是一种用于描述HTML或XML（包括各种XML方言如SVG、XHTML等）文档样式的...
前端基础学习笔记,pdf
10-12
这篇学习笔记涵盖了JavaScript的基础知识，以及与前端开发相关的其他重要概念。 JavaScript是ECMAScript的一个实现，是一种解释型的、基于原型的、动态类型的编程语言。它的发展史与浏览器密切相关，从最初的...
我的前端学习笔记
01-06
这篇前端学习笔记主要涉及到HTML5和CSS3的相关知识，特别是Canvas元素的使用。Canvas是HTML5引入的一个重要特性，允许动态生成图像，非常适合用于创建图形、动画或者游戏等交互式内容。 首先，我们看到CSS部分定义...
前端学习笔记：实现一个盒子水平居中，学习代码
最新发布
06-21
在提供的压缩包文件中，"前端学习笔记：实现一个盒子水平居中"可能包含了更多关于这个主题的实例和详细解释。通过阅读和分析这些笔记，你可以更深入地理解这些方法，并可能发现其他实用的技巧。
前端学习笔记，做一个简单的网站，模仿阿里网站.html，学习代码
06-20
这篇"前端学习笔记，做一个简单的网站，模仿阿里网站.html"的文档，旨在通过实际操作来帮助初学者理解和掌握这些基础知识。 HTML（HyperText Markup Language）是网页内容的结构化标记语言，用于定义网页的基本元素...
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
前端基础复习笔记
wings的博客
03-07 394
最近对前端基础知识复习了一遍，遍写个笔记方便再次复习。 1.延迟脚本：加defer属性，脚本会被延迟到整个页面都解析完毕后在运行。defer属性只用于外部脚本文件。 2.异步脚本：加async属性，只用于外部脚本文件，与defer相似。 3.用e表示法的数值等于e前面的数值乘以10的指数次幂 4.NaN用于表示一个本来要返回数值的操作数未返回数值的情况 5.数值转换：number
Web前端基础学习笔记(Html CSS Javascript)
huwhois的博客
06-05 889
HTML:是一种超文本标记语言,Hyper Text Markup Language的简写 标签(tag)和属性(attribute) 元素(亦称标签) 块元素:h1~h6,p,div,ul,li,ol,dl,dt,dd,table,tr, 内联元素(行内元素):a,span,strong,em,img,form, input, select, option, textarea, labe
前端面试基础学习笔记
倩mys的博客
05-23 1318
文章目录1 HTML01 如何理解 HTML 语义化？02 默认情况下，哪些 HTML 标签是块级元素、哪些是内联元素？2 CSS01 盒子模型的宽度如何计算？02 margin 纵向重叠问题03 margin 负值问题04 BFC 理解与应用05 如何实现圣杯布局和双飞翼布局06 手写 clearfix07 flex 实现一个三点的色子08 absolute 和 relative 分别依据什么定位？09 居中对齐有哪些实现方式？***10 line-height 如何继承11 响应式 - rem 是什么？
前端入门笔记
qq_45036013的博客
04-08 150
大前端开发 一.引入 项目研发 例: estore (电子商城) 1. 后台管理子模块 1.1. 数据来源 （数据库） 1.2. 后台管理系统 1.2.1. 功能划分: 分类管理 商品管理 品牌管理 订单管理 2. 购物子模块 2.1. 功能划分: 浏览首页 信息筛选 列表页面 查看商品详情 添加购物车 提交订单 3.estore的 - 企业级要求...
1.3Web前端基础笔记
m0_64838786的博客
03-15 113
web前端基础~第三篇
个人学习前端基础知识笔记整理
qq_38958284的博客
01-15 473
1、元素分类 块级标签block html,body,div,h1-h6,p,ul,ol,li,dl,dt,dd,hr,form 块级标签特性：默认占据整行 行内标签 inline span,a,b,strong,i,em,u,ins,s,del 行内标签特性：默认大小由内部元素撑开，不支持设置宽高，可以使用行高的方式来扩充高度（小技巧） 行内块标签 inline-block
pink老师前端基础部分内容笔记
Zaralike的博客
06-17 663
一、浏览器 1.常用浏览器 IE、火狐（Firefox）、谷歌(Chrome)、Safari、Opera等 2.
前端入门学习笔记
weixin_41872264的博客
12-21 403
WEB前端 网页 网站 HTML

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值