前端学习笔记--html+css

HTML

window经常使用属性与方法

window对象的经常使用属性

• innerWidth/innerHeight:返回窗口的文档显示区的宽度/高度(无单位)
• outerWidth/outHeight:加上工具条和滚动条的宽度/高度
• self:返回当前窗口的引用
• top:返回最顶层的父窗口
• parent:返回父窗口
• location对象（包含当前url的信息）

//https://juejin.im/editor/drafts/5d54066b51882557c143c8af
location.host;  //juejin.im 主机名+端口号
location.hostname; //juejin.im 主机名
location.port;  //'' 端口号
location.pathname; //请求的路径 /editor/drafts/5d54066b51882557c143c8af
location.href; //完整的URL //https://juejin.im/editor/drafts/5d54066b51882557c143c8af
location.protocol;//https: URL协议
location.search; //'' 返回URL的查询部分 
复制代码

• localStorage:建立一个本地存储的键值对，没有过时时间，除非手动删除
• sessionStorage:建立一个本地存储的键值对，保存当前会话/窗口的数据，关闭窗口以后会删除数据

//localStorage
localStorage.setItem('name','kk');//存储
localStorage.getItem('name'); //获取

//sessionStorage
sessionStorage.setItem('lastname','smith');
sessionStorage.getItem('lastname');
复制代码

window的经常使用方法

• window.alert()
• window.confirm() 弹出一个确认框
• window.close()
• window.open(uri, [name], [features]) 打开一个浏览器窗口，显示指定的网页。name 属性值能够是“_blank”、“_self”、“_parent”、“_top”、任意指定的一个窗口名。
• window.blur() 使当前窗口失去焦点
• window.focus() 使当前窗口得到焦点 windowd的属性和方法

document经常使用属性和方法

document经常使用的属性

• document.body 获取当前文档的元素
• document.cookie 设置或返回与当前文档有关的索引cookie
• document.title 返回当前文档的标题

经常使用方法

• document.write() 向网页写入内容
• document.createElement(tag)
• document.body.appendChild(tag) 向HTML的body插入子标签

src与href的区别

src：指向的是外部资源的位置，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载编译完（这就是为何js脚本要放在底部而不是头部）

href指向的是网络资源所在位置，创建和当前文档之间的联系，当浏览器解析到该元素时，会并行下载资源而且不会暂停对当前文档的处理。这就是为何建议用<link href='xx.css'>来加载css文件

src是引入插入，src的内容是页面必不可少的部分

href是引用，是与该页面有关联

link标签中的type、rel、href属性

• href：指定引入文件的地址
• type：定义引入文件的类型，让浏览器能使用合适的解析方式解析文件
• rel：定义连接的文件和HTML文档的关系，stylesheet的意思就是样式调用

css引入的两种方式：<link>和@import

从属关系的区别：

• @import是css的语法，只有导入样式表的做用
• link是html提供的标签，不只能够加载css文件还能够定义rss、rel链接属性

加载顺序的区别：

• @import引入的css会等到页面加载完毕后再加载
• 加载页面时，link引入的css会被同步加载

权重区别：

• link引入的样式权重大于@import引入的样式。

html中alt与title的区别

<img src='#' alt='无图片' title='美图' />
复制代码

当显示不出图片时，会显示alt信息，放上去会出现title信息。

当图片正常显示时，不会出现alt信息，鼠标放上去会出现title信息。

repaint与reflow

repaint是重绘，reflow是回流

repaint是对某个元素进行重绘，reflow是对整个页面进行重排，也就是页面全部DOM元素从新渲染。

回流必定会致使重绘，反过来不必定

从性能优化方面，reflow比repaint性能消耗大

---

触发repaint：

• color的修改

触发reflow（改变页面布局和几何信息）

• 页面开始渲染的时候
• width/height/border/padding/margin的修改
• 动画，:hover等伪类引发的元素改动
• display：none/block
• background的修改
• resize页面
• scroll页面
• 读取元素的属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))

浏览器渲染过程当中的回流重绘

浏览器渲染过程：

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树render tree
  • 遍历DOM树的每一个节点
  • 对于可见节点（display:none为不可见节点，利用visibility和opacity隐藏的节点仍是会显示在render树上；不会渲染输出的节点：script、meta、link），
  • 找到CSSOM树中对应的样式，组合生成render树。
• 回流：计算render树的节点在页面的位置和大小
• 重绘：将渲染树上的每一个节点转换为屏幕上的实际像素。

