前端学习笔记

实践出真知

HTML + CSS

一、HTML初识

1.基础认知

1.1.网页

网页的组成：

  • 文字
  • 图片
  • 音频
  • 超链接
  • 视频

常见的五大浏览器：

  • IE、火狐、谷歌（accounting for the most）、Safari、欧朋

浏览器渲染引擎（浏览器内核）: 浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同，内在的渲染引擎也是不同的：

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
Firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
Chrome/Opera Blink Blink其实是Webkit的分支
  • 渲染引擎不同，倒置解析相同代码时的速度、性能、效果也不相同
  • 谷歌浏览器的渲染速度快、性能高、效果好

1.2.Web标准

Web标准：让不同的浏览器按照相同的标准显示结果，让展示的结果统一！

构成 语言 说明
结构 HTML 页面元素和内容
表现 CSS 网页元素的外观和位置等页面样式
行为 JavaScript 网页模型的定义与页面交互

2.HTML的概念

HTML(Hyper Text Markup Language) ：超文本标记语言

2.1.HTML页面固定结构

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
  网页主体内容
  </body>
</html>

2.1.1.VS Code

特点：速度快、体积小、插件多

快捷键 说明
英文 + Tab 快捷生成标签
Ctrl + S 保存文件
alt + B 快速查看网页效果
! + tab 快速生成结构标签
Ctrl + / 快捷注释

2.2.2.HTML标签属性

属性注意点：

  1. 标签的属性写在开始标签内部
  2. 标签上可以同时存在多个属性
  3. 属性之间以空格隔开
  4. 标签名与属性之间必须以空格隔开
  5. 属性之间没有顺序之分
    基本架构：
<!DOCTYPE html>
<html lang="en">
<header>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</header>
<body>
    写代码是一件非常快乐的事情！
</body>
</html>
  • <!DOCTYPE> 文档类型声明，告诉浏览器使用哪种HTML版本来显示网页

当前页码采用的是HTML5版本来显示网页。
注意：

  1. 声明位于文档最前面的位置，处于标签之前；
  2. 不是一个HTML标签，它就是文档类型声明标签。

lang语言种类：
用来定义当前文档显示的语言

  • <html lang = "en"></html>
  1. en定义语言为英文；
  2. zh-CN定义语言为中文

简单来说定义en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义zh-CN的文档也可以显示英文

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

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

3.HTML标签

3.1.标题标签

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

3.2.段落和换行标签

<p>我是一个段落标签</p>
<br/>强制换行，break的缩写，换行标签/关闭标签

3.3.文本格式化标签

语义 标签 说明
加粗 <strong></strong>或<b></b> 更推荐使用<strong> 标签加粗 语义更强烈
倾斜 <em></em>或<i></i> 更推荐使用<em> 语义更强烈
删除线 <del></del>或<s></s> 更推荐使用<del> 语义更强烈
下划线 <ins></ins>或<u></u> 更推荐使用<ins> 语义更强烈

3.4.div和span标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：

  1. <div></div>标签用来布局，一行只能放一个。大盒子
  2. <span></span>标签用来布局，一行可以放多个。小盒子

3.5.图像标签和路径

图像标签：
<img>标签用于定义HTML页面中的图像。

<img src = "图像URL"/>(/关闭标签)

单词image的缩写
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
何为属性：简单理解就是属于这个图像标签的特性
图像标签的其他属性：

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能正常显示则用文字替换
title 文本 提示文本。鼠标放到图片上，显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细

相对路径：

相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级
下一级路径 / 图像文件位于HTML文件下一级
上一级路径 ../ 图像文件位于HTML文件上一级

绝对路径：
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
eg：D:\One Driver\OneDrive\文档\Adobe

3.6.超链接标签

语法格式：
<a href="网址链接" target="目标窗口的弹出方式">文本图像</a>单词anchor的缩写，意为：锚。
两个属性的作用：

属性 作用
href 用于指定链接目标的URL地址，（必须属性）
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开

连接分类：

  1. 外部链接：例如：<a href="http://www.baidu.com">百度</a>
  2. 内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可，例如<a href="index.html">首页</a>。
  3. 空连接：如果当是没有确定链接目标时，<a href="#">首页</a>。
  4. 下载链接：如果href里面地址是一个文件或压缩包，会下载这个文件。
  5. 网页元素链接：在网页中的各种元素，如文本、图像、表格、音频等都可以添加超链接。
  6. 锚点链接：点击链接快速定位到页面中的某个位置
  • 在连接文本的href属性中，设置属性值为#名字的形式，如<a href="#简介">人物简介</a>
  • 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如：<h3 id="简介">人物简介</h3>

