摘要:设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时,会生成匿名块级盒来包含行级盒。
浏览器
浏览器 | 渲染引擎 | 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 (标准模式)
HTML设计思想注意: 如果当我们不指定Doctype时,IE6、IE7会采用怪异模式渲染页面,IE8以标准模式渲染页面,firefox11也是以标准模式渲染页面。
兼容已有内容
避免不必要的复杂性
解决现实问题
优雅降级
尊重事实标准
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 |
哪条声明起作用?css文本样式可继承 font-family找出匹配到的该属性所有声明
根据规则来源,优先级从低到高:
浏览器预设
用户设置
网页样式
同一来源中,按照特异度排序,越特殊优先级越高
特异度一样时,按照样式书写顺序,后面的优先级高
有 !important 时的变化找出匹配到的该属性所有声明
根据规则来源, 优先级从低到高:
浏览器预设
用户设置
网页样式
含 !important 的网页样式
含 !important 的用户设置样式
同一来源中,按照特异度排序,越特殊优先级越高
特异度一样时,按照样式书写顺序,后面的优先级高
使用逗号分隔的字体族名称
初始值由浏览器设置决定,可继承
浏览器先获取一个系统字体列表
对于元素中每一个字符,使用 font-family 属性及其它属性进行匹配,如果能匹配就暂定该字体
如果步骤2没有匹配上,选择下一个可选的 font-family 执行步骤2
如果匹配到一个字体,但是字体中没有该字符,继续对下一个可选的 font-family 执行步骤2
如果没有匹配到字体,使用浏览器默认字体。
英文字体放在中文字体前面
最后总是添加通用字体族
font-size定义文字的大小,可使用px、百分比、em等做单位
取值
绝对值 xx-small | x-small | small | medium | large | x-large | xx-large
相对值 larger | smaller
长度
百分数,相对于父元素计算值
初始值为 medium(由浏览器设置决定,一般16px),可继承
一般是相对于元素 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)
定义文本在容器内的对齐方式
取值: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块级元素(Block-level Elements)width的值为百分比时,参考的是父元素盒子的width;
height的值为百分比时,参考的是父元素盒子的height;
padding的值为百分比时,参考的是父元素的width;
margin的值为百分比时,参考的是父元素的width;
会被格式化成块状的元素
例如 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)
常规流中的盒子,属于块级格式化上下文或行级格式化上下文
盒子在容器(包含块)内从上到下一个接一个地放置
两个兄弟盒之间的竖直距离由 margin 属性决定
同一个 BFC 内垂直 margin 会合并
盒子的左外边缘挨着容器(包含块)的左边
块级格式化上下文(BFC) 的特性:
BFC 内的浮动不会影响到BFC外部的元素
BFC 的高度会包含其内的浮动元素
BFC 不会和浮动元素重叠
BFC 可以通过 overflow:hidden 等方法创建
BFC 的创建:
浮动框
绝对定位框
非块级的块容器(inline-block)
overflow 属性非 visible 的块框
BFC的作用:
清除浮动
防止 margin 折叠
双栏布局
盒子一个接一个水平放置
盒之间的水平 margin,border和padding 都有效
同一行的盒子所在的矩形区域叫行盒(Line box)
当一个行盒放不下上下文内所有盒子时,会被分到多个垂直堆叠的行盒里
行盒内的水平分布由"text-align"属性决定
如果一个行级块无法分割(单词、inline-block),该元素会被作为一个整体决定分布在哪一个行盒
浮动(float)浮动元素从常规流中脱离,被漂浮在容器(包含块)左边或右边
浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒
浮动元素不会影响其后面的流内块级盒
但是浮动元素后面的行级盒子会变短以避开浮动元素
positionstatic,非定位,默认值
relative,相对定位(相对自己)
absolute,绝对定位,相对非 static 祖先元素定位
fixed,相对于视口绝对定位
在常规流里面布局
相对于自己本应该在的位置进行偏移
使用 top、left、bottom、right 设置偏移长度
流内其它元素当它没有偏移一样布局
脱离正常流
相对于最近的非 static 祖先的 padding box 定位
不会对流内元素布局造成影响
可以有 margin,但不会折叠
相对于 Viewport 定位
不会随页面滚动发生位置变化
为定位元素指定其在 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
摘要:前端与一枚大三学生,非常感谢前端星计划,在这里学习了很多,非常幸运获得的校招实习,非常感谢面试我的王峰老师和卢岳文老师总的来说,这天的学习,让我坚定了走前端这条路。使用在模式下可以使元素水平居中,但在模式下却会失效。 前端与HTML 一枚大三学生,非常感谢360前端星计划,在这里学习了很多,非常幸运获得360的校招实习offer~,非常感谢面试我的王峰老师和卢岳文老师!总的来说,这7天...
摘要:设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时,会生成匿名块级盒来包含行级盒。 浏览器 浏览器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...
摘要:课程一继承某些元素会自动继承其父元素的计算值举例上述代码,标签里的就会继承父元素的,为。显示继承给设置显示继承根元素下所有元素除独自设置如的都是。二初始值当向上继承到顶点还是没找到值的话,就需要初始值了。 课程ppt 一、css继承 1.1 某些元素会自动继承其父元素的计算值 举例: This is a test of inherit. p { color: #666; ...
摘要:深入课程链接一的版本规范在之前,把所有标准放在一起去管理,这样推进起来版本升级比较难,后来在的版本中,将标准分成几个模块来管理。 深入CSS 课程ppt链接 一、CSS的版本(level) css Level 1 css Level 2(CSS2.2规范) css Level 3 Color Module Level 3 Selectors Level 3 Media Queri...
阅读 2846·2021-09-28 09:36
阅读 3936·2021-09-22 15:52
阅读 3629·2021-09-06 15:00
阅读 1947·2021-09-02 15:40
阅读 2796·2021-09-02 15:15
阅读 3453·2021-08-17 10:15
阅读 2781·2019-08-30 15:53
阅读 2072·2019-08-29 18:39