减小回流和重绘

因为浏览器有优化机制，浏览器会维护一个队列，将引发回流重绘的操做都放入这个队列，等达到必定数量再清空队列，进行一个批处理。这样就会让屡次的回流、重绘变成一次回流重绘。

可是获取布局信息时，会强制队列刷新触发回流重绘来返回正确的值，好比访问如下属性：

offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollTop、scrollLfet、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect()
复制代码

一、批量修改DOM

• 使元素脱离文档流
  • 设置display：none
  • 将元素移动到文档碎片documentFragment
  • 将元素拷贝到一个脱离文档的节点
• 对其进行屡次样式修改，cssText
• 将元素从新添加到文档中

因为有浏览器优化机制，因此上面的操做效果不受很明显
复制代码

二、避免触发同步布局事件

当咱们访问元素的一些属性时，会强制队列刷新，进行强制同步布局。好比：

function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + 'px';
    }
}
复制代码

在每次循环的时候，都读取了box的一个offsetWidth属性值。这就致使了每一次循环的时候，浏览器都必须先使上一次循环中的样式更新操做生效，才能响应本次循环的样式读取操做。每一次循环都会强制浏览器刷新队列。

能够优化为：

const width = box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
    }
}
复制代码

三、避开回流重绘，使用CSS3硬件加速

使用css3来硬件加速的原理是：新建合成层。

• 使用css3硬件加速，可让transform、opacity、filters这些动画不会引发回流重绘
• 对于动画的其它属性，好比background-color这些，仍是会引发回流重绘的，不过它仍是能够提高这些动画的性能。

html第一行的<!DOCTYPE>的做用

做用：定义文档类型，告知浏览器解析器有什么文档标准解析这个文档。

<!DOCTYPE>位于html文档的第一行，处于全部标签以前。

<!DOCTYPE>不属于HTML标签

<!DOCTYPE>不区分大小写，没有结束标签

HTML5须要写为<!DOCTYPE html>。

当DOCTYPE不存在或格式不正确会致使文档以兼容模式呈现。

行内元素 块级元素 空元素

• 行内元素：a b span img input select(下拉列表) strong(强调的语气)
• 块级元素：h1-h4 p div ul ol li dl dt dd
• 空元素(即没有内容的html元素)：img input hr br meta link(定义文档与外部资源的关系，经常使用于连接样式表文件)

meta标签

meta标签可分为两大部分，http-equiv和name

• http-equiv至关于http的文件头做用，向浏览器传送一些有用的消息，帮助浏览器正确显示文件

<meta http-equiv='content-Type' content='text/html' charset='UTF-8'>

• name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

标注网页的做者：<meta name='author' content='jack'>

页面关键词，用于被搜索引擎收录 <meta name='description' content='新闻中心,包含有时政新闻、国内新闻、国际新闻'

meta标签

base标签

<base>为页面上全部相对连接规定默认URL或默认目标

• <base>必须定义在<head>内
• 必须有href和target属性
• <base>没有结束标签
• <base>能够排在<head>元素中第一个元素的位置，这样head区域中其余元素就可使用 元素中的信息了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<base href="//www.runoob.com//images/" target="_blank">
</head>
<body>

<p><img src="logo.png" > - 注意这里咱们设置了图片的相对地址。能正常显示是由于咱们在
head 部分设置了 base 标签，该标签指定了页面上全部连接的默认 URL，
因此该图片的访问地址为 "http://www.runoob.com/images/logo.png"</p>

<p><a href="//www.runoob.com/">runoob.com</a> - 注意这个连接会在新窗口打开，即使它没有 target="_blank" 属性。
由于在 base 标签里咱们已经设置了 target 属性的值为 "_blank"。</p>

</body>
</html>
复制代码

如下哪一个元素不具备有效的target属性？

A、 area

B、 form

C、 base

D、 iframe

答案：D

html标签

html5有哪些新特性？如何处理html5标签的浏览器兼容问题？

html5主要是关于图像、位置、存储、多任务等功能的增长。

新特性：

• 绘画 canvas (<canvas>标签只是一个图形容器，具体图像需用js绘制)
• 媒体元素 <video> <audio>
• 表单控件类型 color date time email search url
• 存储localStorage、sessionStorage
• 语义化更好的内容元素：如<article> <session> <header> <footer> <nav>
• 新的技术 webworker, websocket, Geolocation;

移除的元素：

• 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
• 对可用性产生负面影响的元素：frame，frameset，noframes；

