html+css3基础知识部分详记

1.VsCode操作
1）语言切换
2）“文件”——首选项——“设置”
3）插件：view in browser
open in browser
4）快捷键
alt+b 使用默认浏览器打开
shift+alt+向下箭头向下复制一行
shift+alt+向上箭头向上复制一行
alt+向下箭头向下移动行
alt+向上箭头向上移动行
shift+tab 向前移动
ctrl+z 回退一步

2.浏览器及内核
1）chrome谷歌：
特点——简洁、快速、安全
内核——webkit,Blink
费用——收费
2）Firefox火狐——Mozilla公司
特点——非盈利，Gecko项目开源
内核——Gecko
3）Safari苹果——苹果公司
特点——移动端
内核——webkit
4）Opera欧朋——挪威——Opera software ASA:
特点——自主研发presto内核
内核——presto、blink
5）IE——Microsoft
特点——IE和Windows系统捆绑推向市场
内核——trident
总结：
1)使用trident内核的：IE及国产浏览器
2)Gecko内核的:Mozilla的Firefox
3)Blink内核：chrome、opera
4)webkit内核：Safari、chrome,及一些国产双核浏览器
前缀　　　　　　　　浏览器

    -webkit-　　　　　　chrome、safari-moz-　　　　　　　 firefox-ms-                 IE-o-                 opera

3.前端页面的构成
1）HTML：超文本标记语言 Hypertext Markup Language(结构层)
结构层由HTML标记语言，负责页面的语义
2）CSS：层叠样式表 cascading style sheets,(样式层或表现层)
表现层负责页面的样式
3）JavaScript：脚本语言(行为层)
行为层负责描述页面的动态效果

4.什么是HTML？
HTML是超文本标记语言。定义
HTML是使用标记来描述网页的一种语言。干什么
HTML是一种语法简单、结构清晰的语言。特点

5.HTML文档——网页
扩展名：.html。
文件名的格式：主文件名.扩展名

6.HTML标签语法：
标记——标签、元素
HTML标签：由尖括号包围的关键词
单标签：<标签名 />或<标签名>
双标签：<标签名>[内容]</标签名>
<标签名属性名=“属性值”>[内容]</标签名>
空元素严格模式下开始标签中进行关闭

HTML的注释：ctrl+/
<!--HTML注释内容 -->

7.HTML文档的基本结构

:帮助浏览器正确的显示我们的网页

<html><head><meta charset="utf-8"><title>网页标题</title></head><body></body>
</html>
<!DOCTYPE html> <!-- 文档申明-->

网页基本结构

8、常用标签：
块级标记：
1）标题标签：h系列
h1~h6大小依次减小，重要程度依次减弱
h1在同一个网页中只能使用一次；其他标签可以重复使用
特点：默认情况下宽度100%，默认情况下高度自适应，独立成行；自带间距，自带间距和加粗
2）段落标记：p标签
特点：默认情况下宽度100%，默认情况下高度自适应，独立成行；自带间距
3）div标签:
语法：

[内容]

特点：默认情况下宽度100%，默认情况下高度自适应，独立成行；
其他标签：
4）br标签：强制换行标签——不产生新段落的情况下，进行换行
语法：
或

5）hr标签：水平分割线标签
语法：

或

特点：默认情况下，自带间距、自带边框
行级标签：文本格式化的标记
6）span标签：万能标签，用于区分样式，双标签
7）b标签：是一个实体标签，用来呈现粗体效果
8）strong标签：是一个语义标签，作用加强字符的寓意，用来表示重要文本，在文本中呈现粗体效果
9)i标签：定义与文本中其他部分不同的部分，将这一部分呈现为斜体，没有特殊语义
10)em标签：用来呈现被强调的文本，在文本中呈现斜体效果
11)sub标签：定义下标
12)sup标签：定义上标
13)del标签：删除线
特点：默认情况下，宽度自适应，默认情况下，高度自适应，默认情况下横向显示（相邻的行内元素会排列在同一行中，直到一行排不下，才会换行）
15)a标签：超链接标签
语法：链接文本
target属性：
_blank:在新窗口打开
_self:在当前窗口中打开
特点：默认情况下宽度自适应，默认情况下高度自适应，默认情况下横向显示，默认文字颜色为蓝色，访问过后文字为紫色，自带下划线
可以使用#号作为网页占位符，代表当前页
锚点使用：跳转到长页面的某个位置、跳转到不同页面的目标位置
定义锚点：

[内容]

引用锚点：链接文字

行块级标签：
14)img图片标签
语法：
alt属性：用来为图片定义预备替换文本
width属性：图片的宽度
height属性：图片的高度
特点：默认情况下水平布局，元素可以设置宽度和高度、换行和空格会被解析
15)

9、路径：
1）绝对路径：带有域名的文件的完整路径或盘符下的某个路径
2）相对路径：/表示根目录 ./表示当前目录，可省略 …/表示上级目录 …/…/表示上上级目录文件名/引用下级目录

10、语义化
1）什么是HTML语义化：
根据页面内容结构，选择合适的标签，便于开发者阅读和写出更优雅的代码，便于浏览器、搜索引擎解析，有益于SEO，便于团队开发和维护。例如：标题用h1~h6，段落使用P标签
2）语义化的好处
在没有CSS的情况下，页面也能够呈现出较好的内容结构；
语义化能使我们的代码更具有可读性，便于团队开发和维护；
语义化有利于用户体验；
语义化有利于SEO搜索引擎优化；

11、特殊符号
空格
小于号< <
大于号> >
& &
已注册 ®
版权符号 ©
商标 ™

