HTML与css杂项
目录结构
doc
src
css
img
js
404.html
index.html
robots.txt
humans.txt
favicon.icon
.editorconfig---IDE配置代码风格文件
.gitignore---配置git忽略文件
LECENSE.txt---版权声明
README.md---项目简介,使用方式,相关链接
CHANGELOG.md---版本更新说明
设备尺寸与分辨率
尺寸
物理像素--实际发光的点,在视网膜屏上会是两个物理像素组成1px;
px--是屏幕实际显示的一个点,浏览器默认字体是16px;
em--相对父元素的尺寸,在html设置font-size为62.5%后,1em=10px;如果父元素为2em,再将子元素也设置2em,则此时子元素相对于根元素为4倍;
rem--只相对于根元素的尺寸;
媒体查询
@media all[媒体类型] and (min-width:800px) and (orientation:landscape){...}
返回真或假,然后决定执行{...}
媒体属性媒介:
width,height---视口
device-width/height---渲染表面/就是设备屏幕
orientation---设备是纵向还是横向
布局相关
BFC与盒模型
BFC
一个独立渲染的盒子,内部不会影响到外面
成为BFC:
根元素;
float不为none;(浮动的元素?);
position:absolute,fixed;
overflow不为visible;
display:block,inline-block,table,table-cell,flex,inline-flex;
属性:
box垂直方向一个一个往下排列;
box的margin左边会接触到包含块的左边;
相邻的margin重叠;
BFC区域不会与float元素区域重叠;
inline
padding: 上下padding会将背景扩大,但是不会占据位置,不像block会将别的元素挤走;但是左右的和block一样;
margin: 上下无margin,左右有,左右方向margin,padding和块元素一样,上下方向无margin,padding会显示,但是不占据位置;
width,height: 都不起作用,内部大小由内部元素撑开;
无vertical-align,overflow;
float
clear:左右和both
a,b,c---a,c{float:left},b{clear:both}
左浮动 a 无 | 清除右浮动 b 无 | 左浮动 c 无
经典布局
圣杯布局
.container{
overflow:hidden;
min-width: 500px;
}
.a{
padding-bottom: 10000px;
float:left;
position:relative;
box-sizing: border-box;
margin-bottom: -10000px;
}
.center{
width: 100%;
background-color: blue;
padding: 0 100px 0 100px;
padding-bottom: 10000px;
}
.left{
background-color: red;
width: 100px;
margin-left: -100%;
}
.right{
width: 100px;
background-color: yellow;
margin-left: -100px;
}
<div class="container">
<div class="a center">center</div>
<div class="a left">left</div>
<div class="a right">right</div>
</div>
</div>
通过margin-left为负,来使元素移动,再padding使中间的内容居中,再left;
也可以将两侧的设置为absulute来实现margin-left效果
居中
1.水平居中-margin-left-right:auto;块元素-对浮动和绝对定位的无效;
2.垂直居中-text-align:center;inline或inline-block;
3.文字垂直居中-line-height:; 只能对于单行文字;
4.块元素内的 display:table-cell;verticla-align:middle;
--block margin:auto;
--inline-block text-align:center;
5.绝对定位 top,left:50% 然后margin-left-top:-xx ;
6.绝对定位 top,right,bottom,left :0; margin:auto; 然后改变定位偏移量还可以偏移.
设置等高列
a{width:100px;border:1px #333 solid; overflow:hidden;}
b,c{width:50px;float:left;padding-bottom:1000px;margin-botom:-1000px;}
b{bgcolor:red}
c{bgcolor:blue}
<a>
<b>XXXXX
<c>XXXXXXXXXXXXX
<d style="clear:both">
</a>
通过margin和padding,overflow设置自适应并且登高的列.
clear:both清除浮动引起的父元素坍塌.
负边距的使用
margin-top-left: 文档流位置发生变化,元素移动;
margin-bottom-right: 元素不移动,下方,右方的元素移动;
相对定位的top,left,right,bottom,元素移动,文档流位置不发生变化,还是占据原来的位置;
flex
cross 垂直方向
main 水平方向
axis 轴
box属性
flex-direction 主轴的方向
row 默认 水平左到右
row-reverse 水平右到左
column
colum-reverse
flex-wrap 一行排不下时换行规则
nowrap 默认,不换行
wrap 换行
wrap-reverse 换行,右下往上排
flex-flow 方向和换行的简写
justify-content 对齐规则
flex-start 默认 左对齐
flex-end 右对齐
center
space-between 两端对齐 项目中间间隔相等
space-around 两端对齐,项目中间间隔相等,两端有间隔,为中间间隔的一半
align-items 在垂直轴上的对齐方式
flex-start
flex-end
center
stretch 默认 拉伸-当未设置高度或auto
baseline 项目第一行文字基线对齐(文字底部)
align-content 也是垂直轴的对齐,多根轴线才会起作用
flex-start
flex-end
center
stretch
space-between
space-around
item属性
order 排列顺序
flex-grow 放大比例 默认0(如果有多余位置)
flex-strink 缩小比例 默认1 如果位置不足,会缩小(如果位置不够用)
flex-basis 宽度
flex:放大缩小宽度的简写 auto(1,1,auto)|none(0,0,auto),或自定义
align-slef 用来覆盖align-items的值 默认auto,即继承父元素
meta
•meta--元数据
元数据不显示到页面,但是对于设备和浏览器是可读的
***<meta charset="">
***<meta name="将content属性关联到一个名称" content="属性">
SEO优化:
1.keywords 关键字
2.description 页面描述
3.robots
<!--
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
-->
移动设备:
4.viewport 移动窗口设定
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
5.伪装app 全屏离线使用
name="app-mobile-web-app-capable" content="yes"
6.隐藏,设置状态栏颜色--只有webapp下生效
name="apple-mobile-web-app-status-bar-style" content="black/black-translucent/default"
7.添加到主屏后的标题
name="apple-mobile-web-app-title" content="标题"
8.忽略数字自动识别成号码,忽略识别邮箱
name="format-detection" content="telephone=no" /"email=no"
9.添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
10.其他
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
页面相关:
1.
***<meta http-equiv="将content属性关联到一个http头部" content="">
1.expires(期限)
说明:设置网页到期时间,到期后,必须到服务器重新传输;
content="GTM时间格式"
2.pragma(cache模式)
说明:禁止浏览器从缓存中调阅页面--无法脱机使用
content="no-cache"
3.refresh(刷新)
说明:自动刷新页面,并指向新页面
content="x;URL=" x代表多少秒后跳转
4.Set-Cookie(cookie设定)
说明:如果网页过期,那么cookie也会被删除;
content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/";
5.Window-target(显示窗口的设定)
说明:强制页面独立使用--禁止调入别的页面的框架里使用
content="_top";
6.content-Type(设置页面字符集)
content="text/html;charset=utf-8"
7.优先使用edge和chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
或者<meta http-equiv="X-UA-Compatible" content="IE=8" >这样用,切换内核
8.<meta http-equiv="Cache-Control" content="no-siteapp" />
防止百度转码
<meta http-equiv="将content属性关联到一个http头部" content="">`
1.expires(期限)
2.pragma(cache模式)
3.refresh(刷新)
4.Set-Cookie(cookie设定)
•style
media属性--设置样式适用媒体 (是否没必要使用 局限性太大 没有移植性--直接在css文件中使用media)
•link--链接资源
可以用来加载图标到标题区域,也有media属性
•script
延迟脚本加载--defer
异步加载脚本--async 如果脚本不依赖顺序的执行 即与文档,其他脚本无关联 可以异步加载,例如收集客户数据.
•noscript
hack与CDN
ie兼容
gt大于 /gte 大于等于 /lt 小于 /lte 小于等于
<!--[if lte IE8]>
ie8及以下可见
<![endif]-->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
动画效果
1.尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
2.如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
3.如一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性
4.尽可能少的使用box-shadows与gradients,往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。
5.尽可能的让动画元素不在文档流中，以减少重排
position: fixed;
position: absolute;
其他
- 关于选择器优先级
js赋值 > 标签内 > (内联样式表和外连的优先级同等) ID > class > 标签选择
其中 优先级大的,无视优先级小的串联,如id>class.class同优先级的,串联多的优先 .class.class>.class;
- 将js在html末尾引入和加defer属性 是将js推迟到DOM加载完还是页面加载完?
全部加载完--window.onload,$(window).load,defer.
DOM加载完--$(window).read,$(function(){ });
yahoo军规
1.减少HTTP请求--合并css,js,图片;
2.利用CDN加速服务
3.Cache-control设置头文件过期或者静态缓存
4.启用Gzip压缩
5.css放顶部,使用户尽早看到网站完整样式
6.js尽量放在底部
7.避免css表达式
8.使用外联(如谷歌,百度的jquery文件),用户可能已经缓存
9.减少DNS查找
10.删除重复脚本
11.配置ETags
12.缓存AJax
13.尽早释放缓冲
14.用GET进行AJAX请求
15.延迟加载组件,如图片
16.预加载组件
17.减少DOM数量
18.跨域分离组件
19.减少iframe数量
20.no 404
21.减少cookie
22.对组件使用无cookie的域名
23.减少DOM访问次数
24.开发灵活的事件处理句柄
25.避免使用过滤器
26.css sprites--css精灵-多图组合
27.不使用缩放图
28.缓存icon
HTTP状态码
常见:
2XX 成功
3XX 重定向类
4XX 客户端错误
5XX 服务端错误
200 OK
301/302 重定向
404 未找到资源
501 服务器错误,无法提供服务
