zoukankan      html  css  js  c++  java
  • HTML <div> 标签

    定义和用法:

    <div> 可定义文档中的分区或节(division/section)。

    <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

    如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

    用法:

    <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

    不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

    可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

    HTML 与 XHTML 之间的差异

     在 HTML 4.01 中,div 元素的 "align" 属性不被赞成使用。

     在 XHTML 1.0 Strict DTD 中,div 元素的 "align" 属性不被支持。 

    HTML 4.01 与 HTML 5 之间的差异

    HTML 4.01 中的 "align" 是不赞成使用的,在 HTML 5 中不支持该属性。

    提示和注释:

    注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。

    提示:请使用 <div> 元素来组合块级元素,这样就可以使用样式对它们进行格式化。

    div的属性
    主要设置如下:
      overflow(溢出控制):visible(默认,可见)、auto(自动)、scroll(显示滚动条);
      width(宽度):数值;
      height(高度):数值;
      color(字体颜色):色彩代码;
      font-size(字体大小):数值;
      line-height(行高):数值;
      border(边框):宽度、类型和颜色,类型主要支持以下几种:none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset;
      font-weight(字体粗细):normal、bold、bolder、lighter;
      font-family(字体类型):Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆;
      background(背景颜色):色彩代码;
      scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar -darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar -3dlight-color,scrollbar-arrow-color(滚动条各部分的颜色):色彩代码;
      filter:chroma(COLOR=转换成透明的颜色)(chroma过滤器):色彩代码,该颜色将转换成透明效果;
      word-break(断字):normal(默认,正常断字)、keep-all(严格不断字)、break-all(严格断字);
      direction(文字方向):ltr(默认,从左向右)、rtl(从右向左)。
    HTML中的Div分区属性
    基本属性:width, height, left, top, background-color(当设置为transparent时表示透明)
    2、定位属性:position: absolute/relative
    absolute时,位置固定;relative时,位置会随着内容的实际情况进行浮动
    3、显示属性:display: block/none
    block为默认状态,表示显示;none为隐藏
    4、优先属性:z-index:n
    n表示一个整数(正负均可),有多个Div时n越大,则越靠前显示;
    z-index可以理解为z轴的坐标(x,y轴控制左右、上下方位,z轴控制层叠div的前后方位)
    只有用绝对定位(position:absolute)时,属性z-index才起作用;
    未设置绝对定位(position:absolute)的div,其z-index永远为0;
    未设定优先属性(z-index)的div,按照声明的顺序层叠,后声明的盖住先声明的,如果有两个Div属于父子关系,则子div覆盖父div;
    5、透明属性:opacity:0.3;(firefox专用);filter:alpha(opacity=30)(IE专用)
    两者一起用的时候就将两种主流浏览器都兼容了;上面例子是将Div的透明度设置为30%,可以看出两者的设置稍有不同;Div的文本与背景色均能被透明化!

     如何让DIV标签居中显示?

    在经典论坛上面搜了些老贴子看,大都说的是用text-align:center加在BODY中,然后DIV标签相对于BODY而居中对齐。这样有个缺点就是文章中所有的对象都会居中对齐(包括文字、图像等),这样文档中要靠左的对象就需要另加代码,这方法不行。

    而如果直接加上:200PX;margin:0 atuo;,这样的话只是在FireFox浏览器中会居中对齐,而IE里面就不行。
    搞了大半天,问题又回到标准上来了,在学习网页标准的时候,首先就是了解DOCTYPE的设置,因为这是至关重要的。
    而DIV居中的问题所在,就是你的DOCTYPE部份:

     程序代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    当你加入这句声明以后:

    程序代码

    .div-1{
      200px;
      margin:0 auto;
    }

    tops:
    margin属性用于控制对象的上/右/下/左4个方向的外边距,使用两个参数时,第一个参数表示为上下边距,第二个参数表示为左右边距.除了直接使用数值外,margin还支持一个值叫auto,auto值是让浏览器自动判断边距.
    这样的语句在IE和FF浏览器中都可以让DIV居中。
    呵呵,开始搞了半天,甚至想用论坛上说的JS方法,后来找到一个贴子,才搞懂原来是DOCTYPE的问题。
    PS:而有些朋友在做某些网页的时候,是不能加这句声明的,嘿,这时候就只能用文章开头所说的在BODY中加入text-align:center的方法了。

    如何隐藏div标签

    document.getElementById("DIV的ID").style.display="none";//隐藏
    document.getElementById("DIV的ID").style.display="block";//显示

    点击div实现a标签的跳转效果

    下面是一个div
    <div ></div>,(这个有css,我暂时不在这里写上,但这个div有背景)。我要的效果是:当我把鼠标移到这个div上(或背景上),并点一下它,它就会像a标签那样跳转到某个页面。前提是div里面不能有任何东西,div外面也不能有a标签,可以用js,请问如何才能达到我的效果?
    <div id="ttt" style="100px; height:100px; background-color:#ccc;"></div>
    window.onload = function(){
        var obj = document.getElementById('ttt');
        obj.onclick=function(){  
            window.location.href="跳转的地址";            
         }
     }
  • 相关阅读:
    spark的做算子统计的Java代码(在Linux系统集群式运行)
    http协议面试题
    vue响应式原理
    vue-cli3搭建vue项目
    vscode中自定义代码片段
    vue中常用的全局配置
    tomcat安装配置
    Git相关
    nginx配置文件详解
    nginx源码安装
  • 原文地址:https://www.cnblogs.com/zuihongyan/p/5649059.html
Copyright © 2011-2022 走看看