12、什么是CSS？
CSS——层叠样式表， cascading style sheet
主要用于html页面文本内容、图片外形、版本布局等外观样式的设置

13、css语法规则：
1）语法：
选择器声明语句 ; 声明语句 ;声明语句
div{width:200px;height:200px;background-color:red;}
属性名：属性值
2)注释：
/*
css注释内容
*/

14、样式的引用方式
1）行内样式——内联式
语法：

适用于：个别元素添加特殊样式时
缺点：作用范围小，尽量不要使用
2）内部样式——嵌入式（内嵌式）
语法：

适用于：单个HTML文档需要特殊样式时
优点：相对行内样式，代码能够复用
3）外部样式——外链式，引入扩展名为.css的文件
语法：

rel属性：当前文档与被链接文档之间的关系，只有stylesheet得到所有浏览器的支持，表示外部文件的类型是css文件
适用于：多个HTML文档具有相同样式时，
创建步骤：
（1）新建扩展名为.css的文件，保存到网站目录的css文件夹中
（2）打开新建的.css文件，设置编码方式：@charset “utf-8”
（3）在HTML文档中，链接后缀名为.css的文件：

4)样式表的优先级:
行间样式>内部样式>外部样式
外部就近原则

15、基础选择器：选择器——找对象
1）通配符选择器*：单独使用选择所有元素
2）元素选择器——标签选择器、类型选择器
结构中：<标签名></标签名>
样式中：标签名{css样式}
3）class选择器——类选择器
结构中：<标签名 class=“类名”></标签名>
样式中：.类名{css样式}
选择器的命名规范：
名称尽量有含义；
名称建议以英文开头，可以包含字母、数字、连字符（—_）;
除了连字符之外特殊符号不能使用（包含空格）；
不能使用中文汉字、不能使用纯数字，不能以数字开头；
类名会区分大小写
4）id选择器——唯一
结构中：<标签名 id=“id名”></标签名>
样式中：#id名{css样式}
注意：id名称在本页面中只能出现一次
5)选择器的优先级：一般来说，选择器的权值越大，优先级越高
基本选择器的权值有小到大：通配符选择器（0）<标签选择器（1）<class选择器（10）<id选择器（100）<行间样式（1000）
如果选择器的权值相同，后写的内容会覆盖先写的内容
行间样式拥有最高优先级但是高不过!important: background-color: lightcoral !important;
16、文本文字属性
ps中的编辑-首选项-单位与标尺，将文字和标尺的单位改成像素
文字属性：
1）font-size属性：字号，单位像素
浏览器默认字号为16像素
2)font-family属性：字体、字族
如果字体名称包含空格，字体名称上加引号；
多个字体名称可以作为一个回退系统来保存，如果第一个字体不被浏览器支持，则尝试下一个，多个字体之间用逗号隔开
中英文混排：英文字体排在中文字体前面
Arial,“Time New Roman”,“微软雅黑”，“宋体”
3）font-weight属性：文字加粗,范围100_900,100400都是normal
font-weight:normal;正常(相当于400)
font-weight:bold;加粗（相当于700）
font-weight:900;
4)font-style属性:文字样式
font-style:normal;正常
font-style:italic;斜体
5)line-height属性：文字行高,文字设置了行高后，会在行高的范围内垂直居中，但是行高撑不起盒高。没有设置单位的行高值，表示字号的倍数。
6)font属性
font：[font-style][font-weight]font-size[/line-height]font-family
注意：只有同时具有font-size和font-family才有效
文本属性：
7）color:文字颜色
英文名称：transparent透明、red红色、绿色green、蓝色blue
十六进制色值：由0_9，af组成，6位十六进制数，红色#ff0000-#f00,
RGB(r,g,b):红色，绿色，蓝色，取值范围在0-255
RGBA(r,g,b,a):红色，绿色，蓝色,a-alpha透明度，取值范围0-1之间，0表示完全透明，1表示完全不透明，0——1之间表示半透明效果
8)text-align属性：文本的水平对齐方式，设给块级元素，图片的水平对齐也可以设置
text-align:left;默认值，左对齐
text-align:center;居中对齐
text-align:right;右对齐
9）text-decoration属性:文本装饰线
text-decoration:none；去掉文本装饰线
text-decoration:underline；下划线
text-decoration:overline；上划线
text-decoration:line-through；删除线
10）text-indent属性：文本块的首行缩进，单位px,em（字符宽度的倍数），百分比（相对于父元素宽度的百分之多少）

6、css长度单位
px:像素，相对于显示器的屏幕分辩率而言的，值相对较固定，计算较容易
em:相对长度单位，跟父级（祖宗们）元素的字号大小（font-size）有关
浏览器默认字号为16像素，未经调整的浏览器都符合1em=16px
特点：值是不固定的，会继承父元素的字号大小
%:相对长度单位，
rem:相对于根元素的字体大小的单位，是css3新增的单位
浏览器在默认情况下，1rem=16px
在IE8及更早版本的浏览器中不兼容

7、html中的列表
1)无序列表（ul的子元素必须是li，li里可以放任何）
语法：

特点：宽度100%；高度自适应；独立成行自带间距、填充；自带列表符（清除自带列表符list-style:none;）
2)有序列表
语法：

特点：
3）自定义列表
语法：

列表标题或专业术语

列表项或对专业术语的解释

标题

列表项

注意：浏览器显示，dd中的内容会默认缩进显示

8、表格：可以将数据有效的组织在一起，并以网格的形式显示。
特性：有内容的、没有固定宽度的单元格，由内容撑开
没有固定宽度的空单元格，默认情况下平分表格的宽度
语法：
普通表格：