如何支持html5新标签

• IE6-8支持经过document.createElement方法产生标签，能够利用这一特性让这些浏览器支持html5新标签，但还需添加标签默认的样式

HTML的离线缓存

在用户没有与因特网链接时，能够正常访问站点或应用，在用户与因特网链接时，更新用户机器上的缓存文件。

原理：

HTML5的一个新特性：离线存储，经过将须要离线存储在本地的文件列在一个manifest配置文件中。

怎么用？

在HTML文件的头部加上manifest属性，属性值为建立的.appcache文件

<!DOCTYPE HTML>
<html manifest='cache.manifest'> ... </html>
复制代码

cache.manifest文件的书写方式，就像下面这样：

CACHE MANIFEST
#v0.11 //版本号，用于区分更新后的.manifest文件

CACHE:  
##在这下面写须要离线缓存的资源文件，因为包含manifest文件的页面将自动离线存储，因此不须要列出来
js/app.js
css/style.css

NETWORK:    
##在这下面列出只有在线状况才能访问的资源，他们不会被离线存储。
##但若是在CACHE和NETWORK都有相同的资源，那这个资源仍是会被离线存储，CACHE的优先级更高
resourse/logo.png

FALLBACK: 
##FALLBACK表示若是访问第一个资源失败，那就使用第二个资源来替换
/  /offline.html 
##这句的意思是当访问根目录下任何一个资源失败了，那么就去访问offline.html。
复制代码

浏览器怎么解析manifest文件呢？

分两种状况

• 在线的状况下，浏览器发现HTML头部有manifest文件，就会请求manifest文件。此时若是是第一次访问则没有缓存过，那就会根据manifest文件的内容下载对应的资源并离线缓存。

  若是不是第一次访问，且资源已经离线存储，浏览器会先使用离线存储的资源显示页面，而后浏览器再去比对新的manifest文件，若是文件没有发生变化，则不作任何操做。若是发生变化，则会从新下载新的资源并存储下来，等到下一次打开页面才生效。

• 若是是离线状况，浏览器就直接根据离线存储的资源显示页面。
  资料

cookie、localStorage、sessionStorage的区别

cookie

• 由于HTTP是无状态的，对事务没有记忆能力。cookie是网站用来标识用户身份的(好比存储用户信息)，存储在本地的数据。
• 在第一次请求服务端时，服务端在响应报文头添加set-cookie属性，属性值便是用户的cookie值。浏览器在下次请求时会自动在请求报文头加上Cookie属性，属性值即由服务端产生。
• cookie数据始终在同源的HTTP请求中携带(即便不须要)，在浏览器和服务端之间来回传输

storage

• sessionStorage和localStorage都是在本地保存，不会发送给服务端

共同点：

• 都是保存在客户端，且同源的。

数据有效时间不一样

• localStorage是永久性保存，除非手动删除
• sessionStorage保存的数据在当前窗口关闭后自动删除
• cookie数据在cookie设置的过时时间前一直有效，即便关闭窗口或浏览器

做用域不一样：

• sessionStorage在不一样的浏览器窗口不共享
• cookie和localStorage在全部同源窗口共享

iframe内嵌框架的缺点？

iframe通常用来包含别的网站的内容

• iframe会阻塞主页面的onload事件
• 搜索引擎的检索程序没法解读这种页面
• iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载

label的做用

label标签是用来定义表单控制间的关系，当点击label标签时，会自动将焦点转到和标签相关的表单控件(<input>)

##第一种写法
<label>
    userName:<input type="text" name='userName'/>
</label>

##第二种写法，使用for属性来创建于表单的联系
<label for='name'>userName</label>
<input id='name' type="text" name='userName'/>
复制代码

HTML5<input>的autocomplete属性

有两个属性值，on和off。

autocomplete属性规定表单输入的字段是否开启自动完成功能。 若开启，当用户在输入时，浏览器会根据以前输入过的值显示出来。

autocomplete属性适用于如下的<input>类型：text、search、url、tel、email、password、range、color、datepickers

event.target和event.currentTarget

• event.target返回触发事件的元素

• event.currentTarget返回绑定事件的元素

事件委托

事件委托：将事件绑定在父元素上，利用事件的冒泡，从而父元素可以处理子元素的事件响应

好处：

• 减小事件的注册，提升性能
• 经过事件委托添加的事件，对后来添加的子元素仍有效

mouseover和mouseenter的区别

