扎实的WEB前端基础

扎实的WEB前端基础

要搞开发，善于使用手册，善于调试是很重要的。然后再加上扎实的基本功，就可以有所进步。下面探讨几个很基础但很重要的问题：

1.内联元素与块元素的特点与区别，熟悉全局属性，专有属性，CSS属性

[1]常见内联元素[一般基于语义]：img、select、textarea

l  相邻的内联元素会排列在同一行里，当一行排不下，才会换行

l  其宽度随元素的内容而变化，且设置width,  height无效

l  margin/padding垂直方向无效，margin水平方向相加

l  内联元素只能包含行内元素，不能包含块元素

[2]常见块元素：table、ul、li、center、h1、dir

l  块级元素会独占一行

l  其宽度自动填满其父元素宽度, 可以设置 width, height属性限制，限制后仍独占一行

l  margin垂直方向取最大值[重叠],水平方向要相加

l  可包含内联元素和其他块元素，<form>只能包含块元素，<p>只能包含内联元素

[3]两者之间的联系

l  通过display属性可以实现内联元素和块原则之间相互变换

l  可变元素是指需要依据上下文才能决定的元素

l  display:inline;能够修复著名的IE双倍浮动边界问题

[4]通用属性

l  class id style title

[5]专用属性

l  <div>[HTML容器],<span>[文本容器],<a name=””>[定义锚点],<caption><code>

[6]CSS属性

l  border-collapse[合并表格单框],outline[轮廓突出], border-radius[圆角边框], z-index[定义层次], line-height[行高], cursor[鼠标显形], display[块行变换], visibility[是否可见], text-decoration[a下划线],list-style-type[列表类型]

【注:没事多看看W3C在线手册，多熟悉这些才能熟能生巧】

2.选择器的使用原则

对选择器优先级的调控，可以有效调解样式的冲突。

l  选择器“继承”机制是最基本的法则：*{margin:0px;}很实用

l  基本优先级：元素属性>style属性值 > 各种选择器

l  ID选择器:权重太高，不建议使用，多与JS结合使用

l  类选择器：.div1{color:red;}

l  元素选择器：p{color:red;}

l  子元素选择器：h1>strong{color:red;}【仅子代】

l  派生选择器：p strong{color:red;}【子孙n代】

l  分组选择器：h1,h2,h3{color:red;}

l  相邻兄弟选择器：h1+p{color:red;}【仅P元素被选中】

l  属性选择器：[title]{color:blue;}；[title=te]{color:red;}；[title~="title"]{color:red;}

l  伪类选择器：link -> visited -> hover-> active 用“：”连接

【注：元素选择器与类选择器常结合使用a.div{color:red;}，但ID选择器不能这样】

3.定位原则与浮动

认真来讨论一下布局定位问题，这还是很有讲究的，大到整个策略的选择，小到如何微调，都是很微妙的，从下面几个点上入手。

1.        布局策略

l  DIV+CSS(float)布局法   

l  table布局法[基本不用了]

2.        定位方法

l  position决定自身位置的移动

l  盒子模型偏向以父子位置关系来进行填充【*{margin:0px; }很实用】

l  float影响的是兄弟位置

l  z-index会影响层次关系

3.        微调要领

l  子节点[img标签，text文本，元素等]居中要用text-align属性，代替align标签属性

l  背景图片居中，要用background-position属性

l  通过标签实现占位效果：<br/>、&nbsp、<div width=”10px”></div>等

l  通过属性实现占位效果：width、border、letter-spacing、line-height、text-indent等

l  行元素[width,height都无效]、块元素本身特性，以及两者之间的转化对布局的影响

部分内容详解如下：

[1]position：static | relative | absolute | fixed

l  默认定位是static，不能设置z-index，故不能重叠。通过float来让元素浮动，也可以通过margin/padding等来让元素产生位置移动。但应该注意这中位移是有别于其他定位方式的

l  相对定位relative不会失去原位置[内容的高度或是宽度加上 margin\border\padding的数值] ，但是会脱离标准流[默认z-index比static高]，通过left:2px;可以向右移动2px

l  绝对定位不会留下专属空位。当需要绝对定位的div的父级元素设置为相对定位或是绝对定位，那么绝对定位的坐标就会以父级的padding左上边缘点为坐标起始点。若没有这样的父元素，那么LRTB就会以窗口左上角为原点为基准，当不设置LRTB等时，默认还在static流所在的原位置。

l  固定定位：是以窗口左上角为原点的

[2]浮动

l  浮动元素脱离标准流，变为行元素

l  若希望清除浮动，那么就在需要移动的div上使用clear来分离它旁边的浮动元素。或者在两者中间加入一个div使用clear:bath;可以达到换行效果。