HTML和CSS
1.页面布局
水平居中
1.margin:auto; 页面没有滚动条 有滚动条用fixed
2
fixed 和 absulte 的区别
两栏布局： 一般用于后台管理系统
用到float
不固定的用到 overflow:hidden
双飞翼布局 圣杯布局
自适应的部分一定要添加 overflow:hidden
可以应用浮动实现
为啥加上overflow:hidden 可以触发BFC
那么哪些可以触发BFC(块级格式化上下文)
BFC渲染规则 bfc计算高度时浮动的元素也参与计算
高度塌陷？
子元素浮动，父元素高度没有了
如何解决 父元素用overflow:hidden 解决
after
div.after 出现在div的内容的后面
flex 弹性盒
justify-content 与justify-item的区别
rem 与 vm 转换
rem 根据html中的font-size进行换算
em是根据父元素的font
IE6兼容
双边距 display :inline
height 高度低于16px 全都转换陈16px-size进行换算
高度默认的解决： 1.font-size:0 ; 2.overflow:hidden
*ie6不支持，换成_
插入图片 默认向下撑大3px ：解决：display:block; (全部浏览器都有效)
vertical-align:top;
IE 浏览器 用 a标签引入图片会出现边框 解决：border:none;
图片如何水平垂直居中
方法一：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
border: 1px solid black;
float: left;
}
span {
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
overflow: hidden;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="img">
<img src="./images/20141121095216750.png" /><span></span>
</div>
<div class="img">
<img src="./images/20141121095528549.png" /><span></span>
</div>
</body>
方法二：弹性盒子
div {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
background-color: green;
text-align: center;
border: 1px solid black;
}
方法三：定位。。。。
内容多的左对齐，内容少的时候居中
因为内容多的时候 P标签知道自己的宽度，可以使用自己的对齐方式，不清楚时使用父元素的
div {
text-align: center;
}
p {
display: inline-block;
text-align: left;
}
<div>
<p>内容少居中，内容多左对齐</p>
</div>
多行文本显示省略号
div {
text-align: left;
width: 200px;
height: 500px;
}
div:after {
content: '....';
}
<div>
内容少居中，内容多左对齐内容少居中，内容多左对齐内容少居中，内容多左对齐内容少居中，内容多左对齐内容少居中，内容多左对齐内容少居中，内容多左对齐内容少居中，内容多左对齐内容少居中，内容多左对齐内容少居中，内容多左对齐内容少居中，内容多左
</div>
移动端的边框缩放问题
边框为1px时会缩放成2px
解决：transform:scale(1,0.5) 或者 scaleY(0.5)
如果：doctype html 不存在会发生什么
ie8一下的会触发怪异盒子模型
怪异盒子模型实际的宽高
怪异盒子模型和标准盒子模型之间转换的属性
box-sizing:border-box g怪异盒子模型
content-box 标准盒子模型
img 语义化标签
<img src="" alt="替换文本" title="提示信息">
alt 和 title 都是有利于SEO alt 是当图片不存在或者路径错误是显示 alt 内容
title 是当鼠标 上是显示 title 里面的内容
优化网站的优化
1.超链接最好用文本，不用flash 动画或者图片热情， 图片的alt 和title都要添加 对于一些没有一的小图这两个属性也最好添加 alt ="" 和 title
2.图片的整合 （精灵图 雪碧图）
3.代码结构清晰
屏蔽鼠标事件
pointer-event:none;
opacity：value (opacity=value)透明
内容会跟着透明如果不想内容透明
1.一种背景颜色用 rgba()实现
2.一种使用定位实现，背景和内容单独出来，用定位实现
表格布局
display:table
表格布局兼容， 缺点：高度同时变化
网格布局
三栏布局 ：高度未知的情况
不受影响：flex 和 table 布局
float的原理 ： 没有元素阻挡， 解决 触动BFC
三栏布局 ： 需要把 表格 和 网格布局重新写
语义化标签 需要复习
页面布局 方案的原理
flex 弹性盒模型
作用的父元素上：
justify-content
align-items 一行 内元素的对齐方式
aligin-content 是与 justify-content 相对立， 如果所有的flex咨询只有一行，则algin-content没有效果，多行元素的对齐方式
grid 一定要复习好？ （证明思维灵活）
单位 1fr
父元素 ： grid-template-columns 等
repeat(个数， 大小)
grid-template-areas 划分区域
子项用 grid-area属性指定属于哪个区域
gird-column-gap 和 grid-row-gap 定义网格间距的属性
justify-items 水平方向布局 网格内的元素在在当前网格内的排序
align-items 垂直方向
justify-content: 网格元素水平分布方式 针对所有网格
align-content 指定网格元素垂直分布方式
CSS 盒模型
基本概念： 标准模型 + IE模型
标准模型 和 IE模型的区别
CSS 如何设置这两种模型
JS 如何设置盒模型和对应的宽和高
实例题（根据和盒模型解释边距重叠）
BFC()
标准盒模型 width = content height=content
IE盒模型 width = content + padding +border
css 通过box-sizing这一属性可以设置这两种模型
标准模型： content-box
IE 盒模型 border-box
JS 如何设置获取盒模型的对应的宽和高
dom.style.width/height (取到内联样式)
dom.currentStyle.width/height (渲染以后的样式) 这个只有IE支持
window.getComputedStyle(dom).width/height 所有浏览器都可以
dom.getBoundingClientRect().widht/height
场景：计算元素的绝对位置根据视窗（viewport 即左顶点）（）获得 left top width height
盒模型边距重叠
BFC(块级格式化上下文) 边距重叠解决方案
BFC:原理：（渲染规则）
1. 在BFC的垂直方向的边距会发生重叠
2. BFC区域位于浮动元素式（报告式??）重叠
3. 外面元素不会影响里面元素 里面元素也不会影响外面元素
4. 计算BFC高度时浮动元素也会参加计算
创建BFC how ?
1.float : 不为 none
2.position 不为 static 或者 relative
3.display 为table相关的 ， inline-box,
4.overflow 不为 visible
渐近增强 与 优雅降级
2583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