• mouseover：会触发事件冒泡，即不管鼠标指针穿过被选元素或子元素都会触发，对应的事件是mouseout
• mouseenter：不会触发事件冒泡，即只有当鼠标指针穿过被选元素才会触发，对应的事件是mouseleave

<button onmouseover=‘myMouseOver’  onmouseout='myMouseOut'>click Me one</button>

<button onmouseenter=‘myMouseEnter’  onmouseleave='myMouseLeave'>click Me two</button>
复制代码

当被选元素没有子元素时，两个事件没有区别

touch事件

• touchstart：当按下鼠标时（一次操做只会触发一次）
• touchmove：当按下鼠标移动时不断触发（触发屡次）
• touchend：当放开鼠标时触发（触发一次）
• touchcancel：当一些更高级别的事件发生时（好比电话接入或弹出信息）会取消当前的touch操做，通常会在ontouchcancel时暂停游戏、存档等操做。

哪些事件会触发冒泡

• blur、load、unload、focus、mouseenter、mouseleave：不会

• click、focusin、focusout、input、keydown、keyup、mousedown、mouseup、mouseout、mouseover、scroll、wheel、select

WebSocket

因为HTTP协议是一个请求-响应协议，因此就算HTTP协议是创建在TCP协议（全双工）之上，这种请求-应答机制会限制了全双工通讯。

因此html5新增了WebSocket协议—— 在单个TCP链接上进行全双工通讯的协议，目的是在浏览器和服务器之间创建一个不受限的双向通讯的通道--全双工通讯，客户端和服务端均可以主动向对方发送消息。

如何发起WebSocket链接

一、客户端首先向服务器发送一个HTTP请求，并包含一些附加头信息：Connection：upgrade；Upgrade：WebSocket。代表这是一个申请协议升级的HTTP请求。

二、服务端解析这些附加头信息以后产生应答信息返回给客户端，而后WebSocket链接就创建起来了。

三、链接创建以后，双方就能够基于TCP链接互相交换数据，无需浏览器发送请求后，服务端响应后才返回数据。这个链接会持续到某一方主动关闭链接。

WebSocket的特色

一、没有同源限制，客户端能够与任何服务器通讯。

二、数据格式轻量，性能开销小，通讯高效。

三、创建在TCP协议之上

四、能够发送文本、二进制文件

五、一次握手，创建全双工通讯

如何实现浏览器内多个标签页之间的通讯？

一、WebSocket

二、localStorage

localStorage是多个同源标签页共享的存储空间（sessionStorage是会话级的存储空间，每一个标签页之间都是独立的）

• 如何实现？

  当localStorage在另外一个页面被添加、修改、删除时会触发storage事件，因此能够在当前页面监听事件。

三、SharedWorker

被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)
let worker = new SharedWorker('worker.js')
复制代码

i和em、strong和b标签的区别

• i表示斜体，em表示强调的文本（呈现的也是斜体）
• b是加粗，strong有增强语气的含义（使用阅读设备阅读时，strong会重读）

innerHTML,innertext,textContent区别：

let p=document.querySelector(".p");
console.log(p.innerHTML);	//我是p<span>我是span</span>
console.log(p.innerText);	//我是p
console.log(p.textContent);	//我是p我是span
复制代码

innerHTML：返回调用元素的全部子节点（包括注释、元素、文本节点）

innerText：返回调用元素的全部文本内容，包括子节点的文本，受样式影响

textContent：返回调用元素的全部文本内容，忽略样式，即便设为不可见仍能获取到

浏览器渲染的流程

• 解析html文件，生成DOM Tree，解析CSS文件，生成CSSOM Tree
• 将DOM Tree与CSSOM Tree结合，生成Render Tree
• 根据Render Tree渲染绘制，将像素渲染到屏幕上

综上：

• DOM解析与CSS解析是并行的过程，所以CSS加载不会阻塞DOM树的解析
• 因为DOM的渲染是靠Render TREE，而Render Tree依赖于CSS Tree，因此CSS Tree会阻塞DOM树的渲染
• 在CSS后的js会被CSS阻塞，CSS加载会阻塞后面js语句的执行

CSS

line-height不加单位

• 当使用font连写时，必须写font：font-size font-family
• line-height不加单位时，真实高度=font-size*数值，能够写成font:12px/1.5 Arial，表示line-height:1.5*12

line-height是能够继承的

visibility：hidden和display：none的区别

visibility：hidden 虽不可见但仍占据空间。初次渲染页面时会被渲染。

display：none 不可见也不占据空间。不会被渲染。

