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

Posted 2020-08-02 X_Zed

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

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

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

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

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

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

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

四、清除浮动：就是可以去掉前面对象的浮动对后面对象的影响。
为什么原来在一行中的两个块会因为浏览器窗口的大小改变而改变原来的位置。（可另外添加一个盒子把他们包裹起来）
*****设置一个块为水平居中时，都会给这个块设置一个宽度值。
*****当父元素没有指定高度时，并且它的子元素有浮动，这时这个父元素的高度不会自动增加。
1、第一种方法：增加一个空标签，就是没有内容的标签。会增加代码。
2、第二种方法：给父元素，加overflow：hidden
3、利用伪对象after方法。
网上最流行的清除浮动代码：
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:“.”;
}
*****定位布局，就是可以通过元素的position属性控制元素的位置。
*****当我们要想使用绝对布局时必须要有两个条件
【1】、必须要给父元素增加定位属性，一般建议使用position：relative；
【2】、给子元素加对对定位position：absolute；同时要加方向属性。

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