资讯专栏INFORMATION COLUMN

360前端星计划学习-HTML + CSS

lpjustdoit / 1866人阅读

摘要:设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时,会生成匿名块级盒来包含行级盒。

浏览器
浏览器 渲染引擎 JavaScript引擎
IE Trident JScript
Edge EdgeHTML Chakra
Safari Webkit Nitro
Chrome Blink V8
FireFox Gecko SpiderMonkey
Opera Prasto -> blink Carakan -> V8
壳浏览器

360浏览器

UC浏览器

QQ浏览器

搜狗浏览器

HTML HTML是什么

HyperText Markup Language

使用标签来描述页面的内容结构

Doctype的作用

指定页面的使用标准和版本

决定使用哪种渲染模式

渲染模式

Quirks Mode (怪异模式)

Almost standard Mode (标准准模式)

Standard Mode (标准模式)

注意: 如果当我们不指定Doctype时,IE6、IE7会采用怪异模式渲染页面,IE8以标准模式渲染页面,firefox11也是以标准模式渲染页面。

HTML设计思想

兼容已有内容

避免不必要的复杂性

解决现实问题

优雅降级

尊重事实标准

HTML5变化

Doctype、meta

新增语义化标签

去除纯表示性的标签

WebStorage、canvas、video、audio、拖拽、离线

语法

标签不区分大小写、推荐小写

空标签可以不闭合

属性不必引号。推荐双引号

某些属性值可以省略,如required、readonly

图片 图片宽高

不指定高宽:原图大小显示

指定宽度:按比例缩放到指定宽度

指定高度:按比例缩放到指定高度

指定高宽:强制按照指定高宽显示

图片格式

jpg:照片

png:色彩较少时使用,png24可以半透明

gif:无法半透明,可以多帧做动画

WebP

注意: WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。更多...

语义化

提升代码的可读性、可维护性

搜索引擎的优化(利于SEO)

提升无障碍性

CSS 选择器 简单选择器

通配选择器 *

标签选择器 p

id选择器 #id

类选择器 .class

属性选择器

[attr]只使用属性名,但没有确定任何属性值;

[attr="value"]指定属性名,并指定了该属性的属性值;