表格的标题
表头单元格,默认文字加粗，并且水平垂直居中	表头

    </tr><tr><td>表格单元格，默认情况下，水平居左，垂直居中</td><td>普通单元格</td></tr><tr><th>表头单元格</th><td>普通单元格</td></tr>
</table>
复杂表格：
<table border="1"><thead><!--表格的头，主要用来放置标题之类的东西--><th>表头</th><th>表头</th></thead><tbody><!--表格的身体，用来放置数据--><tr><td>表格单元格</td><td>表格单元格</td></tr></tbody><tfoot><!--表格的底部，用来放置脚注之类的东西--><tr><td>单元格</td><td>单元格</td></tr></tfoot>
</table>
表格属性：border属性：表格边框border="1|0",border="0"表格没有边框cellpadding属性：单元格内容和单元格边框之间的距离，单位像素<table border="1" cellpadding="20"></table>cellspacing属性：单元格之间的间距，单位像素，默认大小为2像素<table border="1" cellspacing="20"></table>合并单元格：跨行合并单元格：rowspan夸列合并单元格:colspan
表格常用的css属性：border-collapse属性：设置表格的行和单元格的边是否合并还是独立border-collapse: separate;边框独立border-collapse: collapse;相邻边合并border-spacing属性：当表格边框独立时，行和单元格的边框在横向和纵向上的间距如果是两个长度值，第一个主要用于横向间距，第二个主要用于纵向间距如果是一个长度值，这个值作用域横向和纵向的间距border-spacing: 10px 0;
表格优点：方便排列一些有规律的、结构均匀的内容和数据
表格缺点：产生垃圾代码、影响页面的下载时间、灵活性不大、难于修改

9、表单：用于采集不同类型的用户输入数据，发送给服务器，实现用户和服务器之间的数据交互
1）表单标签form:用于声明表单，定义数据的采集范围
注意：一个页面中能有多个form标签，但是标签之间相互独立，不能嵌套；
用户向服务器发送数据时，一次只能提交一个表单中的数据；如果要提交多个表单，需要使用js中的异步交互方式来实现。
语法：

表单元素

method属性：提交表单时所用的http方法，默认情况下为get方式
get方式：将数据作为URL的一部分发送给服务器；安全性比较低；有长度限制；请求的数据可以被缓存，能够保留在浏览器的历史记录中；能作为书签被收藏；
http://www.baidu.com?userneme=123&psd=asd
http://www.baidu.com?参数名=参数值&参数名=参数值
post方式：将数据隐藏在http数据流中进行传输；安全性比get方式高；对数据的长度没有限制请求数据不会被缓存，也不会在浏览器，历史记录中保存，更不会作为书签被收藏
http://www.baidu.com
2）input表单域

单行文本输入框
密码框

    <input type="radio">单选按钮<input type="checkbox">复选框checked属性：主要用于单选按钮和复选框默认选中，可以直接在input元素中写checked或者checked="checked"<input type="submit" value="提交">提交按钮<input type="reset" value="重置">重置按钮<input type="button" value="普通按钮">普通按钮<button>按钮</button>默认类型为submit<button type="submit">提交按钮</button><button type="reset">重置</button><button type="button">普通按钮</button><input type="file">上传文件注意：实现后台上传文件，必须在form表单中添加enctype属性<form action="#" enctype="multipart/form-data"><input type="image" src="图片路径" alt="提示性文字">图片形式的按钮注意：input必须与src属性和alt属性配合使用<input type="hidden" value="值">隐藏域。用户不可见，目的是为了搜集或发送信息到服务器，有利于程序处理信息
3)select下拉列表语法：<select name=""><option value="html" selected>html</option>/*列表项，加载时预先选定的选项*/<option value="css">css</option></select>selected属性：主要用于下拉列表的默认选中，可以直接写成selected或selected="selected"
4)textarea多行文本域：一般用于需要输入大量文本的位置
<textarea cols="" rows=""></textarea>
cols属性：cols="1"，表示宽度，一行最多可以输入一个汉字，两个字符
rows属性：表示行数
textarea{resize:none;}禁止用户调整多行文本域的大小

DAY04
5)label标签：标注标注——扩大点击范围，一般与单选按钮、复选框组合使用。
关联方式：
显示方式：
吃饭
隐式方式：吃饭
6)表单相关属性:
readonly属性：只读属性，不能修改，可以被提交
disabled属性：禁用表单元素，被禁用的元素，不可点击，不会被提交

    maxlength属性：允许输入的最多字符数size属性：控制input的长度value属性：初始值placeholder属性：文本域的提示信息checked属性：radio和checkboxselected属性：下拉列表 select

2、css选择器——复合选择器
1）后代选择器——选择器之间用空格隔开
选择器1 选择器2{css样式}/在选择器1范围内的所有选择器2全部生效/
2）子代选择器——只能选择第一级子元素
父选择器 > 子选择器{css样式}
3）群组选择器——分组选择器，选择器之间用逗号隔开
选择器1，选择器2{css样式}/选择器1和选择器2都具有相同的属性/
4）交集选择器——两个以上的选择器组成
结构中：

样式中：div.active{css样式}
5)伪类选择器：用来添加选择器的特殊效果
语法：选择器：伪类{css样式}
链接的不同状态都可以以不同的方式显示：
a:link{链接的默认样式}
a:visited{链接访问过后的样式}
a:hover{鼠标悬停到链接上的样式}
a:active{鼠标摁下时的样式}
四个伪类状态都生效：LV-Ha

