html5,css3笔记(基础)
什么是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></thead><tbody></tbody>
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分.
在表格标签中,分别用:<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.浮动不会盖住文字的运用。