新手不知道的,前端关于html5入门学习顺序

现在html5移动端非常的火,很多小伙伴想学习又不知道从哪开端学起,今天就分享一下前html5该怎么入门。

首先还是给大家推荐一个学习氛围很好的裙,我自己的,想要一起学习web前端的可以加裙六一四三一五六五七,有各种资料和开发工具包满足大家,每天更新最新行情

1、css3新增挑选器

结构挑选器:

:nth-child(n) 父元素下的第n个子元素

:nth-child(odd)奇数子元素(同nth-child(2n-1))

:nth-child(even)偶数子元素(同nth-child(2n))

:nth-child(an+b)公式

:nth-last-child(n) 倒数第n个子元素

:nth-of-type(n) 父元素下的第n个指定类型的子元素

:nth-last-of-type 父元素下的数第n个指定类型的子元素

:first-child 挑选父元素下的第一个子元素

:last-child 挑选父元素下的最终一个子元素

:only-child 挑选父元素下仅有的子元素

:only-of-type挑选父元素下指定类型的仅有子元素

:root 挑选文档的根目录,回来html

特点挑选器:

:E[attr] 特点名,不确定详细特点值

:E[attr="value"] 指定特点名,并指定其对应特点值

:E[attr ~="value"] 指定特点名,其具有多个特点值空格离隔,并包含value值

:E[attr ^= "value"] 指定特点名,特点值以value最初

:E[attr $="value"] 指定特点名,特点值以value结束

:E[attr *="value"] 指定了特点名,特点值中包含了value

:E[attr |= "value"] 指定特点名,特点值以value-最初

UI伪类挑选器:

:enabled 挑选启用状态元素

:disabled 挑选禁用状态元素

:checked 挑选被选中的input元素(单选按钮或复选框)

:default 挑选默认元素

:valid、invalid 根据输入验证挑选有用或无效的input元素

:in-range、out-of-range 挑选指定范围之内或者之外受限的元素

:required、optional 根据是否允许

:required特点挑选input元素

动态伪类挑选器:

:link 挑选链接元素

:visited 挑选用户以访问的元素

:hover 鼠标悬停其上的元素

:active 鼠标点击时触发的事件

:focus 当前获取焦点的元素

其他伪类挑选器:

:not() 对括号内挑选器的挑选取反

:lang() 基于lang全局特点的元素

:target url片段标识符指向的元素

:empty挑选内容为空的元素

:selection 鼠标光标挑选元素内容

2、布景

background-size:布景尺度

background:url() 0 0,url() 0 100%;多布景

background-origin 布景区域定位

background-clip 布景绘制区域颜色突变

background-image:linear-gradient()线性突变

background-image:radial-gradient()径向性突变

3、文本特点

color:rgba();

text-overflow:是否运用一个省略标记(...)标明对象内文本的溢出(单行文本溢出、多行文本溢出)

text-align:文本的对齐办法

text-transform:文字的巨细写

text-decoration:文本的装饰线,复合特点

text-shadow:文本暗影

text-fill-color:文字填充颜色

text-stroke:复合特点。设置文字的描边

tab-size:制表符的长度

word-wrap:当前行超过指定容器的鸿沟时是否断开转行

word-break:规定自动换行的处理办法

4、弹性盒模型

box布局设置给父元素特点:

display:box/display:inline-box;

box-orient 界说盒模型的布局方向

box-direction 元素摆放顺序

box-pack 对盒子殷实的空间进行管理

box-align 在笔直方向上对元素的方位进行管理

设置给子元素

box-ordinal-group 设置元素的详细方位

box-flex 界说盒子的弹性空间

flex布局设置给父元素特点:

flex-direction特点决议显现的方向(即项目的摆放方向)

flex-wrapflex-wrap特点界说,如果一行排不下,怎么换行。

flex-flow特点是flex-direction特点和flex-wrap特点的简写形式,默认值为row nowrap。