3、盒模型Box Model
css盒模型也称为框模型，在页面的布局当中，将页面的元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范。包含：元素内容content、内填充padding、边框border、外间距margin等几个要素。css盒模型本质就是一个盒子，封装周围的html元素。
标准盒模型的计算公式：
盒子的实际宽度=width属性+padding-left+padding-right+border-left+border-right
盒子的总宽度=width属性+padding-left+padding-right+border-left+border-right+margin-left+margin-right
盒子的实际高度=height属性+padding-top+padding-bottom+border-top+border-bottom
盒子的总高度=height属性+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom
盒模型的相关属性：
1)内容属性：
width属性:元素的宽度
属性值：auto|数值|百分比（父元素宽度）|inherit
height属性：元素的高度
属性值：auto|数值|百分比（父元素宽度）|inherit（继承）
max-width属性：最大宽度 min-width属性：最小宽度
max-height属性：最大高度 min-height属性:最小高度

2）padding属性：内填充（内边距），元素边框和元素内容之间的空白区域
单边的内填充设置：
padding-top属性：上内填充
padding-right属性：右内填充
padding-bottom属性：下内填充
padding-left属性：左内填充
复合写法：
padding: 10px;/元素的四周各有10像素的内填充/
padding:10px 20px;/元素的上下各有10px的内填充左右20px的内填充/
padding:10px 20px 30px ;/元素的上有10px，左右各有20px，下有30px的内填充/
padding: 10px 20px 30px 40px;/元素的上有10px,左侧有20px,下侧有30px,右侧有40px的内填充/
注意：百分比的形式的padding,上下内填充和左右内填充相对于父级元素宽度计算的

3）border属性：边框
border-width属性:边框的宽度，属性值单位像素
border-style属性：边框的样式
border-style:none;没有边框
border-style:solid;单实线
border-style:double;双实线
border-style:dashed;条状虚线
border-style:dotted;点状虚线
border-color属性：边框颜色,默认的边框颜色是元素本身的前景色
复合写法：
border-width:npx
border-width:npx mpx
border-width:npx mpx xpx
border-width:npx mpx xpx ypx
border-color属性、border-style属性
单边属性：
border-top:上边框
border-top-width属性:上边框的宽度
border-top-style属性：上边框的线型
border-top-color属性：上边框的颜色
border-top:border-top-width border-top-style border-top-color
border-right属性：右边框
border-bottom属性：下边框
border-left属性：左边框
border简写：（四周都有）
border：border-width border-style border-color
4）margin属性：外间距、外边距——定义元素周围的空间
小三角的制作：
宽高为0，
border-width: 100px 100px 100px 0;
border-color:transparent green;
border-style: solid;
单边外间距：
margin-top属性：上外边距
margin-right属性：右外边距
margin-bottom属性：下外间距
margin-left属性：左外间距
复合写法：
margin:npx 上右下左
margin:npx mpx 上下左右
margin:npx mpx xpx 上左右下
margin:npx mpx xpx ypx 上右下左
盒子的水平居中：
width属性
margin :0 auto;
固定宽度且居中，一般居中盒子需要设置固定的宽度
注意：行级元素实际不占上下外边距
margin值的问题：
1）父子关系外边距塌陷问题：元素嵌套关系时，子元素的margin值会叠加给父元素
现象：给子元素设置外间距，会和父元素的外间距合并，最终会表现出其中较大的外间距的值
原因：父级盒和子级盒公用一个上外间距导致的
解决方法：
给父元素设置边框或设置内填充；
给父元素添加overflow:hidden属性，触发BFC，改变父元素的渲染规则
2）兄弟关系的外边距叠加问题——元素并列关系，垂直方向上相邻的margin值相遇，会出现叠加
现象：上一个盒子设置下外间距，下一个盒子设置上外间距,
两个值相同，取当前值；两个值不同，取较大值
原因：上下两个兄弟关系的盒子，公用一个外间距区域
解决方法：给两个盒子都添加一个父盒子，父盒都添加overflow:hidden属性

Day05
1、背景属性
1）background-color属性:背景颜色，默认值为transparent透明
关键词|十六进制色值|rgb(r,g,b)|rgba(r,g,b,a)
背景颜色应用于内容区、padding、border区域
2）background-image属性：背景图片
语法:background-image:url(图片的路径)
background-image:none;(无背景图，默认值)
3)background-repeat属性:背景图是否重复
background-repeat: repeat;默认值，背景图在水平方向和垂直方向重复
background-repeat: repeat-x;背景图在水平方向重复
background-repeat: repeat-y;背景图在垂直方向重复
background-repeat: no-repeat;背景图不重复
4）background-position属性:背景图位置
语法：background-position:xpos ypos;
属性值：
关键词：left|center|right top|center|bottom
保证不超过两个关键词，一个是水平方向，一个是垂直方向，如果只出现一个关键词，另一个关键词默认为center
长度值：图像的左上角0px 0px,负值向盒外移动，正值向盒内移动
百分比：图像在左上角0% 0%，右下角100% 100%
如果只有一个百分比的数值，这个值作为水平方向的值，垂直方向将假设为50%
5)background属性：
background:background-color background-image background-repeat background-position;
注意：如果某一个属性不需要，可以再直接省略

