DIV 和 CSS 网页布局总结

最近两个月在创业团队写了前端网页及Javascript脚本，个人算是有一点学习心得吧！【晚上还要加班写与后端服务器交互的代码，苦逼=-=】

现在总结下关于网页布局及样式的一些个人浅见。

好了，废话不多说，开写。

==================================================

1、HTML标签：

HTML是超文本标记语言，顾名思义是以标记的形式布局网页内容。

总的来说，标记分为两块：

1）行标记 2）列标记

一、行标记：常用的主要是1、<span>对行内文字进行颜色、大小等的标示；2、<i>斜体标记。

二、块标记：<DIV>相当常用的标记！！！

三、列表标记<ul><li>

2、网页编写结构：【一般情况下用DIV和CSS即可完成网页的布局工作，下面就常见问题进行梳理。】

1、div嵌套div：这种问题一般定义parent DIV 的position为relative；定义child的DIV为absolute。即可完成child对于parent的定位布局

     实际上定义了absolute的元素，它是脱离文档流的，也就是不占据页面布局空间。所以当制定z-index的时候，可以进行

    纵向的叠加。

注意：如果没有设定relative和absolute，DIV块会按照document的body定位。其实这个也不难理解，定义absolute的DIV 会不断向上寻找

定义了relative的DIV进行绝对定位，如果没有上级元素定义relative，这种查找直到body才会结束。

2、div的padding、margin对DIV块的大小影响：

margin在元素的border之外，颜色是透明的，它的作用是定义元素与元素之间的距离。

padding在border之内，对DIV的大小有影响，作用是定义元素上下级关系的距离。

3、ul和li布局原生样式去除：

ul和li是列表元素，去除样式需要加{margin:0;padding:0};而对于li可以定义{display：list-item;或者display:inline-block；list-style:none}

对于li的list-item样式而言，它是自带空格的，这点要非常注意。去除空格，可以定义float,或者font-size:0.

4、float之后，页面混乱：

这种情况需要在float相应元素后面加上<div style="clear:both;"></div>，因为本质上float的元素和absolute一样是脱离

文档流的，如果不在后面清楚样式，会导致接下来的元素自动上浮，影响布局。div本身的样式是自带换行的，这个样式在clear之后

可以恢复。

5、类似input、textarea等可以和用户交互的标签：

一般需要设定maxlength进行限定，resize去除扩展样式。textarea还有个很奇特的地方，就是它是一个

行元素，不像div块元素一样可以自主添加滚动条，这个也是比较头疼的。

6、以IE为内核的浏览器不支持border-radius：

一般需要在meta中加入http-equiv,这个在网上都搜得到，就是告诉浏览器用何种方式对内容进行渲染。

还有一些问题，我这边就不赘述了。一般在应用CSS的时候，需要注意inherit这个属性，避免父级元素的样式影响下面的。

3、javascript【动态页面交互】

概述：JS是动态页面之魂，这个真不是浪得虚名。利用JS，可以自定义函数对页面元素操作，包括改变内容、CSS等等，真是博大精深，

不过要掌握好还真是不太容易。

常见问题解决：

1、在某个元素上，同时放置多个函数: 

on({function:{},function:()}),利用on()就可以做到这一点。

2、获取元素个数:

index(),这个函数可有大用处了！！因为它实际上取到了所有siblings的标号，这个标号可以赋给你所需要进行操作的其他元素

建立对应关系，其实就是充分运用数学啦！！而不仅仅是函数式编程到底！

3、置换多个内容：

一般我会建立一个数组，将需要置换的内容存在数组中，利用index（）,来调用数组中的东西。运用这种方法写出来的代码简洁而

明了。总之，充分运用数学，会事半功倍！

4、事件中嵌套事件：

我们在编写JS的时候可以按照事件发生的顺序逻辑写代码，这样的好处就是本身的书写顺序就决定了代码的执行顺序，避免了很多

麻烦，推荐新手开始可以这么写。

5、调用第三方代码库：

jQuery中有很多第三方的代码库，例如Jplayer、layer等等，运用第三方代码库的好处就是简单易用，不用自己写。坏处也是显而易见的.

我之前写css的时候没有用class和id的形式写，而是采用dom伪类来写的后果是，第三方代码库自带的样式，改变了我的dom结构，使得样式

失效，这个要非常注意！！！！！

6、DOM traverse的形式写jQuery：

JQ对于dom形式的selector是支持的，充分利用DOM可以避免JQ写的太长，长度都在selector里面占了。这样的好处是简洁明了，不用调用很多

traversing函数来查找元素，而可以直接执行我们需要事件部分。大爱JQ啊！！！！

=============================================================================还有很多前端问题之后找事件再写。。。=-=

总之，在写前端页面的时候为了让页面尽量美观，我一般采用ul、li、div三个块元素来形成结构，对于css这块，有很多基本的margin、padding、text-align等是需要

熟悉的。 JavaScript这块的话，稍微具有逻辑性一点，在编写的时候头脑要很清楚，充分利用数学编写，会事半功倍，代码写出来自己也觉得优美，有木有！！

之后我会继续更新前端的一些注意点~

=========================================分割线

滚回去干活了=-=