第六节
如何让盒子水平垂直居中
//绝对居中
position:abolute/relative/fixed
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
简述BFC规则，及解决的问题？
BFC：块级格式化上下文，指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
触发bfc几种方法：
1. 根标签
2. overflow的值不为visible
3. float的值不为none
4. display的值不为inline-block
5. position的值为absolute或fixed
bfc解决的问题：
1. 外边距塌陷
2. 浮动清除
3. 自适应两栏或三栏布局
4. 防止字体环绕
第七节
图片间隙问题，如何解决？
1. 图片下方间隙
给图片设置 vertical-align:middle/top/bottom
将图片转换为块元素：display:block
2. 水平间隙
设置父级标签的：
font-size:0;line-height:0;
说说常见浏览器兼容问题
1. IE图片的边框问题（a标签下的图片）
img{
border:0/none;}2. IE8一下浏览器背景复合属性空格问题
baground-image:url()'空格'no-repeat left;其他ie低版本兼容性问题了解
（1）在ie6及更早浏览器中定义小高度的容器？
#text{
overflow:hidden;
height:1px;
font-size:0;
line-height:0;
}(2)IE6及更早浏览器浮动时产生双倍间距的BUG？
针对IE6设置该标签的display属性为inline即可
#text{
float:left;
_display:inline;
}(3)IE7及更早浏览器下子标签相对父标签overflow属性的auto|hidden失效的问题？
给父标签也设置相对定位position:relative
(4)块转内联块IE7-不在一行显示问题
div{
dsiplay:inline-block;
*display:inline;
*zoom:1;
}(5)IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白问题？
将垂直对齐方式设置为除了top值，还可以设置其他值如：middle|bottom等
li{
vertical-align:top;
}
等高布局、圣杯布局、双飞翼布局的实现原理？
等高布局：
- 假等高:
内外边距互消法
列变宽，其他列等高变化`
/*三列，把外面设置一个大盒子，里面3个小盒子*/
父级：overflow:hidden;(溢出隐藏)
子级：padding-bottom:99999px;
margin-bottom:-99999px;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="father">
<div class="left">ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd </div>
<div class="center">撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd </div>
<div class="right">撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd </div>
</div>
</body>
</html>
.father {
overflow: hidden;
margin: 0 auto;
/* width: 900px; */
}
.left {
width: 100px;
background-color: blue;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.center {
width: 150px;
background-color: green;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right {
width: 100px;
background-color: skyblue;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
真等高：
- 有几个盒子写几个盒子
- 把第二个父盒子bg2进行移动，移到最后一个盒子blue的宽度
- 移动最里面的父盒子bg3，移到倒数第二个子盒子green的大小
- 依次把原来倒数第一个盒子blue移到原来的移动剩下的两个子元素到原位置
- 最大盒子overflow::hidden去掉超出部分
<div class="bigbox">
<div class="bg1">
<div class="bg2">
<div class="bg3">
<div class="red">第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅</div>
<div class="green">第二列第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅</div>
<div class="blue">第三列第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第三列第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第三列第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅</div>
</div>
</div>
</div>
</div><style>
.bigbox{
margin: 0 auto;
width:1000px;
}
.bg1{
width: 100%;
background-color: orange;
overflow: hidden;
}
.bg2{
width: 100%;
background-color: pink;
position: relative;
right: 300px;
float: left;
}
.bg3{
width: 100%;
background-color: skyblue;
position: relative;
right: 400px;
float: left;
}
.red{
width: 300px;
/* background-color:red; */
float: left;
position: relative;
left: 700px;
}
.green{
width: 400px;
/* background-color: green; */
float: left;
position: relative;
left: 700px;
}
.blue{
width: 300px;
/* background-color: blue; */
float: left;
position: relative;
left: 700px;
}
</style>圣杯布局和双飞翼布局的原理及实现
- 圣杯布局
圣杯布局和双飞翼布局都是为了实现左右栏固定宽度，中间部分自适应的三栏布局，不过两者实现的原理有所不同。以下是圣杯布局的实现思路。
1）将三者都float：left，再加上一个position:relative(因为相对定位后面会用到)；
2）middle部分width：100%；
3）此时middle占满了，所以要把left拉到最左边，使用margin-left：-100%
4）这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上padding：0 220px 0 200px;
5) middle内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位left：-200px，同理，right也要相对定位还原right:-220px
6)到这里自适应就好了，若要想container高度保持一致可以给left middle right 都加上min-height：130px；
<body>
<div class="container">
<div class="middle">圣杯布局的中间自适应部分</div>
<div class="left">圣杯布局左边固定宽度部分</div>
<div class="right">圣杯布局右边固定宽度部分</div>
</div>
</body>
.container {
padding: 0 200px 0 200px;
overflow: hidden;
}
.middle,
.left,
.right {
float: left;
position: relative;
}
.middle {
width: 100%;
background-color: blue;
}
.left {
width: 200px;
background-color: red;
margin-left: -100%;
left: -200px;
}
.right{
width: 200px;
background-color: green;
margin-left: -200px;
right: -200px;
}
- 双飞翼布局
双飞翼布局始于淘宝UED。如果把三栏布局比作一只鸟，可以把main看成是鸟的身体，left和right则是鸟的翅膀。这个布局的实现思路是：先把重要的身体部分放好，然后再将翅膀放到适当的位置。
1）左翼left设置200px，右翼right设置220px,身体自适应；
2）html代码中，main要放在最前边，然后是left right
3）将main left right都float：left
4）将main占满100%；
5）此时main占满100%，所以要把left拉到最左边，使用margin-left：-100%，同理right使用margin-left：-220px';
6)main内容被覆盖了，除了使用外围的的padding，还可以考虑使用margin：
给main加一个层div-- main-inner,然后margin：0 220px 0 200px
<body>
<div class="middle">
<div class="inner">双飞翼布局的中间自适应部分</div>
</div>
<div class="left">双飞翼布局左边固定宽度部分</div>
<div class="right">双飞翼布局右边固定宽度部分</div>
</body>.middle,
.left,
.right {
float: left;
min-height: 130px;
}
.middle {
width: 100%;
}
.inner {
margin: 0 220px 0 200px;
background-color: orange;
min-height: 130px;
}
.left {
width: 200px;
background-color: red;
margin-left: -100%;
}
.right {
width: 220px;
background-color: green;
margin-left: -220px;
}第八讲
用纯css实现小箭头的思路？
思路：用css绘制两个三角形，通过绝对定位让三角形不完全重叠，例如制作向右的空心箭头，位于前面的三角形border颜色是需要的颜色，后面的三角形border颜色与包裹他们的div背景色一致，然后设置前面三角形的left值比后者的left多1px，这样就可容易生成空心三角箭头。
<body>
<div class="box">
<p>右箭头</p>
<div class="arrow-right arrow-box">
<b class="right">
<i class="right-arrow1"></i>
<i class="right-arrow2"></i>
</b>
</div>
<p>左箭头</p>
<div class="arrow-left arrow-box">
<b class="left">
<i class="left-arrow1"></i>
<i class="left-arrow2"></i>
</b>
</div>
</div>
</body>* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
background-color: white;
}
.arrow-box {
width: 30px;
height: 30px;
margin: 20px auto;
position: relative;
}
/* 右箭头 */
.right {
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 0;
border: 1px solid white;
}
.right-arrow1,
.right-arrow2 {
width: 0;
height: 0;
display: block;
position: absolute;
left: 0;
top: 0;
border-top: 10px transparent dashed;
border-right: 10px transparent dashed;
border-bottom: 10px transparent dashed;
border-left: 10px white solid;
overflow: hidden;
}
.right-arrow1 {
left: 1px;
border-left: 10px blue solid;
}
.right-arrow2 {
border-left: 10px white solid;
}
/* 左箭头 */
.left {
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 0;
border: 1px solid white;
}
.left-arrow1,
.left-arrow2 {
width: 0;
height: 0;
display: block;
position: absolute;
left: 0;
top: 0;
border-top: 10px transparent dashed;
border-left: 10px transparent dashed;
border-bottom: 10px transparent dashed;
border-right: 10px white solid;
overflow: hidden;
}
.left-arrow1 {
border-right: 10px blue solid;
}
.left-arrow2 {
left: 1px;
border-right: 10px white solid;
}
简述精灵图的原理及优缺点？
利用css“background-image”、“background-repeat”、“background-position”的组合进行背景定位。
优点：
- 减少网页的http请求，从未大大的提高页面的性能
- 图片命名上的困扰
- 更换风格方便
缺点：
- 必须限定容器的大小符合背景图元素位置，需要计算
简述网页中常见图片格式及特点？
| 格式 | 优点 | 缺点 | 使用场景 |
| jpg | 色彩丰富，文件小 | 有损压缩，反复保存图片质量下降明显 | 色彩丰富的图片、渐变图像 |
| GIF | 文件小，支持动画、透明，无兼容性问题 | 只支持256种颜色 | 色彩简单的logo、icon、动图 |
| png | 无损压缩，支持透明，简单图片尺寸小 | 不支持动画，色彩丰富的图片尺寸大 |
logo、icon、透明图 |
| webp | 文件小，支持有损和无损压缩，支持动画、透明 | 浏览器兼容性不好 | 支持webp格式的app和webview |
| psd | photoshop源文件 |
第九讲
为什么要初始化css样式？那些样式需要初始化？
因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。
/*清除默认的样式或者是某些页面所共有的样式*/
body{
position: relative;
}
/*清除内外边距*/
* {
margin: 0;
padding: 0;
}
ul,
li {
/*清除项目符号*/
list-style: none;
}
/* a标签去掉下划线和默认颜色 */
a {
text-decoration: none;
color: black;
}
/* 文本框边框取消，去掉光标聚集时候的状态 */
select,input {
border: none;
outline: 0;
}
h1,h2,h3,h4,h5,h6{
/*400 正常 700加粗*/
font-weight:400;
}
/* ie中图片放在a标签中显示边框 */
img{
border:none;
/* 去除图片下方空白间隙 */
vertical-align:middle;
}
/* 版心 */
.wrapper{
/*如果你想使用margin 0 auto
前提是块元素而且给宽度
*/
width: 1200px;
margin: 0 auto;
}
.center{
margin: 0 auto;
}
.font_ct{
text-align: center;
}
.font12{
font-size: 12px;
color: #333333;
}
.font14{
font-size: 14px;
/* color: #333333; */
}
.font28{
font-size: 28px;
}
/* 字体12px */
.f12{
font-size: 12px;
color: #757575;
}
.col_t{
color: #ff6700;
}
/* 浮动 */
.fl{
float: left;
}
.fr{
float: right;
}
/* 清除浮动 -伪元素 */
.clearfix:after{
content:'';
display: block;
clear: both;
}
.clearfix{
*zoom:1;
}
display:none和visibility:hidden的区别？
都是元素的显示与隐藏
visibility:visble 可见（默认） hidden(隐藏，占位)
display：none（隐藏，不占位） block（显示，转块元素，默认值）
你能想出几种方法让元素在页面中消失？
1.display:none;（将整个元素隐藏，并且不会占据任何的空间）
2.visibility:hidden;（元素的内容不可见，但是元素仍然保持原来的位置和大小）
3.设定它的位置,让其消失不见：
position:absolute或fixed，用z-index遮盖。
4.overflow:hidden将要隐藏的元素移除父元素的范围。
5.设置元素为透明：即opacity:0；
6.设置元素的clip（在新的css中使用clip-path来代替clip）
要让其生效，必须给元素的position的值设置为absolute或者fixed。
7.将元素的font-size，line-height,width,height设置为0；（虽然这些方法很赖皮。）
8.设置元素的transform的translateX（Y）的值为-100%；
标签应该如何合理嵌套？:
1、块元素里面有块元素、行内、行内块元素，一些特殊语义的标签不能嵌套块标签，比如h1--h6,p标签里面不能放块级标签
2、行内元素能够嵌套行内和行内块，a标签里面可以放块元素，a标签不能放a标签
3、固定搭配，比如ol,ul里面子元素只能是li,table,tr,th
第十讲
在项目中你是如何做图片优化的？
- 使用背景图
起修饰作用的图片用背景图backgound-image（如页面中小图标尤其多次重复出现，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用img图片
- 图片品质
在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间（例：在ps导出web所有格式图片时通常选择的品质在70--80之间）
- 使用精灵图
减少网页中http请求
- 静态banner大图的处理
有效区填白，降低图片大小，左右两栏背景选择图片品质低切片
有效区看情况划分三到五份，划分时不要切断banner中的文字
第十二讲
HTML5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容性问题？
新特性
1、语义化标签（结构化标签、其他标签）
| 结构化标签 | <header> | 页面或者区块页眉，放logo,导航 |
| <nav> | 导航：页面主导航，侧边栏导航，轮播 | |
| <footer> | 页脚 | |
| <artical> | 一个独立的区域，一篇文章、评论 | |
| <section> | 区块，比div语义更明确 | |
| <aside> | 侧边栏，与主题内容关联不大,比如侧边栏广告 | |
| <hgroup> | 标题组 <hgroup> </hgroup> | |
| <figure> | 图表，图片 | |
| <figcaption> | figure的标题，说明文字 | |
| 其他标签 | <mark> | 定义标记内容 |
| <del> | 定义删除的内容 | |
| <time> | 定义时间(如果标签内不是具体时间，需要用datetime属性定义时间) |
2、音频、视频
<audio src=" " controls="controls"></audion>
<video src="" controls></video>
| 共有属性 | src | 引入音频、视频路径 |
| loop | 循环播放 | |
| autoplay | 自动播放 | |
| muted | 设置静音 | |
| video特有 | width，height | 设置视频播放时的宽高 |
| poster | 预览图片 |
<source>为媒介元素（比如audio,video）定义媒介资源
<audio controls>
<source src="videoAudio/biubiubiu.ogg">
<source src="videoAudio/hanmai.mp3">
<source src="videoAudio/nada.wav">
您的浏览器版本太低不支持音频
</audio>source元素可以链接不同的音频、视频文件，浏览器将会使用第一个可识别的格式。
3、新增表单元素
| url | 网址，内置正则验证 |
| 邮箱，内置正则验证 | |
| color | 颜色选取控件 ，值为十六进制颜色 #000000 |
| date | 日期选取控件 年月日 |
| datetime | 日期输入控件 手动输入年月日小时分钟 |
| datetime-local | 本地日期和时间，支持选择和输入 |
| month | 选择年月 |
| week | 选择一年的第几周 |
| time | 输入时间 |
| number | 只能输入数字，在移动端弹出数字键盘 |
| range | 滑块，数值 |
| search | 搜索框 |
| tel | 电话，移动端弹出数字键盘 |
| datalist | 为输入框定义下拉选项 |
<input type="text" list="list1" name="list">
<datalist id="list1">
<option>AA</option>
<option>BB</option>
<option>CC</option>
</datalist>表单属性：
| 属性 | 属性值 |
|---|---|
| min | 定义最小值 |
| max | 定义最大值 |
| step | 定义步长 |
| autofocus | 设置表单元素自动获得焦点 |
| autocomplete | 输入框实现自动补全，默认on,设置off关闭 |
| placeholder | 提示占位符 |
| required | 把表单元素设置为必填项 |
| pattern | 定义表单元素输入的格式，内置正则 |
| form | 定义表单元素所属的表单域,值为表单域id |
| multiple | 设置多选，下拉列表，文件域，邮箱 |
| formaction | 定义提交按钮的表单提交地址 |
| formmethod | 定义提交按钮的提交方式 |
4、canvas画布
5、地理定位
移出一些标签
- center、 - font、 - frame、 - frameset、 - applet
html5新增内容的兼容问题
浏览器支持情况：主流现代浏览器支持，ie9以上支持部分特性
PC端项目如果要求兼容ie8，不能使用html5新增的东西，如果用到结构化标签，需要做兼容处理
①使用javascript新增元素的方法解决
document.creatElement("header");
document.creatElement("footer");由于创建出来的元素是内联元素，所以需要转换为块级，宽度和高度才能生效
header,footer{
display:block;
}②使用封装好的插件html5shiv.js解决兼容问题
<!--[if lt IE9]>
<script src="html5shiv.js" type="text/javascript"></script>
<![endif]-->
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