2、css的三大特征
1）层叠性：
(1)样式冲突：就近原则
(2)样式不冲突：不会层叠，但会叠加
2）继承性：——子元素会继承父元素的样式
可以继承的属性：
字体系列属性：font-family;font-size;font-weight;font-style;line-height
文本系列属性：text-indent;text-align;text-decoration;color;
列表当中属性：list-开头的属性
3）优先级：
选择器的权值越大，优先级越高；权值相同时，谁在后面优先显示谁
基础选择器权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
复合选择器权值计算方式：组成复合选择器的所有单一选择器的权值累加
.box div{} 权值：10+1=11
#box .box p{} 权值：100+10+1=111
行间样式的优先级高于id选择器；
继承样式的权值为0，子元素中设置的样式，会覆盖继承到的样式
在样式将中定义！important，优先级高于行间样式

3、标签分类
标签分类——行级标签、块级标签、行内块标签
1）行级元素 inline-level
常用元素：span、em、i、b、strong、sub、sup、del、a
特点：默认情况下，宽度随内容的变化而变化；
默认高度由内容撑开；
不会独立成行，相邻的行内元素排列在同一行中，直到一行拍不下，才会换行；
换行和空格会被解析；
具有部分盒模型特征：宽高无效，边框保留
使用：一般用来容纳文本和其他内联元素，通常被包含在块元素中使用。
2）块级元素 block-level
常用元素：div、p、h1-h6、ul、li、ol、dl、dt、dd
特点：默认宽度撑满父元素的宽度；
默认高度有内容撑开；
默认元素垂直布局；
具有全部的盒模型特征。
使用：块级元素中，可以添加块级元素，行级元素，行内块元素；
3）行内块元素 inline-block
常用元素：img、input
特点：
具有块级标记的特征：可以设置宽高、内填充、外间距；
具有行级标记的特征：默认横向显示，直到一行排不下，才会换行；换行和空格会被解析

4、框类型转换——display
display：none;元素不会被显示；——隐藏元素,不占位
display：block;元素的显示；将元素显示为块级元素，具有块级元素的特征
display：inline;将元素显示为行级元素,具有行级元素的特征
display：inline-block;将元素显示为行块级元素,具有行块级元素的特征

5、浮动
1）什么是浮动？
文档流：可以显示的对象在排列时所占的位置
浮动：使元素脱离正常的文档流，按照我们指定的方向发生移动，直到碰到它的父元素的边界或另外一个浮动元素的边框为止
注意：元素的水平方向浮动，元素只能左右移动而不能上下移动
2）浮动的属性：
float:left；元素向左浮动
float:right；元素向右浮动
float:none；默认值，元素不浮动
3)浮动特性：
(1)浮动是元素脱离正常文档流;
(2)浮动元素的层级可以提升
(3)浮动可以使行级元素支持宽高设置；
(4)浮动元素可以使块级元素由内容撑开；
(5)元素添加浮动之后，不占位，父级盒高度为0
4)浮动带来的影响
元素浮动以后，脱离正常文档流，导致父元素高度塌陷，父元素高度为0，会影响父元素统计的后续元素的正常布局
5）清除浮动方法：（父高、父浮、父over、并div、clearfix）
(1)为浮动元素的父级盒添加固定的高度——不够灵活
(2)为浮动元素的父级盒加上浮动——会产生新的浮动问题
(3)为浮动元素的父级盒设置overflow属性，属性值可以使hidden|scroll|auto可能导致内容显示不完全；代码简洁
(4)在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空的div，在空div上添加一个clear:both;——代码冗余；通俗易懂、书写方便
(5)推荐方式：给浮动元素的父级盒加一个类名.clearfix
.clearfix{*zoom:1;}//IE6,7兼容
.clearfix::arfer{
content:"";
display：block;
clear:both;
overflow:hidden;
height:0;
}
不会在结构上产生冗余代码，可以重复使用，符合闭合浮动思想，结构语义化正确

6、overflow属性——溢出隐藏,包含水平方向和垂直方向
overflow-x:只包含水平方向
overflow-y:只包含垂直方向
overflow:visible;溢出显示，默认值
overflow:hidden;溢出隐藏
overflow:scroll;溢出显示滚动条
overflow:auto;自动
overflow:inherit;继承

7、clear属性——清浮动
clear:left;清除左侧浮动
clear:right;清除右侧浮动
clear:both;清除两侧浮动

Day06
1、浮动的目的：
为了让我们的多个块级元素在同一行显示
最核心的关键点：怎么排列、是否占位

2、伪元素选择器（行级元素）
1）element::before{content：“伪元素的内容”；属性名称：属性值}
在element的内部，内容之前添加“伪元素的内容”
2）element::after{content：“伪元素的内容”；属性名称：属性值}
在element的内部，内容之后添加“伪元素的内容”

3、样式重置——css reset
网页在现实的过程中，由于浏览器的内核不同，版本不同，对默认样式属性值的解析也是不同。将所有元素的自带样式去掉，然后重装，可以再不同内核、不同版本的浏览器中，都接地到相同的属性
*{
margin: 0;
padding: 0;
}
body,h3,h4,p{
margin: 0;
padding: 0;
}