盒子模型

CSS盒子模型具备内容（content）、填充（padding）、边框（border）、边界（margin）

一般咱们说的width、height指的是内容（content）的宽高，除了IE.

一个盒子模型的宽=width+padding宽+border宽

一个盒子模型的高=height+padding高+border高

对于IE:

width指的是：border+padding+内容的宽

一个盒子的宽度=width+左右margin

---

CSS中哪些属性能够继承自父类

字体：font-family，font-size，font-style，font-weight，font-stretch，font-size-adjust

文本系列：text-indent，text-align，line-height，word-spaceing，letter-spacing，text-transform，direction，color；

box-sizing经常使用的属性，做用分别是什么

经常使用的属性：border-box、content-box、inherit

做用：

content-box（默认）：设定的宽高度分别是内容（content）区域的宽高，在内容区域外绘制padding和border

border-box：padding和border在已设定的宽高内进行绘制，内容（content）的宽高度等于宽高度减去padding和border的宽高

background-clip

定义背景从哪里开始绘制

• background-clip：border-box（默认） 从border开始绘制
• background-clip：padding-box
• background-clip：content-box 从内容开始绘制

!important的优先级

• 比内联样式级别高

<style type="text/css">
.testClass{ 
color:blue !important;
}
</style>
<body>
    <div class="testClass" style="color:red;">
        测试Css中的Important    //显示蓝色
    </div>
</body>
复制代码

• 设置两个color，一个有!important，一个没有

.testClass{ 
    color:blue !important;
    color:red;
}
#ie6下会显示为红色
#其余浏览器都显示为蓝色
复制代码

改为如下形式则都显示为蓝色

.testClass{ 
    color:blue !important; 
} 
.testClass{ 
    color:red; 
}
复制代码

• 父类设置!important，子类也设置了一样的样式，子类仍显示为子类的样式

#parent{
    color: blue !important;
    color: red;
        }
.son{
    color: green;   //子类的字体显示绿色
}
复制代码

常见兼容性问题

• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可经过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
• IE下 event 对象有 event.x，event.y 属性，而 Firefox 下没有。Firefox 下有 event.pageX，event.PageY 属性，而 IE 下没有。 解决办法：var mx = event.x?event.x:event.pageX;
• 浏览器默认的 margin 和 padding 不一样。解决方案是加一个全局的 *{margin: 0; padding: 0;} 来统一
• 超连接访问事后 hover 样式就不出现了，被点击访问过的超连接样式不在具备 hover 和 active 了，解决方法是改变 CSS 属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

flex布局

采用flex布局的元素称为flex容器，flex容器默认有两根轴，分别是水平方向的主轴和垂直方向的交叉轴。子元素默认沿着主轴方向排列。

设置在容器上的属性有：

• flex-direction：设置主轴的方向
• flex-wrap：设置子元素若是在一条轴线上排布不下是否换行
• justify-content：设置子元素在主轴上的对齐方式
• align-items：设置子元素在交叉轴上的对齐方式

设置在子元素上的属性有：

• flex-grow：设置子元素的放大比例，在剩余空间能分配到的比例
• flex-shink：设置子元素的缩晓比例
• flex-basic：表示在分配剩余空间前，子元素在主轴上占据的空间大小，默认是auto
• flex：是flex-grow flex-shink flex-basic的缩写
• order：子元素的排列顺序

何时须要清除浮动？有什么方法？

一个块级元素若是没有设置高度height，那么其高度就是由里面的子元素撑起。若是子元素浮动，就会脱离标准文档流，致使父元素没有高度。若是不清除浮动，父元素会出现没有高度，设置border和background都不能解析，并且后面的非浮动元素会被浮动元素所遮挡。

方法：

• 父元素div定义一个伪元素::after，父元素添加zoom：1属性（兼容IE8如下不支持：after伪类）-- 推荐方法

  • 优势：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
  • 缺点：代码量多

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*清除浮动代码*/
   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} //是visibility不是display
   .clearfloat{zoom:1}
   
   </style> 
   
<div class="div1 clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>
<div class="div2">
   div2
</div>

复制代码

• 在父元素的结尾处添加一个空div标签，并清除浮动

  • 优势：代码量少，浏览器兼容性好
  • 缺点：若是页面浮动的布局多，就要添加不少空div

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*清除浮动代码*/
   .clearfloat{clear:both}
   
   </style> 
   
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
   div2
</div>
复制代码

