码迷,mamicode.com
首页 > 其他好文 > 详细

初级前端要掌握哪些知识点才能找到一个20k的工作?(一)

时间:2021-03-06 14:41:45      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:弹性盒   ips   http   单选   大小   range   upload   board   选择   

技术图片

不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。

前言

如果这篇文章有帮助到你,给个关注,点赞,鼓励一下作者,接收好挑战了吗?

Web模块

html基本结构

  1. html标签是由<>包围的关键词。
  2. html标签通常成对出现,分为标签开头和标签结尾。
  3. 有部分标签是没有结束标签的,为单标签,单标签必须使用/结尾。
  4. 页面所有的内容,都在html标签中。
  5. html标签分为三部分:标签名称,标签内容,标签属性。
  6. html标签具有语义化,可通过标签名能够判断出该标签的内容,语义化的作用是网页结构层次更清晰,更容易被搜索引擎收录,更容易让屏幕阅读器读出网页内容。
  7. 标签的内容是在一对标签内部的内容。
  8. 标签的内容可以是其他标签。

标签属性

  1. class属性:用于定义元素的类名
  2. id属性:用于指定元素的唯一id,该属性的值在整个html文档中具有唯一性
  3. style属性:用于指定元素的行内样式,使用该属性后将会覆盖任何全局的样式设定
  4. title属性:用于指定元素的额外信息
  5. accesskey属性:用于指定激活元素的快捷键
  6. tabindex属性:用于指定元素在tab键下的次序
  7. dir属性:用于指定元素中内容的文本方向,属性只有ltrrtl两种
  8. lang属性:用于指定元素内容的语言

事件属性

  1. window窗口事件,onload,在网页加载结束之后触发,onunload,在用户从网页离开时发生(点击跳转,页面重载,关闭浏览器窗口等)
  2. form表单事件,onblur,当元素失去焦点时触发,onchange,在元素的值被改变时触发,onfocus,当元素获得焦点时触发,onreset,当表单中的重置按钮被点击时触发,onselect,在元素中文本被选中后触发,onsubmit,在提交表单时触发
  3. keyboard键盘事件,onkeydown,在用户按下按键时触发,onkeypress,在用户按下按键后,按着按键时触发。该属性不会对所有按键生效,不生效的有,alt,ctrl,shift,esc
  4. mouse鼠标事件,onclick,当在元素上发生鼠标点击时触发,onblclick,当在元素上发生鼠标双击时触发,onmousedown,当元素上按下鼠标按钮时触发,onmousemove,当鼠标指针移动到元素上时触发,onmouseout,当元素指针移出元素时触发,onmouseup,当元素上释放鼠标按钮时触发。Media媒体事件,onabort,当退出时触发,onwaiting,当媒体已停止播放但打算继续播放时触发。

文本标签

  1. 段落标签<p></p>,段落标签用来描述一段文字
  2. 标题标签<hx></hx>,标题标签用来描述一个标题,标题标签总共有六个级别,<h1></h1>标签在每个页面中通常只出现一次
  3. 强调语句标签,<em></em>,用于强调某些文字的重要性
  4. 更加强调标签,<strong></strong><em>标签一样,用于强调文本,但它强调的程度更强一些
  5. 无语义标签<span></span>,标签是没有语义的
  6. 短文本引用标签<q></q>,简短文字的引用
  7. 长文本引用标签<blockquote></blockquote>,定义长的文本引用
  8. 换行标签<br/>

多媒体标签

  1. 链接标签,<a></a>
  2. 图片标签,<img/>
  3. 视频标签,<video></video>
  4. 音频标签,<audio></audio>

列表

  1. 无序列表标签,ul,li<ul></ul>列表定义一个无序列表,<li></li>代表无需列表中的每一个元素
  2. 有序列表,ol,li
  3. 定义列表,<dl></dl>,定义列表通常和<dt></dt><dd></dd>标签一起使用

表格

  1. 表格标签<table></table>
  2. 表格的一行<tr></tr>
  3. 表格的表头<th></th>
  4. 单元格<td></td>
  5. 表格合并,同一行内,合并几列colspan="2",同一列内,合并几行rowspan="3"

