精华内容
下载资源
问答
  • 块级元素水平排序布局

    千次阅读 2019-05-08 07:28:45
    我有100种方式(准确说是100-94种)让元素水平排列,你知道几种呢? 第一种:display:inline-block  首先得先了解块级元素(block elements)和行内元素(inline elements)以及行内块状元素(inline...

    块级元素默认是垂直排列的,而行内元素是水平排列的,而在布局时基本上都是用块级元素,如div等常用块级标签,那么如何让块级元素也进行水平排列呢?我有100种方式(准确说是100-94种)让元素水平排列,你知道几种呢?

    第一种:display:inline-block

      首先得先了解块级元素(block elements)和行内元素(inline elements)以及行内块状元素(inline-block elements)

        块级元素:块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列,常见的块级元素有div,p,form,ul等等,更多块级元素的可以去MDN上查阅https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

        行内元素:高度和宽度由内容决定,自身没法设定固定的大小,不存在垂直方向的margin和padding,排列方式是水平排列,行内元素在html所有元素占大多数,比如a,span,label,button,img,input......更多行内元素还是MDN查阅https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

        这里可能有人会产生疑问,“button和img以及input等标签可以设置宽度和高度也可以设置margin与padding,为什么它确实行内元素呢?”其实html元素主要有两种划分方式,分别是“块级元素与行内元素”,“替换元素与不可替换元素”。上面介绍了第一种划分方式,下面介绍一下第二种划分方式:

        替换元素:通俗的理解就是具有width和height属性的元素。替换元素类似于display:block元素,可以设置高宽与内外边距,主要包括img , input , textarea , select , object,audio和canvas在某些特定情形下为替换元素。更官方的定义https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

        不可替换元素:除了替换元素剩下的都是不可替换元素(O(∩_∩)O)

    扯了一大堆,我们知道display:inline-block可以让元素横向排列,但是这种布局可能会存在一点点小问题,举栗子:

    <style>
            div{
                display:inline-block;    width:200px;    height:200px;
            }
            .div1{
                background:green;
            }
            .div2{
                background:red;
            }
    </style>
    
    <div class = "div1">左边</div>
    <div class = "div2">右边</div>

    这是我们发现两个div之间存在一个空隙,这是为什么呢?

      浏览器会将换行符,缩进符,以及空格当做一个空格来处理,即使暗恋两次空格,或者一个换行加一个空格,等等都会解析成一个空格使用。这个空格的大小则是font-size/2大小。去除这个空隙有很多办法。

      1.设置div2的margin-left:-font-size/2

      2.设置两个div的父标签的font-size:0

      3.设置负的word-spacing

    等等还有好多方式,此处只是抛砖引玉,具体细节可以看一下张鑫旭的这篇博客,研究的很细致。http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

    第二种:float:left/right

      float属性可以让元素脱离常规文档流,沿着容器的左侧或者右侧进行水平排列。

      这种方式可以说是用的最多的,但是有个问题,在自适应布局中一般不会固定元素的高宽,会根据内容大小来自动调整,这是如果子元素都是浮动元素的话就会存在高度塌陷。

    举栗子

    <style>
            span{
                float:left;        width:200px;    height:200px;
            }
            .box1{
                background:green;
            }
            .box2{
                background:red;
            }
    </style>
    
    <div>
        <span class = "box1">左边</span>
        <span class = "box2">右边</span>
    </div>

      这里将上一个栗子中的子元素div故意改成了span,其实想表达float可以将元素隐式的转换成block元素(position:absolute/fixed亦可),所以自然就可以设置宽度和高度。

    那么盒子水平排列之后存在什么问题呢?没错!父容器高度塌陷。这时父容器div的高度为0,因为浮动元素会脱离常规文档流,它的父容器计算高度时会忽略它。这是我们不想看到的,因为这个高度塌陷的DIV后面如果还有其它常规流标签的话,那么页面就会出现错乱等不想看到的结果。

      解决办法自然就是清除浮动,主要通过两种方式清除浮动:

        1.clear:left/right/both,专门用来清除浮动的CSS。

        2.BFC,因为BFC有一条规则“计算BFC的高度时,浮动元素也参与计算”。

      说一下用clear清除浮动的几种方法:

        1.最后一个子元素后面加一个空标签,然后设置其样式clear:both。

        2.在最后一个浮动子元素中,利用伪元素::after,添加clear样式清除浮动

      通过BFC解决高度塌陷:

        为父元素创建BFC(摘自MDN),只要满足以下任何一种都会为元素创立BFC。

    A block formatting context is created by one of the following:

    • the root element or something that contains it
    • floats (elements where float is not none)
    • absolutely positioned elements (elements where position is absolute or fixed)
    • inline-blocks (elements with display: inline-block)
    • table cells (elements with display: table-cell, which is the default for HTML table cells)
    • table captions (elements with display: table-caption, which is the default for HTML table captions)
    • elements where overflow has a value other than visible
    • flex boxes (elements with display: flex or inline-flex)

    我英语不好,上面的英文也能看懂,所以它就不需要翻译了吧,建议动手试一下。

    第三种:table布局

      这种布局方式其实不常用,因为它存在种种问题。

        ·渲染速度较慢

        ·增加html代码量,不易维护

        ·标签的名字不符合html语义化,table本来就是做表格用的,拿来布局甚是不妥

        ·标签结构较死,后期修改成本较高

    等等,此处不作过多阐述。总之,尽量用table布局

    第四种:绝对定位

      这种方式日常开发中用的也较多,前面提到float可以让元素脱离常规文档流,这里position:absolute/fixed也具有同样的效果,处理办法在float布局中已经提到了,这里搬来即可。

      这里要说一下position:absolute绝对定位,以它的第一个父级并且是position:absolute/relative/fixed定位的元素为基点进行定位,如果找不到则以根元素为基准进行定位。一般都是采用父元素position:ralative,子元素position:absolute结合使用。

    第五种:css3的弹性布局

      html5的新特性,由于其功能太强大,兼容性太差,我现在还没法驾驭它,所以没敢献丑,不过w3cplus有篇文章写的很好,感兴趣可以读一下http://www.w3cplus.com/css3/using-flexbox-today.html

    弹性布局因为其兼容性所以还没有得到广泛的认可,不过我觉得以后它肯定会独占鳌头,就跟我看好html的视频播放器一样,早晚都会干败flash,只是时间问题!!!

    第六种:transform:translate

      CSS3中用于动画的一个样式,但是他可是让两个元素横向排列,这里不多说直接上代码,请用谷歌浏览器运行一下:

    <style>
            div{
                width:200px;    height:200px;
            }
            .box1{
                background:green;
            }
            .box2{
                transform: translateX(200px) translateY(-200px);
                background:red;
            }
        </style>
    
    <div>
        <div class = "box1">左边</div>
        <div class = "box2">右边</div>
    </div>

    效果和前几种方式一样。

    以上就是我说分享实现横向布局的六种方式,其实每种方式都有很多大学问,我解释描述了冰山一角,并且没有过多的考虑浏览器的兼容性,不过还是希望对你有所帮助。

    展开全文
  • 默认元素的布局是按照普通流(文档流/标准流),也就是所有标签按照规定好的方式排列块级元素单独占一行,行内/行内块一行排列。 ☆一般来说多个块级元素纵向排列找标准流 ☆多个块级元素横向排列找浮动 浮动:...

    默认元素的布局是按照普通流(文档流/标准流),也就是所有标签按照规定好的方式排列:块级元素单独占一行,行内/行内块一行排列。

    ☆一般来说多个块级元素纵向排列找标准流

    ☆多个块级元素横向排列找浮动

    浮动:

            float :   none(不浮动) | left(向左) | right (向右)

    未加浮动前:

    <style>
        div {
          width: 200px;
          height: 50px;
        }
    
        .one {
          background-color: pink;
        }
    
        .two {
          background-color: blue;
        }
    
        .three {
          background-color: brown;
        }
    </style>
    <div class="one">这是第一个div</div>
    <div class="two">这是第二个div</div>
    <div class="three">这是第三个div</div>

     

     div添加浮动:

    div {
          float: left;
          width: 200px;
          height: 50px;
    }

     只给第二个元素添加浮动并修改宽度:(观察发现它不占位置)

    .two {
          float: left;
          width: 100px;
          background-color: blue;
    }

     

    不给元素设置宽度:

    <style>
        div {
          float: left;
          background-color: blueviolet;
        }
    </style>
    <div>添加了浮动的div,内容决定宽度</div>

     

    特性:

            1.浮动的元素会脱离标准流(脱标),而且不在保留原来的位置,相当于浮起来

            2.浮动的元素会一行内显示并且元素顶部对齐

            3.浮动的元素会具有行内块元素的特性

    注意:

            一个大盒子里面装有很多小盒子,如果其中一个小盒子浮动了,那么其他兄弟盒子也应该浮动,因为浮动的盒子不占有位置,会导致后面的标准流盒子排列出现问题。

    清除浮动:

            由于父级盒子很多情况下,不方便给高度,希望通过子盒子来撑大,但是如果子盒子添加浮动后不占有位置,就会使得父级盒子的高度为0,从而影响下面的标准流盒子。

    <style>
        .big {
          /* 大盒子不设置宽高 */
          border: 2px solid red;
        }
    
        .one,
        .two {
          float: left;
          width: 100px;
          height: 50px;
        }
    
        .one {
          background-color: blue;
        }
    
        .two {
          background-color: greenyellow;
        }
    </style>
     <div class="big">
        <div class="one"></div>
        <div class="two"></div>
     </div>

     清除浮动的方法:      (clear:left | right | both)

            1.额外标签法(隔墙法)

               在浮动的元素末尾添加一个空的标签(必须是块级元素)

    <div class="clear"></div>
    
    .clear {
          clear: both;
    }

            2.给父级添加 overflow

    .big {
          /* 大盒子不设置宽高 */
          border: 2px solid red;
          overflow: hidden;
    }

            3.:after伪元素

            给父元素添加clearfix类

      <div class="big clearfix">
    .clearfix:after {
          content: '';
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
    }
    
    .clearfix {
       /* 兼容ie67 */
       *zoom: 1;
     }

            4.双伪元素清除浮动

            依旧给大盒子添加clearfix类

    .clearfix:before,
    .clearfix:after {
       content: '';
       display: table;
     }
    
    .clearfix:after {
       clear: both;
    }
    
     .clearfix {
       *zoom: 1;
     }

      最终效果都如下图:

      除第二种方法外,其他的方法的大致原理都是在浮动的元素前或者后放一个透明标准流的盒子来支撑起父元素的高度。

    展开全文
  • CSS中实现块级元素水平居中的N种方法首先声明我不是标题党,这篇博客还是干货满满的~最近写作业的时候遇到这么一道题:网页由box1、box2、box3、box4四个盒子组成,请实现如下效果:1、2、3号盒子在一行;...

    震惊!CSS中实现块级元素水平居中的N种方法

    首先声明我不是标题党,这篇博客还是干货满满的~

    最近写作业的时候遇到这么一道题:

    网页由box1、box2、box3、box4四个盒子组成,请实现如下效果:

    1、2、3号盒子在一行;

    4号盒子在2号盒子的正下方。

    最简单的想法是四个盒子均用绝对定位,但是这种实现方法代码量大、需要计算每个盒子的位置、不灵活(如果盒子的大小改变了难以修改)。

    另一种想法是,三个盒子排在一行可以用float实现,第四个盒子用绝对定位,但是依然存在上述问题。

    因此如果能让这些盒子自己在页面居中,那无论盒子的尺寸和数目如何改变均可轻松实现想要的效果了。

    学习了一下网上大牛们给出的方法,发现块级元素的水平居中可以通过N种方式实现!

    1. 利用margin-left&right=auto实现元素居中

    对于单个块级元素的水平居中可以通过将margin-left和margin-left设置为auto来实现。

    以一个box为例,CSS部分具体代码为:

    div {

    background: grey;

    color: white;

    text-align: center;

    width: 400px;

    height: 400px;

    margin-left: auto;

    margin-right: auto;

    }

    实现的效果为:

    ee4486f98dbc

    image

    注意:该方法需要元素的宽度已知。

    另外,如果需要水平居中多个块级元素,就要使用另外的方法了。

    2. 利用inline-block实现元素居中

    将需要居中的块级元素的display属性设置为inline-block,并将其父元素的text-align属性设置为center即可实现多个块级元素的水平居中。

    这里用到了行级格式化上下文(IFC)的概念。这种方法实际上是通过inline-block将三个box组成一个整体,此时

    作为一个行盒可以通过text-align属性设置其内部元素的水平分布。

    以三个box为例,HTML部分代码为:

    box1

    box2

    box3

    CSS部分代码为:

    div {

    height: 200px;

    width: 200px;

    background: grey;

    color: white;

    display: inline-block;

    }

    body {

    text-align: center;

    }

    实现的效果为:

    ee4486f98dbc

    image

    3. 利用fit-content实现元素居中

    该方法需要将box块设置为浮动布局(float),并将其父元素的宽度设定为自适应(width:fit-content),再结合方法一即可实现效果。

    仍以上述三个box为例,CSS部分具体代码为:

    div {

    background: grey;

    color: white;

    text-align: center;

    width: 200px;

    height: 200px;

    margin: 10px;

    float: left;

    }

    body {

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

    }

    实现的效果为:

    ee4486f98dbc

    image

    4. 利用float+relative实现元素水平居中

    这种方式分为两步:

    将需要居中的块级元素设置为float布局,采用相对定位方式(position:relative),并相对现在的位置向右(或向左)移动50%;

    将需要居中的块级元素的父元素设置为float布局,采用相对定位方式(position:relative),并相对现在的位置向左(即其子元素移动的反方向)移动50%。

    仍以上述三个box为例,CSS部分具体代码为:

    div {

    height: 200px;

    width: 200px;

    background: grey;

    color: white;

    text-align: center;

    margin: 10px;

    float: left;

    position: relative;

    right: 50%;

    }

    body {

    float: left;

    position: relative;

    left: 50%; /*一定要与子元素移动方向相反*/

    }

    实现的效果为:

    ee4486f98dbc

    image

    5. 利用float+absolute实现元素居中

    这种方式也分两步实现:

    第一步与方法四(float+relative)相同;

    第二步中,需要居中的块级元素的父元素应采用绝对定位方式(position:absolute)、向其子元素移动的反方向移动50%,并将文本对齐方式设置为居中(text-align: center)。

    以上述三个box为例,CSS部分具体代码为:

    div {

    height: 200px;

    width: 200px;

    background: grey;

    color: white;

    text-align: center;

    margin: 10px;

    float: left;

    position: relative;

    right: 50%;

    }

    body {

    position: absolute; /*这里与方法四不同*/

    left: 50%; /*一定要与子元素移动方向相反*/

    }

    实现的效果为:

    ee4486f98dbc

    image

    6. 利用flex实现元素居中

    对于需要所有元素均在一排并且居中的情况,flex非常好用。只用将需要居中的块级元素的父元素的display属性设置为flex,justify-content属性设置为center即可。

    以上述三个box为例,CSS部分具体代码为:

    div {

    background: grey;

    color: white;

    text-align: center;

    width: 200px;

    height: 200px;

    margin: 10px;

    }

    body {

    display: flex;

    justify-content:center;

    }

    实现的效果为:

    ee4486f98dbc

    image

    7. 使用伪元素模拟float:center效果

    最后一种方法比较复杂但是可以实现文字环绕图片的效果(对于分栏排版的段落很有效)。

    (实际上对于单栏文字环绕图片的效果通过设置图片的float属性即可实现,因此思考一下也很容易将这种方法拓展到多栏文字上)

    目前CSS中没有float:center这种效果,但是可以利用伪元素进行模拟。该方法分为两步:

    使用伪元素:before分别在多栏文字上用空内容占位,并通过设置不同的float方向使段落的文字重新布局,产生环绕的效果。(注意:占位符的大小不能小于所插入图片的大小。)

    采用绝对定位将需要插入的图片移动到占位符处。

    举一个例子看具体实现。

    HTML部分代码为:

    第一栏...(此处省略内容)

    第二栏...(此处省略内容)

    .%5C%E6%88%91%E6%98%AF%E4%B8%80%E5%BC%A0%E5%9B%BE%E7%89%87(%E5%A4%A7%E5%B0%8F%E4%B8%BA%EF%BC%9A160*160px).png

    CSS部分代码为:

    #leftText {

    float: left;

    width: 40%;

    margin-left: 120px;

    }

    #rightText {

    float: right;

    width: 40%;

    margin-right: 120px;

    }

    /*两栏内容需要两个占位符,以使图片位于两栏内容中间*/

    #leftText:before, #rightText:before {

    content: ""; /*以空内容占位*/

    width: 102px; /*宽度大于图片宽度的一半*/

    height: 180px; /*高度大于图片高度*/

    }

    #leftText:before {

    float: right; /*第一栏占位符右浮动*/

    }

    #rightText:before {

    float: left; /*第一栏占位符左浮动*/

    }

    img {

    position: absolute; /*用绝对定位的方式调整图片的位置*/

    top: 30px;

    left: 44%;

    transform: -50%;

    }

    实现的效果为:

    ee4486f98dbc

    image

    这种方法虽然步骤略复杂,但是效果还是蛮好的。

    回到最初的问题

    那对于开头的作业比较好的实现方式是什么呢?

    对于这道题,我目前觉得最好的方式是inline-block。

    可以看一下具体实现。

    HTML部分代码为:

    box1

    box2

    box3

    box4

    CSS部分代码为:

    #box1, #box2, #box3 {

    height: 200px;

    width: 200px;

    background: gray;

    color: white;

    display: inline-block;

    }

    #box4 {

    height: 200px;

    width: 200px;

    background: gray;

    color: white;

    display: inline-block;

    margin-top: 5px;

    }

    body {

    text-align: center;

    }

    实现的效果为:

    ee4486f98dbc

    image

    参考文章:

    展开全文
  • css如何将块级元素中的块级元素同时水平垂直居中显示 将外层块级盒子绝对定位,内层块级盒子相对定位,然后设置内层盒子上下左右全为0,margin:auto;即可 代码如下所示: <!DOCTYPE html> <...

    css如何将块级元素中的块级元素同时水平垂直居中显示

    将外层块级盒子绝对定位,内层块级盒子相对定位,然后设置内层盒子上下左右全为0,margin:auto;即可
    代码如下所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<style>
    		.box1{
    			width: 200px;
    			height: 200px;
    			position: relative;
    			background-color: pink;
    		}
    		.box2{
    			width: 100px;
    			height: 100px;
    			position: absolute;
    			background-color: green;
    			top: 0;
    			right: 0;
    			bottom: 0;
    			left: 0;
    			margin: auto;
    		}
    
    	</style>
    
    </head>
    <body>
    	<div class="box1">
    		<div class="box2">
    			程序员
    		</div>
    	</div>
    	
    </body>
    </html>
    

    效果:
    在这里插入图片描述

    展开全文
  • div 等块级标签横向排列的方法总结

    万次阅读 多人点赞 2017-06-15 17:59:53
    块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。这也是我初学前端时最困扰的问题~
  •  块级元素会占据一行,垂直方向排列。  2、 块级元素可以包含行内元素和块级元素;行内元素不能包含块级元素。  3、 行内元素与块级元素属性的不同,主要是盒模型属性上,行内元素设置width无效,height无效(可以...
  • <!DOCTYPE html> <html lang=zh-cn> <head> <meta charset=utf-8> <title>CSS实现块级元素水平垂直居中</title> 实现块级元素水平垂直居中> <meta name=author content=Roc>
  • 实现元素水平排列的六种方法

    千次阅读 2020-12-20 13:07:34
    众所周知,块级元素默认是垂直排列的,行内元素是水平排列的,而在布局时基本上都是用块级元素,如div等常用块级标签,那么如何让块级元素也进行水平排列呢?这篇文章给大家介绍六中方式,实现块级元素水平排列。...
  • 1、关于行内元素和快元素的说明:根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,...div这样的块级元素,就会自动占据一定矩形空间,可以通过...
  • 块级元素有哪些?行内元素如何转换为块级元素? 行内元素:(以下列举比较常用的行内元素,详情可在w3cschool查询) <a>定义超链接 <b>字体加粗 <span>定义在文档中的行内元素 <img>向...
  • 我有100种方式(准确说是100-94种)让元素水平排列,你知道几种呢?第一种:display:inline-block首先得先了解块级元素(block elements)和行内元素(inline elements)以及行内块状元素(inline-block...
  • 这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么事块级元素:行级元素指标签不加其他css,两个标签是横向排列块级元素指标签不加其他css,两个标签是纵向排列。以下是一些常见的行及元素和块级元素...
  • 块级元素在浏览器中显示的内容是单独占据一行,相当于说默认情况下,块级元素的前后都是自动换行,再说明白点,就是多个块级元素,是自动从上到下垂直排列的,并且每个块级元素都独占一行!块级元素的CSS样式默认...
  • 一、行内元素和块级元素的区别 1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列块级元素会占据一行,垂直方向排列。 2、 块级元素可以包含行内元素和块级元素;行...
  • H5入门三:块级元素和行内元素 一、行内元素和块级元素概括 块级元素:div,P,form,ul,ol,address,fieldset,hr,menu,table 行内元素:span,strong,em,br,img,input,label,select,textarea,cite, ...
  • html中行内元素、块级元素、行内块级元素有哪些,以及它们之间的区别 行内元素: 最常用的是span,其他还有img、a abbr b big br em i input label 块级元素 比较有代表性的是div 其余有p h1 h2 h3 h4 h5 h6 ...
  • CSS中的块级元素、行内元素和行内块元素

    千次阅读 多人点赞 2019-05-21 14:09:11
    元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫“盒子”。...接下来就详细讲一下在CSS中块级元素、行内元素和行内块级元素的区别。 块级元素 block 块级元素,顾...
  • 有关HTML中的行内元素,块级元素和行内块级元素的举例或者区别,这真的是前端面试中的一道经典必问项了。今天特意总结此篇,方便日后回顾。 文章目录一. 三者实例汇总二. 行内元素与块级元素的区别2.1 直观上的表现...
  • 布局的基本元素:块级元素和行内元素。 块级元素有:div、p、form、ul、ol、li等。 常见的行内元素有span、strong、em等。 区别: 1.块级元素会独占一行,默认情况下,其宽度自动填满其父元素的宽度。 2.行内...
  • 块级元素和行内元素,行内块元素

    千次阅读 2020-02-01 21:03:56
    在学习 CSS 的时候发现,发现有些标签会独占一行,典型的例如 <div> 标签。而某些不会独占一行,典型如 <span> 标签。其实这是因为 CSS 的标签是有区分元素类型的。...水平方向的 paddin...
  • 行级元素(行盒:inline) 常见行内元素:span、a、(img、textarea、button、input)、label、select、canvas、audio、video,b, i, ...4、行级元素内不能嵌套块级元素 5、水平方向排列 面试题: 如果行级与行级元素
  • 【干货】:怎么让元素水平排列

    千次阅读 2020-12-20 13:07:38
    【干货】:如何让元素水平排列块级元素默认是垂直排列的,而行内元素是水平排列的,而在布局时基本上都是用块级元素,如div等常用块级标签,那么如何让块级元素也进行水平排列呢?我有100种方式(准确说是100-94种)...
  • 行内元素 和 块级元素 盒模型区别 4.块级元素 与 overflow 5.实践 1.HTML 行内元素 与 块级元素 行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素 只能包含内容或者其它行内元素,...
  • 水平居中布局

    2021-03-09 23:18:14
    文本/行内元素/行内块级元素:2.单个块级元素:3.多个块级元素4.使用绝对定位(项目中使用最多)5.任意个元素(flex) 水平居中布局 1.文本/行内元素/行内块级元素: 原理:text-align只控制行内内容相对他的块级父...
  • 1、级元素水平拉伸,垂直包裹。可以设置 width, height属性。块级元素会独占一行,其宽度自动填满其父元素宽度,块级元素即使设置了宽度,仍然是独占一行的。 内联元素自动包裹,水平和垂直方向会自动包裹至内容的...
  • 行内元素列表:标签可定义锚表示一个缩写形式定义只取首字母缩写字体加粗bai可覆盖默认的文本方向大号字体加粗换行引用进行定义定义计算机代码文本定义一个定义项目定义为强调的内容斜体文本效果向网页中嵌入一幅图像...
  • 常用行内元素列表: <a>标签可定义链接 <b>字体加粗 <br>换行 <img>图像 <input>输入框 ...块级元素列表: ...创建一条水平线 ...一,从概念的角度解释块级元素和行内元素

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,106
精华内容 5,642
关键字:

块级元素水平排列