• 经过触发BFC的方式，能够实现清除浮动效果 (BFC)。能够给父级添加： overflow为 hidden|auto|scroll（则overflow不为visible）。必须设置宽度或zoom：1，不能定义height

  • 优势：简单，代码量少，浏览器支持好
  • 缺点：不能和position配合使用，由于超出的尺寸的会被隐藏

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
   
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
</div>
复制代码

• 父元素div定义高度

  • 缺点：只适合高度固定的布局

• 父元素也一块儿浮动

  • 缺点：会产生新的浮动问题

如何实现子元素在父元素里水平/垂直/水平垂直居中

1、水平居中

1）行内元素：把行内元素包裹在一个属性display：block的父层元素中，而且在父层元素添加以下属性：

.parent{
    text-align:center;
}
复制代码

2）块级元素：

.item{
    margin: 10px auto;  //垂直方向能够随意设置
}
复制代码

3）多个块状元素：使用flex布局

.parent {
    display: flex;
    justify-content: center;
}
复制代码

2、垂直居中

1）单行的行内元素：设置子元素的height和line-height和父元素同样的高度

.parent {
    background: #222;
    height: 200px;
}

/* 如下代码中，将 a 元素的 height 和 line-height 设置的和父元素同样高度便可实现垂直居中 */
a {
    height: 200px;
    line-height:200px; 
    color: #FFF;
}
复制代码

2）多行行内元素：在父容器设置display: table-cell 和 vertical-align: middle

.parent {
    background: #222;
    width: 300px;
    height: 300px;
    /* 如下属性垂直居中 */
    display: table-cell;
    vertical-align: middle;
}
复制代码

3）已知高度的块状元素

.item{
    position:absolute;
    height:100px;
    top:50%;
    margin-top:-50px;   /*为自身高度的一半*/
}
复制代码

4）未知高度的块状元素

.item{
    position:absolute; /*子绝父相*/
    top:50%;
    transform:translateY(-50%);   /*为自身高度的一半*/
}
复制代码

3、水平垂直居中

1）flex布局方案1

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 注意这里须要设置高度来查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}
复制代码

flex布局方案2

.parent{
    background: #DD4A68;
    width: 200px;
    height: 200px;
    display: flex;
}
.son{
    width: 50px;
    height: 50px;
    background: #4b67af;
    margin: auto;
}
复制代码

2）已知宽高度的解决方案1（不需计算）

.parent{
    width:300px;
    height:300px;
    position:relative;
}
.son{
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto; /*会根据父子盒子宽高度去计算*/
}
复制代码

3）已知宽高度的解决方案2（需计算）

.parent{
    width:300px;
    height:300px;
    position:relative;
}
.son{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;    /*相对父盒子的高度的50%*/
    left:50%;
    margin-top:-50px; /*自己高度的一半*/
    margin-left:-50px;
    
}
复制代码

4）未知宽高度：使用CSS3的transform属性

.parent{
    width:300px;
    height:300px;
    position:relative;
}
.son{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);/*相对自己已有宽高度的50%移动*/
}
复制代码

5）使用display：table-cell

.parent{
    width:300px;
    height:300px;
    position:table-cell;    //相似td/th
    text-align:center;      //水平居中
    vertical-align:middle;  //垂直居中
}
.son{
    width:100px;
    height:100px;
    display:incline-block;  //行内块级
}
复制代码

relative和absolute的区别

• relative属于正常的文档流，absolute脱离文档流

• 定位原点relative是相对自己在文档流中的位置偏移，本来占据的空间仍然保留。

  absolute是相对最近的定位流父元素（除了static）的位置进行偏移

canvas和svg的区别

svg

• svg是一种使用xml描述2D图形的语言
• svg可伸缩矢量图形是基于可扩展标记xml，用xml格式定义图形，所以是一种与图像分辨率无关的矢量图形格式。
• svg图像在放大和缩小尺寸不会影响图像的质量
• svg基于xml，意味着svg绘制出来的每一个图形的元素都是独立的DOM节点，能够为某个元素绑定事件
• svg是万维网联盟的标准
• 最适合带有大型渲染区域的应用程序（好比谷歌地图），不适合游戏应用

<svg width="100%" height="100%"  >

        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />

    </svg>
复制代码

canvas

• canvas经过JavaScript语言来绘制2D图形，输出标量画布，就像一张图片同样，放大会失真
• 不支持事件处理器
• 可以以.jpg或.png格式保存结果图像
• canvas是逐像素进行渲染的，依赖分辨率
• 在canvas中，一旦图形被绘制完成，它就不会继续获得浏览器的关注。若是其位置发生变化，那整个场景都须要从新绘制。