表单标签

  1. 表单标签<form>

<form></form>表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

<form method="传送方式" action="服务器文件">

action,浏览者输入的数据被传送到的地方

method,数据传送的方式

  1. 输入标签<input/>

name:为文本框命名,用于提交表单,后台接收数据用。

value:为文本输入框设置默认值。

type:通过定义不同的type类型,input的功能有所不同。

text	单行文本输入框
password	密码输入框(密码显示为***)
radio	单选框 (checked属性用于显示选中状态)
checkbox	复选框(checked属性用于显示选中状态)
file	上传文件
button	普通按钮
reset	重置按钮(点击按钮,会触发form表单的reset事件)
submit	提交按钮(点击按钮,会吃饭form表单的submit事件)
email	专门用于输入 e-mail
url	专门用于输入 url
number	专门用于number
range	显示为滑动条,用于输入一定范围内的值
date	选取日期和时间(还包含:month、week、time、datetime、datetime-local)
color	选取颜色

button按钮,下拉选择框<select></select>

<option value="提交值">选项</option>是下拉选择框里面的每一个选项
  1. 文本域:<textarea></textarea>,当用户想输入大量文字的时候,使用文本域。cols,多行输入域的列数,rows,多行输入域的行数。

其他语义化标签

  1. 盒子<div></div>
  2. 网页头部<header></header>html5新增语义化标签,定义网页的头部,主要用于布局,分割页面的结构
  3. 底部信息<footer></footer>html5新增语义化标签,定义网页的底部,主要用于布局,分割页面的结构
  4. 导航<nav></nav>html5新增语义化标签,定义一个导航,主要用于布局,分割页面的结构
  5. 文章<article></article>html5新增语义化标签,定义一篇文章,主要用于布局,分割页面的结构
  6. 侧边栏<aside></aside>,语义化标签,定义主题内容外的信息,主要用于布局,分割页面的结构。
  7. 时间标签<time></time>,语义化标签,定义一个时间

网页结构

  1. <!DOCTYPE html> 定义文档类型,告知浏览器用哪一种标准解释HTML
  2. <html></html>可告知浏览器其自身是一个 HTML 文档
  3. <body></body>标签之间的内容是网页的主要内容
  4. <head></head>标签用于定义文档的头部,它是所有头部元素的容器
  5. <title></title>元素可定义文档的标题
  6. <link>标签将css样式文件链接到HTML文件内
  7. <meta>定义文档的元数据

模块划分

  1. 常见的企业网站,多由头部区,展示图片区域,主题区域,底部信息区域组成
  2. 网页拆分原则: – 由上到下 - 由内到外

CSS代码语法

  1. CSS全称为层叠样式表(Cascading Style Sheets),它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
  2. css代码通常存放在<style></style>标签内
  3. css 样式由选择符和声明组成,而声明又由属性和值组成
  4. 选择符{属性:值}
  5. 选择符:又称选择器,指明网页中要应用样式规则的元素

CSS 放置位置

  1. 行内样式,不建议使用
  2. 内联式样式表
  3. 外联样式表

CSS的继承

  1. CSS的某些样式是具有继承性的,继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。
  2. 不可继承样式:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
  3. 可以继承的样式:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor

选择器的种类

  1. 标签选择器:通过标签的名字,修改css样式
  2. 通配符选择器:选择页面中所有的元素
  3. 属性选择器
  4. 后代选择器:选择某个父元素下面所有的元素
  5. 一级子元素选则器:选择某个父元素的直接子元素,后代选择器是选择父元素的所有子孙元素,一级子元素原则器只选择第一级子元素,不会再向下查找元素
  6. id选择器:通过id查找页面中唯一的标签
  7. class选择器:通过特定的class(类)来查找页面中对应的标签,以 .class名称
  8. 伪类选择器::hover鼠标移入某个元素;:before在某个元素的前面插入内容;:after在某个元素的后面插入内容
  9. 群组选择器:可以对多个不同的选择器设置相同的样式

选择器的优先级

  1. 当有不同的选择器对同一个对象进行样式指定时,并且两个选择器有相同的属性被赋予不同的值时。
  2. 通过测算那个选择器的权重值最高,应用哪一个选择器的样式
  3. 权重计算方式:
