• 前端重要盒子模型 浮动 定位 块级元素、行元素 7.9


    1、块级元素的特点:

      (1)块级元素里面的内容,或者背景图片,默认显示在块的左上角
      (2)块级元素,默认情况下,单独占满一行。

      常用的块级元素:div、p、h1-h6、hr、ul li、ol li、table、body...

    2、浮动:float 

      作用:通过漂浮,让块级元素实现并排

      float:left 或 right

      注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动

      清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动)或both(同时清除两侧的浮动)

      简单说明:想排在一行就使用浮动(float:left) ,想提行就清除浮动(直接用 clear:both 即可,不用管左右)

    3、盒子模型:

      (1)border:边框
        border-top:上边框
        border-left:左边框
        border-right:右边框
        border-bottom:下边框

      (2)padding:内边距(框内文字距离框线的间距)有3种写法

        第一种:上下左右 padding:10px;
        第二种:上下 左右 padding:10px 20px;
        第三种:上 右 下 左 padding:10px 20px 10px 15px;

      (3)margin:外边距(边框对边框外其他内容的间距)有3种写法

        第一种:上下左右 margin:10px;
        第二种:上下 左右 margin:10px 20px;
        第三种:上 右 下 左 margin:10px 20px 10px 15px;

      注意:在设定好宽度时,padding会把盒子撑开,此时可以通过减小width、height的值来保持盒子原大小

      *{ padding,margin:0px;}:默认网页里所有的标签都内外间距为0

    4、行内元素的特点:

      (1)默认情况下,不受到height、width属性的影响

      (2)不会占满一行

      常用的行内元素:span(适用于一小节文字的样式设定)、a(链接)

      【备注】 display:block;  将 行内元素 转成 块级元素 

    5、绝对定位 & 相对定位:

      (1)绝对定位:position:absolute;

        当设置一个块级元素为绝对定位的时候,它就脱离了文档流,浮动就不会对它有影响

        此时对它设置top、left、right、bottom,就是针对窗体的距离

      (2)相对定位:position:relation;

        当设置一个块级元素为相对定位的时候,它没有脱离文档流,浮动对它是有影响的

        此时对它设置top、left、right、bottom,是针对上一级容器的距离

        【注意】当相对定位的前面有块级元素占据位置时,则实际距离=设置距离+占位块级元素宽或高


    【请大家多多实践,结合 浮动float、清除浮动 clear、绝对及相对定位】

  • 相关阅读:
    C#中的委托,匿名方法和Lambda表达式
    Java 8 Lambda表达式探险
    Lambda表达式有何用处?如何使用?
    有参数的程序,可以被调用
    怎样用VB编写.DLL动态链接库文件
    Oracle 存储过程包
    EB(存储单位)
    排序之快速排序(上)
    排序之冒泡排序
    排序之堆排序
  • 原文地址:https://www.cnblogs.com/marchtree/p/4637677.html
Copyright © 2020-2023  润新知