justify-content特点界说了项目在水平方向的对齐办法。

align-items特点界说项目在竖直方向上怎么对齐。

align-content特点界说了多行的对齐办法。如果项目只在一行,该特点不起作用。

设置给子元素:

order 特点界说项目的摆放顺序。数值越小,摆放越靠前,默以为0。可为负值

flex-grow 特点界说项目的扩大份额,默以为0,即如果存在剩下空间,也不扩大。

flex-shrink 特点界说了项目的缩小份额,默以为1,即如果空间不足,该项目将缩小。

flex-basis 特点界说了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个特点,计算主轴是否有多余空间。它的默认值为auto,即项目的本来巨细。

flex 特点是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个特点可选。

align-self 特点允许单个项目有与其他项目不一样的对齐办法,可掩盖align-items特点。默认值为auto,表明继承父元素的align-items特点,如果没有父元素,则等同于stretch。

5、怪异盒模型(box-sizing)

box-sizing 盒模型解析形式

content-box 规范盒模型(和css2一样的计算) width/height=border+padding+content

border-box 怪异盒模型 width/height与设置的值一样 ,content减小3、2D改换、3D改换

6、盒子暗影、影子

box-shadow 暗影 box-reflect 影子

本文来自企鹅号 - web前端那些事媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

Pointfree 编程风格指南

本文要回答一个很重要的问题:函数式编程有什么用? 目前,主流的编程语言都不是函数式的,已经能够满足需求。为何还要学函数式编程呢,只为了多理解一些新奇的概念? ?...

3427
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

9115
来自专栏Java帮帮-微信公众号-技术文章全总结

十道海量数据处理面试题与十个方法总结 【面试+提高】

十道海量数据处理面试题与十个方法总结 一、十道海量数据处理面试题 1、海量日志数据,提取出某日访问百度次数最多的那个IP。   此题,在我之前的一篇文章算法里头...

4308
来自专栏华章科技

技巧:Excel用得好,天天没烦恼

分析公司DarkHorse Analytics 从美国劳工统计处获得数据,并制作了这张二十四小时会唿吸的地图,显示曼哈顿的工作与在宅人口。

934
来自专栏PPV课数据科学社区

【学习】数据分析师面试一般问些什么问题?

罗列一些经典的问题,以飨观众O(∩_∩)O~ 1、海量日志数据,提取出某日访问百度次数最多的那个IP。 首先是这一天,并且是访问百度的日志中的IP取出来,逐...

3458
来自专栏大数据挖掘DT机器学习

【面试】数据分析师常见的10道面试题解答

1、海量日志数据,提取出某日访问百度次数最多的那个IP   首先是这一天,并且是访问百度的日志中的IP取出来,逐个写入到一个大文件中。注意到IP是32位的,最...

4986
来自专栏大数据挖掘DT机器学习

十道海量数据处理面试题

作者:July、youwang、yanxionglu。 原文:http://blog.csdn.net/v_JULY_v 1、海量日志数据,提取出某日访问百度...

3189
来自专栏小樱的经验随笔

深入理解树状数组

树状数组(Binary Indexed Tree(BIT), Fenwick Tree)是一个查询和修改复杂度都为log(n)的数据结构。主要用于查询任意两位之...

2567
来自专栏数据魔术师

基础算法| 常用排序算法小结

日常吹水 说到这个算法, 可能瞬间大家就觉得那些灰机昏膏素什么的比这个生动活泼多了。 那么,正走在算法之路上的你, 是否还在苦苦寻求修仙之路? 是否被各种排序...

2935
来自专栏小二的折腾日记

牛客网刷题总结-剑指offer(1)

这里一般的思路肯定是,从行或者列开始找,根据递增的顺序,找到行或者列之后再判断列或者行,知道找到为止。最好的方法是,从左下角或者右上角开始找。原因是:这样的一行...

611

扫码关注云+社区