标签选择器:1

class选择器:10

id选择器:100

行内样式:1000

!important 最高级别,提高样式权重,拥有最高级别

背景样式

  1. 背景颜色background-color
  2. 背景图片background-image
background-image:url(bg01.jpg);
  1. 背景图片位置background-position
background-position:10px 100px;

// 代表坐标x,y轴
  1. 背景图片重复background-repeat
background-repeat:no-repeat

// no-repeat 设置图像不重复,常用

// round 自动缩放直到适应并填充满整个容器

// space 以相同的间距平铺且填充满整个容器
  1. 背景图片定位background-attachment
background-attachment:fixed

// 背景图像是否固定或者随着页面的其余部分滚动

// background-attachment的值可以是scroll(跟随滚动),fixed(固定)
  1. background缩写
background:#ff0000 url(bg01.jpg) no-repeat fixed center

字体样式

  1. 字体族font-family
font-family:"微软雅黑","黑体";
  1. 字体大小font-size
font-size:12px;

网页默认字体大小是16px

  1. 字体粗细font-weight
font-weight:400;

normal(默认)
bold(加粗)
bolder(相当于<strong>和<b>标签)
lighter (常规)
100 ~ 900 整百(400=normal,700=bold)
  1. 字体颜色color
颜色的英文单词color:red;

十六进制色:color: #FFFF00;

RGB(红绿蓝)color:rgb(255,255,0)

RGBA(红绿蓝透明度)A是透明度在0~1之间取值。color:rgba(255,255,0,0.5)
  1. 字体斜体font-style
font-style:italic

normal 文本正常显示

italic 文本斜体显示

oblique 文本倾斜显示

文本属性

  1. 行高line-height
line-height:50px;

可以将父元素的高度撑起来

  1. 文本水平对齐方式text-align
left 左对齐
center 文字居中
right 右对齐
  1. 文本所在行高的垂直对齐方式vertical-align
baseline 默认

sub 垂直对齐文本的下标,和<sub>标签一样的效果

super 垂直对齐文本的上标,和<sup>标签一样的效果

top 对象的顶端与所在容器的顶端对齐

text-top 对象的顶端与所在行文字顶端对齐

middle 元素对象基于基线垂直对齐

bottom 对象的底端与所在行的文字底部对齐

text-bottom 对象的底端与所在行文字的底端对齐
  1. 文本缩进text-indent
text-indent:2em;

通常用在段落开始位置的首行缩进

  1. 字母之间的间距letter-spacing
  2. 单词之间间距word-spacing
  3. 文本的大小写text-transform
capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母。

lowercase 定义仅有小写字母。
  1. 文本的装饰text-decoration
none 默认。
underline 下划线。
overline 上划线。
line-through 中线。
  1. 自动换行word-wrap
word-wrap: break-word;

基本样式

  1. 宽度width
width:200px;
定义元素的宽度
  1. 高度height
height:300px
元素默认没有高度
需要设置高度
可以不定义高度,让元素的内容将元素撑高
  1. 鼠标样式cursor

定义鼠标的样式cursor:pointer

default默认
pointer小手形状
move移动形状
  1. 透明度opacity
opacity:0.3
透明度的值0~1之间的数字,0代表透明,1代表完全不透明

透明的元素,只是看不到了,但是还占据着文档流
  1. 可见性visibility
visibility:hidden;

visible 元素可见

hidden 元素不可见

collapse 当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局。
  1. 溢出隐藏 overflow

设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值,内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
  1. 边框颜色outline

input文本输入框自带边框,且样式丑陋,我们可以通过outline修改边框

outline:1px solid #ccc;

outline:none清除边框

样式重置

早期的网页没有css样式,为了界面美观,很多元素自带margin、padding等样式,但这些样式在不同浏览器解析的值都不一样,需要将css样式重置,保证在不同浏览器显示一致。

清除元素的margin和padding
去掉自带的列表符
去掉自带的下划线

盒模型样式

  1. 块状元素、内联元素和内联块状元素。

