h5新特性
- 视频video和音频audio
- 语义化标签：header、footer、nav、section、article
- 表单控件：date、time、email、url、search、calender
- canvas画布
- WebWorker
- WebSocket
- WebStorage：localStorage、sessionStorage
如何理解HTML语义化
- 让人更容易读懂(增加代码可读性)
- 让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重(有利于SEO)
- 在没有css样式下，页面也能呈现出很好的内容结构、代码结构
script标签中defer和async的区别
- script：会阻碍HTML解析，只有下载好并执行完脚本才会继续解析HTML
- async script：解析HTML过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断HTML的解析
- defer script：不会阻碍HTML的渲染，渲染完成之后再按照顺序执行脚本
- 如果有多个defer，会按照顺序加载，async不能保证加载顺序。
CSS3新特性
- 伪类选择器
- 圆角 border-radius
- 阴影 box-shadow text-shadow
- 弹性盒 flex
- @media 媒体查询
- 支持透明度 rgba
- 过渡 transition
- 动画 animation
- 形状转换 transform
常见的行内元素和块级元素
- 行内元素inline，不能设置宽高：span、label、a、em
- 行内块inline-block，可以设置宽高：input、img、textarea
- 块级元素block：div、p、h1-h6、hr、ul、ol、li
替换元素和非替换元素
- 替换元素：若标签的属性可以改变标签的显示方式就是替换元素，比如input的type属性不同会有不同的展现，img的src等。有img、input、iframe
- 非替换元素：div、p、span
CSS选择器有哪些？哪些可以继承？
- id选择器、类选择器、标签选择器、相邻选择器(div+p)、子选择器(ul>li)、后代选择器、通配符选择器(*)、属性选择器(a[rel=“external”])、伪类选择器
- 可继承的属性：
font-size、font-family、color - 不可继承的属性：
border、padding、margin、width、height - 优先级：
!important > style > id > class > tag
line-height如何继承
- 父元素的line-height写了具体数值，比如30px，子元素继承该值
- 父元素的line-height写了比例，比如1.5或2，子元素继承该比例
- 父元素的line-height写了百分比，比如200%，子元素继承的是父元素的font-size*200%计算出来的值
盒模型
- 标准盒模型
宽度 = 内容宽度(content) + padding + border + margin - IE盒模型
宽度 = 内容宽度(content + padding + border) + margin - 属性box-sizing
默认是content-box，border-box转换为IE盒模型
新增伪类
- p:first-of-type：从第一个开始，匹配到的第一个元素
- p:last-of-type：匹配到的最后一个元素
- p:first-child：父元素的第一个子元素
- :enabled：disabled表单控件的禁用状态
- :checked：单选框或复选框被选中
伪类和伪元素的区别
- 伪元素使用双冒号，伪类使用单冒号
- 伪类本质上是弥补常规CSS选择器的不足，以便获取到更多信息；伪元素本质上是创建了一个有内容的虚拟容器
- 可以同时使用多个伪类，而只能同时使用一个伪元素
CSS隐藏元素
- display:none：不占据空间，无法点击，会引起回流(改变了布局)，不会被子元素继承，但其自身隐藏，子元素自然也隐藏
- visibility:hidden：占据空空间，无法点击，只会引起重绘，会被子元素继承，子元素可以设置visibility:visible重新显示
- opacity:0：占据空间，可以点击，引起重绘，会被子元素继承，但是父元素隐藏，给子元素设置opacity：1，子元素也不会显示
- overflow:hidden：占据空间，无法点击，溢出部分隐藏
- transform:scale(0,0)：占据空间，无法点击
元素隐藏滚动条
新增伪类-webkit-scrollbar设置属性:
&::-webkit-scrollbar{
display: none;
}
关于文本溢出
- 单行文本溢出
overflow:hidden;//溢出隐藏
text-overflow:ellipsis;//溢出用省略号显示
white-space:nowrap;//文本不换行
- 多行文本溢出
overflow:hidden;//溢出隐藏
text-overflow:ellipsis;//溢出用省略号显示
display:-webkit-box;//作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical;//设置伸缩盒子的子元素排列方式
-webkit-line-clamp:2;//显示的行数
一个满屏品字如何布局
- 第一种真正的品字
（1）三块宽高是确定的
（2）上面那块用margin:0 auto居中
（3）下面两块用float或inline-block不换行
（4）用margin调整位置使它们居中 - 第二种全屏的品字
上面的div设置成100%，下面的div分别宽50%，用float或inline-block不换行
元素居中
- flex布局
// 父元素 .parent{ display:flex; justify-content:center;//主轴 align-items:center;//侧轴 } - transform平移
定位，top和left50%，transform:translate(-50%,-50%) - margin:auto
定位，四周设置为0，margin:auto - margin负间距
定位，top和left50%，margin-top和margin-left为宽高的一半
弹性盒flex布局
父元素属性
开启弹性盒：dislay:flex
- flex-directon：决定主轴的方向，取值如下：
（1）row(默认值)：主轴为水平方向，起点在左端
（2）row-reverse：主轴为水平方向，起点在右端
（3）column：主轴为垂直方向，起点在上沿
（4）column-reverse：主轴为垂直方向，起点在下沿 - flex-wrap：如果一条轴线排不下，如何换行。
（1）nowrap(默认)：不换行
（2）wrap：换行，第一行在上方
（3）wrap-reverse：换行，第一行在下方 - flex-flow：是flex-direction和flex-wrap的缩写，默认为row nowrap
- justify-content：在主轴方向上的对齐方式
（1）flex-start(默认值)：左对齐
（2）flex-end：右对齐
（3）center：居中
（4）space-between：两端对齐，元素之间的间隔相等
（5）space-around：每个元素两侧的间隔相等，所以元素之间的间隔要比元素与边框的距离大一倍 - align-items：在交叉轴上的对齐方式
（1）flex-start：交叉轴的起点对齐
（2）flex-end：交叉轴的终点对齐
（3）center：居中
（4）baseline：元素的第一行文字的基线对齐
（5）stretch(默认值)：如果元素未设置高度或高度auto，将占满整个容器的高度 - align-content：多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。
（1）flex-start：与交叉轴的起点对齐
（2）flex-end：与交叉轴的终点对齐
（3）center：居中
（4）space-between：与交叉轴两端对齐，轴线之间的间隔相等
（5）space-around：每根轴线两侧的间隔相等
（6）stretch(默认值)：轴线占满整个交叉轴
子元素属性
- order：元素的排列顺序，数值越小，排列越靠前，默认为0。
- flex-grow：元素的放大比例，默认为0，即如果存在剩余空间，也不放大。
- flex-shrik：元素的缩小比例，默认为1，即如果空间不足，该元素将缩小。
- flex-basis：在分配多余空间之前，元素占据的主轴空间，默认值为auto，即元素的本来大小。
- flex：flex-grow、flex-shrik、flex-basis的简写，默认值为0 1 auto，后两个属性可选。
该属性有两个快捷键：
（1）auto(1 1 auto)
（2）none (0 0 auto) - align-self：允许单个元素有与其他元素不一样的对齐方式，可覆盖align-items属性。
link和import的区别
- link属于html，@import属于CSS
- 页面被加载时，link会同时被加载，@import引用的CSS会等到页面加载结束后加载
- link没有兼容性，@import需要IE5以上
- link方式样式的权重高于@import
BFC
- BFC(Block Formatting Contenx)块级格式化上下文，是web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
- 常见定位方案
（1）普通流：默认，从上而下，行内元素水平排列，行满换行，块级元素渲染成一个新行。
（2）浮动：先按普通流位置出现，然后根据浮动方向偏移。
（3）绝对定位：元素具体位置由绝对定位坐标组成。 - BFC特性
BFC属于普通流，容器里面的子元素不会影响到外面，反之亦然。
（1）BFC内部元素是垂直排列的
（2）同一个BFC下margin会重叠
（3）BFC里的元素不会影响外部元素
（4）计算BFC高度时会算上浮动元素
（5）BFC区域不会与float元素重叠
如：两栏布局：左边固定宽度，右边宽度自适应，左边设置左浮动，右边设置overflow:hidden。三栏布局、文字环绕问题 - 形成BFC的条件
（1）根元素(html)
（2）浮动元素
（3）overflow不为visible，为auto、hidden、scroll
（4）display的值为inline-block、table-cell、table、flex、grid
（5）定位元素，position的值为absolute或fixed - 应用
（1）利用BFC避免margin重叠
（2）自适应两栏布局：右边元素有部分会被浮动元素覆盖（但文本信息不会，即文字环绕问题）
（3）清除浮动：当不给父元素设置高度的时候，子元素浮动会导致高度坍塌
三栏布局
- flex布局
- position+margin
<div class="wrap"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> .wrap{ position: relative; } .left,.right{ position:absolute; width: 100px; height: 100px; top: 0; right: 0; } .left{ left: 0; } .center{ height: 100px; margin: 0 100px; } - float+margin
<div class="wrap"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </div> .wrap{ overflow: hidden; } .left,.right{ width: 100px; height: 100px; float: right; } .left{ float: left; } .center{ height: 100px; margin: 0 100px; }
px、em和rem
- px是相对长度单位，是相对于显示器屏幕分辨率而言的。
- em是相对于父元素的font-size
- rem是相对于根元素(html)的font-size
rem
1rem = html的font-size值
适配原理：js设置html的font-size = 设备宽度 / 设计稿宽度 * 100，移动设备宽度/设计稿宽度 是渲染效果相对于设计稿的缩放比，乘以100是为了把font-size放大100倍，因为当font-size小于浏览器支持的最小字体时，浏览器会把这个值按照最小字体处理，乘以100是为了好计算。(假如设计稿750，设计稿上的width是50px，设置rem为50/100=0.5rem)
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
maxWidth = 640;
};
if (width > maxWidth) {
width = maxWidth;
}
var rem = width * 100 / designWidth;
//兼容UC开始
rootStyle="html{font-size:"+rem+'px !important}';
rootItem = document.getElementById('rootsize') || document.createElement("style");
if(!document.getElementById('rootsize')){
document.getElementsByTagName("head")[0].appendChild(rootItem);
rootItem.id='rootsize';
}
if(rootItem.styleSheet){
rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
}else{
try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
}
//兼容UC结束
docEl.style.fontSize = rem + "px";
};
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
移动端响应式
- rem
- meta标签的viewport
<script>
(function (screen) {
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth / screen;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
// andriod 2.3
if (version > 2.3) {
document.write('<meta name="viewport" content="width=' + screen + ', minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi, minimal-ui, viewport-fit=cover">');
// andriod 2.3以上
} else {
document.write('<meta name="viewport" content="width=' + screen + ', target-densitydpi=device-dpi, minimal-ui">');
}
//其他系统
} else {
document.write('<meta name="viewport" content="width=' + screen + ', user-scalable=no, viewport-fit=cover">');
}
})(750);
</script>
插件：postcss-px-to-viewport
3. vw、vh
4. 媒体查询
5. 百分比
6. flex
浏览器兼容问题
- 通配符设置内外边距为0，不同浏览器默认的padding和margin不同。*{padding：0；margin：0；}
- 块属性标签float后，又有横行的margin情况，在IE9以下margin比设置的大，后面的一块会被顶到下一行。解决：使用flex布局，或将其转换为行内元素display:inline
- 默认图片有间距：使用float为图片布局
- 获取窗口大小的兼容写法
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;
渐进增强和优雅降级
- 渐进增强：针对低版本浏览器进行页面构建，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
1633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