4、定位技术——position
css的定位机制：普通文档流、浮动、定位
1）定位原理：允许元素相对于其正常位置、相对于父元素（祖辈和亲父亲）、相对于浏览器窗口本身的位置，做相应的调整
元素位置的调整：left|right属性、top|bottom属性
2）使用时机：出现覆盖关系
3）定位属性：position
静态定位position:static;默认值
相当于没有定位，元素会出现在正常文档流中
相对定位position:relative;相对于本身的位置进行定位（本身的位置还在）
一般用于元素的微调，作为绝对定位的参考元素
特点：
（1）不会影响元素本身的特性
（2）相对定位依然占位
（3）如果没有定位偏移量，对元素本身没有任何影响，如果定义了定位偏移量，相对于原来位置发生偏移
（4）能够提升层级
绝对定位position:absolute——相对于最近的定位父元素定位（定位父级，添加了绝对相对）
特点：
（1）使元素完全脱离正常文档流，不占位
（2）有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移
（3）使行级元素支持宽高；没有设置宽度的块级元素，宽度自适应。
（4）提升层级
绝对定位的步骤：——子绝父相
（1）为要做特殊定位的盒子（定位盒）添加position：absoluted;绝对定位
（2）设置初始位置，通过top|bottom、left|right属性
top:0;|bottom:0;
right:0|left:0;
(3)定位盒的父级盒(有固定宽度和高度)，设置position:relative；相对定位
(4)回到定位盒，通过top|bottom、left|right属性进行精确定位
固定定位：position:fixed；——相对于浏览器窗口进行的定位
特点：
（1）元素定位后脱离正常文档流，不占位；
（2）始终相对于浏览器的四个角为原点，进行定位设置，不会随页面内容滚动而滚动；
（3）使行级元素支持宽高，没有设置宽度的块级元素宽度自适应
（4）提升层级

4）边界重叠:margin-left=-1px;额外加类名
Day08
1、定位属性
position：absolute;绝对定位，元素不占位相对于定位父级盒
position:fixed；绝对定位元素不占位相对于浏览器窗口来定位
position：relative；相对定位元素占位相对于元素本身的位置来定位
position：static;静态定位元素占位相当于没有定位

定位偏移属性：
left:0； right:0;水平方向偏移量
top:0; bottom:0;垂直方向偏移量

定位层级：只对定位生效
z-index属性：设置定位盒的叠放次序，属性值没单位，z-index属性值越大，叠放次序越高。
值可能为：正整数、负整数、0（默认值）
注意：
只对定位元素生效，添加了相对，绝对，固定定位
数值越大，叠放次序越高
如果取值相同，根据书写顺序，后来居上；
正值向上调整层级，负值向下调整层级；
属性值没有单位
定位实现盒子的水平垂直居中——绝对居中
1）margin负间距：
必须知道居中盒的宽度和高度
为居中盒设置绝对定位；
距离定位父级左边框和上边框的距离设置50%；
将预算分别左移和上移，移元素宽度和高度的一半。
2）margin:auto；绝对定位元素的居中
必须知道知道居中盒的宽度和高度；
为居中盒设置绝对定位；
分别设置left：0；right:0; top:0; bottom:0;
为居中盒这是margin:auto；
脱离文档流属性总结——css2中，能脱离正常文档流中的属性设置
1）float：left|right;脱离文档流，但不脱离文本流
2）position:absolute|fixed;既脱离文档流，又脱离文本流
注意：所以的标签都能够使用float和position属性,元素脱离文档流后，不再区分块级和行级元素，都具有共同的属性：宽度由内容撑开，可以设置width和height属性及所有的盒模型属性。

2、常见属性
1）vertical-align属性:设置元素的垂直对齐方式（行级、行内块）
vertiacl-align:baseline;将元素放在父元素的基线上
vertiacl-align:top;顶端对齐
vertiacl-align:middle;中部对齐
vertiacl-align:bottom;底部对齐

vertiacl-align:super;上标<sup></sup>
vertiacl-align:sub;下标<sub></sub>

2)使用：图片下方间隙问题
（1）将图片转成块级元素，解决下方问题；
（2）为图片元素设置垂直对齐方式，解决下方间隙问题；
vertical-align: top|middle|bottom；
（3）图片的父元素设置高度，并添加溢出隐藏（overflow：hidden）；
（4）为图片的父元素设置font-size或line-height属性，属性值为0，会对子元素中的字造成影响，解决下方间隙问题：
3）使用：文本框和按钮不对齐现象
为input元素设置vertical-align属性；
为input元素设置float属性，overflow：hidden；
3、显示隐藏属性
1）display属性
display：none;元素的隐藏，将整个元素隐藏，不占用任何内存空间
display：block；元素显示，
2)visibility属性
visibility:hidden;元素内容不可见，只隐藏内容，占位空间仍然保留
visibility:visible;元素可见
3）设置元素位置，让其消失
4）overflow属性,将要隐藏的元素移出父元素的范围
5）opacity属性，实现元素的不可见,占位依然存在
4、透明度属性
1）opacity属性：——元素的不透明度，将当前元素及子元素。将内容和背景全透明
兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器下支持
取值范围：0_{1,0表示完全透明，1表示完全不透明，0}1表示半透明效果
2）filter属性——IE专属：Alpha（opacity=x）
兼容性：仅支持IE6、7、8，在IE10及以上版本被废除
取值范围：0_{100,0表示完全透明，1表示完全不透明，0}100表示半透明效果
3）rgba(r,g,b,a)——用于颜色的不透明度设置
兼容性：IE6、7、8不支持，IE9及更早版本的浏览器中都支持
r-red 红色 0-255
g-green 绿色 0-255
b-blue 蓝色 0-255
a-alpha 透明度 0-1