特殊字符：

特殊字符 描述 字符的代码
空格符  
< 小于号 &lt;
> 大于号 &gt;

4.表格标签

基本语法：

<table>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
    </tr>>
</table>
姓名 性别 年龄
张三 男 18
  1. <table></table>用于定义表格标签
  2. <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
  3. <th></th>表头单元格
  4. <td></td>用于定义表格中的单元行，必须嵌套在<tr></tr>标签中
  5. 字母td指表格数据（table data），即数据单元格的内容

表格属性：

表格标签这部分属性在实际开发中不常用，一般通过CSS来设置。

属性名 属性值 描述
align left、center、right 规定表格位置
border 1或"" 规定表格是否有边框
cellpadding 像素值 规定单元边沿与内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定单元格的宽度

表格结构标签：

  1. <thead></thead>表格的头部区域
  2. <tbody></body>表格主体区域
  3. 以上两个标签都放在<table></table>标签中
    合并单元格：
    方式：
  • 跨行合并：rowspan="合并单元格的个数"<td rowspan="2"></td>
  • 跨列合并：colspan="合并单元格的个数"<td colspan="2"></td>

5.列表标签

无序列表：

<h4>你喜欢的食物？</h4>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>柚子</li>
    </ul>

注意：<ul></ul>标签中只能放<li></li>标签，不能放其他任何内容，<li>与<li>之间相当于一个容器，可以容纳所有元素。
有序列表：

<h4>你喜欢的食物？</h4>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>柚子</li>
    </ol>

自定义列表：

    <h4>你喜欢的食物？</h4>
    <dl>
        <dt>水果类：</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dd>柚子</dd>
    </dl>
    <dl>
        <dt>肉类：</dt>
        <dd>烧鸡</dd>
        <dd>烤乳猪</dd>
        <dd>烤鱼</dd>
    </dl>

6.表单标签

表单分为：

  1. 表单域
  2. 表单控件
  3. 提示信息

<form>标签用于定义表单域，以实现用户信息的收集和传递。会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
各表单元素控件
</form>

<input type="text">

属性值 描述
button 定义可点击按钮
checkbox 复选框
file 输入字段和”复选按钮“，供文件上传
hidden 隐藏输入字段
image 图像形式的提交按钮
password 密码字段
radio 单选按钮
reset 重置按钮
submit 提交按钮
text 单行的输入字段

<input>表单元素

属性 属性值 描述
name 用户自定义 定义input元素的名称
value 用户自定义 规定input元素的值
checked checked 规定input元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度

随笔：

账号：
密码：
你喜欢哪一个： 小恐龙 小黄鸭
你的爱好是： 打游戏 读书 敲代码
手机号：
重新开始：
提交：

7.<lable>标签

<lable>标签为input元素定义标注
语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />



标签的for属性应当与相关元素的id属性相同

8.select标签

下拉标签
语法：

<select>
    <option>China</option>
    <option>English</option>
    <option>Japanese</option>
</select>
选择一个国家：

9.文本域元素

使用场景：
当用户输入内容较多情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。

<form>
今日反馈：
<textarea>

</textarea>
</form>
今日反馈：

二、CSS

1.CSS选择器

语法规范：
<style>选择器 {键值对}</style>

类选择器定义：
样式点定义，结构类（class）调用 一个或多个开发最常用


.red {
color: red;}

类选择器
语法：

<style>
.box {
    font-size: 30px;
    height: 100px;
    width: 50px;
}
.red {
    background-color: red;
}
</style>
<body>
<div class="red">我是红色</div>
<div class="box red">我是不一样的红色字体</div>
</body>

id选择器
语法：

#id名{
    属性1： 属性值1；
    ...
}

例如：将id为nav元素中的内容设置为红色。

<style>
#nav {
    color: red;
}
</style>
<body>
<div id="nav">我只能使用一次</div>
</body>

id选择器口诀：样式#定，结构id调用，只能使用一次，别人切勿使用

id选择器和类选择器的区别：

  1. 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用；
  2. id选择器好比人的身份证号码，全国是唯一的，不得重复。

通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

语法：

* {
    属性1： 属性值1；
}

通配符选择器不需要调用，自动就给所有的元素使用样式。

2.CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