块级元素:

  • 每个块级元素都从新的一行开始,并且其后的元素也另起一行。
  • 元素的高度、宽度、行高以及顶和底边距都可设置。
  • 元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。

行内元素:

  • 和其他元素都在一行上
  • 元素的高度、宽度、行高及顶部和底部边距不可设置
  • 元素的宽度就是它包含的文字或图片的宽度,不可改变。

行内块状元素:

  • 和其他元素都在一行上
  • 元素的高度、宽度、行高以及顶和底边距都可设置。
  1. 元素分类转换display

block:将元素转换为块级元素

inline:将元素装换为行级元素

inline-block:将元素转换为内联块元素

none: 将元素隐藏

  1. 描边border
border:2px solid #f00;

线条的样式:

dashed(虚线)| dotted(点线)| solid(实线)。

css样式中允许只为一个方向的边框设置样式:

下描边border-bottom:1px solid red;

上描边border-top:1px solid red;

右描边border-right:1px solid red;

左描边border-left:1px solid red;
  1. 间距margin
div{margin:20px 10px 15px 30px;}
  1. 内填充padding
padding:10px

浮动float

  1. 浮动原理
  • 浮动使元素脱离文档普通流,漂浮在普通流之上的。

  • 浮动元素依然按照其在普通流的位置上出现,然后尽可能的根据设置的浮动方向向左或者向右浮动,直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止,且允许文本和内联元素环绕它。

  • 浮动会产生块级框(相当于设置了display:block),而不管该元素本身是什么。

  1. 清除浮动带来的影响

clear 清除浮动:

none : 不清除(默认值)。

left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许两边有浮动对象
  1. 利用伪类实现清除浮动
.clearFix {
  	content="";
  	display:block;
  	width:0;
  	height:0;
  	clear:both;
}

定位position

  1. 定位功能可以让布局变的更加自由。
  2. 层模型--绝对定位(相对于父类)

绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下图所示:

技术图片

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

  1. 层模型--相对定位(相对于原位置)

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

如下图所示:

技术图片