5、多栏布局
什么是自适应？
自适应：让同一个页面自动去使用不同大小的设备，从而解决为不同设备提供不同版本的问题
自适应布局：解决在不同大小的设备上呈现相同网页的问题
1）两列自适应布局：左侧宽度固定，右侧宽度自适应
html结构中——左右两个盒子；
左边固定宽度，右侧宽度100%；
为左侧盒子设置position：absolute;
右侧盒子添加子盒设置padding-left，属性值为左侧盒子的宽度。
2)圣杯布局——三列布局，左右宽度固定，中间宽度自适应
html结构中——先写主体内容后侧边栏；
两个固定宽度，中间内容宽度设置width：100%；
主体内容和左右侧边栏之间分别加float：left;
左侧设置margin-left：-100%;将左侧拉到最左边，右侧设置margin-left:-右侧边的宽度；
将中间露出了：在外面的大盒子上设置padding值，padding：0，右侧边的宽度 0 左侧边的宽度；
分别为左侧边和右侧边设置position:relative；左侧设置left:-左侧边的宽度；还原左侧边。右侧边设置right:-右侧边宽度；还原右侧边
3)双飞翼布局——三列布局
两端宽度html结构中——先写主体结构后侧边，有主体内容
两侧固定宽度，中间宽度设置width：100%；
主体内容和左右侧边分别加浮动float:left;
左侧边设置margin-left=100%,;左侧拉到最左边；右侧设置margin-right:-右侧边宽度；
在主体内容盒的子盒上设置margin：0 右侧边的宽度 0 左侧边的宽度；将中间内容露出了
4)等高布局
(1)利用内外间距相抵消，为父元素设置overflow:hidden;
注意：
每一列使用padding撑开背景颜色，每一列使用padding撑开的多余的占位，用margin负值取消；
父级盒设置溢出隐藏
优点：结构简单，兼容所以的浏览器
缺点：不是真正的等高，是伪等高，需要合理控制margin和padding值
(2)利用内容撑开父元素的特点给每一列添加相对应的容器，进行相互嵌套，并且在每个容器中添加背景颜色，
三个嵌套的div负责背景，三列放在最内侧的div盒子中；
通过相对定位分配三列背景位置;
通过margin负值，将内容移到对应的背景位置；
父元素设置溢出隐藏；
优缺点：扩展性好，可以实现自适应，结构嵌套复杂；
(3)利用边框模拟背景，实现等高的显示效果
左右边框颜色、内容背景分别复杂三列的背景颜色；
通过margin值，同步列的位置；
特点：扩展性差，三列+的布局不适用
Day08
2.css技巧
1）css sprites——精灵技术，雪碧技术，通常也称为“css图像拼合”或"贴图定位"，将一堆小图整合到一张大图上，通过background-imgage、background-repaet属性显示图片，并且使用background-position属性实现图片的精确显示，减少服务器对图片的请求数量。
优点：
能够减少网页的htpp请求，提高页面的性能；
减少图片命名上的困扰；
更换风格方便；
缺点：
必须要限定容器的大小，背景图片位置需要计算；
维护的时候比较麻烦
css sprites的使用步骤
制作具有多个状态的拼合图片；
给要显示背景的盒子一个固定的尺寸，以背景的方式，让其局部显示；
通过background-position背景图定位属性控制不同的显示状态
2)css小箭头
使用css绘制两个三角形，使用绝对定位让两个三角形不完全重叠，处于上层的三角形比处于下层的三角形的偏移属性多1px
两个i宽度高度为0；
设置border
在IE6中添加font-size:0；line-height：0；目的——为了让i标签的height:0;生效。
3)css滑动门技术
目的：为了使各种特殊形状的背景能够自适应元素中文本内容的多少
核心：利用css sprites、背景图位置以及盒子的padding属性撑开盒子的宽度，适应不同字数的导航栏

