Html/Css(新手入门第三篇)

1、学习心得---参考优秀的网页来学习。

1咱们只作的静态网页主要用的技术？html+css 只要网上看到的，他的源代码公开的。
【1】、先去分析，他们页面是如何布局（结构化）
【2】、再试着去作一下，---模仿过程。
【3】、最后咱们能够本身尝试创新---通向高手的过程。

css精灵技巧，优化网页的http请求次数，提升网页的效率。
*****css精灵的核心思想，就是将多张图片，合成一张图片，而后经过背景属性中的定位来控制到底显示图片中的哪些部分。
*****若是网页中能选中的图片，那确定就是插入的图片，选不中，就是背景图片
【css3中经常使用字体图标来替代传统的小图标（将来趋势）】

2、css布局的方式：
一、默认的，就是按文档流的顺序。按html的结构顺序。
二、浮动方式
三、定位方式

3、浮动
浮动是将块元素的霸道属性，独占一行的行为取消，容许别人和他一行。
浮动实际上是这个块从原来的文档流模式中分离出来，他后面的对象就视它不存在。
经常使用的布局效果，例如：一行并列式，就是在一行中显示几个块元素。

css把网页元素分红两类，一种是块一种是内联元素。
body，div，p，h1，ul与li默认状况下是块元素。是要想让他们在一行中显示，就要用到浮动。

咱们在制做时，你多使用不一样的浏览器查看你的结果，这样你就知道各类浏览的差异。
*****总结出，当IE6父元素中的子元素的高度超过了父元素的高度，IE6默认会把父元素的高度自动增长。
*****若是想让多个块显示在同一行中，能够讲这些块都设置成浮动，而且浮动方向相同。
*****浮动浮动，先浮后动，浮动的对象会先漂浮起来，离开原来的位置。后动，就是它后面的对象。会向它原来的位置上动起来。

4、清除浮动：就是能够去掉前面对象的浮动对后面对象的影响。
为何原来在一行中的两个块会由于浏览器窗口的大小改变而改变原来的位置。（可另外添加一个盒子把他们包裹起来）
*****设置一个块为水平居中时，都会给这个块设置一个宽度值。
*****当父元素没有指定高度时，而且它的子元素有浮动，这时这个父元素的高度不会自动增长。
一、第一种方法：增长一个空标签，就是没有内容的标签。会增长代码。
二、第二种方法：给父元素，加overflow：hidden
三、利用伪对象after方法。
网上最流行的清除浮动代码：

.clearFix:after{
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
    line-height:0;
    content:“.”;
}

 

*****定位布局，就是能够经过元素的position属性控制元素的位置。
*****当咱们要想使用绝对布局时必需要有两个条件
【1】、必需要给父元素增长定位属性，通常建议使用position：relative；
【2】、给子元素加对对定位position：absolute；同时要加方向属性。

*****相对定位与绝对定位。
绝对定位是父元素为基准点进行定位---会脱离文档流。(注意，脱离文档流以后子元素不会继承父元素的宽)
相对定位是根据自身为基准点，进行定位---离开原位置，但还占着原来的空间。