资料

px、em、rem的区别？

• px（像素）是相对长度单位。是相对显示器屏幕分辨率而言
• em是相对长度单位。相对当前对象内文本的字体尺寸。（如当前对行内文本的字体尺寸未被人为设置且父元素也没有设置，则相对于浏览器的默认字体尺寸。）
• rem是相对根元素字体大小。

定义CSS的方式

一、外联样式/外部样式表

二、内部样式表（在head标签里定义style标签）

三、行内样式/内联样式（在html元素定义style属性）

四、使用@import引入其余css文件

使用CSS Sprite精灵图/雪碧图

• 利用CSS Sprite将多张图片合成一张，能减小网页的http请求，从而大大提供页面的性能

伪类和伪元素的区别

• 伪类：用于选择DOM树以外的信息—— 包含那些匹配指定状态的元素：visited，：hover，：active，：link。或是不能用简单选择器进行表示的信息，须要逻辑计算的—— ：first-child，：first-of-type，：target

• 伪元素：DOM树上没有定义的虚拟元素，不一样于其余选择器，它不以元素为最小选择单元，它选择的是元素指定内容—— ::before，::after，::selection（表示选择元素被选中的内容）

注意

p：first-child表示选择的元素既是p元素，又是其父元素的第一个子元素。

p:first-of-type表示选择的元素既是p元素，也是其父元素的第一个子元素

新增伪类

CSS选择器

一、id选择器

二、类选择器

三、标签选择器

四、兄弟选择器（h1+p）

五、子选择器（ul>li）

六、后代选择器

七、通配符选择器（*）

八、属性选择器

九、伪类、伪元素选择器

优先级：!important>id>class>tag，!important优先级比内联样式高

CSS3新增选择器

E: nth-child(n)：n必须是>0的数才能匹配到元素E，可是n是从0开始计算。n也能够是关键词odd（奇数）、even（偶数）

E：first-child, ：last-child

E：only-child：匹配父元素中只有这一个子元素E，即惟一子元素

E：empty：选择没有任何内容的元素E

##让没有任何内容的p隐藏
p:empty {
  display: none;
}
复制代码

E：not(selection)：选择除了selection以外的元素E

input:not[type='submit']{
     border:1px solid red;
     ##给表单中除submit按钮以外的input加边框
}
复制代码

E[attr^='val']：选择匹配元素E，属性attr以val开头

E[attr$='val']：以val结尾

E[attr*='val']：含义val

E：target：URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被连接的元素就是目标元素(target element)，当点击url后，被连接元素就会出现样式

E:enabled，E:disabled：有些表单元素可用/不可用

E:checked：单选和复选按钮都有选中和未选中状态，checked表示选中状态

E:read-only，E:read-write：指定可读状态的元素/非只可读

E::before，E::after：生成的元素只存在于页面中，不存在dom之中

:root：等同于根元素

可被继承的属性

color、font-size、font-family、ul、li、dl、dd、dt

flexbox 弹性盒布局模型

flex-grow：是利用剩余空间（若是有的话）进行计算分配

flex-shrink：若是全部项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。若是一个项目的flex-shrink属性为0，其余项目都为1，则空间不足时，前者不缩小。负值无效

flex-basic：属性定义了在分配多余空间以前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原本大小。

注意: 设为flex布局以后，子元素的float、clear和vertical-align属性将失效

用CSS建立一个三角形

只要边框足够大，并且盒子没有宽高度，四个顶点就会很靠近—— 四角板，而后将其余三条边框的颜色设为透明

四角板：

三角形：在上面的基础上设置其中三条边框的颜色透明

BFC

• Formatting Context：一个决定如何渲染文档的容器，对于不一样类型的box（类型由元素的类型和display决定），会参与不一样的类型的Formatting Context

• Formatting Context可分为：Block Formatting Context（BFC）、inline Formatting Context（IFC）

• BFC常常用于清除浮动、解决垂直方向margin重叠的问题

box的类型：

• block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。而且参与 block fomatting context；
• inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。而且参与 inline formatting context；
• run-in box: css3 中才有， 这儿先不讲了。

BFC：块级格式化上下文，是一个独立的渲染区域/容器，只有block-level box参与。它规定了内部的block-level box如何布局，而且不会影响外部的元素。

BFC布局规则：

一、内部的box会以垂直方向分布，由于是block-level box

