HTML CSS 整理知识 简易版 介绍:面试题内容没变，可根据大白话去讲述
备注: 整理的不是很详细
ONE-H5新特性有哪些？c3的新特有哪些？
一 H5的新特性
- 拖拽释放
- 自定义属性 data-id
- 语义化标签
- 音频、视频(audio、video)
- 画布 Canvas
- 地理(Geolacation)
- 本地离线存储(localStorage)
- 离线存储(sessionStorage)
- 表单控件(calendar,data,time,emaol,url,search,tel,file,number)
- 新的技术(webworker,websocket,Geolocation)
二 css3新特性
- 颜色 (color)
- 文字阴影(text-shadow)
- 边框：圆角(border-radius),边角阴影(box-shadow)
- 盒子模型: box-sizing
- 背景: bakcground-size，background-origin，background-clip
- 渐变: linear-gradient,radial-gradient
- 过渡: transition
- 自定义电话 animate@keyfrom
- 媒体查询多栏布局 @mediascreenand
- 图标边框 border-image
- 2D转换/3D转换: transform:translate(x,y)、rotate(x,y)、skew(x，y)、scale(x,y)
- 字体图标 iconfont/icomoon
- 弹性布局 flex
TWO-盒子水平垂直居中(必会)
方法一 利用定位/子绝父相 方法二 margin 0 auto； 方法三 display:table-cell 方法四 tranfrom
THREE-如何实现双飞翼(圣杯)布局(必会)
一、利用定位实现两侧固定中间自适应
- 1.1 父盒子设置左右padding值
- 1.2 给左右盒子的width设置父盒子的padding值，分别定位到pdding处
- 1.3 中间盒子自适应
二 利用flex布局实现两侧固定中间自适应
- 2.1 父盒子设置display:flex
- 2.2 左右盒子设置固定宽高
- 2.3 中间盒子设置 flex:1
三 利用bfc块级格式化上下文，实现两侧固定中间自适应
- 3.1 左右固定宽高，进行浮动
- 3.2 中间overflow:hidden
FOUR-Css的盒模型(必会)
- 盒子模型(BoxModle)可以用来对元素进行布局，包括内边距，边框，外边框，和实际内容这几个部分
- 盒子模型分为两种:
一 W3C标准的盒子模型(标准盒模型)
- 介绍:
- 标准盒模型中width指的是内容区域content的宽度
- height指的是内容区域content的高度
- 标准盒模型下盒子的大学=content+border+padding+margin
二 IE标准的盒子模型(怪异盒模型)
- 介绍:
- 怪异盒模型中的width指定是内容、边框、内边距总的宽度(content+border+padding);heght指定是内容、边框、内边距总的高度
- 怪异盒模型下盒子的大小=width(content+border+padding)+margin
FIVE-css中选择器的优先级以及css权重如何计算？(必会)
介绍: !important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
SIX-css中哪些属性可继承，哪些不可以?(必会)
一 能继承的属性
- 字体系列属性:font、font-family、font-weight、font-size、font-style
- 文本系列属性
- 2.1 内联元素: color、line-height、word-spacing、letter-spacing、text-transform
- 2.3 块级元素: text-indent、text-alingn
- 元素可见性: visibility
- 表格布局属性:caption-side、border-collapse、border-Spaing、empty-cells、table-layout
- 列表布局属性:list-style
二 不能继承的属性
- display； 规定元素生成的框的类型
- 文本属性: vertical-align、text-decoration
- 盒子模型的属性: width、height、margin、border、padding、
- 背景属性: background、background-color、background-image
- 定位属性: float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip
SEVEN-css单位中px、em和rem的区别?(必会)
- px像素(Pixel),绝对单位，像素
- em是相对长度单位
- rem是css一个相对单位(rootem,根em)
- 介绍IE无法调整px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素
EIGHT-rem适配方法如何计算HTML根字号及适配方案？(必会)
通用方案
- 设置根font-size:625%
- 通过媒体查询分别设置屏幕的根font-size
- css直接除以2再除以100换算rem优
网易方案
- 设计稿除以100，宽度rem值
- 通过html的style设置font-size，把1里面得到的宽度rem值代入
- 设计稿px/100即可换算为rem
手淘方案
- 设计稿除以10，得到font-size基准值
- 引入flexible
- 不用设置meta的viewport缩放值
- 设置稿px/font-size基准值，即可换算rem
NINE-display:none与visibility: hidden的区别？(必会)
元素隐藏和现实最常用的为dispaly:none 和 visibility:hidden
- dispaly:none设置该属性后，元素下的内容都会隐藏，不占据空间
- visibility:hidden设置该元素，元素不可见，但占据空间的位置
区别
- visibility具有继承性，其子元素会继承此属性，若设置visibility:visible,则子元素会显示
- visibility不会影响计数器的计算，虽然隐藏掉了，但是计算器依然继续运行着。
- css3的transition中支持visibility属性，但不支持display
- display:none会引起回流(重排)和重绘visibilty:hidden会引起重绘
TEN、position的值有哪些，分别有哪些作用?(必会)
- 静态定位: static默认值不脱离文档流
- 绝对定位: absolute 参照物:最近的父元素
- 相对定位: relative 参照物:元素偏移前位置
- 固定定位: fixed 参照物:浏览器窗口
ELEVEN-为什么会出现浮动？浮动元素会引起什么问题？如何清楚浮动(必会)
浮动将元素排除在普通流之外，即元素将脱离文档流，不占据空间。浮动元素碰到包含它的边界或者浮动元素的边界停留
为什么需要清除浮动
- 子元素浮动后，不占位置，父元素的高度无法被撑开，影响与父元素同级的元素
- 浮动元素同级的非浮动元素(内联元素)会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法
清楚浮动的方式
- 使用css中的clear:both；(空的标签，设置上述css，注意该标签必须是块元素)
- 对于问题1，添加如下样式，给父元素添加clearfix样式
- 给父元素元素设置伪元素
- 给父级元素设置overflow:hidden； 或 overflow: auto; 本质是构建一个BFC
TWELEVEN-简述弹性盒子flex布局及rem布局?(必会)
- rem是css3的一个相对单位，相对根节点(html)字体大小的值，r就是root
- 例如: html{font-size:10px},则2rem = 20px
- 通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖html字体大小
适配方案步骤:
- 首先动态计算html的font-size
- 将所有的px换算成rem(注意:rem的换算是根据设计图搞定像素计算的，下面的计算只是动态计算html的font-size大学)
本次面试笔记不好整理:书面整理
- 弹性盒子布局（Flex布局） Flex布局是一种基于容器和项目的对齐方式，采用“伸缩布局”，即容器中的子元素可以通过改变自身的宽度、高度、顺序等方式，达到适应不同屏幕大小、不同设备的目的。其本质特点就是：容器内部元素的尺寸可以改变，以达到最佳排列和对齐的效果。常用的容器相关属性有：flex-direction、justify-content、align-items、flex-wrap等。
- rem布局 rem布局中的长度单位设置为rem而非传统的px或em的布局方式。rem是相对于根元素（即html元素）字体大小的单位。它的优势在于，当用户在页面上进行缩放或改变字体大小时，rem相对于视窗大小的比例会保持不变，从而实现页面元素的自适应。rem布局主要通过设置根元素的字体大小，再结合媒体查询、@media标签等进行布局。常用的方法有：动态rem布局、flexbox+rem布局等。
THREEN-BFC是什么？
布局规则
- 内部的Box会在垂直方向，应该接一个地放置
- Box垂直方向的距离有margin决定，属于同一个BFC的两个相邻的Box的margin会发生重登
- 每个元素的marginBox的左边。与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
- BFC的区域不好与floatBox重登
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
- 计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC
- 根元素
- float属性为 none
- postion 为absolute 或 fixed
- display为inline-block，table-cell，table-caption，flex，inline-flex
- overflow不为visible
TOURTEEN-css新特性
border-radius:圆角边框 box-shadow:盒子阴影 background-size:背景图片大小 transition: 过渡 tranform：转换(位移 旋转 缩放) animation: 动画 linear-gradient: 线性渐变 box-sizing: css3盒子模型
FIVETEEN-说说你对盒子模型的理解
盒子模型组成：
内容 内边距 外边距 边框
盒子模型分类
- 标准盒子模型= content+border+padding 介绍:box-sizing：border-box
- 怪异盒子模型=content(内容)已经包含了 pdding和 border 介绍: box-sizing:content-box
