html5，css3笔记(基础)

mo城风

已于 2023-04-03 16:09:12 修改

阅读量853

点赞数 1

文章标签：前端 html5 css3

于 2023-04-03 15:55:01 首次发布

本文链接：https://blog.csdn.net/m0_64425900/article/details/129022593

版权

什么是html？

HTML是超文本标记语言。HTML也就是由各种各样的标签组成。

什么是网站?

网站是由网页组成，网页包括文字，图片，音频，视频等元素。

web标准

包括结构，表现，行为三个方面。

结构：用于对网页元素进行整理和分类，主要用html。

表现：用于设置网页元素的版式、颜色、大小等外观样式，主要用CSS。

行为：指网页模型的定义及交互的编写，主要用的是Javascript。

Web标准提出的最佳体验方案：结构、样式、行为相分离。简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

HTML语法规范

标签：所有的标签都要写在尖括号里，大多数标签是成对出现的，也有单标签。

双标签：<标签> </标签> 例如：<html> </html>

单标签：<标签> 例如：<br />

标签关系

双标签之间的关系：1.包含关系 2.并列关系

HTML基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
1.HTML标签：<html> </html>，页面中最大的标签，我们称为根标签。

2.文档的头部：<head> </head>，注意在head标签中我们必须要设置的标签是title。

3.文档的标题：<titile> </title>，让页面拥有一个属于自己的网页标题。

4.文档的主体：<body> </body>，元素包含文档的所有内容，页面内容基本都是放到body里面的。

结构图

开发工具

VS Code

推荐VS Code 插件安装

基础代码含意

1.<!DOCTYPEhtml>：文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面。

2.<htmllang=“en”>：告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示。en定义语言为英语，zh-CN定义语言为中文。

3.<meta charset="UTF-8”/>：必须写，采取 UTF-8来保存文字，如果不写就会乱码。charset 常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

常用标签

标题标签

一共有六级：<h1>~<h6>等级依次递减。

格式：<h1> 标题 </h1>

特点：
1.加了标题的文字会变的加粗，字号也会依次变大。
2.一个标题独占一行。

段落标签

格式：<p> 段落 </p>

特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。

换行标签

格式：<br />

特点：
1.<br/>是个单标签。
2.<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

文本格式化标签

作用：在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

加粗：<strong>需要加粗的文字</strong>或者<b>需要加粗的文字</b>

倾斜：<em>需要倾斜的文字</em> 或者<i>需要倾斜的文字</i>

删除线：<del></del> 或者<s></s>

下划线：<ins></ins>或者<u></u>

<div>和<span>标签

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

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

特点：
1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
2.<span>标签用来布局，一行上可以多个<span>。小盒子

图像标签

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

图像标签的其他属性:

使用：<img 属性1=" "(必要属性：src="图片路径") 属性2=" " 属性3=" " />

图像标签属性注意点：
1.图像标签可以拥有多个属性，必须写在标签名的后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开,
3.属性采取键值对的格式，即key="value”的格式，属性=“属性值”。

超链接标签（重点）

超链接的语法格式
<a href="跳转目标”target="目标窗口的弹出方式">文本或图像</a>

两个属性的作用

href：用于指定链接目标的ur地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。

target：用于指定链接页面的打开方式，其中_self为默认值，__blank为在新窗口中打开方式。

链接分类

1.外部链接:例如<a href="http://www.baidu.com”>百度</a>。

2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html”>首页</a>。

空链接:如果当时没有确定链接目标时，< a href="#”>首页</a>。

4.下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。

网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

6.锚点链接：点我们点击链接可以快速定位到页面中的某个位置.

1、在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>

2、找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two”>第2集介绍</h3>

使用

HTML中的注释和特殊字符

注释

HTML中的注释以“”结束

<！-- 注释语句 --> 快捷键：ctrl +/

特殊字符

表格标签

表格作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。

表格的基本语法

注释

1、<table></table>是用于定义表格的标签。
2、<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
3、<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分(table head的缩写)

表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置。

<！-- 这些属性要写到表格标签table 里面去-->
目的有2个:
1.记住这些英语单词,后面CSS会使用.
2.直观感受表格的外观形态.

表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分.

在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域,这样可以更好的分清表格结构。

1.<thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行,

2.<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。

3.以上标签都是放在<table></table>标签中。

合并单元格

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan="合并单元格的个数”

合并单元格写法

跨行：最上侧单元格为目标单元格,写合并代码