p { font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft Yahei","微软雅黑";}

字体复合属性

body {
  font: font-stytle font-weight font-size/line-height font-family;
}

font-size和font-family的属性不可省略

字体属性总结：

属性 表示 注意点
font-size 字号 我们通常用的单位是px像素，一定要跟上单位
font-family 字体 实际工作中按照团队工作约定来写字体
font-weight 字体粗细 700是加粗 400是正常
font-style 字体样式 倾斜 italic 正常 normal
font 字体连写 字体连写是有顺序的 不能随意更换位置 其中字号和字体 必须同时出现

3. CSS文本属性

1.CSS文本颜色

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

2.CSS对齐文本

text-align属性用于设置元素内文本内容的水平对其方式。

div {
    text-align: center;
}

3.CSS装饰文本

text-decoration属性规定添加到文本的装饰。可以给文本添加下划线、删除线、上划线等。

div {
    text-decoration: underline;
}
属性值 描述
none 默认
underline 下划线
overline 上划线
line-through 删除线

text-decoration： none； 删除下划线；

4.CSS文本缩进

text-indent属性来指定文本的第一行的缩进，通常是将段落的首行缩进。

div {
    text-indent: 10px;
}
p {
    text-indent: 2em;
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字的大小。

5.CSS行间距

line-height属性用于设置行间的距离（行高）。可控制文字行与行间的距离。

p {
    line-height: 26px;
}

6.CSS引入方式

按照CSS样式书写的位置（或者引入的方式），CSS样式可以分为三类：

  1. 行内样式表（行内式）<p style="color: red;">天空中那个炽热的骄阳</p>
  2. 内部样式表（嵌入式）
  3. 外部样式表（链接式）<link rel="stylesheet" href="CSS文件路径">

4.CSS-Emmett语法

4.1html快读生成

Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，Vscode内部已经集成改语法。

  1. 生成标签 直接输入标签名 按tab键即可；
  2. 如果想要生成多个标签 加上就可以（生成三个
    标签--> div3）；
  3. 如果有父子级关系的标签，可以用> 比如 ul > li 就可以了；
  4. 如果有兄弟关系的标签，用+就可以 div+p；
  5. 如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了；
  6. 如果生成的div类名是有顺序的，可以用自增符号$；
  7. 如果想要生成的标签内部写内容可以用{}表示；

5.CSS复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器上，对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素（标签）；
  • 复合选择器是由两个或者多个基础选择器，通过不同的方式组合形成的；
  • 常用的复合选择器：后代选择器（重要）、子选择器、并集选择器、伪选择器等。

后代选择器：

后代选择器又称为包含选择器，可以选择父元素里边的子元素。
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1 元素2 {样式声明}

上述语法表示选择元素1里边的所有元素2（后代元素）
例如：

ul li {
    color: red;
}
  • 元素1和元素2中间用空格隔开；
  • 元素1是父级，元素2是子级，最终选择的是元素2；
  • 元素2可以是儿子，也可以是孙子，只要是元素1后代即可。

子选择器

子选择器只能选择作为某一元素的最近一级子元素。简单理解就是选亲儿子元素。

语法：

元素1 > 元素2{样式声明}

上述语法表示选择元素1里面的所有直接后代（子元素）元素2

.nav>a {
    color: red;
}
  • 元素1和元素2之间用>隔开；
  • 元素1是父级，元素2是子级；

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号（，）连接而成任何形式的选择器都可以作为并集选择器的一部分。

div,p {
    color: red;
}
div,p,.nav li {
    color: red;
}

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或者选择第1个，第n个元素。
伪类选择器最大的特点是：用（：）表示，例如：hover:first-child。

链接伪类选择器

a:link  /*选择所有未被访问的链接*/
a:visited  /*选择所有已被访问的链接*/
a:hover  /*选择鼠标指针位于其上的链接*/
a:active  /*选择活动链接（鼠标按下未弹起）*/

记住顺序 link -> visited -> hover -> active LVHA

:focus伪类选择器

：focus伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

input:focus{
    back-ground-color:red;
}

6.CSS元素显示模式

什么是元素显示模式？

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素（标签）以什么方式显示，比如

自己占一行，比如一行可以放多个.

HTML元素一般分为块元素和行内元素两种类型。

6.1块元素

常见的块元素有<h1>~<h6>、p、div、ul、ol、li等，其中``标签是最典型的块元素。
块元素的特点：

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

注意：

  • 文字类的元素内不能使用块级元素；
  • <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>;
  • 同理，<>h1~<h6>等都是文字类块级标签，里边不能放其他块级元素。

6.2行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、u、span等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素特点：

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

6.3行内块元素

  • <img>
  • <input>
  • <td>

特点：

  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙。一行可以显示多个（行内元素特点）。
  2. 默认宽度就是它本身内容的宽度。
  3. 高度、行高、外边距以及内边距都可以控制（块元素特点）。

6.4元素显示模式转换

转换为块元素

display:block;

转换为行内元素

display:inline;

转换为行内块元素

display:inline-block;

一个小技巧 单行文字垂直居中

解决方案：让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中。

7.CSS背景颜色

7.1背景图片

background-image属性描述了元素的背景图像。实际开发中常见于一些装饰性的小图像或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）。

7.2背景平铺

background-image:repeat|no-repeat|repeat-x|repeat-y

默认情况下背景图片是平铺的

7.3背景图片位置

利用background-position属性可以改变图片在背景中的位置。

background-position:x y;

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

参数值 说明
length 百分数 \ 由浮点数子和单位标识符组成的长度值
position top \ center \ bottom \ left \center \ right 方位名词

7.3背景图片固定

background-attachment:scroll | fixed
参数 作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定

背景复合写法

background: transparent url() repeat fixed x y;

background:black url() no-repeat fixed center top;

7.4背景颜色半透明

background: rgba(0,0,0,0.3);/*alpha  透明度*/

最后一位控制透明度，0完全透明，1完全不透明

8.CSS的三大特性

8.1层叠性

解决样式冲突

相同的选择器设置同样的样式，此时一个样式就会覆盖另一个样式。层叠性主要解决样式冲突的问题。

就近原则

样式冲突，遵循就近原则，哪个样式离结构近就执行哪个样式
样式不冲突，不会层叠

长江后浪推前浪，前浪死在沙滩上

8.2继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单理解就是：子承父业。

  • 恰当的使用继承可以简化代码，降低CSS样式的复杂性；
  • 子元素可以继承父元素的样式（text-,font-,line-这些元素的开头的可以继承，以及color属性）

8.3优先级

当同一个元素指定多个选择器，就会有优先级的产生。

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行

选择器权重级别：

  1. 继承或者*
  2. 元素选择器
  3. 类选择器或者伪类选择器
  4. ID选择器
  5. 行内样式
  6. ！important重要的

权重依次增大

8.4权重叠加

符合选择器会有权重叠加的问题

9.盒子模型

盒子模型的组成：

  1. border边距
  2. content内容
  3. padding内边距
  4. margin边距

9.1边框

boder可以设置元素的边距。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
语法：
boder:boder:width||boder:style||boder-color

属性 作用
boedr-width 定义边框粗细，单位是px
boer-style 边框的样式
boer-color 边框颜色
  • boder-style:solid实线
  • boder-style:dashed虚线
  • boder-style:dotted点线
边框复合写法：
boer:1px solid red; 没有顺序
边框分开写法：
boder-top:1px solid red;/*只设定上边框，其余同理*/

9.2表格细线边框

boder-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法:

boder-collapse:collapse;
  • collapse是合并的意思
  • boder-collapse:collapse;表示相邻单元格边框合并在一起

9.3内边距

padding属性用于设置内边距，即边框与内容之间的距离

属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

内边距复合写法：

padding:5px;/*1个值，代表上下左右都有5像素内边距*/
padding:5px 10px;/*上下5像素。左右10像素*/
padding:5px 10px 20px;/*上5像素，左右10像素，下20像素*/
padding:5px 10px 20px 30px;/*上右下左*/

9.4margin外边距

margin用于控制外边距，控制盒子与盒子之间的距离

属性 作用
margin-left 左外边距
margin-rught 右外边距
margin-top 上外边距
margin-bottom 下外边距

外边距可以让块级盒子水平居中，当必须满足：

  • 盒子必须指定宽度（width）
  • 盒子左右的外边距都设置为auto
    .header{width:960px;margin:0 auto;}

行内元素或者行内快元素水平居中给其父元素添加text-align:center即可

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

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

  1. 可以为父元素定义上边框
  2. 可以为父元素定以上内边距
  3. 可以为父元素添加overflow:hidden

9.5清除网页元素内外边距

/*这句话也是CSS的第一句话*/
*{
  margin:0;/*清除外边距*/
  padding:0;/*清除内边距*/

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换块级和行内块元素就可以了。

9.5圆角边框

boder-radious属性用于设置元素的外边框圆角。
语法：

boder-radious:length;/*length可以数值|百分比*/

radious半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

9.6盒子阴影(important)

box-shaodw属性为盒子添加阴影
语法：

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

9.6 文字阴影

text-shadow:h-shadow v-shadow blr color;

值 描述
h-shadow 必需。水平阴影位置
v-shadow 必需。垂直阴影位置
blur 可选。模糊的距离
color 可选。阴影的颜色

10. CSS浮动

10.1浮动

所谓的标准流：就是标签按照规定好默认方式排列。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

语法：

选择器：{float:属性值；}
属性值 描述
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

10.2浮动特性（重难点）

  1. 浮动元素会脱离标准流
  2. 浮动的元素会一行内显示并且元素顶部对齐
  3. 浮动的元素会具有行内块元素的特性

1. 脱离标准普通流的控制（浮）移动到指定位置（动），俗称（脱标)
2. 浮动的盒子不在保留原来的位置
3. 如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列。
4. 浮动的元素具有行内块元素的特性。

为了约束浮动元素的位置，我们网页布局的一般采取的策略是：先用标准流的父亲排列上下位置，之后内部子元素采取浮动排列左右位置

10.3清除浮动

由于浮动元素不再占用源文档流的位置，所以他会对后面的元素排版产生影响

清除浮动的本质是清除浮动元素产生的影响

如果父盒子本身有高度，则不需要清除浮动

清除浮动之后，父级就会根据浮动的子盒子自动监测高度。腹肌有了高度，就不会影像下面的标准流了

语法：

选择器{clear:属性值；}
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影像）
right 不允许右侧有浮动的影响
both 同时清除左右侧浮动的影响

清除浮动的方法：

  1. 额外表前法也称隔墙法
  2. 父级添加overflow属性
  3. 父级添加after伪元素
  4. 父级添加双伪元素

额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both" ></div>,或者其他标签（如<br />等）。

要求这个新的标签必须是块级元素

父级添加overflow

可以给父级添加overflow属性，将其属性设置为hidden、auto或scroll。

：after伪元素法

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

语法：

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    *zoom:1;
}

双伪元素清除浮动

也是给父元素添加

.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both:
}
.clearfix{
    *zoom:0;
}