[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表以空格隔开,其中词列表中包含了一个value;

[attr^="value"]指定了属性名,并且有属性值,属性值以value开头;

[attr$="value"]指定了属性名,并且有属性值,而且属性值以value结尾;

[attr*="value"]指定了属性名,并且有属性值,而且属值中包含value;

[attr|="value"]指定了属性名,并且属性值是value或者以“value-”开头的值;

伪类 (pseudo-classes)

基于 DOM 之外的信息去(比如根据用户和网页的交互状态)选择元素。

a:link    { ... }   /* 未访问过的链接 */
a:visited { ... }   /* 已访问过的链接 */
a:hover   { ... }   /* 鼠标移到链接上的样式 */
a:active  { ... }   /* 鼠标在连接上按下时的样式 */
a:focus   { ... }   /* 获得焦点时的样式 */
选择器组合

直接组合

E[foo="bar"]
E.warning
E#myid
#myid.warning
.warning[foo="bar"]

后代组合

/* 后代选择器 */
  article p {...}
/* 亲子选择器 */
  article > p {...}

相邻兄弟

input[type="check"] + label {...}

通用兄弟

.active ~ li {...} /* 选择所有兄弟 */

同时为一组选择器定义样式

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}
[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
选择器优先级根据特异度判断(Specificity)
选择器 内联? id个数 (伪)类个数 标签个数 特异度
#nav .list li a:link 0 1 2 2 0122
.hd ul.links a 0 0 2 2 0022
哪条声明起作用?

找出匹配到的该属性所有声明

根据规则来源,优先级从低到高:

浏览器预设

用户设置

网页样式

同一来源中,按照特异度排序,越特殊优先级越高

特异度一样时,按照样式书写顺序,后面的优先级高

有 !important 时的变化

找出匹配到的该属性所有声明

根据规则来源, 优先级从低到高:

浏览器预设

用户设置

网页样式

含 !important 的网页样式

含 !important 的用户设置样式

同一来源中,按照特异度排序,越特殊优先级越高

特异度一样时,按照样式书写顺序,后面的优先级高

css文本样式可继承 font-family

使用逗号分隔的字体族名称

初始值由浏览器设置决定,可继承

字体匹配算法

浏览器先获取一个系统字体列表

对于元素中每一个字符,使用 font-family 属性及其它属性进行匹配,如果能匹配就暂定该字体

如果步骤2没有匹配上,选择下一个可选的 font-family 执行步骤2

如果匹配到一个字体,但是字体中没有该字符,继续对下一个可选的 font-family 执行步骤2

如果没有匹配到字体,使用浏览器默认字体。

font-family 使用

英文字体放在中文字体前面

最后总是添加通用字体族

font-size

定义文字的大小,可使用px、百分比、em等做单位

取值

绝对值 xx-small | x-small | small | medium | large | x-large | xx-large

相对值 larger | smaller

长度

百分数,相对于父元素计算值

初始值为 medium(由浏览器设置决定,一般16px),可继承

长度单位em

一般是相对于元素 font-size 的计算值的

用在 font-size 属性上时,是相对于父元素的 font-size 计算值

font-style

定义文字以斜体还是正常方式显示

取值:normal | italic | oblique

初始值为 normal,可继承

font-weight

定义文字的粗细程度

取值:normal | bold | bolder | lighter | 100 | 200 | ... | 900

初始值为 normal,可继承

line-height

元素所属的 line box 所占高度

初始值为normal(具体值由浏览器决定),可继承

取值:<长度> | <数字> | <百分比>

段落文字一般取值1.4~1.8

line-height:26px; 表示行高为26个像素
line-heigth:120%;表示行高为当前字体大小的120%
line-height:2.6em; 表示行高为当前字体大小的2.6倍

带单位的行高都有继承性,其子元素继承的是计算值,如父元素的字体大小为14px,定义行高line-height:2em;则计算值为 28px,不会因其子元素改变字体尺寸而改变行高。(例如:父元素14px,子元素12px,那么行高就是28px,子元素虽然字体是12,行高还是父元素的行高)
line-height:2.6;表示行高为当前字体大小的2.6倍
不带单位的行高是直接继承,而不是计算值,如父元素字体尺寸为14px,行高line-height:2;他的行高为28px;子元素尺寸为12px,不需要再定义行高,他默认的行高为24px。(例如:子元素12px,他的行高是24,不会继承父元素的28)

text-align

定义文本在容器内的对齐方式

取值:left | right | center | justify

初始值由 HTML 的 dir 属性决定,可继承

letter-spacing

指定字符之间的间距

取值:normal |

初始值为 normal,可继承

word-spacing

指定单词之间的间距

取值:normal |

初始值为 normal,可继承

text-indent

指定文本缩进

取值:normal | |

初始值为 0,可继承

text-decoration

定义了文本的一些装饰效果,比如下划线、删除线等

初始值为none,可继承

其它值:underline | line-through | overline

white-space

指定空白符如何处理

取值:normal | nowrap | pre

word-break

指定是否允许在单词中间换行

取值: normal | break-all | keep-all

box model

width的值为百分比时,参考的是父元素盒子的width;
height的值为百分比时,参考的是父元素盒子的height;
padding的值为百分比时,参考的是父元素的width;
margin的值为百分比时,参考的是父元素的width;

块级元素(Block-level Elements)

会被格式化成块状的元素

例如 p、div、section 等

将 display 设置为 block、list-item、table 使元素变为块级

行级元素(Inline-level Elements)

不会为其内容生成块级框

让其内容分布在多行中

display 设置为 inline、inline-block、inline-table 使元素变为行级

margin:行级盒的 margin-top 和 margin-bottom 不会产生效果
padding:行级盒的 padding-top 和 padding-top 不影响行布局

块级盒子中的子盒子的生成

块级盒子中可以包含多个子块级盒子

可以包含多个行级盒子

不在行级元素里面的文字,会生成匿名行级盒。比如:

SomeText

块级盒子中不能同时包含块级和行级盒子。遇到这种情况时,会生成匿名块级盒来包含行级盒。比如:

标题

2016-12-12
行级盒子内的子盒子的生成

行级盒子内可以包含行级盒子

行级盒子包含一个块级盒子时,会被块级盒子拆成两个行级盒子,这两个盒子又分别被匿名块级盒包含

定位模式

常规流(Normal Flow)

浮动(Float)

绝对定位(Absolute Positioning)

常规流

除根元素、浮动元素和绝对定位元素外,其它元素都在常规流之内(in-flow)

而根元素、 浮动和绝对定位的元素会脱离常规流(out of flow)

常规流中的盒子,属于块级格式化上下文或行级格式化上下文

块级格式化上下文 (Block Formatting Context)

盒子在容器(包含块)内从上到下一个接一个地放置

两个兄弟盒之间的竖直距离由 margin 属性决定

同一个 BFC 内垂直 margin 会合并

盒子的左外边缘挨着容器(包含块)的左边

块级格式化上下文(BFC) 的特性:

BFC 内的浮动不会影响到BFC外部的元素

BFC 的高度会包含其内的浮动元素

BFC 不会和浮动元素重叠

BFC 可以通过 overflow:hidden 等方法创建

BFC 的创建:

浮动框

绝对定位框

非块级的块容器(inline-block)

overflow 属性非 visible 的块框

BFC的作用:

清除浮动

防止 margin 折叠

双栏布局

行级格式化上下文 (Inline Formatting Context)

盒子一个接一个水平放置

盒之间的水平 margin,border和padding 都有效

同一行的盒子所在的矩形区域叫行盒(Line box)

当一个行盒放不下上下文内所有盒子时,会被分到多个垂直堆叠的行盒里

行盒内的水平分布由"text-align"属性决定

如果一个行级块无法分割(单词、inline-block),该元素会被作为一个整体决定分布在哪一个行盒

浮动(float)

浮动元素从常规流中脱离,被漂浮在容器(包含块)左边或右边

浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒

浮动元素不会影响其后面的流内块级盒

但是浮动元素后面的行级盒子会变短以避开浮动元素

position

static,非定位,默认值

relative,相对定位(相对自己)

absolute,绝对定位,相对非 static 祖先元素定位

fixed,相对于视口绝对定位

relative

在常规流里面布局

相对于自己本应该在的位置进行偏移

使用 top、left、bottom、right 设置偏移长度

流内其它元素当它没有偏移一样布局

absolute

脱离正常流

相对于最近的非 static 祖先的 padding box 定位

不会对流内元素布局造成影响

可以有 margin,但不会折叠

fixed

相对于 Viewport 定位

不会随页面滚动发生位置变化

z-index 堆叠层次

为定位元素指定其在 z 轴的上下等级
用一个整数表示,数值越大,越靠近用户
初始值为 auto,可以为负数、0、正数

注意: z-index大的不一定在上面,要考虑到层叠上下文
关于层叠上下文

堆叠上下文的生成

Root 元素

z-index 值不为 auto 的定位元素

设置了某些 CSS3 属性的元素,比如 opacity、transform、animation 等

绘制顺序

在每一个堆叠上下文中,从下到上:

形成该上下文的元素的 border 和 background

z-index 为负值的子堆叠上下文

常规流内的块级元素非浮动子元素

非定位的浮动元素

常规流内非定位行级元素

z-index 为 0 的子元素或子堆叠上下文

z-index 为正数的子堆叠上下文

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111907.html

相关文章

  • 360前端学习笔记-HTML

    摘要:前端与一枚大三学生,非常感谢前端星计划,在这里学习了很多,非常幸运获得的校招实习,非常感谢面试我的王峰老师和卢岳文老师总的来说,这天的学习,让我坚定了走前端这条路。使用在模式下可以使元素水平居中,但在模式下却会失效。 前端与HTML 一枚大三学生,非常感谢360前端星计划,在这里学习了很多,非常幸运获得360的校招实习offer~,非常感谢面试我的王峰老师和卢岳文老师!总的来说,这7天...

    kuangcaibao 评论0 收藏0
  • 360前端计划学习-HTML + CSS

    摘要:设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时,会生成匿名块级盒来包含行级盒。 浏览器 浏览器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

    mumumu 评论0 收藏0
  • 360前端学习笔记-深入css(2)

    摘要:课程一继承某些元素会自动继承其父元素的计算值举例上述代码,标签里的就会继承父元素的,为。显示继承给设置显示继承根元素下所有元素除独自设置如的都是。二初始值当向上继承到顶点还是没找到值的话,就需要初始值了。 课程ppt 一、css继承 1.1 某些元素会自动继承其父元素的计算值 举例: This is a test of inherit. p { color: #666; ...

    William_Sang 评论0 收藏0
  • 360前端学习笔记-深入CSS

    摘要:深入课程链接一的版本规范在之前,把所有标准放在一起去管理,这样推进起来版本升级比较难,后来在的版本中,将标准分成几个模块来管理。 深入CSS 课程ppt链接 一、CSS的版本(level) css Level 1 css Level 2(CSS2.2规范) css Level 3 Color Module Level 3 Selectors Level 3 Media Queri...

    xcold 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<