标签：
（初接触html+css时一些笔记）
1、父盒子的高可以不用给，让里面的内容撑起来就好。
2、对于外边距合并问题，解决方法overflow : hidden;,或者是另外加一个边框可以下来。
3、对于网站的logo，我们要给它设置关键字，写在a元素里，
1 .logo a{ 2 display: block; 3 height: 40px; 4 text-indent: -2000em;/*首行缩进 em是一个字的大小，rem是以一个根的大小 这个字是给搜索引擎看的*/ 5 }
4、我们可以将具有相同特性的css样式放在common.css中，减少了代码的缩写。
5、
1 .register{ 2 width: 49px; 3 height: 30px; 4 background-color: #ff6400; 5 float: left; 6 text-align: center; 7 line-height: 30px; 8 color: white; 9 /*元素加了浮动就转为行内快元素了，*/ 10 /*display: inline-block;*/ 11 /*转为行内快元素，就有了大小，但是位置不精确，所以我们用float*/ 12 }
7、 写样式的时候尽量用class，少用id因为id的权重太高了，以后写就是时候不好提权
命名 chass="stie-nav"
id = "stie_nav"
版心，可视区：1200px;
8、浮动：要么都浮动，要么都不 一个盒子有三子盒子，有一个浮动，其余的都要。
9、logo优化
1 <div class="logo"> 2 <h1>写h1是为提权 3 <a href="http://">奔跑吧，云课堂</a> 4 </h1> 5 </div>
10、网页上的小图标
比特虫 能够将png》icon图片的网站；
16*16
在《/head》的上方写上 这图一般放在根目录下
http://www.bitbug.net/favicon.ico 可以直接在网址中输入这个地址，找到网页网页上的图标
在head里面插入
<link rel="shortcut icon" href=favicon.ico" />
即可显示
11、nav部分，
为什么导航栏一般是用li来做，而不是用a直接做？？
最核心的原因是为了优化，因为a是非常重要的关键词，如果把所有的非常重要关键词都有堆砌在一起，搜索引擎会认为是在作弊（更容易搜索到） ，我们用li隔开，
不要给li宽度，因为每个列表中字数不一样，给了宽度会排列不好看,因此我们要给a的padding值，这样可以实现不同列表的有相同的间隔，中间的竖线可以用border-right来设置，最后一个的要去掉即：
1 .nav li:last-child{ 2 border: 0; /*最后一项的边框要隐藏*/ 3 }
12、a span em b ui ims 是行内元素，是没有宽度和高度的， 盒子宽度=A+B+C;
13、现在的电脑的分辨率一般还是少于2000px;
14、元素的定位，
/*定位的口诀：子绝父相，即父：relative;zi :absolute;*/
15、对于有padding的盒子，会给盒子的width加减
16、让一个盒子居中显示的一种方法
.circle{ padding-left:11px; width: 100px; /* 、有paddingd的要学会给width加减*/ height: 28px; background-color: blue; position: absolute; bottom: 12px; overflow: hidden; left: 50%; /*先走外边快的50%；*/ margin-left: -55px; /*再回走自己大小的一半，这样就能精准定位*/ background:rgba(0,0,0,.3); /*css3的透明背景，不影响盒子里面的内容*/ border-radius: 15px; /*圆角半径*/ }
17、定位：1.1 margin: 0 auto; 只能让标准流的盒子居中对齐，必须是块级元素，还要有宽度， 加了定位的盒子想要居中对齐，只有定位；
18、清除浮动的方法：
clear:both; overflow:hidden; 以下这个方法更好,没有多加额外的标签，利用伪类来清除浮动 .clearfix:after{ content:"."; "."可放可不放 display:block; height:0; visibility:hidden; clear:both; } 这是兼顾ie6; .clearfix{ zoom:1; } 新浪 网易 另一种比上一种还好 .clearfix:before,clearfix:after{ display:table; content:""; line-height:0; } .clearfix:after{ clear:both; } 这是兼顾ie6; .clearfix{ zoom:1; } <div class="father clearfix"> 小米官网 */
标签：
原文地址：http://www.cnblogs.com/muzhuo/p/5350939.html