11.定位

定位：将盒子定在某个位置，所以定位也是在摆盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边位移。

定位模式用于指定一个元素在文档中的定位方式。边位移则决定了该元素的最终位置。

定位模式
定位模式决定元素的定位方式，它通过CSS属性的position属性来设置，其值可以分为四个：

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

边位移

边位移就是定位的盒子移动到最终位置。有top、buttom、left、和right 4个属性。

边位移属性 示例 描述
top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离
buttom buttom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离
left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离
right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离

静态定位

静态定位是元素的默认定位方式，无定位的意思。
语法：

选择器 { position: static;}

相对定位（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型 ）

语法：

选择器 {position: relative;}

原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）

绝对定位

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

选择器 {position :absolute;}

绝对定位的特点：

  1. 如果过没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
  2. 如果父元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
  3. 绝对定位不再占由原先的位置。（脱标）

11.1 子绝父相的由来

子级是绝对定位的话，父级要用相对定位。

  1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个位置，不会影响其他兄弟盒子。
  2. 父级盒子需要加定位限制子盒子在父盒子内显示。
  3. 父盒子在布局时，需要占有位置，因此父亲只能是相对定位。

固定定位fixed

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

语法：

选择器{position：fixed}

特点：

  1. 以浏览器的可视窗口为参照点移动元素。
  2. 和父元素没有任何联系
  3. 不随滚动条滚动
  4. 不在占有原来位置（脱离标准流）

固定定位小技巧（固定在版心右侧位置）

小算法：

  1. 让固定定位的盒子left:50% 走到浏览器可视区（也可以看做版心）的一半位置；
  2. 让固定定位的盒子margin-left：版心宽度的一半就可以了。

粘性定位

语法：

选择器{position: sticky;top 10px;}

特点：

  1. 以浏览器的可视窗口为参照点移动元素
  2. 粘性定位占有原先位置
  3. 必须添加top、left、right、bottom其中一个才有效

11.2 定位叠放次序

z-index可以控制盒子的前后次序

语法：

选择器{z-index: 1;}
  1. 数值可以是正整数、负数或0，默认是auto，数值越大，盒子越靠上

绝对定位盒子居中

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

  1. left: 50%; 让盒子的左侧移动到父级元素的水平中间位置。
  2. margin-left:-100px; 让盒子向左移动自身宽度的一半。

定位特殊特性

  1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
  2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
  3. 浮动元素、绝对定位（固定定位）元素都不会触发外边距合并问题。
  4. 浮动（float）的元素不会压住下面标准流的文字（图片）
  5. 但是绝对定位（固定定位）会压住下面标准流的所有内容。
posted @ 2021-11-16 10:32  卿源  阅读(261)  评论(0)    收藏  举报