• css为什么要用悬浮


    如果这个100px的宽度是一个Img,横内元素。右边也是横内元素的话和块级元素是不同的。

    2.文字环绕图片。

    div下有个img然后有个span标签

    img最好悬浮,悬浮虽然说脱离文档,但是还是占空间的。

    所以span中的问题可以围绕他。

    或者div下有个img标签,然后一堆文字也行,具体的自己看。

    3. float可以帮助我们更好的,更快的布局.

    不是说我们的margin-right:0px;这个是代替不了我们的float:right;

    margin更趋向于和周围元素的关系。

    4. 还有一点position 的relative和position的使用中:

    最好一个relative,然后下一层absolute,然后在下一层relative。

    如果直接relative然后下一层relatve是没有效果的。

    5.我们注意通常最外边我们都需要一个布局的div,然后里边有定位的div,我们一般情况下很少在布局的div上使用padding或者margin因为这样子或不自觉的改变布局div的大小,我们一般都在里边的元素内使用,这样子改变里边某个元素的width和height,但是和外边的布局是没有关系的。

    6.span标签如果没有float和右Float,他的line-height是不同的。没有的话,可能line-heigh就无效。

    7. inline-block

    http://www.111cn.net/cssdiv/163/54664.htm

    http://www.cnblogs.com/KeithWang/p/3139517.html

    这个属性我一般用于横p元素之类的,并且里边没有块元素,这样子可以设置他的宽和高。

    8.一个div的高度不设置的话,如果里边有一个Img可以撑高他,但是如果如果这个img是float:left;这样子就不会撑高了。

    所以如果一个悬浮的元素的高度如果大于外边的div设置的高度的话,那么这个div也不会被撑高。所以内部元素可能会覆盖这个外部的dib的边框。

    9.为什么要清除悬浮呢?

    比如并列的元素,第一个内部的元素设置悬浮的话,那么第二个内部的元素也会受到影响。

    10. 如果子元素用float3个或者3个以上的话,一定要考虑父元素设置高度。

    或者父元素同级的下一个元素一定要清楚浮动。

    11.

    如果想要毛毛居中的话,必须在父元素上填写text-align;的属性。

    块的父元素上决定子横内元素的水平居中的问题。

    12. text-indent:2em;对p标签有用,但是对span不知怎么失效了。

    13.float只是脱离文档流,但是他不会占据一个有高度的东西,同时别人也不同占据他。

    但是如果同级元素有设置的height,悬浮就不会上去。

     14.

    这里我们可以同级的前一个img为float,没有清除悬浮的情况下,那么下边的都悬浮,这个ul高度就是0,宽度也是0,下边的li没有写float:left;也许自动悬浮,

    主要我们需要注意的是,解决的办法就是,后边的ul我们也设置悬浮,然后li也设置悬浮,悬浮中的悬浮,是不需要clear之类的操作的。

    15. 从上边的例子中,我们可以看出来的,容量的问题,

    左边100px右边自动适应。

    a.我们左边放一个div左悬浮,右边一个div也左悬浮,然后里边ul .li左i悬浮,这样距离不够了,他自动下一行。

    b.如果左边放一个div不悬浮,宽度100px,右边放一个div,然后float:right;这样不行,因为如果右边的div宽度大于目前的宽度的话,左侧div被挤下来。

    右边的里边靠左就行,不论悬浮不悬浮都行,不够自动换行。

    这个和a差不多,右侧的div可以设置宽度,百分数或者px都行.

    靠左的,其实都一样。

    块级元素因为悬浮可以飘起来的。这个不能忘了额。当然 

    c.不管左边有什么,父级元素设置relative,子级元素,position:absolute;然后margin-left:100px;

    16. 主动悬浮和非主动悬浮的padding-left的解析还是不同的;

    ****************************************

    下边的是主动悬浮:

     

    17.乱用display:inline

    这里如果想让ul display:inline,是没有用的,因为ul下边的li也是块级元素,横内元素是无法包含块级元素的。

    18.

    ************************

    这里的图片(左悬浮)和p之间的间距必须用img的margin-right,如果p(此时块级)margin怎么搞都不行。

    ****************************************************************************************

    ****************************************************************************************

    18.上层的div没有设置高度,但是里边的东西悬浮,于是他的高度是0,这个时候我们的下层没有悬浮,用普通的margin-top,但是在不是一直可以网上的,不能盖住悬浮的东西的,

    因为悬浮虽然脱离文档流,但是还是占空间的。

    *********************************************************************************************

    *********************************************************************************************

    19.不要小看这个,你实现这个看看有哪些方法:

    右侧的两个浮动

    <div class='header 宽度100%'>

    <div class='1000px;'>

    <img>

    <img>

    <a>

    <a>

    <a>

    <img>

    </div>

    </div>

    左边的两个悬浮是没有问题的,但是如果右侧的3个a标签和下边的img标签,想要悬浮右边三个上,一个在下的话,你有几种方法;

    方法一:两个img左飘。

    三个a标签右飘,靠上。

    然后absolute的img右下。html最简单。

    方法二:看见三个a和一个img好像对的比较齐,这样子的话,我们可以考虑用一个div套起来,写死一个宽度,然后整体右移,上边三个可以悬浮,然后下边的img被挤到下边。

    这个Img可以悬浮,也可以不悬浮。

    方法三:接二的,如果挤不下来的话,可以用absolute定位。

    ******************************************************************

    *******************************************************************

    20.a标签首先display:block;然后text-align:center;

  • 相关阅读:
    js 基础(面试前必看)
    typescript 使用的几种情况
    flutter 命令卡主的问题
    React 通过注释自动生成文档
    jest 测试入门(一)
    react hooks 全面转换攻略(三) 全局存储解决方案
    缓存穿透、击穿、雪崩区别和解决方案
    java8 lambda表达式
    maven中snapshot快照库和release发布库的区别和作用
    初识 Nacos 以及安装
  • 原文地址:https://www.cnblogs.com/coding4/p/5485266.html
Copyright © 2020-2023  润新知