DIV+css排版问题技巧总结---v客学院技术分享

            DIV+css排版问题技巧总结

一．排版思路

一、从上到下，从左到右，从大到小。

二、首先肯定排版分区，排除色块分布，而后再从简单的部分开始。

三、在某一块内将HTML部分写好，再加上ID或CLASS，利用CSS控制。

四、善于利用参考手册，根据参考手册的分类进行查找。

 

二．经常使用大类：

 

 

 

三．注意元素样式的优先级

（1）肯定你指定的是哪一个元素，若是两个样式指定的不是同一类元素，并不会发生冲突，即不会有优先级的考虑

（2）在指向同类元素时，没有后代选择器的状况下，id>class>标签>*

（3）在指向同类元素时，后代选择器和普通选择器比较，首先比较后代汇总最早的那个选择器，若最外层的老大类型相同，后代选择器更详细，则会遵循后代选择器。若类型不相同，则按照（2）判断其优先级。

如：#center p > #pid

.center p < #pid

（4）同为后代选择器，则一级一级的比较，直到能判断出不一样类型的优先级为止。

#center p < #center #pid

 

四．内外边距，以及盒子模型

 

 

火狐上看，黄色的为外边距，深灰色的为边框，紫色的为内边距，蓝色的为元素内容

利用F12对代码进行调试，能够点击页面的元素，查看HTML代码和CSS样式

 

 

当页面元素不方便点击时，也能够点击代码部分，查看所在的位置和样式

 

有一些经常使用标签，是自带内外边距的。如：body/ul/p/h1-h6。要用到这些标签的时候，注意观察内外边距，通常在一开始就设置为0.

body,p,ul,h1{margin:0px;padding:0px;}

 

五．切图

切图的过程当中，注意调整大小，选择切片工具，利用alt+鼠标滚轮调整图片缩放比例，保证边缘的贴合。Alt+ctrl+shift+s保存切好的图片，注意右上角的保存格式。

 

六．浮动问题

在HTML中，有不少标签是默认占满全行的，即便规定了宽度，这一行的后面也不会再放东西了。（行内元素）

若是须要两个DIV并排排列，须要给这两个DIV都加上浮动，而且在下一个元素将浮动清除。

若是没有及时清除浮动，可能会形成以后的元素X轴跟在以前某个浮动的元素后面，形成元素的位置混乱。

浮动为：float:left/right

清除浮动：clear:left/right/both

 

七．内边距使用时出现的问题，元素位移时出现的问题

当一个元素添加了内边距，会扩大元素所占的位置。如：一个元素为100*100，设置了内边距padding:10px后，它占的位置为120*120；一个元素宽度为100%，加了内边距后，会将其整个宽度在100%的基础上再加一段，形成页面宽度过大。

 

 

同理，当把这个元素再往右移动若干像素后，总宽度也会随之发生改变。在实现后，及时检查，是否出现了大小不正常，宽度不正常，莫名其妙的滚动条等状况。

 

八．行高

在调整文字的上下居中时，利用line-height属性，而不是一味的加上内边距。

处理文字时，尽可能使用文字类的属性。

 

九．Div图片居中

当DIV1里面有一个图片，须要控制图片在DIV1内居中时。

（1）在图片外嵌套一个DIV2，让DIV2在DIV1内居中。

 

 

 

（2）给DIV1加一个属性，text-align:center；

 

 

 

十．伪类

各类标签都有伪类的属性，为

选择器:伪类名

如：a:link {color: #FF0000} /* 未访问的连接 */

a:visited {color: #00FF00} /* 已访问的连接 */

a:hover {color: #FF00FF} /* 鼠标移动到连接上 */

a:active {color: #0000FF} /* 选定的连接 */

 

 

十一．改变a标签的尺寸

必须给a标签加上display:block的属性.

改变a标签的文字颜色和下划线，属性必须定义在a标签，制定外面嵌套或者里面嵌套别的标签都不行。

 

 

十二．加边框

加边框时，须要注意到隔壁元素的距离，也许你加粗了边框，可是因为空间不够，被其余元素挡住了。

 

 

十三．页面分区

注意页面分区的结构和层次。避免出现标签的嵌套失误。从大到小来分，肯定每个区域的位置。

如：有人将#center_left_four放到了#center_right的里面，却是整个页码就跑到右边去了。

 

 

十四．表单元素边框

按钮类，输入框类等，会有自带的边框，通常咱们不保留其边框(border:none)，设置本身的样式。

 

（php开发,web前端，ui设计，vr开发专业培训机构，v客学院版权全部，转载请注明出路，谢谢！！！）