H5 CSS_h5 css 单位设置-优快云博客

本文链接：https://blog.youkuaiyun.com/mayaling123/article/details/76576579

什么是BFC？

在了解BFC之前，先了解两个个概念：
1.box就是盒模型。box是css布局的对象和基本单位，说白了就是咱们网页布局的基石，简单来说一个页面是由很多box（盒模型）组成的。
2.元素的类型也就是display属性。元素的类型和display属性决定了这个 Box的类型。不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器-人话就是网页布局的一个范围），因此Box内的元素会以不同的方式渲染（显示）。
概念：BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。是一种布局方式。
通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。比如清除浮动）并且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。

BFC布局规则

1.在BFC下，内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器（父元素）的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。例子：两个div，一个进行浮动，一个不浮动，这时浮动的元素会覆盖没有浮动的元素。给没有浮动的元素加overflow：hidden。就不会重合。
5.计算BFC的高度时，浮动元素也参与计算

如何触发 BFC

1.浮动元素，float 除 none 以外的值
2.position的值不为static或者relative
3.display不为none
4.overflow 除了 visible 以外的值

BFC的应用

1.解决浮动塌陷问题
2.自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow：hidden。）
3.解决设置margin值重叠问题。
总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。它规定了元素与其他元素的关系和相互作用。

css统筹

1）整站里相同的CSS样式提取到一个样式表里，各个页面调用相同的样式文件即可。
2）网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件。
15.1.1 根据页面类型分离文件
15.1.2 根据功能模块分离文件
15.1.3 根据设备类型分离文件
15.1.4 根据代码规模综合分离文件

网页自身优化（如何让网站被搜索引擎搜索到）：

★页面主题优化

实事求是的写下自己网站的名字，网站的名字要合理，最好包含网站的主要内容。

★页面头部优化

页面头部指的是代码中部分，具体一点就是中的“Description（描述）”和“Keywords（关键字）”两部分：
1、“描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
2、“关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10—8个，搜索引擎只会浏览靠前的几个关键字。

<meta name="keywords"   content="" />向搜索引擎说明你的网页的关键词；

<meta name="description"    content=""/>告诉搜索引擎你的站点的主要内容；

<meta name="generator" content="">用以说明生成工具（如Microsoft FrontPage 4.0）等；

<meta name="author"content="你的姓名">告诉搜索引擎你的站点的制作的作者；

★超链接优化

搜索引擎为何可以能够索引全世界的网站，是因为各个搜索引擎程序中都有一个会自动“爬行”于互联网上的智能机器人程序，这个机器人就是顺着网站之间的链接游览世界的，那么我们就应该为它创造一个良好的爬行通道——合理的设置链接。怎样的链接才是合理的呢？
1、采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字.
许多公司、个人都喜欢酷酷的Flash动画，网站的入口也做成Flash片断，，搜索引擎很难光顾这样的网站。而且个别设计者非常马虎，把网站的入口链接放在了Flash上，有时因为网络繁忙、缺少Flash插件而导致用户根本就看不到网站的内容，
2、按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里.
3、最好别使用图片热点链接，理由和第一点差不多。

图片优化(alt属性，title属性)

图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实没什么意义的图片，最好也不要省略alt，而应该留空，即 alt=”“。

★为网站制作一个“网站地图”

什么是网站地图？说白了就是一个页面，在这个页面上呢，列出了你网站中各个栏目的入口地址，例如：http://sitemap.163.com，站点地图的作用很大，首先，对于一个栏目众多的网站，它可以帮助访客最快速度找到所需的内容；二则，可以给搜索引擎提供一份自己网站的“鸟瞰图”，方便搜索机器人依次索引整个网站。

★PageRank（pr值,友情链接）

PR值是Google提出的一个重要参数，它标明了某个网站的重要程度，那么pr值是如何确定的呢？目前普通的解释为：假如有ABC三个网站，彼此互作友情链接，那么当一个访客通过A上的友情链接来到B时，Google就认为A为B投了“一票”，同理，如果有人从C访问B，那么B又得一票，如果全世界的网站上都有B的友情链接，B就是世界上最重要的网站了！
那么如何提供我们自己的pr值，方法为交换链接！应该找一些和自己网站内容相近，且较为优秀的网站，但不要疯狂的交换链接，如果你的首页上一下子多了几百个友情链接，Google不但不会提升你的pr，有可能认为你作弊，从而把该网站从自己的数据库中删除.

★静态页面与动态页面

目前所有的SEO都认为，Google一类的搜索引擎会尽量避免索引带有参数动态页面，而喜欢索引普通的静态页面，这一点并未得到Google等搜索引擎的明确回答，但从效果来看是这样。
毕竟动态页面的变数太大，举个例子，你发了一个帖子，可能在论坛某板块的第1页上，可随着跟贴的增加你的发言可能就被挤到第10页上了，因此，制作网站的时候，最好避免使用动态页面，或者改良技术，让动态页面自动生成对应的静态页面，既能便于搜索引擎收录，也可以降低网站服务器、数据库负担，一举两得，不过这也不是绝对的，网站流量决定一切，即便是一个全部采用动态页面的网站，但因为很受欢迎访客不断，那么它还是会被搜索引擎青睐，还是会出现在搜索结果的前列。而且，随着技术的进步，搜索引擎也会改进，搜索动态页面将来必定会更加容易。

★避免大“体积”的页面

有经验标明，搜索引擎不喜欢索引大体积的页面，即一个页面代码部分的体积不要太大，控制在100kb内为佳.

★最重要的一点！合理的代码结构

搜索引擎喜欢格式清晰，结构分明的页面，理论上XML是最合乎搜索引擎，当然，这太极端了，不过如果采用XHTML+CSS技术将页面数据同表现分离，即避免大量嵌套表格和其它冗余的代码还是能够完美实现这一要求的。
原则：简化代码，易修改

CSS规范

1、命名方法（语义化命名，结构化命名）
ID:结构化 header footer
class: .border0 . red: .font12 .clear

2、CSS命名规则
1）建议使用小写字母
2）以英文字母开头，后面可以连接数字、字母、下划线、连字符，建议尽量使用英文字母，适当使用下划线和连接线；
3）词必达意，名称要反映用途和相关信息，同时也要简短。

样式重置

规则设置

以新浪为例：

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img { border:none; }
img{display: block;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; } 
body { color:#333; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ overflow-x:hidden;}
a { color:#666; text-decoration:none; }

a:visited { color:#666; }

a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }

2、腾讯

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;}
a{color:#172c45;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
.ind{text-indent:2em} 
.ind10{text-indent:10px;}
.noborder{border:0;}

3、搜狐

body{font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;} 
body > div{text-align:center;margin-right:auto;margin-left:auto;} 
div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input{font-size:12px;padding:0} /* 默认链接颜色 */ 
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}

HTML和XHTML区别

XHTML 语法上要求更严谨些。
以下是 XHTML 相对 HTML 的几大区别：

XHTML 要求正确嵌套
XHTML 所有元素必须关闭
XHTML 区分大小写
XHTML 属性值要用双引号

video标签的属性

src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
muted:静音
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
auto - 当页面加载后载入整个视频
metadata - 当页面加载后只载入元数据
none - 当页面加载后不载入视频

方法一：
position:absolute;
left:0; right:0; top:0; bottom:0;
margin:auto;

方法二：
position:absolute;
top:50%; left:50%;
margin-top:-100px; /元素高度的一半/
margin-left:-100px; /元素宽度的一半/