第一个注意点:选择器的使用(标签、class、id)

三种选择器中id(#)的优先级最高,根据id名筛选出唯一元素;

如下输入:#menu{ width:1200px; height:45px; background:#90F}

     <div id="menu"></div>

其次是class(.)的优先级较高,根据id名筛选出唯一元素;

如下输入:.text{ width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}

     <div class="text"></div>

标签优先级最差,根据标签名选中元素;

如下输入:div{text-align:center; vertical-align:middle; line-height:100px}

     <div>微软雅黑</div>

  第二个注意点:外边距margin、内边距padding和流float的使用

外边距margin和内边距padding的使用是相对于边框的调整,四边框按上右下左顺时针调整;

特殊使用:外边距margin一般配合流float来使用,流float给操作的对象规定一个方向(left向左流、right向右流),被操作对象按此按此方向进行布局

如下(导航栏的制作):

    .text{ width:200px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
    .text:hover{ background-color:#000; color:#F00; cursor:pointer}

  <div id="menu">

    <div class="text">首页</div>
    <div class="text">产品介绍</div>
    <div class="text">产品图片</div>
    <div class="text">产品参数</div>
    <div class="text">关于服务</div>
    <div class="text">联系我们</div>
  </div>

另外,内边距padding:如果加了内边距,该元素会相应的变大,则需要在相应的高度属性中进行调整;

如下输入:

    <div style="width:100px; height:80px; background-color:#90C; float:left; padding:20px 0px 0px 0px"></div>(这里height由100px调整为80px,加padding效果)

  第三个注意点:分层z-index的使用条件

使用分层z-index时,要配合位置属性来调整;如果缺少属性位置的设置,则没有显示效果。

如下输入:

  <div style="width:300px; height:300px; background-color:#0F0; position:relative; z-index:5px"></div>
  <div style="width:300px; height:300px; background-color:#009; position:relative; z-index:2px; margin:-50px 0px 0px 50px"></div>

关于div+css排版布局中需注意的细节问题的更多相关文章

  1. HTML CSS + DIV实现排版布局

    HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...

  2. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  3. 【笔记-前端】div+css排版基础,以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  4. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  5. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

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

                DIV+css排版问题技巧总结 一.排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...

  7. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  8. DIV+CSS 网页布局之:混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  9. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

随机推荐

  1. Java IO学习笔记(三)转换流、数据流、字节数组流

    转换流 1.转换流:将字节流转换成字符流,转换之后就可以一个字符一个字符的往程序写内容了,并且可以调用字符节点流的write(String s)方法,还可以在外面套用BufferedReader()和 ...

  2. hack在微信等webview中无法修改document.title的情况

    var $body = $('body'); document.title = '确认车牌'; // hack在微信等webview中无法修改document.title的情况 var $iframe ...

  3. 【原】无脑操作:Windows 10 + MySQL 5.5 安装使用及免安装使用

    本文介绍Windows 10环境下, MySQL 5.5的安装使用及免安装使用 资源下载: MySQL安装文件:http://download.csdn.net/detail/lf19820717/9 ...

  4. server

  5. 怎么在linux ubuntu 上的nginx 绑定域名

    前一篇介绍了,如果在ubuntu上运行nodejs,毕竟访问的时候都是用ip地址+端口号,但是上production 环境都需要域名的,IP地址当然不行 读过上一篇的朋友知道了,如果在upstart ...

  6. CC攻击网站和游戏如何针对性预防?

    1:CC攻击原理 CC = Challenge Collapsar,其前身名为Fatboy攻击,是利用不断对网站发送连接请求致 使形成拒绝服务的目的, CC攻击是DDOS(分布式拒绝服务)的一种,相比 ...

  7. Java多线程缓存器简单实现

    package com.charles.utils; import java.util.HashMap; import java.util.Map; import java.util.concurre ...

  8. [Android]Android内存泄漏你所要知道的一切(翻译)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/7235616.html Android内存泄漏你所要知道的一切 ...

  9. tensorflow 实现神经网络

    import tensorflow as tf import numpy as np # 添加层 def add_layer(inputs, in_size, out_size, activation ...

  10. 解决input[type=file]打开时慢、卡顿问题

    经过测试发现,在mac里面safari.Firefox.Chrome(opera不知道为啥老闪退)都没有卡顿问题 在windows里面,Firefox不卡顿,只有Chrome卡顿. 然而,这个插件是从 ...