zoukankan      html  css  js  c++  java
  • 关于div的几个问题

     1.div默认位置是?

      div是块级标签,会独占一行。可以理解为一个容器,如果里面嵌套元素,或者文字可以根据里面的内容自适应宽高。如果不设置宽度,那么宽度将默认变为父级的100%。这里的父级就是body.body是默认有内边距的,内边距是用padding设置的。一般浏览器中都对body标签进行默认的margin设置为8px,设置body{margin:0px;padding:0px;}   // 清除默认样式

    为什么给body设置padding:0px不能消除内边距,而设置margin:0px却能够消除内边距?

    关于这个问题:
    1. 每种浏览器都有一套默认的样式表,在网页制作过程,没有指定相应的样式时,就会按照浏览器内置的样式表来渲染。
    2. 举例说,IE6、IE7的body标签,默认的样式应该是:display:block;margin:15px 10px;zoom:1;(不是很确定),而没有预设padding值,chrome/firefox也只是设置了margin:8px;没有预设padding,从此可见,设置margin:0;即可消除边距了,这点可以通过简单的试验得出结果了。
    3. 注意不同的浏览器甚至同个浏览器不同版本的默认样式是不同的。body标签分别将margin和padding都重置为0这是网络上广为流传的重置方法,应该是比较可靠的了。
    4. 要彻底理解这个问题,可以去找每种浏览器的默认样式表分析,重置的原理就是利用css样式的相互覆盖的优先级权重,将浏览器默认样式(优先级最低)用开发者定义的样式覆盖掉。只要对照各种浏览器默认的样式就可以比较简单的理解这个问题了。
    目的: 1. 作用是Reset(重置)浏览器默认样式,解决浏览器兼容性的问题,因为每个浏览器都有自己默认的内边距和外边距,使各浏览器样式统一,即使不同的分辨率也能显示相同的效果

    2.多个div在一起默认如何排列

    div是块级元素,当然会独立成行啊。只给高度,不给宽度,默认宽度100%。

     1 <!DOCTYPE html>
     2 <html lang="zh">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Page Title</title>
     6     <style>
     7     .d1{
     8         height: 100px;
     9         border: 1px solid red;
    10     }
    11     .d2{
    12         height: 100px;
    13         border: 1px solid black;
    14     }
    15     .d3{
    16         height: 100px;
    17         border: 1px solid green;
    18     }
    19     
    20     </style>
    21 </head>
    22 <body>
    23  <div class="d1"></div>
    24  <div class="d2"></div>
    25  <div class="d3"></div>
    26 </body>
    27 </html>
    View Code

     如上图显示。

    如果固定了宽高,比如每个都设置100px;当然还是独立成行啊,没有设置margin,如下图

    块级元素

    特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。

       2.元素的高度、宽度、行高和顶底边距都是可以设置的。  

       3.元素的宽度如果不设置的话,默认为父元素的宽度。

    常见的块级元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

    行级元素

    特点:1.可以和其他元素处于一行,不用必须另起一行。

       2.元素的高度、宽度及顶部和底部边距不可设置。

       3.元素的宽度就是它包含的文字、图片的宽度,不可改变。




    3.多个div通过什么布局
    首先,了解一下div的基本属性

     

    一、常用属性

    1、Height:设置DIV的高度;Width:设置DIV的宽度。

    2、margin:用于设置DIV的外延边距,也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离;margin: [top][right][bottom][left]

     可以分别设置:margin-left:到父容器左边框的距离;margin-right:到父容器右边框的距离;margin-top: 到父容器上边框的距离;margin-bottom:到父容器下边框的距离。

    3、padding:用于设置DIV的内边距(内如子元素与DIV边界的距离)。padding:后面跟有四个距离分别为到父容器的上-右-下-左边的距离;margin: [top][right][bottom][left]:需要注意的是padding设置的距离不包括在本身的width和height内(在IE7和FF中),比如一个DIV的width设置了100px,而padding-left设置了50px,那么这个DIV在页面上显示的将是150px宽。

    4、border:设置DIV的边框样式;display:设置显示属性。其值有block、none;float:设置DIV在页面上的流向,其值有left(靠左显示)、right(靠右显示)、none;

    background:设置DIV的背景样式;background后可直接跟背景的颜色、背景图片、平铺方式等样式。也可以用以下属性分别设置。

       background-image:指定使有的背景图片;background-repeat:背景图象的平铺方式。其值有no-repeat(不平铺)、repeat(两个方向平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺); background-position:在DIV中定位背景位置。其值有top bottom left right的不同组合。也可以以用坐标指定具体的位置。

    5、position:设置DIV的定位方式。position的属性中有static、fixed、relative、absolute四个属性。常用relative和absolute。若指定为static时,DIV遵循HTML规则;若指定为relative时,可以用top、left、right、bottom来设置DIV在页面中的偏移(相对于自身的偏移),但是此时不可使用层;若指定为absolute时,可以用top、left、right、bottom对DIV进行绝对定位(对自己最近的父级元素);若指定为fixed时,在IE7与FF中DIV的位置相对于屏屏固定不变,IE6中没有效果(不知为什么)。

    6、font:指定DIV中文本的样式,其后可跟文本的多个样式。font-family:设置要用的字体名称;font-weight:指定文本的粗细,其值有bold bolder lighter等;font-size:指定文本的大小;font-style:指定文本样式,其值有italic normal oblique等;color:指定文本颜色;text-align:指定文本水平对齐方式,其值有center(居中) left right justify;text-decorator:用于文本的修饰;其值有none underline overline line-through和blink的组合;text-indent:设置文本的缩进;text-transform:设置文本的字母大小写。其值有lowercase uppercase capitalize(首字母大写) none;direction:内容的流向。其值有ltr(从左至右)、rtl(从右至左);line-height:指定文本的行高;Word-spacing:字间距。

    7、overflow:内容溢出控制,其值有scroll(始终显示滚动条)、visible(不显示滚动条,但超出部分可见)、auto(内容超出时显示滚动条)、hidden(超出时隐藏内容)。

    二、一些特殊效果:

    1、z-index:设置DIV的层叠顺序。用z-index属性时,position必需要指定为absolute才行。

    2、cursor:设置DIV上光标的样式。

    3、clip:设置剪辑矩形。clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。

    4、opacity 透明度 filter:alpha(opacity=value)  eg:filter:alpha(opacity=50);opacity:0.5;

    多个div可以通过div的嵌套:

    可以通过display: inline-block设置为行内元素。

    div+css绝对定位position,

    通过浮动Float+clear清除浮动


    4.position的几个标签有什么区别

    定位:position
    属性值有四种
    static:默认的
    fixed :固定定位,使标签定位在浏览器窗口上
    absolute:绝对定位,释放占用的空间,跟随设置了position属性的父级标签所在的位置定义,如果父级没有就继续往上寻找,直到找到设置了position属性的父级标签
    relative:相对定位,相对标签本身所在的位置移动,保留原有
    空间的占用。一般使用在absolute的父级,位置的微调

    使用定位属性的时候一般需要结合方向属性的使用
    top,left,bottom,right
    z-index:层级

    详情参考以下链接

     https://www.cnblogs.com/smyhvae/p/8296748.html


    5.float的怎么使用

    浮动属性float,可取值left,right
    1.添加了浮动属性的元素会漂浮并且释放当前空间的占用
    2.当元素添加了浮动属性时,先看相邻的上一个元素是否设置浮动,以相邻的元素所浮动的那一行空间为准进行浮动(足够空间)
    3.如果相邻的没有浮动或者清除受浮动因素的影响,那么当前标签就在当前所在的行浮动
    clear:both 设置了这个属性的标签清除受之前标签浮动的影响

    详情参考以下链接

    https://www.cnblogs.com/smyhvae/p/7297736.html(!!!重点参考)

    https://www.cnblogs.com/stfei/p/9084915.html

    https://www.cnblogs.com/shixm/p/6949509.html

  • 相关阅读:
    【EF6学习笔记】(四)弹性连接及命令拦截调试
    【EF6学习笔记】(三)排序、过滤查询及分页
    【EF6学习笔记】(二)操练 CRUD 增删改查
    【EF6学习笔记】(一)Code First 方式生成数据库及初始化数据库实际操作
    SQL Server表分区
    【工具类】
    【C#加深理解系列】(二)序列化
    【ASP.NET Core分布式项目实战】(三)整理IdentityServer4 MVC授权、Consent功能实现
    【转载】IdentityServer4 使用OpenID Connect添加用户身份验证
    【ASP.NET Core分布式项目实战】(二)oauth2 + oidc 实现 server部分
  • 原文地址:https://www.cnblogs.com/beiluoL/p/10325838.html
Copyright © 2011-2022 走看看