HTML+CSS（知识点总结） html5css3前端

HTML 标签
文章图片

标签
文章图片

自定义列表

名词1: 名词1解释1; 名词1解释2
名词2: 名词2解释1; 名词2解释2

HTML5新特性 (不支持 ie8 及 ie8 以下版本的浏览器)

语义标签
增强型表单
视频和音频
Canvas绘图
SVG绘图
地理定位
拖放API
WebWorker
WebStorage
WebSocket

锚点跳转当前页面a.html: 跳转到b页面aaa处
另一页面b.html: aaa
CSS 选择器种类相邻选择器（h1 + p）、子选择器（ul > li）、后代选择器（li a）
选择器优先级 !important > 内联 > id选择器 ( #id{}) > class类选择器 (.class{}) = 属性选择器(a[href="https://www.it610.com/article/xxx"]{}) = 伪类选择器 (:xxx{}) > 伪元素选择器(::before{}) = 标签选择器(span{}) > 通配符选择器（*{}） > 继承父元素 > 浏览器默认
样式继承

可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式： width height 、margin border padding ;
将超出的文本内容替换成省略号
graph TD 设置宽度 width --> 设置文本不换行 white-space:nowrap-->隐藏溢出内容 overflow:hidden-->省略溢出内容 text-overflow:ellipsis

CSS3 新特性
颜色：新增 RGBA、HSLA
文字阴影 text-shadow
边框圆角 border-radius、边框阴影 box-shadow
盒子模型 box-sizing
背景 background-size
设置背景图片尺寸 background-origin
设置背景图片原点 background-clip
设置背景图片裁剪区域，以“，”分隔可以设置多背景，用于自适应布局
渐变：linear-gradient、radial-gradient
过渡：transition可实现动画
自定义动画
在CSS3中唯一引入的伪元素是::selection
多媒体查询、多栏布局
border-image
2D、3D转换

display: none、visibility: hidden和opacity: 0

	`display: none;`	`visibility: hidden;`	`opacity: 0;`
是否存在	×	√
是否重绘	√		×
是否重排	√	×
能否复原子元素	×	√	×
是否支持transition	×	√
能否触发自身绑定事件	×		√
是否影响被遮挡元素触发事件	×		√

布局在网页中使用偶数的字体偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏
三栏布局

绝对定位
左右浮动
table-cell
圣杯布局
双飞翼布局
Flex布局
Grid布局
清除浮动
在最后一个浮动标签后新增一个标签（不推荐）
缺点：添加无意义标签，语义化差

clear：both;
隐藏父元素溢出内容（不推荐）
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

overflow:hidden/auto; // 父元素 *zoom: 1; // IE6 中需要触发 hasLayout,只有IE6-IE7执行
使用:after伪元素清除浮动（推荐）

.父元素:after { content: ""; display: block; clear: both; }.父元素 { *zoom: 1; }

使用before和after双伪元素（最推荐）

.父元素:before, .父元素:after { content: ""; display: table; }.父元素:after { clear: both; }.父元素 { *zoom: 1; }

水平垂直居中

块级元素

margin: 0 auto;
行内元素

text-align: center；
单行

line-height = height；
多行

display:table-cell; vertical-align: middle;
使用 flex 布局

display:flex; justify-content: center; align-items: center;
使用绝对定位

position:absolute;
(1)

left:50%; top:50%; transform:translateX(-50%); transform:translateY(-50%);
(2)

margin:auto; top:0; right:0; bottom:0; left:0;