目录
em相对于父元素字号计算,1em默认16px；rem相对于根元素HTML的font-size计算；vw相对于视图计算（100vw=视图窗口宽度）
padding值不允许负值
em相对于父元素字号计算,1em默认16px；rem相对于根元素HTML的font-size计算；vw相对于视图计算（100vw=视图窗口宽度）
rem布局实现原理及步骤
* rem是css3新增单位，它是相对于根元素的字号大小的单位
rem原理：
rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。
* rem布局的实现：
1、设置页面的viewport
2.动态计算并设置不同尺寸html的font-size属性
3.按照PC端布局方式正常布局，将px单位改为rem单位（较小 的长度比如1px的边框就不需要转换成rem,直接设置px）
实现盒子的水平垂直居中
a: .parent{
w300+h300+border
display : flex;
justify-content : center;
align-item : center;
}
.child{ w100+h100+border}
b: .parent{
w300+h300+border
display : flex;
}
.child{ w100+h100+border
margin:auto
}
c: .parent{
w300+h300+border
position : relative;
}
.child{
w100+h100+border
margin:auto;
position : absolute;
left:50%;
top:50%;
transform:translate（-50%，-50%）
}
d: .parent{
w300+h300+border
position : relative;
}
.child{
w100+h100+border
margin:auto;
position : absolute;
left:50%;
top:50%;
m-l:-50px;
m-t:-50px
}css优化提高性能的方法
尽可能使用简写属性
将写好的css进行紧凑压缩减少文件体积
选择器越关键越好，减少选择器嵌套，减少用通配符选择器
网页由哪三层构成
前端页面分成3层：结构层（HTML,XHTML）、表示层（css）、行为层（javascript）
。结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面”内容是什么”的问题。
表现层：由CSS负责创建，解决了页面“如何显示内容”的问题。
行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
src 和 href的区别
href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的于：link、a。浏览器会并行下载href引用的文档，并且不会停止对当前文档的处理。
src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置，常用于img，video,audio,script等标签。
浏览器解析src时会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕。
以下哪些可以解决图片下间隙问题
1.img{display：block;}
2.img{vertical-align:middle;}
3.img的父元素{font-size:0;}
小问题
line-height:1;表示行高大小即字号大小
border-style=none时border-width,border-color,将失效不显示
常见浏览器及其内核
浏览器：IE，Chrome，FireFox，Safari，Opera。
内核：Trident，Gecko，Blink，Webkit。
1，使用Trident的是internet explorer，国产的绝大部分浏览器。
2，使用Gecko的是Mozilla Firefox
3，使用Blink的是Chrome和Opera
4，使用WebKit的有苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit
语义化好处
语义化：用合适的标签和它特有的属性去做合适的布局，例如：标题用h1-h6，段落用p，img标签要加alt属性
- 没有css的情况下，也很能很好的去显示页面
- 增加了代码的可读性，有利于团队合作
- 有利于用户体验（alt，title）
- 有利于seo（和搜索引擎建立良好的沟通，有利于爬虫去抓取更有效的信息，标签的使用和上下文的联系影响爬虫对信息的抓取）
简述css精灵图优缺点
原理:把网页中的背景元素整合到一张图片中，然后利用css背景定位定位出背景图片的位置
优点：1。减少网页请求，提高页面效率
2.减少命名困扰
3.更换风格方便
缺点：必须限定容器宽高
必须计算位置
哪些css属性可以继承
1）、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
line-height：行高
2）、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
color：文本颜色
letter-spacing： 字间距
word-spacing：词间距
3） list-style属性：列表符
BFC特性及解决的问题
特性：1.内部盒子垂直方向一个接一个放置
2.盒子垂直方向距离由margin决定，同一方向两个相邻margin会发生重叠
3.每个margin盒子的左边与包含块border盒子的左边相接触，不关浮动
4.bfc是页面独立空间，里头的子元素不会影响到外面的元素，反之也是
5.bfc区域不会与float盒子重叠
6.计算bfc高度时，浮动元素也计算
解决的问题：1.清除浮动
2.防止margin重叠
3.避免文字环绕
4.自适应两栏布局
h5新特性
1.简化了文本声明
2.简化了字符集
3.新增语义化元素 : <article> <section> <nav> <aside> <header> <footer> <main> <hgroup> <figure> <mark> <time>
4.新增表单相关新元素新属性
5.新增全局属性:如data-*
6.新增API应用程序接口
(1)canvas绘图
(2)多媒体（视频、音频）
(3)本地存储/离线存储
(4)地理信息
(5)拖拽
常用的表单属性
1、action 属性定义在提交表单时执行的动作。通常，表单会被提交到 web 服务器上的网页。如果省略 action 属性，则 action 会被设置为当前页面。
2、method="GET/POST":提交表单时所用的HTTP方法，默认是GET方法
3、checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'
4、selected:下拉列表的默认选中，直接在option标签中写即可，selected或者selected='selected'
5、value属性：规定输入字段的初始值。
6、readonly属性:只读属性,只能读，不能修改
7、disabled属性:禁用属性，表示元素不可用，不可以点击
8、maxlength属性：允许输入的最多字符
9、size属性：控件长度,规定下拉列表中可见选项的数目
10、placeholder 提示用户输入信息
清除浮动的方法
1给父元素一个固定高度（不建议）
优缺点：不够灵活，适用于高度固定的布局中
2在浮动元素的末尾添加一个空的div，给div设置clear：both
优缺点：代码冗余，通俗易懂，书写方便
clear: left; 清除左侧浮动带来的影响
clear: right;清除右侧浮动带来的影响
clear: both;清除两侧浮动带来的影响
3给父元素设置bfc属性
（1）给父元素添加：overflow：hidden（overflow的属性值可以为hidden,scroll,auto）
优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁
（2）给父元素设置display：inline-black
（3）给父元素设置浮动
（4）给父元素设置定位（在父元素本就需要定位时用）
4.推荐方式：给浮动元素的父级盒加类名.clearfix，并在.clearfix中添加样式：
.clearfix::after{
content:'';
display:block;
clear:both;
}
优缺点：不会再结构上产生冗余代码，可以重复使用，结构语义化正确
简述外边距塌陷及解决办法
父子关系
1. 给父元素一个border-top
2.把子元素margin-top改成父元素padding-top
3.触发bfc，让父元素变成独立区域
（1）给父元素添加：overflow：hidden
（2）给父元素设置display：inline-black
（3）给父元素设置浮动
（4）给父元素设置定位（在父元素本就需要定位时用）
兄弟关系
1.只加一个方向
2.给任何一个标签套一个父标签 加overflow:hidde
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
