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+/
7.HTML文档的基本结构
:帮助浏览器正确的显示我们的网页
网页标题
网页基本结构
8、常用标签:
块级标记:
1)标题标签:h系列
h1~h6大小依次减小,重要程度依次减弱
h1在同一个网页中只能使用一次;其他标签可以重复使用
特点:默认情况下宽度100%,默认情况下高度自适应,独立成行;自带间距,自带间距和加粗
2)段落标记:p标签
特点:默认情况下宽度100%,默认情况下高度自适应,独立成行;自带间距
3)div标签:
语法:
行块级标签:
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)行内样式——内联式
语法:
15、基础选择器:选择器——找对象
1)通配符选择器*:单独使用选择所有元素
2)元素选择器——标签选择器、类型选择器
结构中:<标签名>
样式中:标签名{css样式}
3)class选择器——类选择器
结构中:<标签名 class=“类名”>
样式中:.类名{css样式}
选择器的命名规范:
名称尽量有含义;
名称建议以英文开头,可以包含字母、数字、连字符(—_);
除了连字符之外特殊符号不能使用(包含空格);
不能使用中文汉字、不能使用纯数字,不能以数字开头;
类名会区分大小写
4)id选择器——唯一
结构中:<标签名 id=“id名”>
样式中:#id名{css样式}
注意:id名称在本页面中只能出现一次
5)选择器的优先级:一般来说,选择器的权值越大,优先级越高
基本选择器的权值有小到大:通配符选择器(0)<标签选择器(1)
行间样式拥有最高优先级但是高不过!important: background-color: lightcoral !important;
16、文本文字属性
ps中的编辑-首选项-单位与标尺,将文字和标尺的单位改成像素
文字属性:
1)font-size属性:字号,单位像素
浏览器默认字号为16像素
2)font-family属性:字体、字族
如果字体名称包含空格,字体名称上加引号;
多个字体名称可以作为一个回退系统来保存,如果第一个字体不被浏览器支持,则尝试下一个,多个字体之间用逗号隔开
中英文混排:英文字体排在中文字体前面
Arial,“Time New Roman”,“微软雅黑”,“宋体”
3)font-weight属性:文字加粗,范围100900,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
十六进制色值:由09,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里可以放任何)
语法:
8、表格:可以将数据有效的组织在一起,并以网格的形式显示。
特性:有内容的、没有固定宽度的单元格,由内容撑开
没有固定宽度的空单元格,默认情况下平分表格的宽度
语法:
普通表格:
表头单元格,默认文字加粗,并且水平垂直居中 | 表头 |
---|
表格单元格,默认情况下,水平居左,垂直居中
普通单元格
表头单元格
普通单元格
复杂表格:
表头
表头
表格单元格
表格单元格
单元格
单元格
表格属性:
border属性:表格边框
border="1|0",border="0"表格没有边框
cellpadding属性:单元格内容和单元格边框之间的距离,单位像素
cellspacing属性:单元格之间的间距,单位像素,默认大小为2像素
合并单元格:
跨行合并单元格: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表单域
单行文本输入框
密码框
单选按钮
复选框
checked属性:主要用于单选按钮和复选框默认选中,可以直接在input元素中写checked或者checked="checked"
提交按钮
重置按钮
普通按钮
默认类型为submit
上传文件
注意:实现后台上传文件,必须在form表单中添加enctype属性
DAY04
5)label标签:标注标注——扩大点击范围,一般与单选按钮、复选框组合使用。
关联方式:
显示方式:
吃饭
隐式方式:吃饭
6)表单相关属性:
readonly属性:只读属性,不能修改,可以被提交
disabled属性:禁用表单元素,被禁用的元素,不可点击,不会被提交
maxlength属性:允许输入的最多字符数
size属性:控制input的长度
value属性:初始值
placeholder属性:文本域的提示信息
checked属性:radio和checkbox
selected属性:下拉列表 select
2、css选择器——复合选择器
1)后代选择器——选择器之间用空格隔开
选择器1 选择器2{css样式}/在选择器1范围内的所有选择器2全部生效/
2)子代选择器——只能选择第一级子元素
父选择器 > 子选择器{css样式}
3)群组选择器——分组选择器,选择器之间用逗号隔开
选择器1,选择器2{css样式}/选择器1和选择器2都具有相同的属性/
4)交集选择器——两个以上的选择器组成
结构中:
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;上标
vertiacl-align: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及以上版本和标准浏览器下支持
取值范围:01,0表示完全透明,1表示完全不透明,01表示半透明效果
2)filter属性——IE专属:Alpha(opacity=x)
兼容性:仅支持IE6、7、8,在IE10及以上版本被废除
取值范围:0100,0表示完全透明,1表示完全不透明,0100表示半透明效果
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基本操作
4)常见工具
(1)
(2)
(3)套索工具
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
Day13兼容性问题
8图边、8背复,8及下透明,7子相父over失效、7及下块转行不一行、7及下li超2浮动li空间隙,6及下小高19px、浮动双边距,低指针
IE8兼容问题:
1)IE8下图片的边框问题:
img{
border:none
}
2)IE8中背景复合属性写法问题
background:url() no-repeat 0 0;
3)IE8低版本浏览器中图片透明度设置问题
filter:Alpha(opacity=50)
4)IE低版本浏览器中鼠标指针形状为手型,并兼容所有浏览器
cursor:pointer鼠标指针为手型
cursor:crosshair 鼠标指针形状为十字
cursor:text 鼠标指针形状为文本I形
cursor:wait 程序正忙
cursor:move 四个方向箭头,对象可移动
cursor:help 箭头+问号,可用的帮助信息
cursor:default 默认光标
cursor:auto 默认
5)在IE6及更早版本的浏览器中定义小高问题:
font-size:0
line-height:0
6)在IE6及更早版本的浏览器中浮动产生的双边距问题:
子盒display:inline;
7)IE7中子元素相对定位,父元素overflow:hidden|auto 失效问题:
父级盒:position:relative
8)在IE7及更早版本的浏览器中,块级元素转行块元素,不在一行显示的问题:
*display:inline-block;
*zoom:1;
9)在IE7及更早版本的浏览器中,在li中出现2个或两个以上的子元素有浮动,li之间会产生空白间隙问题:
vertical-align:top|middle|bottom
2.css Hack
1)条件级Hack
if条件:是否为IE、大于(gt)、大于等于(gte)、小于(lt)、小于等于(lte)、非指定版本(!)
2)属性级Hack
_:选择IE6及以下版本
*:IE6、IE7
\9:IE6+
\0:IE8+、Opera15及以下
_background_color:#f0f;
3)选择级Hack
*html IE6及更早版本浏览器中
*+html IE7
*html .box{
background:pink;
}
Hack有风险,使用需谨慎!
Day14
1、HTML5的新特性
1)在网页上绘制图形的canvas元素
2)多媒体相关video和audio元素
3)对本地离线存储的更好支持
本地存储:提供了两种在客户端存储数据的新方法
localStorage 没有时间限制的数据存储
sessionStorage 针对Session的数据存储
离线应用:用可以应用离线的时候查看网站信息
4)新增的语义化的标签和表单控件
2、HTML5中新增的语义化标签
新增的结构元素
1)header标签:网页的头部区域或文档中某个内容区位的头部,双标签,块级元素
一种具有引导和导航作用的结构元素,通常可以包含整个页面或一个内容区域的标题、搜索、相关logo图片
2)footer标签:网页的底部或文档中某个内容区块的底部,双标签,块级元素
通常可以包含:网页中的版权信息、相关阅读链接、文档的作者、使用条款等
3)nav标签:网页的导航区域,双标签
通常可以包含:网页中主要的导航链接组、传统的导航条、侧边栏导航、页内的导航
内容区域
4)article标签:网页中独立的完整的内容,可以包含header标签,可以独立被外部引用的内容,双标签
通常可以包含:一篇博文、论坛的帖子、报刊中的文章、一段用户评论或独立的插件
5)section标签:网页中内容的章节,双标签
通常可以包含:页面中内容的分区,文章中的章节
6)aside标签:侧边栏,表示当前网页或文章的附属信息,双标签
通常可以包含:与主要内容相关的引用、侧边栏、广告、连接组等
7)hgroup标签:标题组,双标签
通常包含多个标题
8)address标签:网页中联系信息,双标签,文字自带斜体效果
通常包含:文档的作者或文档的编辑者名称、电子邮箱、地址信息、电话号码
新增其他标签:
1)figure标签,双标签,自带间距
语法:
3、HTML5兼容
最新版的chrome、firefox、safari、Opera支持部分的HTML5特性。IE9支持部分HTML5特性,IE8不支持,IE低版本中有兼容性问题。
1)使用js新增元素的方式解决:
4、HTML已经被移出的标签
font、u、center、big、dir、basefont、frame、frameset、noframes xmp s strike applet acronym
5、新增多媒体标签
1)音频标签:IE8及更早版本的浏览器中不支持audio元素
audio标签:
您的浏览器不支持
html5支持的音频格式:
ogg 支持的浏览器chrome、Firefox、Opera10+
mp3 支持的浏览器chrome、Firefox、Opera10+、IE9+、Safari5+
wav 支持的浏览器chrome、Firefox、Opera10+、Safari
常用属性:
src属性:音频文件的URL地址
controls属性:显示音频播放控件
loop属性:重复播放
muted属性:静音
source标签:可以链接不同格式的音频文件,浏览器使用第一个可以识别的格式
您的浏览器不支持audio元素播放音频
2)视频标签:IE8及更早版本的浏览器中不支持video元素
video标签:
html5支持的音视频格式:
ogg 支持的浏览器chrome、Firefox、Opera
mepg4 支持的浏览器chrome、Firefox、Opera10、Safari、IE9+
WebM 支持的浏览器chrome、Firefox、Opera
常用属性:
src属性:音频文件的URL地址
controls属性:显示视频播放控件
loop属性:重复播放
muted属性:静音
width、height设视频播放器的宽度和高度,单位像素
poster属性:预览图片 poster="路径"
source标签:可以链接不同格式的视频文件,浏览器使用第一个可以识别的格式
6、新增的表单标签和属性
新增表单标签–input类型
input、button、select-option、textarea
1)url类型:设置包含访问协议的url地址的输入域,在提交表单时,自动验证URL域的内容
2)email类型:包含email地址的输入域,在提交表单时,会自动验证email地址
3)search类型:用于检索关键字的文本输入域,多用于手机客户端
4)tel类型:用于输入电话号码的输入域,为移动端网页开发服务的,在PC端网页中不生效,在移动端页面中点击tel类型输入域时,跳出虚拟电话键盘(0-9,*,#)
5)number类型:用于包含数值的输入域
max属性:最大值
min属性:最小值
value属性:初始值
step属性:步长,合法的数字间隔,默认值为1
注意:当用户输入非法的数值时,会弹出相应的提示信息,会阻止表单提交
6)range类型:生成一个数字滑动条,默认值50%,
max属性:最大值
min属性:最小值
value属性:初始值
step属性:步长,合法的数字间隔,默认值为1
注意:range类型和number类型功能基本一致,
区别:外观样式不一样,默认值不同。
range类型min默认值为0,max类型默认值为100
7)color类型:生成一个颜色选择器,值为16进制色值
注意:简写无效,必须为六位十六进制数
8)date类型:日期选择器,包含年、月、日
9)datetime类型:输入日期时间(UTC时间)——手动输入
UTC+8 东八区
UTC-10 西十区
10)datetime-local类型:日期时间选择器,包含年、月、日、时、分(无时区)
11)month类型:月选择器,包含年、月
12)time类型:时间选择器,包含时、分
13)week类型:周选择器,包含年、周(全年第几周)
14)datalist类型:选项列表,可选的下拉列表,与input元素配合使用
input元素的list属性和datalist的id属性关联
bj
cq
sz
sh
tj
7、表单属性:
1)min、max、step属性:
输入域中所允许的最小值、最大值、步长
用于包含数字的input类型的元素,如input的number、range类型
2)placeholder属性:
为输入域设置提示信息
3)list属性:
input和datalist实现可选下拉列表的属性
4)autocomplete属性:是否启用自动完成功能
autocomplete=“on"元素开启自动完成功能
autocomplete=“off"元素关闭自动完成功能
5)autofocus属性:自动获取焦点的功能
6)form属性:定义表单元素所选的表单区域
7)required属性:提交表单时,表单元素不能为空,如果设置value值,该属性失效
8)pattern属性:对用户输入内容做验证(通过正则表达式)
pattern=”[A-Za-z]{3}”
9)multiple属性:选择多个值
用于上传域和email类型的输入域
Day15
1.css3
选择器、框模型属性、背景和边框、文本效果模、2d/3d转换、动画、多列布局、用户界面
2.css2和css3区别:
css2:性能和访问相对较差;更偏向于表现,部分效果需要使用图片;无兼容问题
css3:性能和效果都能得到兼顾;能实现动画效果,在css2找那个需要使用图片实现的可以在css3中使用代码实现;部分属性需要兼容处理
3.渐进增强和优雅降级
渐进增强:针对低版本浏览器进行页面建构,保证最基本功能的实现,然后在针对高级浏览器进行效果设置,包括交互的实现,从而达到更好的用户体验
优雅降级:一开始构建完美的用户体验,然后再针对低版本的浏览器进行兼容
4.浏览器的私有前缀——兼容性前缀
浏览器 内核 css兼容性前缀
chrome|Safari webkit -webkit-
firefox gecko -moz-
Opera blink|presto -o-
IE trident -ms-
书写顺序:先写带有私有前缀的css3属性,再写标准的css3属性
Autoprefixer插件,为css3属性自动生成兼容性前缀:在css文件中,按F1,执行Auto run
5、选择器
1)属性选择器
css2中的属性选择器:权值10属性|类|伪类,伪元素选择器1
element[attr]{}指定了属性名,但是没有指定属性值的element元素
element[attr=value]既指定了属性名又指定了属性值,绝对等于
element[attr~=value]指定了属性名,并且属性值可以为词列表中的包含指定属性值的element元素
css3中新增的属性选择器:
element[attr^=value]指定了属性名称,并且以value值开头的element元素
element[attr$=value]指定了属性名称,并且以value值结尾的element元素
element[attr=*value]指定了属性名称,并且词列表中包含value值的element元素
2)结构性伪类选择器
:root{}匹配根元素
element:first-child{} 选择一组相同元素中的第一个元素
element:last-child{} 选择一组相同元素中的最后一个元素
element:nth-child(N){} 选择一组相同元素中的第N个元素,N可以是数值、关键词、表达式
element:nth-child(odd){} 奇数
element:nth-child(2n-1){} 奇数
element:nth-child(even){} 偶数
element:nth-child(2n){} 偶数
3n 3,6
element:nth-last-child(n){} 选择一组相同元素中的倒数第n个元素
element:nth-of-type(n){} 一组元素中选择特定类型的元素,n可以使数值、关键词、表达式
odd 2n-1 奇数
even 2n 偶数
element:nth-last-of-type(n){} 一组元素中选择特定类型的元素,但是从最后一个开始计算
3)状态伪类选择器
element:checked{}:选择页面中处于选中状态的element元素
element:disabled{}:选择页面中处于禁用状态的element元素
element:enabled{}:选择页面中处于可用状态的element元素
6、border-radio属性,圆角设置
border-top-left-radio:左上角圆角设置;
100px 50%:元素本身宽度50%,高度50%
7、css3背景属性
1)多背景设置
background-image:url(图片路径),url(图片路径);
多个背景图之间用逗号隔开。书写的背景越靠前,背景图显示的越靠上
一组和另外一组之间用逗号隔开
2)背景图尺寸设置:
background-size:数值;
npx 等比例缩放
npx mpx 根据尺寸缩放
background-size:百分比
100% 100% 以元素的百分比来设置背景图片的宽度和高度
background-size:关键词
cover:覆盖,图片会等比例缩放到铺满整个盒子,但是背景图可能无法完整显示在盒子中
contain:包含,等比例缩放到图片完整显示在盒子中,但是背景图可能无法铺满整个盒子
background: background-color background-repeat background-position/background-size
3)background-origin属性:背景图片的定位区域
background-origin:content-box;背景图片相对于内容区域做定位;
background-origin:padding-box;背景图片相对于内填充区域定位;
background-origin:border-box;背景图片相对于边框区域定位;
4)background-clip属性:背景颜色绘制区域
background-clip:content-box;背景被裁减到内容区域显示,仅在内容区显示。
background-clip:padding-box;背景被裁减到内填充区域显示,仅在内容区和内填充显示。
background-clip:border-box;背景被裁减到边框区域显示,仅在内容区、内填充和边框区域显示。
8、css3渐变属性
1)线性渐变 linear-gradient
background-image:linear-gradient(方向,颜色1 范围1,颜色2 范围2);
方向:ndeg(n为数值)
left|right|top|bottom
组合left top
to right = left
范围:background-image:linear-gradient(方向,颜色1 百分比1,颜色2 百分比2);
0-百分比1:颜色1 百分比1-百分比2:渐变 百分比2——100%:颜色2
重复线性渐变:
background-image:repeating-linear-gradient(方向,颜色1 范围1,颜色2 范围2,…);
2)径向渐变:radial-gradient
background-image:radial-gradient(中心点的位置,渐变的形状,颜色1 范围1,颜色2 范围2,…);
中心点的位置:
x y|
left|right|center bottom|top|center
组合
重复径向渐变:repeating-radial-gradient(中心点的位置,渐变的形状,颜色1 范围1,颜色2 范围2,…);
Day16
1.用户界面属性设置
1)resize属性:用户是否可用对元素进行调整
resize:none;不允许用户调整尺寸
resize:both;用户可以调整元素的宽度和高度;overflow:hidden|auto|scroll;相当于调整了行间样式
resize:horizontal;只允许用户调整元素的宽度;overflow:hidden|auto|scroll;
resize:vertiacl;只允许用户调整元素的高度;overflow:hidden|auto|scroll;
注意:如果要使resize属性生效,必须与overflow:hidden|auto|scroll;配合使用
2)box-sizing属性:允许以特定的方式匹配某个区域的特定元素
box-sizing:content-box;默认值,在width属性和height之外添加padding属性和border属性
box-sizing:border-box;内容的宽度和高度得到,通过width属性和height属性减去padding属性值,减去border属性值
2.多列布局——多栏布局
1)column-count属性:元素被分隔的列数
column-count:n;元素内容被分隔成n列,n为数值,无单位
column-count:auto;列数由其他属性觉得列数
2)column-width属性:列的宽度;
column-width:npx;每一列的宽度值大概在npx左右
column-width:auto:由其他属性觉得列宽
3)column-gap属性:列与列之间的间隔
column-gap:npx;两列之间的间隔为npx;
column-gap:normal;两列之间的间隔为常规间隔,W3C建议值为1em;
4)column-rule属性:列边框–列与列之间的分隔线
column-rule:column-rule-width column-rule-style column-rule-color;
column-rule-width属性:分割线宽度
column-rule-style属性:分隔线的线性(solid|double|dotted点状|dashed条状)
column-rule-color属性:分隔线的颜色(关键词,十六进制色值,rgb,rgba)
5)column-span属性:跨栏合并
column-span:all;横跨所以列合并,text-align:center;
3.transition属性:过渡属性
transition:transition-property transition-duration transition-timging-function transition-delay;
transition:css样式(属性名称) 动画的执行时间(单位s|ms) 速度类型 动画的延迟时间(单位s|ms);
transition-property:all;所有的属性都具有过渡属性;
transition-duration:默认0
transition-timging-function:
ease(默认值,平滑过渡)
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay:
注意:必须要设置transition-duration属性,动画的执行时间,否则动画的执行时间为0,不会产生过渡效果、
transition:width 2s,background 3s;
4.css变形——transform
1.2D变形:
1)平移:
transform:translate(x,y);元素从当前位置移动到给定的x轴和y轴位置
注意:水平向右值为正,垂直向下值为正,
当只有一个值的时候,沿x轴做移动
transform:translateX(npx);沿着x轴方向移动;
transform:translateY(npx);沿着y轴方向移动;
2)旋转:
transform:rotate(ndeg);
注意:角度为正值,元素沿着顺时针方向旋转n度,角度为负值,沿着逆时针方向旋转。
3)缩放
transform:scale(x,y);元素沿x轴和y轴做缩放
x和y的取值:0-1缩小,1表示正常大小,1以上表示放大;负值时,先翻转后缩放
transform:scale(0.5),x轴和y轴等比例缩放0.5
transform:scaleX(npx);沿着x轴方向缩放;
transform:scaleY(npx);沿着y轴方向缩放;
4)倾斜
transform:skew(x,y);元素沿着水平方向和垂直方向倾斜,单位deg
正值,拽着左上角和右下角拖拽
负值,拽着右上角和左下角拖拽
transform:skew(ndeg);沿着x轴方向倾斜
transform:skewX(ndeg);沿着x轴方向倾斜
transform:skewY(ndeg);沿着y轴方向倾斜
注意:元素既要旋转又要缩放,复合写法:transform:scale() rotate();
5)transform-origin属性:元素基点位置的调整,必须与transform配合使用
transform-origin:right|left|center top|center|bottom;
3.3D变形:
1)transform-style属性:
transform-style:preserve-3d;创建3D空间
2)perspective属性:透视属性 近大远小,单位像素
注意:以上两个属性均需要写在父元素中
3D空间轴线:x轴(右为正)、y轴(下为正)、z轴(向外为正)
4.3D变形效果:
1)平移:
transform:translateZ(z);沿着Z轴平移;
transform:translate3d(x,y,z);
2)旋转:
transform:rotateX(xdeg);沿x轴方向旋转;左手法则,大拇指x轴正方向,剩余手指弯曲为正方向
transform:rotateY(ydeg);沿y轴方向旋转;左手法则,大拇指y轴正方向,剩余手指弯曲为正方向
transform:rotateZ(zdeg);沿z轴方向旋转;正值顺时针方向,负值逆时针
transform:rotate3d(x,y,z,angle);沿着x轴、y轴、z轴旋转
3)缩放
transform:scaleZ(z);沿着z轴缩放,0-1缩小,1表示正常大小,1以上表示放大;负值时,先翻转后缩放
transform:scale3d(x,y,z);沿着x,y,z轴缩放
5、盒子的绝对居中——水平、垂直居中
1)margin负间距实现带有width属性和height属性的绝对定位元素的居中
2)margin:auto;实现带有width属性和height属性的绝对定位元素的居中
3)transform:translate();实现绝对定位元素的居中
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: yellow;
}
6、帧动画
1)定义关键帧
@keyframes 动画名称(英文){
0%{} 动画的开始
50%{}
100%{} 动画的结束
}
@keyframes 动画名称(英文){
from {} 动画的开始
to{} 动画的结束
}
2)引用关键帧
animation:animation-name animation-duration [animation-timing-function][animation-delay] [animation-iteration-count] [animation-decoration] [animation-fill-mode];
animation:动画名称(必须) 动画的执行时间(单位s|ms) 动画的执行速度linear|ease|ease-in|ease-out|ease-in-out(动画的类型) 动画的延迟时间(单位s|ms)动画的执行次数(默认1次|infinite无线循环播放) 动画的运动方向(alternate正向反向轮流播放|reverse反向播放|normal正向播放|alternate-reverse反向正向轮流播放) 动画结束后显示的状态(forwards动画结束时的状态|both动画结束或开始的状态|backwards动画开始时的状态)
3)animate.css动画库
在动画库中预设了抖动shake、闪烁flash、弹跳bounce、翻转flip、旋转rotateIn|rotateOut、淡入淡出fadeIn|fadeOut
使用步骤:
1)引入css文件:
2)使用:
7、弹性盒子–flexBox
1)弹性盒子——css3中新增的布局方式,是一种当屏幕大小、设备类型不同的时候,都能确保元素拥有恰当的布局方式
弹性盒模型的内容包括:弹性容器,弹性子元素(项目)
引入弹性盒布局的目的:用一种较为有效的方式对容器中的子元素进行排列、对齐、分配空白空间,即使弹性子元素尺寸发生动态变化,弹性盒布局也能够正常的工作。
2)设置弹性盒子:
display:flex;将元素设置为弹性盒容器(加给父元素)
display:inline-flex;将元素设置为弹性盒容器,
注意:设置为flex布局之后,子元素float、clear、vertical-align属性都会失效
3)基本概念:
容器:
项目:
主轴:默认水平方向,向右
主轴的起点
主轴的终点
交叉轴:默认垂直方向,向下
交叉轴的起点
交叉轴的终点
4)容器的属性——添加在弹性容器上
flex-direcation属性:设置主轴的方向(弹性子元素的排列次序)
flex-direction: row;/默认值,设置主轴方向为水平方向,起点在左侧/
flex-direction: row-reverse;/设置主轴方向为水平方向,起点在右侧/
flex-direction: column;/设置主轴方向为垂直方向,交叉轴为水平方向,起点在上方,依次排列/
flex-direction: column-reverse;/设置主轴方向为垂直方向,交叉轴为水平方向,起点在下方,依次排列/
justify-content属性:弹性子元素在主轴上的对齐方式
justify-content: flex-start;/默认值,子元素位于弹性盒的开头/
justify-content: flex-end;/子元素位于弹性盒的结尾/
justify-content: center;/子元素位于弹性盒的中间/
justify-content: space-around;/子元素之前、之后、之间都有空白空间/
justify-content: space-between;/子元素和子元素之间有空白空间/
align-item属性:弹性子元素在交叉轴上的对齐方式
align-items: stretch;/默认值,如果子元素没有高度或高度为auto时,将占满整个容器的高/
align-items: flex-start;/子元素在交叉轴的起点对齐/
align-items: flex-end;/子元素在交叉轴的终点对齐/
align-items: center;/子元素在交叉轴的中点对齐/
align-items: baseline;/子元素在交叉轴的第一行文字的基线对齐/
wrap属性:设置弹性子元素在一根轴线上排不下的换行方式
flex-wrap: nowrap;/默认值,不换行/
flex-wrap: wrap;/换行,第一行显示在上方/
flex-wrap: wrap-reverse;/换行,第一行显示在下方/
align-content属性:设置多根轴线的对齐方式,如果只有一根轴线,属性失效
align-content: stretch;/默认值,轴线占满整个交叉轴/
align-content: flex-start;/与交叉轴的起点对齐/
align-content: flex-end;/与交叉轴的终点对齐/
align-content: center;/与交叉轴的中点对齐/
align-content: space-around;/每根轴线之上、之下、之间都有空白空间/
align-content: space-between;/每根轴线之间有空白空间/
步骤:1.创建弹性容器;2.调整主轴方向4;3.设置子元素在主轴对齐方式5;4.设置子元素在交叉轴对齐方式5;5.设置弹性子元素在一根轴线上排不下的换行方式3;6.设置多根轴线的对齐方式6;
5)项目属性——添加在子元素上
order属性:调整子元素的排列次序
order:数值;数值不加单位,默认值为0,数值越大,排序越靠后,数值相同,执行顺序。
flex-grow属性:调整资源的放大比例
flex-grow属性:数值不加单位,默认值为0,表示不放大,
flex-shrink属性:调整子元素的缩小比例
flex-shrink属性:数值不加单位,默认值为1,表示当空间不足时,等比例缩小;值为0,表示当空间不足的时候,不缩小
align-self属性:调整弹性容器中,被选中的子元素的对齐方式
align-self: auto;/默认值,继承了父元素的aligin-items属性,如果没有父元素值为stretch/
align-self: stretch;/占满整个容器的高度/
align-self: flex-start;/交叉轴的起点对齐/
align-self: flex-end;/交叉轴的终点对齐/
align-self: center;/交叉轴的中点对齐/
align-self: baseline;/子元素的第一行文字的基线对齐/
8.calc()函数:动态计算长度值的函数,css3新增的函数
语法:calc(数学表达式)
支持+、-、*、/运算,先算括号里面的
注意:运算符前后添加空格
兼容性IE9+
Day18
1.calc函数
2.css预处理–less
1)什么是预处理?
定义了一种新的语言
基本思想:用一门专门的编程语言,为css增加一些编程的特性,将css作为目标生成文件,然后开发者只需要使用这种语言进行编码工作即可。
2)less:拥有一套自定义的语法和解析器,将程序员编写的样式规则,通过解析器编译成对应的css文件,才能被浏览器所识别。
编译的方法:命令行编译、编译器编译、在线编译、第三方编译工具
好处:结构清晰,便于扩展,可以屏蔽浏览器中私有语法的差异,可以实现多重继承,完全兼容css代码
3)编写less文件
新建less文件:.less文件 @charset “utf-8”;
4)less的基本语法(注 导 变 混 嵌 继 运)
注释:
标注css注释:/ 注释风格 / 会保留到编译后的文件中
单行注释://注释内容 只保留到less原文件中,编译后的文件中会被省略
导入样式:@import 可以导入css文件,导入less文件
@import ".css";
@import url(.css);
@import url(".css");
注意:分号是必不可少的,文件的后缀名也是必不可少的
@import和link的区别:
@import是样式中定义;link是标签,link可以引入别的;
载入顺序问题:
兼容问题:
变量:
定义变量:@变量名:值;
使用:
作为属性值使用——.box{background:@变量名;}
作为属性名称使用——
3.移动端的浏览器
UC浏览器、QQ浏览器、百度手机浏览器、360浏览器、Chrome浏览器、搜狗手机浏览器、猎豹浏览器
内核为webkit
4.viewport设置–虚拟窗口
Apple为了解决移动端屏幕分辨率大小问题提出
移动端视口:布局视口、视觉视口、理想视口
布局视口:宽度768-1024,页面内容展示区域
视觉视口:屏幕大小,用户能看到的区域
理想视口:viewport
自定义虚拟窗口:指定虚拟窗口的宽度为设备宽,初始缩放比为1倍,同时不允许用户手动缩放。
content:
width–虚拟窗口的宽度,device-width设备宽度,
initial-scale–初始缩放比例
maximum-scale–最大缩放比
minimum-scale–最小缩放比
user-scalable=yes|no–是否允许用户手动缩放
user-scalable=no–不允许用户手动缩放
user-scalable=yes–允许用户手动缩放,默认值
5.常见移动端布局方案
1)流式布局——宽度自适应适配方式
垂直方向高度固定,水平方向使用百分比实现,并且使用弹性布局、浮动技术、定位等技术综合使用,创建可扩展的流式布局方案。
优点:可以很好的解决自适应需求
缺点:实际效果可能会不协调,设计存在局限性
2)rem布局
rem——相对于根元素的字号大小属性值的单位,css3新增单位
未经调整的浏览器默认字号为16px,1rem = 16px
rem布局的实习:
设置压面的viewport;
动态计算并设置html的font-size;
按照PC端布局方式正常布局,将px换算成rem单位
3)vw适配:
vw——viewport’s width css3规范中视口单位
vh——viewport’s height css规范中虚拟窗口的高度
vw和vh都是将屏幕分成100份,1vw=屏幕宽度的百分之一
iPhone5 320 1vw=3.2px 多少个vw是100像素 100 * 1vw/3.2 = 31.25
iPhone6 375 1vw=3.75px 多少个vw是100像素 100 * 1vw/3.75 = 26.66
vw布局方式:750px宽度 100vw=750px 1vw=7.5px 1px=0.13vw
兼容:IE9+ IOS6.1+ Android4.4+
在PC端使用时注意滚动条,移动端滚动条不占位
vw+rem——750px
1vw=7.5px 1px=0.13vw
假设1rem = 100px,100px = 13.33vw,
html{
font-size:13.33vw;
}
6.媒体查询
1)什么是媒体查询
根据设备显示器的特性为它设置css样式,css2针对不同媒体类型,c3针对不同设备
媒体查询可以检测的内容:viewport的宽度和高度、设备的宽度和高度、设备的方向、分辨率
2)引入方式:
在样式表中引入——在style标签对中引入,在外部样式表中引入,在正常文件之后
@media mediaType and (madia feature){
选择器{属性:属性值;}
}
mediaType设备类型:
all 适用于所有的多媒体设备;
print 适用于打印机或打印预览;
screen 电脑屏幕、平板电脑、智能手机等;
speech 屏幕阅读器等
madia feature媒体特性表达式:
width:浏览器的宽度;height:浏览器的高度;
max-width:最大宽度;min-width:最小宽度
max-height:最大高度;min-height:最小高度
device-width:设备宽度;device-height:设备高度; max-device-width:最大设备宽
orientation 设备方向
aspect-ratio:1/2可视区宽度和高度的比率
device-ratio:1/1输出设备的屏幕可见区宽度和高度的比率
使用link标签引入:
7.项目
1. 专门针对IE8新增加的特殊的文件头的标记,用来为IE8指定不同的页面渲染模式,在IE8之外的浏览器不识别
2.底部
1) position: fixed;
left: 0;
bottom: 0;
box-sizing: border-box;
width: 100%;
2) position: fixed;
left: 0;
bottom: 0;
box-sizing: border-box;
width: calc(100% - 0.49rem - 0.67rem);
Day20
2.移动端特殊处理
1)超小字体处理——transform:scale();
2)动画定义3D启用硬件加速——开启GPU硬件加速模式
从CPU-GPU
-webkit-transform:translate3d(0,0,0)
transform:translate(0,0,0);
3)圆角bug:部分Android手机圆角失效
background-clip:padding-box;
4)Input的placeholder会出现文本位置偏上的情况:
在input输入文本垂直居中的情况下,给placeholder设置padding-top,不设置行高
3.设备像素、独立像素和css像素
1)设备像素——物理像素(屏幕的最小颗粒)
设备固有属性,是真实存在的,不会改变
早期只有物理像素,在不缩放的情况下,1px=1物理像素
iPhone6/7/8的物理像素7501334,
设备分辨率:显示器的宽度和高度分别是多少个物理像素
2)设备独立像素——独立像素,逻辑像素
操作系统定义的像素单位
iPhone6/7/8的独立像素为375667,正好是物理像素的一半
逻辑分辨率:使用屏幕的宽度*高度来表示
设备像素比DPR——不同型号手机物理像素和独立像素的关系;
设备像素比 = 物理像素/独立像素
3)css像素:
width:100px; 在放大200%后,宽度依然是100px,一个px表示的大小会变成原来的2倍
原本的元素宽度为100个独立像素,缩放200%后,元素的宽度会变为200个独立像素
css像素和独立像素的关系:
缩放比例=css像素的边长/独立像素的边长
在缩放比例为100的情况下,一个css像素为一个独立像素
设备像素比:css像素和物理像素的关系
4.视网膜屏——Retina显示屏:一个逻辑像素中有多个物理像素
1像素边框问题:
border-width:thin;//thin细边框、medium中等、thick粗
5.轮廓outline:不占位
outline:none;去掉输入框轮廓线
outline:轮廓宽度 轮廓线性 轮廓颜色;
outline-offset属性:对轮廓进行偏移
6.letter-spacing属性:字间距
7.word-spacing属性:词间距
Day21
1.移动端布局方案——flexible.js+rem
一般使用这个布局 就是字体不变 宽高一直变得情况下才使用
解决的html5页面终端适配
设备划分成10份,确定好html标签的font-size属性值
750px,html{font-size:75px;},页面中元素的rem值 = 元素的px值/75
使用方法:
1)在head标签中添加插件
方法一:直接将插件下载到本地,通过script标签对链接;
方法二:通过script标签对,加载阿里CDN文件:
2)将视觉稿中的px转换成rem
dpr设备像素比:一个物理像素里有多少个css像素
Day22
响应式布局方案:
1.什么是响应式布局:
一个网站能够适配多个终端,能够实现不同屏幕分辨率的终端上都能够实现较好的显示效果,而且不需要为每个终端定制一个特定的版本。
响应式布局的组成:弹性盒布局、图片、css media query的使用等等
响应式布局的原理,通过媒体查询检测不同的设备屏幕尺寸。适当调整标签显示布局,在每种设备屏幕宽度下呈现出不同的页面效果
2.技术要点
1)meta标签的设置
IE8及更早版本的浏览器中不支持媒体查询,需要使用media-queries.js或respond.js增加IE对媒体查询的支持
调用chrome浏览器或IE高版本浏览器
兼容不支持viewport的设备
2)使用媒体查询适配对应样式
常用的屏幕尺寸查询:
超小屏幕下: 手机 < 768px
小屏幕下: 平板 >=768px
中等屏幕: 桌面 >=992px
大屏幕: 桌面 >=1200px
移动端优先:超小型设备 手机 768px
@media screen and (min-width:768px){ 平板电脑 }
@media screen and (min-width:992px){ 台式电脑 }
@media screen and (min-width:1200px){ 大台式电脑 }
大屏幕优先:大台式电脑 1200px
@media screen and (max-width:1200px){ 台式电脑 }
@media screen and (max-width:992px){ 平板电脑 }
@media screen and (max-width:768px){ 手机 }
3)响应式字体设置:
rem单位相对于html元素{font-size}值做相应的调整
em单位相对于父元素的font-size值做调整
4)百分比布局:
宽度不固定,可以使用百分比;内外间距(左右方向)也可以使用百分比
在实现的过程中需要布局容器
手机 < 768px 布局容器的宽度100%
平板 >=768px 设置宽度750px
中等 >=992px 设置宽度970px
大屏 >=1200px 设置宽度1170px
浮动、定位、弹性盒子
响应式内容:
img标签:前景图,可以通过max-width属性控制图片的大小,height:auto;可以转块,调整间隙
响应式背景图片:background-size属性调整背景图的尺寸
3.响应式优缺点:
优点:一站适配所有终端;减少了工作量;节省时间;每个设备都能得到较好的设计
缺点:会加载更多的样式和脚本资源,设计难于精确控制;老版本的浏览器中兼容性不好
Day23
移动端布局方案:
1.流式布局:宽度使用百分比代替px,高度使用px固定,
优点:可以很好的解决自适应需求
缺点:实际效果可能会不协调,设计存在局限性
2.rem布局:添加viewport,动态修改html的font-size属性 页面中元素尺寸单位使用rem
3.vw布局:vw和vh视口宽和高,将屏幕平均分成100份,1vw=屏幕宽度的百分之一,不需要js
4.flexible.js + rem :将屏幕分成10份,只需要确定好当前设备的html标签的font-size属性值即可
5.响应式布局:一个网站能够适配多个终端
Grid网格布局
flex布局——轴线,可以看成一维布局
1.基本介绍
Grid网格布局——二维布局
可以将容器分成“行”、“列”,产生单元格
2.基本概念
容器container——使用网格布局的区域
项目items——容器内使用网格定位的子元素
行row——容器中的水平区域
列column——容器中的垂直区域
单元格cell——行和列交叉的区域
m行n列产生的单元格数为m*n
网格线 grid line——划分网格的线,m行有m+1根水平网格线,n列有n+1根垂直网格线
3.相关属性:
步骤:1.父元素网格布局;2.网格的行数和列数;3.网格的间隙;4.网格排列的顺序;5.容器中内容的分布属性6.容器中对齐7.定义网格区域
容器属性——写在父元素上
1)display属性:
display:grid;容器采用网格布局
2)grid-template-rows属性:grid-template-columns属性——对容器的水平方向和垂直方向划分
属性值:像素值|百分比(父元素)|auto(自适应)|repeat()|fr|minmax()|网格线的名称
repeat(),有两个参数,第一个参数表示重复的次数,第二个参数表示重复的值
fr(比例关系,值大于等于1,小于1有空白)
minmax(),表达最大值和最小值
网格线名称
grid-template-rows:[r1] 100px [r2] auto [r3] 100px;
grid-template-column:[c1] 100px [c2] auto [c3] 100px;
3)grid-row-gap属性、grid-column-gap属性、grid-gap属性:
定义网格中的网格间隙
grid-gap:grid-row-gap grid-column-gap;
4)grid-auto-flow属性——子项排列的顺序
属性值:row(默认值,先行后列)|column(先列后行)
5)justify-items属性、align-items属性、place-items属性:网格中的内容的分布属性
justify-items属性:水平呈现方式
属性值:start(内容靠左)|end(内容靠右)|center(内容居中)|stretch(默认值,占满整个网格)
align-items属性:垂直呈现方式
属性值:start(内容上)|end(内容靠下)|center(内容居中)|stretch(默认值,占满整个网格)
place-items:align-item justify-items( 垂直方向 水平方向)
6)justify-content属性、align-content属性、place-content属性:网格元素分布情况
justify-content属性:水平分布方式
属性值:
start(内容靠左)|
end(内容靠右)|
center(内容居中)|
space-between(项目和容器之间没间隔,网格之间有间隔)|
space-around(项目和容器之间有间隔,网格之间有间隔,两个间隔大小不一样)|
space-evenly(项目和项目之间,项目和容器之间距离相等)
align-content属性、:垂直分布方式
属性值:start(内容靠左)|end(内容靠右)|center(内容居中)|space-between|space-around|space-evenly
place-content属性:justify-content align-content
7)grid-template-areas属性:定义网格区域
grid-template-areas:“box1 box1 box1”
“box2 box2 box3”
“box2 box2 box3”;
应用在子项目的属性:grid-area属性,规定项目所在的区域
.wrap div.:nth-child(1){grid-aera:box1}
.wrap div.:nth-child(2){grid-aera:box2}
.wrap div.:nth-child(3){grid-aera:box3}
项目属性:
1)项目的位置:起始和结束可以决定项目所占区域的大小
grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性
grid-column-start属性:水平填充,左边框所在的垂直网格线
grid-row-start属性:垂直填充,上边框所在的水平网格线
grid-column-end属性:水平填充,右边框所在的垂直网格线
grid-row-end属性:垂直填充,下边框所在的水平网格线
grid-row-end:span 2;所在网格的数量,只有在end只有span关键字
简写;
grid-colume:grid-column-start / grid-column-end;
grid-row:grid-row-start / grid-row-end;
grid-row:2/span 2;
2)justify-self属性、align-self属性、place-self属性
justify-self属性:水平方向对齐方式(单元格的内容)
属性值:start|end|center|stretch
align-self属性:垂直方向对齐方式(单元格的内容)
属性值:start|end|center|stretch
place-self属性:垂直方向 水平方向
常用有效内容宽:
1200px
1100px 1000px 1024px
992px 980px
768px 720px
640px
480px
320px