如果想为元素设置层模型中的相对定位,需要设置position:relative(相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于原位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

  1. 层模型--固定定位(相对于网页窗口)
position:fixed

absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed属性功能相同。

浏览器默认样式

  1. 页边距

IE默认为10px,通过bodymargin属性设置

要清除页边距一定要清除这两个属性值

body { margin:0; padding:0;}
复制代码
  1. 段间距

IE默认为19px,通过pmargin-top属性设置

p默认为块状显示,要清除段间距,一般可以设置

p { margin-top:0; margin-bottom:0;}

html5

HTML5 的优势

  1. 解决跨浏览器,跨平台问题
  2. 增强了 web 的应用程序

HTML5 废弃元素

frame frameset noframes
acronym applet dir
basefont big center font strike tt

HTML5 新增元素

<header>	用于定义文档或节的页眉

<footer>	用于定义文档或节的页脚

<article>	用于定义文档内的文章

<section>	用于定义文档中的一个区域(或节)

<aside>	用于定义与当前页面或当前文章的内容几乎无关的附属信息

<figure>	用于定义一段独立的引用,经常与说明(caption)<figcaption>配合使用,通常用在主文中的图片,代码,表格等。

<figcaption>	用于表示是与其相关联的引用的说明/标题,用于描述其父节点<figure>元素里的其他数据。

<hgroup>	用于对多个<h1>~<h6>元素进行组合

<nav>	用于定义页面上的导航链接部分

<mark>	用于定义高亮文本

<time>	用于显示被标注的内容是日期或时间(24小时制)

<meter>	用于表示一个已知最大值和最小值的计数器

<progress>	用于表示一个进度条

<audio>	定义声音,比如音乐或其他音频流

<video>	定义视频,比如电影片段或其他视频流
复制代码

HTML5 表单相关元素和属性

input新增type类型

color	用来创建一个允 许用户使用颜色选择器,或输入兼容 CSS 语法的颜色代码的区域

time	生成一个时间选择器

datetime	生成一个 UTC 的日期时间选择器

datetime-local	生成一个本地化的日期时间选择器

date	显示一个日期输入区域,可同时使用日期选择器,结果值包括年、月、日,不包括时间。

month	生成一个月份选择器,它结果值包括年份和月份, 但不包括日期

week	生成一个选择的几周的选择器

email	生成一个 E-mail 输入框

number	生成一个只能输入数字的输入框

range	生成一个拖动条,通过拖动条,使得用户只能输入指定范围,指定步长的值

search	生成一个专门用于输入搜索关键字的文本框

tel	生成一个只能输入电话号码的文本框

url	生成一个 URL 输入框
HTML5 input新增属性

placeholder	主要用在文本框,规定可描述输入字段预期值的简短的提示信息

autocomplete	为了完成表单的快速输入,一般浏览器提供了自动补全的功能选择

autofocus	当为某个表单控件增加该属性后,当浏览器打开这个页面, 这个表单控件会自动获得焦点

list	为文本框指定一个可用的选项列表,当用户在文本框中输 入信息时,会根据输入的字符,自动显示下拉列表提示,供用户从中选择

pattern	用于验证表单输入的内容,通常 HTML5 的 type 属性,比如 email、tel、 number、url 等,已经自带了简单的数据格式验证功能了,加上 pattern 属性后, 验证会更加高效

novalidate	当提交表单时不对其进行验证

required	必需在提交之前填写输入字段

spellcheck	拼写检查,为<input>、<textarea>等元素新增属性

formenctype	规定在发送到服务器之前应该如何对表单数据进行编码

formtarget	带有两个提交按钮的表单,会提交到不同的目标窗口

multiple	一次上传多个文件

maxlength wrap	<textarea>新增<br />maxlength:用于规定文本区域最大字符数。<br />wrap:是否包含换号符(soft/ hard)

css3

CSS3 新增选择器

  1. 兄弟选择器

元素 1 ~ 元素 2 第1个元素之后,所有的元素2都会被选择,且这些元素和第一个元素拥有同一个父元素(两个元素之间不一定要相邻)。

  1. 属性选择器
  • E[attribute^=value] 用于选取带有以指定值开头的属性值的元素
  • E[attribute$=value] 用于选取属性值以指定值结尾的元素
  • E[attribute*=value] 用于选取属性值中包含指定值的元素,位置不限,也不限制整个单词
  1. 伪类选择器
  • :root 选择文档的根元素,HTML 里,永远是<html>元素
  • :last-child 向元素添加样式,且该元素是它的父元素的最后一个子元素
  • :nth-child(n) 向元素添加样式,且该元素是它的父元素的第 n 个子元素
  • :nth-last-child(n) 向元素添加样式,且该元素是它的父元素的倒数第 n 个子 元素
  • :only-child 向元素添加样式,且该元素是它的父元素的唯一子元素
  • :first-of-type 向元素添加样式,且该元素是同级同类型元素中第一个元 素
  • :last-of-type 向元素添加样式,且该元素是同级同类型元素中最后一个 元素
  • :nth-of-type(n) 向元素添加样式,且该元素是同级同类型元素中第 n 个元 素
  • :nth-last-of-type(n) 向元素添加样式,且该元素是同级同类型元素中倒数第 n 个元素
  • :only-of-type 向元素添加样式,且该元素是同级同类型元素中唯一的元素
  • :empty 向没有子元素(包括文本内容)的元素添加样式
  1. 伪元素选择器
  • :enabled 向当前处于可用状态的元素添加样式,通常用于定义表单的样式或者超链接的样式
  • :disabled 向当前处于不可用状态的元素添加样式,通常用于定义表单的 样式或者超链接的样式
  • :checked 向当前处于选中状态的元素添加样式
  • :not(selector) 向不是 selector 元素的元素添加样式
  • :target 向正在访问的锚点目标元素添加样式
  • ::selection 向用户当前选取内容所在的元素添加样式

CSS3 新增属性

  1. 新增背景属性
  • background-clip 设置背景覆盖范围 border-box/paddingbox/content-box
  • background-origin 设置背景覆盖的起点 border-box/paddingbox/content-box
  • background-size 设置背景的大小 cover/contain/长度/百分比
  1. 新增的字体文本相关属性
  • text-overflow 设置当文本溢出元素框时处理方式 clip/ellipsis
  • word-wrap 规定单词的换行方式 normal/break-word
  • word-break 规定自动换行的方式 normal/break-all/keep-all
  1. 新增盒模型属性
  • box-shadow 阴影 h-shadow v-shadow <br />blur spread color inset
  • resize 调整尺寸 none/both/horizontal
  • outline-offset 轮廓的偏移量 length/inherit

新增变形动画属性

  1. transform
  • translate(x,y)
  • rotate(angle)
  • scale(x,y)
  • skew(angleX ,angleY)
  1. transform-origin

表示元素旋转的中心点,默认值为 50% 50%。

  • 第一个值表示元素旋转中心点的水平位置,它还可以赋值 left、right、center、长度、百分比

  • 第二个值表示元素旋转中心点的垂直位置,它还可以赋值 top、bottom、 center、长度、百分比。

3D 变形属性

  1. transform 3D函数

transform 增加了三个变形函数:

  • rotateX:表示元素沿着 x 轴旋转。
  • rotateY:表示元素沿着 y 轴旋转。
  • rotateZ:表示元素沿着 z 轴旋转。
  1. transform-style用来设置嵌套的子元素在 3D 空间中显示效果。

  2. perspective设置成透视效果,透视效果为近大远小。

  3. perspective-origin设置 3D 元素所基于的 x 轴和 y 轴,改变 3D 元素的底部位置,该属性取值同 transform-origin,默认值为 50% 50%。

  4. backface-visibility用来设置当元素背面面向屏幕时是否可见,通常用于设置 不希望用户看到旋转元素的背面。

它的属性值有visible(背面可见,默认值)、 hidden(背面不可见)两个。

CSS3 的过渡属性

  • transition-delay 设置过渡的延迟时间
  • transition-duration 设置过渡的过渡时间
  • transition-timing-function 设置过渡的时间曲线
  • transition-property 设置哪条 CSS 使用过渡
  • transition 一条声明设置 所有过渡属性

CSS3 的动画属性

  1. animation
  • @keyframes 定义动画选择器
  • animation-name 使用@keyframes 定义的动画
  • animation-delay 设置动画的持续动画时间
  • animation-timing-function 设置动画的时间曲线
  • animation-iteration-count 设置动画播放次数
  • animation-direction 设置动画反向播放
  • animation-play-state 设置动画播放状态
  • transition 一条声明设置所有动画属性

CSS3 新增多列属性

  • column-count 设置元素应该被分隔的列数
  • column-width 设置列的宽度
  • columns 一条声明设置列宽和列数 column
  • column-gap 设置列之间的间隔
  • column-span 设置元素应该横跨的列数
  • column-rule-style 设置列之间间隔的样式
  • column-rule-color 设置列之间间隔的颜色
  • column-rule-width 设置列之间间隔的宽度
  • column-rule 一条声明设置列之间间 隔所有属性

CSS3新增单位

px、em、rem、vh、 vw和% 移动端长度单位

使用CSS单位px、em、rem、vh、 vw等实现页面布局。

  • px:绝对单位,页面按精确像素展示
  • em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

em会根据父级元素的大小而变化,但是如果嵌套了多个元素,要计算它的大小,是很容易出错的,这样就引申出了rem

  • rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性。
  • %% 百分比,相对长度单位,相对于父元素的百分比值
  • vw、vh、vmin、vmax 主要用于页面视口大小布局

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。

vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。

  • vmin:vwvh中较小的那个。
  • vmax:vwvh中较大的那个。

弹性盒模型

弹性盒模型的语法基础概念

任何一个容器都可以指定弹性布局

本文连载中,敬请期待哦~

下面要分享的前端面试题是我面试过程中遇到的题目,每一次面试后我都会复盘总结。我做了一个整理,并且在技术博客找到了专业的解答,大家可以参考下:

技术图片

技术图片

技术图片

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

初级前端要掌握哪些知识点才能找到一个20k的工作?(一)

标签:弹性盒   ips   http   单选   大小   range   upload   board   选择   

原文地址:https://www.cnblogs.com/qianduanpiaoge/p/14488682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!