二、内部box之间在垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠（则垂直方向的margin）

三、每一个子元素margin box的左边与包含块border box的左边想接触，即便存在浮动子元素，非浮动的元素就算处于浮动元素后面，也会贴紧包含块的左边。

四、BFC的区域不会与外部的float box重叠（可用来清除浮动）

五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

六、计算BFC高度时，浮动子元素的高度也会参与计算

哪些元素会生成BFC：

• 根元素
• position：absolute或fixed
• float的值不为none
• overflow不为visible
• display为inline-block, table-cell, table-caption, flex, inline-flex

BFC的应用

一、非浮动元素被浮动元素覆盖

二、内部盒子浮动，父盒子高度塌陷的问题（脱离文档的定位流元素也会致使父盒子高度塌陷，但不能经过BFC解决）

三、垂直方向上，相邻盒子margin重叠的问题

有一个 div，里面有两个 div，一个高度 100px，如何让另外一个填满剩下的高度 ？

一、flex布局

二、子绝父相，设置自适应的div为绝对定位，top：100px；bottom：0；left：0，（父盒子须要设置高度）

三、使用calc()计算高度：height:calc(100%-100px)，计算父盒子剩下的高度

div标签的特色

div标签能自动填满父元素的宽度，高度就只能由本身的子元素撑起

用 css 实现左侧宽度自适应，右侧固定宽度 ？

一、固定盒子右浮动，自适应盒子 overflow: hidden;建立一个BFC（切记浮动的元素要写在非浮动元素的前面，这样才会在一行）

二、父容器width：100%；display：table；子容器都为display：table-cell；给固定宽度的盒子设定width

三、固定宽度的盒子右浮动，自适应盒子设置margin-right=固定盒子的宽度，可是浮动元素的标签必须写在另外一个非浮动的前面（必须使用div标签，由于div会自动填满父标签的宽度）

四、固定盒子右浮动，自适应盒子使用calc计算宽度，width：calc（100%-固定盒子宽度）

水平两栏靠在一块儿，实现左边一栏的高度自适应右边一栏的高度

• 两栏都向一个方向浮动
• 给两栏加一个包围盒，并使之造成BFC
• 右边的一栏的高度设为想要的高度（若是没有高度要求能够不设，若是是div元素高度自动由内部元素撑起）
• 左边自适应一栏设置padding-bottom:9999px; margin-bottom: -9999px;
• 宽度根据须要设置

.parent{
            overflow: hidden;   /*造成BFC，BFC的高度会计算浮动元素的高度*/
        }
        .son1{
            float: left;    /*两栏都向左浮动，才能紧贴在一块儿*/
            height: 100%;
            width: 200px;
            padding-bottom: 9999px; /*左边一栏会变长*/
            margin-bottom: -9999px; /*将超过包围盒container的长度剪掉*/
            background: #4b67af;
        }
        .son2{
            float: left;
            width: 100px;
            height: auto;   /*右边一栏设置高度auto*/
            background: #DD4A68;
        }
        
<div class="parent">
    <div class="son1">鹅鹅鹅曲项向天歌</div>
    <div class="son2">床前明月光，疑是地上霜，举头望明月，低头思故乡</div>
</div>        
复制代码

文字超出长度时，如何实现用省略号代替？

设置width、overflow：hidden，white-space：nowrap（不换行），text-overflow：ellipsis

什么是响应式设计？12个栅格是怎么实现的？

响应式设计：一个网页能兼容多个终端，而不是为每一个终端都作一个特定的版本。

原理：经过媒体查询检测不一样的设备屏幕尺寸作处理

页面头部必须有 meta 声明的 viewport。

<meta name='viewport' content='width=device-width, initial-scale=1.0'>
复制代码

viewport：页面的可视区域，手机浏览器一般把页面放在一个虚拟的窗口viewport，这个虚拟的窗口通常比屏幕宽。上面即设置了页面的可视区域和设备屏幕宽度同样宽，初始缩放比例为100%。 viewport

响应式布局与自适应布局的区别是什么

• 响应式布局：是根据屏幕的分辨率在客户端对代码进行处理，实现一个网站兼容不一样终端
• 自适应布局：是根据屏幕的分辨率到服务端请求不一样的页面，须要开发多套页面

怎么让chrome支持小于12px的文字？

##若是想实现10px的字体
p{
    font-size:10px;
    transform:scale(0.8);   //缩放比例0.8
}
复制代码

CSS Grid 网格布局

5分钟掌握