跨列：最左侧单元格为目标单元格,写合并代码

合并单元格三步曲:

1.先确定是跨行还是跨列合并。

2.找到目标单元格.写上合并方式＝合并的单元格数量。比如：<tdcolspan=“2”></td>。

3.删除多余的单元格。

标签列表

1、表格是用来显示数据的，那么列表就是用来布局的。
2、列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
3、根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

无序列表（重点）

<ul>标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
3. <li>与</li>之间相当于一个容器，可以容纳所有元素。
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

有序列表（理解）

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2.<li> 与</li>之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

自定义列表（重点）

在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

1. <dl></dl>里面只能包含<dt>和<dd>。
2. <dt> 和<dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

总结

表单标签

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分成。

表单域

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

表单控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

input输入表单元素

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

type属性值

其他属性

1. name 和value 是每个表单元素都有的属性值，主要给后台人员使用.

2. name 表单元素的名字，要求单选按钮和复选框要有相同的name值.

3. checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素.

4. maxlength是用户可以在表单元素输入的最大字符数，一般较少使用.

<label>标签

<label>标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点（光标转到或者选择对应的表单元素上，用来增加用户体验.

select下拉表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表

1. <select>中至少包含一对<option>

2. 在<option>中定义selected=selected"时，当前项即为默认选中项。

textarea 文本域元素

1.通过<textarea>标签可以轻松地创建多行文本输入框。
2. cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS 来改变大小。

总结代码实践

CSS

介绍

CSS 是层叠样式表（Cascading Style Sheets）的简称.有时我们也会称之为CSS样式表或级联样式表。
CSS是也是一种标记语言。
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

CSS样式写在<head>标签中，<style>中写样式

1、选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
2、属性和属性值以“键值对”的形式出现。
3、属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4、属性和属性值之间用英文“:”分开。

CSS基础选择器

标签选择器

用HTML中的标签作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

作用：标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签.

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

语法

使用

结构需要用class属性来调用class类的意思

多类名使用方式

(1)在标签class属性中写多个类名

(2)多个类名中间必须用空格分开

id选择器

id选择器只能调用一次

语法

使用

通配符选择器

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

2、特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距后期讲)

语法

总结

每个基础选择器都有使用场景，都需要掌握

如果是修改样式，类选择器是使用最多的

CSS字体属性

用于定义字体系列、大小、粗细、和文字样式（如斜体）。

字体系列

CSS使用font-family属性定义文本的字体系列。