3、BFC——block formatting context
1)什么是BFC?
块级格式化上下文，web页面可视化css视觉渲染的一个部分，是页面中一个独立的渲染区域。用于决定块盒子的布局和浮动相互影响范围的区域，可以改变父元素的渲染规则。
2)怎么样生成BFC：
根元素
float:left|right；
position：absolute|fixed;
overflow:hidden|scroll|auto;
display：inline-block;
3)BFC特性：
内部的元素会在垂直方向上一个接一个放置；
垂直方向上的距离由margin值决定，属于同一个BFC的两个相邻元素的margin值会重叠；
每个元素的左外间距与包含块的左边界相接触，浮动也是如此；
BFC区域不会与浮动元素区域重叠；
计算BFC高度时，浮动子元素也会参与计算；
BFC是页面上的一个隔离的独立的容器，容器中子元素不会影响到外面元素，反之亦然。
4）BFC解决的问题：
（1）外间距折叠问题——避免margin值叠加问题
（2）自适应两栏或三栏布局
自适应两栏布局——左侧固定宽度，右侧不设宽度（或者宽度100%），则右侧宽度为自适应，随浏览器窗口宽度的变化而发生相应的变化
自适应三栏布局——左右宽度固定，中间不设宽，中间宽度自适应，随着浏览器窗口的变化而发生相应的变化
（3）防止字体环绕
（4）清浮动
Day10
2.盒子和文字的阴影
1）盒子阴影box-shadow属性:
box-shadow:x轴偏移量 y轴偏移量阴影的羽化值阴影的大小阴影的颜色内阴影|外阴影（默认外阴影）；
x轴偏移量：水平方向的偏移，正值向右偏，负值向左偏
y轴偏移量：垂直方向的偏移，正值向下偏，负值向上偏
阴影的羽化值：模糊值
注意：可以向一个元素添加多个阴影，多组阴影之间用逗号隔开
2）文字阴影text-shadow属性
text-shadow:x轴偏移量 y轴偏移量阴影的羽化值阴影的颜色；
x轴偏移量：水平方向的偏移，正值向右偏，负值向左偏
y轴偏移量：垂直方向的偏移，正值向下偏，负值向上偏
阴影的羽化值：模糊值
3）文本溢出处理
单行文本溢出：
text-overflow：clip；文字溢出后直接修剪
text-overflow：ellipsis;文字溢出部分用省略号代替
text-overflow:string;文字溢出后，用给定的字符串表示被修剪的文本，只在火狐浏览器中生效；text-overflow:“abc”
强制不换行 white-space:nowrap;overflow:hidden;
注意：
要实现文本溢出处理，需要与 white-space:nowrap;overflow:hidden;属性配合使用
英文在没有标点和空格情况下，要换行：
word-wrap:normal;只允许在断字点换行；
word-wrap:break-word;在长单词或url地址内部进行换行；
多行文本溢出显示省略号：
使用webkit的css扩展属性：
overflow:hidden;
text-overflow:ellipsis;

        display：-webkit-box;将标签设置为弹性伸缩盒子-webkit-line-clamp:2;行数-webkit-box-orient:vertical;伸缩盒子元素的排列方式使用伪元素模拟溢出显示省略号的效果.box2{height:60px;line-height:30px;overflow:hidden;position:relative;}.box2::after{content:"...";position:absolute;right:0;bottom:0;background:#fff;padding:10px;}

4.ps基本操作

5、图片格式
1）psd：是ps的源文件格式，分层文件
2）在页面中常用地的图片格式
jpg格式——jpeg:不支持透明，色彩丰富；适合复杂颜色及形状，网页中的高清大图
文件相对较小；有所压缩，反复保存，图片质量会下降。
gif格式：支持透明和不透明的效果，色彩丰富，支持动画；适用于色彩单一的图标、动画图片
文件小，没有兼容性问题；只支持256种颜色
png格式：支持透明、不透明、半透明效果；适用于网页中的小图，存在半透明效果的图片
png8:支持半透明，功能和gif相似
png24：色彩丰富，对半透明效果的细节显示较好，IE6中不支持
无损压缩；不支持动画，色彩丰富，图片尺寸较大
webp格式：文件较小，支持有损压缩和无损压缩，支持动画、透明；浏览器的兼容性不好；主要适用于支持webp格式的app和webview。
6、拆分页面的原则
精确到一个像素，
先上下，后左右，从外向里，
先整体后局部，再到细节
7、智德和善
Day12
1.字体图标iconfont——https://www.iconfont.cn/
1)通过检索界面选择需要的图标，添加到购物车
2）打开购物车，选择下载代码
3)将下载好的文件解压，并将文件中的字体（.eot|.svg|.ttf|.woff|.woff2）放入fonts文件，并将对应iconsfont.css文件拷贝到css文件夹中，链接到HTML文档中
4）在html文件中添加制定类名和图片的名称
2.边框圆角border-radius
border-radius:xpx 四周xpx
border-radius:xpx ypx 左上角和右下角xpx 右上角和左下角ypx
border-radius:xpx ypx npx 左上角xpx 右上角和左下角ypx 右下角npx
border-radius:xpx ypx npx mpx 从左上角顺时针，依次
border-top-left-radius

html+css3基础知识部分详记相关推荐

自学计算机键盘基础知识,刘坚强办公学《新手学五笔打字》1-2 功能键区，电脑键盘功能基础知识按键详解...
原标题:刘坚强办公学<新手学五笔打字>1-2 功能键区,电脑键盘功能基础知识按键详解下面我们来详细认识电脑键盘的各个按键,先从最上面的功能键区开始,一共有16个键(如图1-2-1所示). ...
CSS3基础知识及详情
CSS3基础知识及详情什么是CSS3 CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能.目前主流浏览器chrome.safari.firefox.opera ...
mysql+连接每一行数据_MySQL_深入mysql基础知识的详解，1.每个客户端连接都会从服务 - phpStudy...
深入mysql基础知识的详解 1.每个客户端连接都会从服务器进程中分到一个属于它的线程.而该连接的相应查询都都会通过该线程处理. 2.服务器会缓存线程.因此并不会为每个新连接创建或者销毁线程. 3.当 ...
html5 css3基础知识详解
如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web开发变得更为高效和便捷. Html4 ...
CSS学习笔记 01、CSS3基础知识学习
文章目录前言 CSS3基本了解如何学习? 一.什么是CSS 1.1.发展史 1.2.快速入门(三种引用方式) 扩展:外部样式两种写法二.选择器 2.1.基本选择器(标签.类.id) 2.2.元素 ...
计算机基础知识及其详解,计算机基础知识详解:计算机入门基础知识
能力训练网权威发布计算机基础知识详解,更多计算机基础知识详解相关信息请访问少儿综合素质训练网. [导语]以下是大范文网整理的计算机基础知识详解,欢迎阅读! 1.第一台计算机-ENIAC 大家只要知道第 ...
最全音视频基础知识学习详解(含多个干货链接)
这里将了解到的和一些博客网站讲到的音视频基础相关的内容总结整理到了一起,方便系统的学习和回顾记录. 首先一个最简易的音视频图解,包括一下几个部分: 对于一个实时音视频应用共包括几个环节:采集.编码.前 ...
Fragment的基础知识介绍详解必看
一.Fragment的基础知识介绍 1.1概述 1.1.1 特性 Fragment是activity的界面中的一部分或一种行为.可以把多个Fragment组合到一个activity中来创建一个多界面 ...
JSP基础知识学习详解！
JSP基础知识学习一.JSP是什么 JSP(全称JavaServer Pages)是由[Sun](https://baike.baidu.com/item/Sun Microsystems)公司主导 ...

html+css3基础知识部分详记

html+css3基础知识部分详记相关推荐

最新文章

热门文章