DOCTYPE
- doctype是h5的文档声明。
- 必须放在html第一行。
- 有三种类型：Transitional(过渡，要求宽松)、Strict(严格,禁止任何表现层的标识和属性)、Frameset(框架,针对框架页面使用)。
H5语义化
- 代码结构清晰,可读性提升。
- 利于收索引擎优化(seo)。
- 利于无障碍阅读。
- 添加新标签header、nav、aside、detailes、dialog、canvas等。
BFC
- BFC(block formatting context)块级格式化上下文。
- 一种独立的布局环境,内外布局互不影响。
- 可通过float(非none)、position、display、overflow触发。
- 同一个BFC内的元素会发生margin重叠。
盒模型
- 由content、padding、border、margin组成。
- 标准模式：box-sizing: content-box。
- 怪异模式(IE)：box-sizing: border-box，该模式下width包括content、padding、border。
块级元素、行内元素、可变元素
- 块级元素，独占一行，可以自定义宽高与4个margin值：div、p、h、table、tr、td。
- 行内元素，宽高由内容决定，无法定义上下margin值：img、input、textarea、select。
- 可变元素，由上下文决定属性：button、iframe、script。
- 元素可通过display转换类型，block转为块级元素，inline转为行内元素。
清除浮动
- 父元素会因子级元素浮动引起的内部高度为0。
- 清除方法：添加空白标签、父级overflow设置hidden、after伪元素、父级定义height。
选择器
- id选择器、类选择器、标签选择器、后代选择器、相邻后代选择器(子选择器)（ul > li）、兄弟选择器（li ~ a）、相邻兄弟选择器（li + a）、属性选择器（a[rel]=“external”]）、伪类选择器（a:hover, li:nth-child）、伪元素选择器（::before, ::after）、全局选择器（*）.
- 优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。
回流与重绘
- dom结构与页面布局变化时会产生回流。
- 元素颜色、背景发生变化会产生重绘。
- 有回流必有重绘，有重绘不一定有回流。
- 优化：尽量css属性简写、避免节点层级过多、避免使用css表达式(expression,仅ie识别)、操作dom使用documentfragment(保存元素的容器)。
link与@import
- link是xhtml标签，@import是css语法。
- link还可定义rss与rel连接属性，@import只能加载css。
- 加载顺序不同，link的css在html加载时同时加载，@import是页面加载完后加载。
- 使用link加载的css可以使用js修改样式，@import不能。
iframe
- iframe能将网页原封不动的显示出来。
- 不利于seo。
- 会增加服务器的http请求。
img的alt与title
- alt是图片加载失败时的替代文字，title是鼠标移入图片时的文字。
- alt是img必要属性，title不是。
- 搜索引擎对图片意义判断主要靠alt属性。
CSS3新增伪类
- :nth-child(n)父级下第n个子元素，n可为数值与函数、
- :nth-last-child(n)从后开始查找,父级下第n个子元素
- :last-child最后一个子元素。
- :only-child若为父元素下唯一子元素，则选中。
- :nth-of-type(n)查找第n个标签的元素。
- :first-of-type选中父元素下第一个类型的元素。
- :last-of-type选中父元素下最后一个类型的元素。
- :only-of-type如果父元素下的子元素只有一个类型的元素，则选中该元素。
- :empty选中不包含子元素和内容的类型的元素。
- :target选中当前活动的元素。
- :not()选择非元素的每一个元素。
- :enabled控制表单控件的禁用状态。
- :disabled控制表单的禁用状态。
- :checked单选框和复选框被选中。
CSS初始化
- 兼容性问题，不同浏览器对部分标签默认值不同，需统一样式。
- 初始化CSS可减少页面代码量，更加简洁。
- 最简单的初始化*{padding: 0; margin: 0;}(会遍历所有标签,增加页面加载时间,不建议此法)。一般html,body{padding:0;margin:0;}。
display:none与visibility:hidden
- 均可隐藏指定元素。
- display : none 隐藏对应的元素，在文档布局中不再分配空间（回流+重绘）。
- visibility:hideen 隐藏对应的元素，在文档布局中仍保留原来的空间（重绘）。
rgba()与opacity透明
- opacity，不透明度，作用于元素及元素内所有内容。
- rgba()，颜色设置，作用于元素颜色或背景色，子元素不会继承效果。
display值说明
- inline：转换为行内元素。
- block：转换为块级元素。
- inline-block：转换为行内块元素，元素之间可能会有间隙，可用font-size：0去除。
- table：作为块级表格显示。
- inline-table：作为行内表格显示。
- none：隐藏元素且不占原位置。
- flex：css3新增属性，弹性布局使用。
position值说明
- absolute：绝对定位，脱离文档流，相对于最近已定位父元素进行偏移(若没有则相对)。
- relative：相对定位，不脱离文档流，相对于其正常位置进行偏移。
- fixed：固定定位，脱离文档流，相对于浏览器窗口进行偏移(屏幕滚动位置不变)。
- static：默认值，不脱离文档流，无定位。
- sticky：粘性定位，类似 relative与fixed混合，元素滚动至指定距离前为相对定位，之后为固定定位。
文本换行
.my-div {
width: 100px;
word-wrap: break-word;/*强制换行*/
/* overflow: hidden; */
/* text-overflow:ellipsis; *//*溢出后显示省略号*/
}
文字划线
.my-div{
text-decoration: underline;/*下划线*/
/* text-decoration: overline; *//*顶划线*/
/* text-decoration: line-through; *//*删除线*/
}
div居中
- 绝对定位配合margin:auto
.my-div{
width: 100px;
height: 100px;
background-color: red;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
- 绝对定位配合transform
.my-div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
- flex配合margin:auto
body {
height: 100vh;
width: 100vw;
display: flex;
}
.my-div {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
- grid的place-items居中
body {
height: 100vh;
width: 100vw;
display: grid;
place-items: center;
}
.my-div {
height: 100px;
width: 100px;
background-color: red;
}
CSS实现三角形
宽高为0，四个border值除bottom外其他均透明
.box {
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid red;
border-left:50px solid rgba(0,0,0,0);
}
实现0.5px的线
- 利用transform缩放：
div::after{
content: "";
width: 200%;
height: 200%;
border: 1px solid red;
background: red;
transform: scale(0.5);
}
- 利用盒子阴影box-shadow：
div{
box-shadow: 0px 0px 0px 0.5px red;
}
- 利用::after定位伪类
div::after {
position: absolute;
content: "";
background-color: red;
width: 100%;
height: 0.5px;
bottom: 0px;
}
- 利用线性渐变linear-gradient：
div::after {
display: block;
position: absolute;
content: "";
width: 100%;
height: 1px;
bottom: 0px;
background-color: red;
background: linear-gradient(to bottom, transparent 50%, red 50%);
}
- 利用svg
.my-div{
background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></svg>");
height: 1px;
width: 100%;
}
CSS的GPU加速
- 利用GPU渲染，减少CPU操作。
- 移动端，css做图片滑动、滚动，可能出现卡顿、闪白，可使用GPU硬件加速。
- 利用translateZ(不会触发重绘)触发加速：
.my-div {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/**或者**/
transform: rotateZ(360deg);
transform: translate3d(0, 0, 0);
}
- 利用will-change触发加速：
.my-div{
will-change: transform;
}
响应式布局
- 媒体查询，@media，不同尺寸屏幕定义不同样式。
- 百分比，使用“%”作为单位，按照百分比缩放。
- 视口单位，vh/vw，是相对于视图窗口的单位，类似%。
- 相对长度单位，rem，相对于根元素html的font-size属性，默认1rem = 16px，可配合@media动态改变font-size值。
- head中添加如下代码，content中width值为设备宽度，initial-scale为初始缩放值，maximum-scale为最大缩放值，minimum-scale为最小缩放值，user-scalable为是否允许页面缩放。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">
</head>
- style中根据屏幕尺寸改变html的font-size。
<style>
@media screen and (max-width:1920px) {
html {
font-size: 16px;
}
}
@media screen and (max-width:1000px) {
html {
font-size: 50px;
}
}
</style>
网页置灰
利用css滤镜(filter)控制灰度(grayscale)：
<style>
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);/*灰度*/
filter: gray;
}
</style>
改变主题色
- css属性覆盖。
- css变量替换。
656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