1、各种字体之间必须使用英文状态下的逗号隔开。
2、一般情况下,如果有空格隔开的多个单词组成的字体加引号。
3、尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。
4、最常见的几个字体body{fontfamily:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';)。

CSS使用font-size属性定义字体大小。

1、px（像素）大小是我们网页的最常用的单位。
2、谷歌浏览器默认的文字大小为16px。
3、不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
4、可以给body指定整个页面文字的大小。

字体粗细

CSS使用font-weight属性设置文本字体的粗细。

1、学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗。
2、实际开发时，我们更喜欢用数字表示粗细。

文字样式

CSS使用font-style属性设置文本的风格。

注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

字体复合属性

字体属性可以把以上文字样式综合来写,这样可以更节约代码。

1、使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。

2、不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

总结

CSS文本属性

文本颜色

color 属性用于定义文本的颜色。

文本对齐

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

文本装饰

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

重点：记住如何添加下划线？如何删除下划线？其余了解即可。

文本缩进

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

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

行间距

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

总结

CSS引入方式

内部样式引入

所谓内部样式表，就是在html页面内部写样式，但是是单独写到style标签内部。

行样式引入

就是在HTML标签中写样式，只能应用本标签

外部样式引入

步骤

1.新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
2.在HTML页面中，使用<link>标签引入这个文件。

使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式。

总结

Emmet插件

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

1.快速生成HTML结构语法

2.快速生成CSS样式语法

快速格式化代码

作用：快速让代码对齐，整洁。

右键——>格式化文档

CSS的复合选择器

什么是复合选择器

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

1、复合选择器可以更准确、更高效的选择目标元素（标签）。

2、复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。

3、常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

后代选择器

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

1、元素1和元素2中间用空格隔开。

2、元素1是父级，元素2是子级，最终选择的是元素2。

3、元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。

4、元素1和元素2可以是任意基础选择器。

子选择器

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

1、元素1和元素2中间用大于号隔开。

2、元素1是父级，元素2是子级，最终选择的是元素2。

3、元素2必须是亲儿子，其孙子、重孙之类都不归他管.你也可以叫他亲儿子选择器。

并集选择器

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

1、元素1和元素2中间用逗号隔开。

2、逗号可以理解为和的意思。

3、并集选择器通常用于集体声明。

伪类选择器

1、伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
2、伪类选择器书写最大的特点是用冒号（:）表示，比如:hover、:first-child
3、因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

链接伪类选择器

一、链接伪类选择器注意事项

1.为了确保生效，请按照LVHA的循顺序声明：link-visited-:hover-active。

2.记忆法：love hate 或者Iv包包hao。

3.因为a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

二、链接伪类选择器实际工作开发中的写法

:focus 伪类选择器

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

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

总结

显示模式转换

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

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

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

块元素

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

特点

①、比较霸道，自己独占一行。

②、高度，宽度、外边距以及内边距都可以控制。

③、宽度默认是容器（父级宽度）的100%。

④、是一个容器及盒子，里面可以放行内或者块级元素。

注意

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

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

特点

①、相邻行内元素在一行上，一行可以显示多个。

②、高、宽直接设置是无效的。

③、默认宽度就是它本身内容的宽度。

④、行内元素只能容纳文本或其他行内元素。

注意

链接里面不能再放链接
特殊情况链接<a> 里面可以放块级元素，但是给<a> 转换一下块级模式最安全
行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

特点

①、和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

②、默认宽度就是它本身内容的宽度（行内元素特点）。

③、高度，行高、外边距以及内边距都可以控制（块级元素特点）。

总结

显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围。

转换为块元素：display:block
转换为行内元素：display:inline;
转换为行内块：display:inline-block;

CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color 属性定义了元素的背景颜色。

一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。

背景图片

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

背景铺平

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat 属性。

背景图片位置

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

参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left 效果一致。

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

参数是精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。

如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

背景图片固定/滚动

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量。
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

背景色半透明

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

1、最后一个参数是alpha透明度，取值范围在0~1之间。

2、我们习惯把0.3的0省略掉，写为background: rgba(0,0,0,.3)。

3、注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

4、CSS3 新增属性，是IE9+ 版本浏览器才支持的。

5、但是现在实际开发，我们不太关注兼容性写法了，可以放心使用。

总结

CSS三大特性

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

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖另外一个样式，层叠性注要解决样式冲突的问题。
层叠性原则：
①、样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
②、样式不冲突，不会层叠。

继承性

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

恰当地使用继承可以简化代码，降低CSS 样式的复杂性。

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性。

行高的继承性：

1、行高可以跟单位也可以不跟单位。

2、如果子元素没有设置行高，则会继承父元素的行高为 1.5。

3、此时子元素的行高是：当前子元素的文字大小*1.5。

优先级

注意

1.权重是有4组数字组成但是不会有进位

2.可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器，以此类推..

3.等级判断从左向右，如果某一位数值相同，则判断下一位数值。

4.可以简单记忆法：通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器 100,行内样式表为1000,!important无穷大。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

盒子模型

网页布局过程

1.先准备好相关的网页元素，网页元素基本都是盒子Box。
2.利用CSS设置好盒子样式，然后摆放到相应位置。
3.往盒子里面装内容。

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容。

边框（border）

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

语法

复合写法——边框设置简写

单边边框（左，右，上，下）

表格的边框

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

边框会影响实际盒子大小，会向外扩张。

内边距

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

复合写法

会影响盒子大小，如果盒子已经有了高度和宽度，此时再去指定内边框，盒子会被撑大。

如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小。

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

margin简写方式代表的意义跟padding完全一致。

外边距的应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

①、盒子必须指定了宽度（width）。

②、盒子左右的外边距都设置为auto。

清除内外边距

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

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

新知识点：去掉 1i前面的项目符号（小圆点)

圆角边框

border-radius属性用于设置元素的外边框圆角。

语法

分开写：border-top-left-radius（左上）、border-top-right-radius（右上）、border-bottom-right-radius（右下）和border-bottom-left-radius（左下）。

盒子阴影

box-shadow属性为盒子添加阴影。

语法

注意：
1.默认的是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

text-shadow属性将阴影应用于文本。

语法

浮动

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

1.块级元素会独占一行，从上向下顺序排列。

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

常用元素：span、a、i、em等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了三种布局方式，后面移动端学习新的布局方式。

为什么需要浮动？

1.如何让多个块级盒子（div)水平排列成一行？

比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。

注意

