• 内联元素的盒子模型与文档流定位padding属性


            内联元素的盒子模型

    • 1、内联元素不能设置width宽度和高度height

        span{200px ; height:200px}   与     span{100px ; height:100px}   表现效果相同,由此可见内联元素不可以设置高度和宽度

    • 2、内联元素可以设置水平方向的内边距padding-left或padding-right

         span{padding-left:20px ; padding-right:200px} 

    • 3、内联元素可以设置垂直方向的内边距padding-top 或 padding-bottom,但是这个样式不会影响页面的布局,会覆盖住下面的区域。
    <span style='padding-top:50px;padding-bpttom:50px'>
        内联元素一
    </span> 
    <div id="box2"></div>

    • 4、内联元素可以设置边框,垂直方向依旧会覆盖下面区域,水平方向的边框会影响页面布局,会把其他的元素推向旁边。
    • 5、内联元素支持水平方向的外边距(margin:left / margin:right)
    • 6、垂直方向的外边距会重叠(margin:top /margin:bottom)

    示例:设置多个span,设置前面的内联元素的水平方向的外边距    margin-right:100px  后面的内联元素的margin-left:100px;  那么二者之间的距离就变成了左右外边距相加,就是200px。

    内联元素与块元素的盒子模型相比较,总结

    • 内联元素水平方向(左右)上的外边距不会重叠,计算两内联元素之间距离求边距之和;
    • 内联元素支持水平方向(左右)上的外边距;
    • 内联元素span不能设置宽度和高度,块元素div可以设置宽高;

         文档流定位 和 display属性

          通过上文对内联元素盒子模型的了解,那么 ,如果内联元素想为其设置宽高,使其具有块元素的特征该怎么做呢?又能不能把内联元素转换为块元素呢?

          css的定位机制所要表达的效果可以理解为 元素可以放在哪?

    一、了解文档流

    文档流flow 是元素定位一种默认的情况

    定位特点:从上到下,从左到右,只是有部分元素会独占一行。

    应用情况:默认的方式,如果要改变这种默认的样式可以选择浮动定位和层定位。

     二、文档流的定位方式

    从上到下,从左到右依次排列,有的元素会自己独占一行,有的元素会和其他元素一起排列。

    三、文档流的三种元素

    (一)block元素

    每个block类型的元素都独占一行,这种元素的width,height,padding,margin属性都是可以设置的;

    常见的block类型元素有<div>,<p>,<h1>~<h6>,<table>,<form>,<ol>,<ul>

    这是将a元素以block元素的样式显示(display)。从而使a元素有块状元素的特点。并且可以设置其高度宽度等属性。

    还可以将其他元素设置为具有block属性,例如:a{display:block} 

    注意block 默认有自动换行的效果

    (二)inline元素

    在宽度够用的情况下,不单独占一行,都会在一行上显示。width,height,padding,margin属性不可设置。宽度由里面文字或者是图片的宽度所决定的。这是不可改变的。

    常见的inline类型元素有<span>,<a>

    默认情况下,如果使用inline类型元素排列,就会出现间隙问题。为了改变这种情况可以

    <span><a href="#">内容</a></span>  inline元素外面放置一个block元素

    还可以将其他元素设置为具有inline属性,例如:

    display:inline

    (三)inline-block元素

     inline-block元素有着inline元素和block元素共同的特点:

    不单独占用一行

    可以设置width,height,padding,margin属性

    常见的inline-block类型元素:<img>

     将其他类型元素转换为inline-block类型的元素

    display:inline-block

    (四)display属性  (display规定生成框的类型)

    • 内联元素的特征,所占区域仅仅为内容所占的区域。
    • 块元素的特征,无论是否有内容都可以独占一行。

    我们可以通过display属性改变元素样式,使内联元素变为块元素。

    display属性可以有四个取值,规定元素生成的类型

    display:none   表示这个元素不会被显示,并且元素不会再页面中占有位置

    display:block  元素都显示为block元素,元素作为块元素显示(当元素的宽高属性起作用的时候就变表示成了块元素)

    display:inline  元素都显示为inline元素,元素作为行内元素或是内联元素显示;

    display:inline-block   显示为inline-block元素,把一个元素作为行内块元素显示;


            元素可见性的比较:display:none   与 visibility

    1、display:none元素不被显示 (在上面有进行介绍过)。

    • display:none 隐藏元素,并将其从文档流中完全移除,不保留元素原有的位置,其他的元素会取而代之。

    2、visibility属性,控制元素是否可见。

    与display:none不同的是 visibility隐藏元素时,元素的内容应该出现的位置会留下一片空白,隐藏元素的空白区域仍然会留在文档中占据位置。

    visibility有两个属性:

    • visibility:hidden      元素不可见,但在文档中仍然保留位置不会被其他元素占据
    • visibility:visible       让隐藏的元素显示出来
  • 相关阅读:
    到底什么时候该使用MQ?
    阿里巴巴开源项目 Druid 负责人温少访谈
    MYSQL外键的使用以及优缺点
    SpringMVC拦截器(资源和权限管理)
    SpringMVC访问静态资源
    设计模式读书笔记文档下载
    java提高篇(八)----详解内部类
    Storm:最火的流式处理框架
    vue 学习视频推荐 & 初始化项目流程
    页面布局练习
  • 原文地址:https://www.cnblogs.com/nyw1983/p/11311884.html
Copyright © 2020-2023  润新知