语法

浮动特性

1.脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）。

2.浮动的盒子不再保留原先的位置。

注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

3.浮动元素会具有行内块元素特性,

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

1、如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。

2、浮动的盒子中间是没有缝隙的，是紧挟着一起的。

3、行内元素同理。

浮动元素经常和标准流父级搭配使用

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

常见网页布局

1.浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

2.一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。

为什么需要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

清除浮动
清除浮动的本质

①清除浮动的本质是清除浮动元素造成的影响。

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

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

清除浮动语法

我们实际工作中，几乎只用clear: both。
清除浮动的策略是：闭合浮动。

清除浮动方法

1.额外标签法也称为隔墙法，是W3C推荐的做法。

2.父级添加overflow 属性

3.父级添加after伪元素

4.父级添加双伪元素

清除浮动——额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法。

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

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差。

清除浮动——父级添加 overflow

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

子不教，父之过，注意是给父元素添加代码

优点：代码简洁

缺点：无法显示溢出的部分

清除浮动——:after 伪元素法

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

清除浮动——双伪元素清除浮动

也是给给父元素添加。

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等

总结

为什么需要清除浮动？

父级没高度。

子盒子浮动了。

影响下面布局了，我们就应该清除浮动了。

定位position

定位=定位模式+偏移量

静态定位static

跟没有定位一样，还是标准流

相对定位relative

相对于原来位置再加上偏移量。原来位置保留

绝对定位absolute

相对于父亲级或长辈级，父亲级或长辈级必须要有定位，才会相对于定位，诺父亲级或长辈级没有定位，则相对于浏览器定位。原来位置不保留。

固定定位fixed

相对于浏览器的可视窗口，不随滚动条滚动而滚动，并且不占有原位置

粘性定位sticky

固定与相对定位的混合，占有原先位置，必须添加偏移

子绝父相

子元素用绝对定位，父元素也应要定位，但要保住原来位置，因此常用相对定位

定位的叠放次序z-index

z-index :1; 设置叠放级别

只有定位的盒子才有z-index属性

定位拓展

行内元素添加了绝对或固定定位，可以直接设置高度和宽度

块元素添加了绝对或固定定位，如果不给高度和宽度，默认大小是内容大小（注：块元素一般宽度会占一行而添加定位后宽度会由内容决定）

浮动元素会压住下面标椎流盒子，但不会压住文字和图片，而定位的盒子会压住下面标椎流的所有内容

元素的显示与隐藏
display

display:none; 隐藏对象，位置不保留

display:block; 除了转换为块级元素之外，还有显示元素的作用

visibility（可见性）

visibility:visible; 元素可视

visibility:hidden; 元素隐藏，位置保留

overflow（溢出）

针对溢出的部分显示还是隐藏

overflow:visible; 溢出的部分显示出来

overflow:hidden; 溢出部分不显示

overflow:scroll; 不管益不溢出都添加滚动条

overflow:auto; 需要（溢出）的时候添加滚动条

精灵技术

减少服务器的接收和发送的请求次数，提高网页加载速度。

精灵图

将若干个图整合成一张大图片。

精灵图的使用

利用背景（background）位置（position）设置，图片向上为负，向右为负。

字体图标iconfont

步骤：1下载好字体图标，2把fonts文件复制一份放到与html同一目录下，3在样式声明字体

4使用图标，复制后面的小框框

CSS三角做法

用一个盒子，不指定大小，指定边框。位置一般用定位（绝对定位）控制位置。

鼠标样式 cursor

表单（input）轮廓和文本（textarea）

取消表单轮廓

outline: none;

防止文本域拖拽

resize: none;

vertical-align 属性应用

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

可以解决图片底侧空白缝隙的问题。

单行文字溢出省略号显示

多行文字溢出省略号显示

小技巧

1.margin负值运用。

2.行内块的运用。

3.css三角的运用。

4.浮动不会盖住文字的运用。

mo城风

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
html5，css3笔记(基础)

网站是由网页组成，网页包括文字，图片，音频，视频等元素。每个基础选择器都有使用场景，都需要掌握如果是修改样式，类选择器是使用最多的color 属性用于定义文本的颜色。所谓内部样式表，就是在html页面内部写样式，但是是单独写到style标签内部。Emmet语法的前身是Zen coding,它使用缩写，,来提高html/css的编写速度，Vscode内部已经集成该语法.1.快速生成HTML结构语法2.快速生成CSS样式语法。
复制链接

扫一扫