精华内容
下载资源
问答
  • 块级元素:1.display为block2.会独占一,导致换行3.可以设置宽高4.margin外边距设置都有效5.padding内填充都有效6.可以容纳行内元素和块级元素,也可以容纳内联元素和其他元素7.两者可以通过display来互相转换8....

    块级元素:

    1.display为block

    2.会独占一行,导致换行

    3.可以设置宽高

    4.margin外边距设置都有效

    5.padding内填充都有效

    6.可以容纳行内元素和块级元素,也可以容纳内联元素和其他元素

    7.两者可以通过display来互相转换

    8.举例:div  p  h1-h6  table  form  ul  ol  dl  等等

    行内元素:

    1.display为inline

    2.会与其他元素排列在一行上

    3.不可设置宽高

    4.设置margin外边距,上下外边距设置无效,左右外边距设置有效

    5.padding内填充上下无效,左右有效

    6.不能包含块级元素,只能容纳文本或其他行内元素

    7.两者可以通过display来互相转换

    8.举例:span  img  em  strong  a  select  label  br  input  等等

    拓展:行内块元素

    1.会与其他元素排列在一行上

    2.margin外边距设置都有效

    3.padding内填充都有效

    4.简单的理解就是没有块级元素中第2个特点的块级元素

    标签:块级,行内,元素,padding,设置,display,css

    来源: https://www.cnblogs.com/FranceCG/p/15000798.html

    展开全文
  • CSS块级元素

    2021-02-01 01:07:06
    1、元素框的最内部分是实际的内容。2、直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。3、边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。水平格式化1、width影响的是...

    完整的框模型(Box Model)

    0818b9ca8b590ca3270a3433284dd417.png

    不同的宽度、高度、内边距和外边距相结合,就可以确定文档的布局。

    大多数情况下,文档的高度和宽度由浏览器基于可用的显示区域和其他一些因素自动确定。

    1、元素框的最内部分是实际的内容。

    2、直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。

    3、边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

    水平格式化

    1、width影响的是内容区的宽度,不是整个可见的元素框。

    2、规则:正常流中块级元素框的水平部分总和 == 父元素的width。

    水平属性

    1、7大属性: margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。

    2、只有width、以及左、右外边距这3个属性可以设置为auto。

    0818b9ca8b590ca3270a3433284dd417.png

    使用auto

    0个auto(3个属性都设置为非auto的某个值)

    会把margin-right强制为auto。

    //假设7个属性的和必须等于400px,那么右外边距的宽度将是200。

    p {

    margin-left: 100px;

    margin-right: 100px;

    width: 100px;

    }

    如果width和外边距都是100px,用户代理将把右外边距重置为auto,右外边距的实际宽度则会根据auto值来设置。

    一个auto(设置width,margin-left或margin-right中的某个值为auto,而余下两个属性指定为特定的值)

    设置为auto的属性会确定所需要的长度,从而使元素框的宽度等于父元素的width。

    //假设7个属性的和必须等于400px,那么左外边距的宽度将是200。

    p {

    margin-left: auto;

    margin-right: 100px;

    width: 100px;

    }

    两个auto

    两个外边距设置为auto:两个外边距会设置为相等的长度,元素将在父元素中居中。

    width和一个外边距为auto:设置为auto的外边距会减为0;width会设置为所需的值。

    //假设7个属性的和必须等于400px,那么p元素在父元素中居中显示。

    p {

    margin-left: auto;

    margin-right: auto;

    width: 100px;

    }

    //假设7个属性的和必须等于400px,那么左外边距的宽度将是0,width的宽度为300px。

    p {

    margin-left: auto;

    margin-right: 100px;

    width: auto;

    }

    三个auto

    如果都为auto,则外边距都为0,width会尽可能宽

    注意:水平外边距不会合并,父元素的内边距、边距和外边距可能影响子元素。即一个元素的外边距(以及内边距、边距等等)可能会为子元素带来偏移。

    div{ padding:30px; background:silver; }

    p { margin:10px; padding:0; background:white; }

    0818b9ca8b590ca3270a3433284dd417.png

    负外边距

    div{ width:400px; border:3px solid black; }

    p { margin:20px; padding:0; background:white; }

    p.wide{ margin-left:20px; width:auto; margin-right:-50px; }

    0818b9ca8b590ca3270a3433284dd417.png

    父元素400px,但子元素有430px!

    数学计算并没有算错:20px + 0 + 0 + 430px + 0 + 0 - 50px = 400px

    注意:内边距、边框和内容宽高绝对不能为负,只有外边距能小于0。

    替换元素

    非替换块元素的所有规则同样适用于替换元素,只有一个例外:如果width为auto,元素的宽度则是内容的固有宽度。

    垂直格式化

    一个元素的默认高度由其内容决定。

    高度还会受到内容宽度的影响。

    段落越窄,相应的就会越高,以便容纳其中所有的内联内容。

    垂直属性

    1、(对应于水平格式化)7大属性: margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom。

    2、只有height、以及上、下外边距这3个属性可以设置为auto。

    3、其他四个必须设为特定的值或默认为0。

    4、如果设置了border-style,边框的宽度会设置为medium。

    使用auto

    如果正常流中一个块元素的margin-top或margin-bottom设置为auto,它会自动计算为0。

    height必须设置为auto或者某种类型的非负值。

    height为auto

    ①如果块级正常流元素设置为height:auto,显示时其高度恰好足以包含其内联内容(包括文本)的行盒。会在段落上设置一个边框,并认为没有内边距,这样下边框刚好在文本最后一行的下面,上边框刚好在文本第一行的上面。

    ②如果块级正常流元素的高度设置为auto,而且只有块级子元素,其默认高度将是从最高块级子元素的外边距边界到最低块级子元素外边框边界之间的距离。因此,子元素的外边距会“超出”包含这些子元素的元素。

    ③如果块级元素有上内边距或下内边距,或者有上边框或下边框,其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。

    A paragraph.

    Another paragraph.

    0818b9ca8b590ca3270a3433284dd417.png

    合并垂直外边距

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

    • 1
    • 2

    0818b9ca8b590ca3270a3433284dd417.png

    可以看到每个列表项有10像素的上外边距和20像素的下外边距。但是图片上显示的相邻列表项之间的距离是20像素,而不是30像素。即会发生相邻外边距沿着竖轴合并。

    0818b9ca8b590ca3270a3433284dd417.png

    外边距甚至可以与自身发生合并。

    假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:

    0818b9ca8b590ca3270a3433284dd417.png

    如果这个外边距遇到另一个元素的外边距,它还会发生合并:

    0818b9ca8b590ca3270a3433284dd417.png

    负外边距

    如果垂直外边距都设置为负值,浏览器会取两个外边距绝对值的最大值。

    • 1
    • 2

    可以看到,列表项覆盖超过一半,是取的-0.75em。

    0818b9ca8b590ca3270a3433284dd417.png

    如果一个正外边距与一个负外边距合并,会从正外边距减去这个负外边距的绝对值。

    • 1
    • 2

    可以看到,列表项合并后覆盖了1-0.75 = 0.25em。

    0818b9ca8b590ca3270a3433284dd417.png

    展开全文
  • css块级元素

    2020-12-20 04:57:43
    CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“布局”形式,这里的“布局”的意思就是说其表现形式始终以进行显示。比如,我们设定一个内联元素border-bottom:1px ...

    《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现

    内联元素中只能放内联元素。表现为行布局

    块元素可以放块元素和内联元素

    正常文档流下,块级元素的宽度等于父元素的宽度,高度为内容撑开的高度;内联元素的高度宽度都是内容撑开的高度宽度;

    设置绝对定位/固定定位/浮动会脱离文档流;

    脱离文档流下,块级元素的宽度是内容撑开的元素,高度还是内容撑开的高度;

    给内联元素设置绝对定位/固定定位/浮动,内联元素就会有块元素的特点。(显示高宽为内容撑开,脱离父元素掌控)

    问:

    如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?

    我用js取这个元素的父节点的childNodes还能否取到这个元素;

    同时,这个元素的parentNode还是不是html中的父节点?

    //脱离文档流只是对html文档的一种解析方案的说法而已。脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用css样式去控制的html文档结构,你写的界面的顺序就是网页展示的顺序。比如写了5个div块。正常文档流就是依次显示这5个div块。从左往右,自上而下的顺序。脱离文档流就是指它所显示的位置和文档代码就不一定一致了。比如可以用css控制,把最后一个div块显示在第一个div块的地方。这个只是浏览器的处理方案。但是,dom结构是没有发生变化的。仍旧和你写的html文档一样。用js取这个节点可以取到的。

    CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。

    特殊:使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。

    而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

    展开全文
  • 之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗...以下是一些常见的及元素和块级元素:行级元素(inline element)a - 锚点*...

    之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗。

    这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么事块级元素:行级元素指标签不加其他css,两个标签是横向排列;块级元素指标签不加其他css,两个标签是纵向排列。

    以下是一些常见的行及元素和块级元素:

    行级元素(inline element)

    a - 锚点

    * em - 强调

    * i - 斜体

    * img - 图片

    * input - 输入框

    * label - 表格标签

    * select - 项目选择

    * span - 常用内联容器,定义文本内区块

    * strong - 粗体强调

    * sub - 下标

    * sup - 上标

    * textarea - 多行文本输入框

    块级元素(block element)

    * div - 常用块级容易,也是css layout的主要标签

    * dl - 定义列表

    * form - 交互表单

    * h1 - 大标题

    * h2 - 副标题

    * h3 - 3级标题

    * h4 - 4级标题

    * h5 - 5级标题

    * h6 - 6级标题

    * hr - 水平分隔线

    * ol - 排序表单

    * p - 段落

    * table - 表格

    * ul - 非排序列表

    块级元素,会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

    当然元素的块级还是行级是可以通过本页面的css来修改,将display属性设置为“inline”元素就会变成行级元素,设置为“block”元素就会变成块级元素。

    展开全文
  • h6、menu、ol、ul、li、p、table、header、nav、footer、article、section等常见内联元素:a、br、font、img、input、label、select、span、textarea、b、small块级元素具有以下特点:1. 总是在新上开始,占据一...
  • css中的块级元素默认是独占一显示的,如我们在HTML网页中经常使用的div就是块级元素,在我们使用div进行网页布局时经常需要两个div设置在同一,那么该如何设置块级元素在同一显示呢?下面我们就来看一下css...
  • 元素有行内元素(inline)、块级元素(block)以及行内块元素(inline-block)之分,对应地它们之间的盒模型也会有不同。1. 行内元素(inline)通过display: inline可元素声明为行内元素,顾名思义指在行里面的元素,因此...
  • https://blog.csdn.net/chengxu_kuangrexintu/article/details/83043169
  • css构造块级元素

    2020-12-20 04:57:11
    css1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparentbackground-color 不会被后代继承。(2)背景图片使用...
  • 在本教程中,我们向您展示出于布局目的如何水平对齐块级元素。使用 margin 属性来水平对齐可通过左和右外边距设置为 "auto",来对齐块元素。注释:除非已经声明了 !DOCTYPE,否则使用 margin:...
  • 一、行内元素和块级元素的区别1、 行内元素不会占据整行,在一条直线上排列,都是同一,水平方向排列;块级元素会占据一,垂直方向排列。2、 块级元素可以包含行内元素和块级元素;行内元素不能包含块级元素。3...
  • 能接受宽高,如果不设置宽度,那么宽度默认变为父级的100%。 块级元素和行内元素的分类:  在HTML的角度来讲,标签分为:  文本级标签:p , span , a , b , i , u , em  容器级标签:div , h系列 , li , dt...
  • 一、块级元素 行内元素div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即...这意味着,通过 display 属性设置为block,可以让行内元素(比如 元素)表现得像块级元素一样。还可以通过把 dis...
  • 行内元素 span、i、 a、 img等等。 在一内显示,一般情况不可以设置宽高的元素就是行内元素。 块级元素 div、h1、p、li等等。独占一,可以设置宽高... 就可以让行内元素变成块级元素,而且可以在同一行内显示。...
  • css:行内元素和块级元素的相互转换

    千次阅读 2020-08-11 14:55:53
    1、行内元素转换成块级元素:display:block; 2、块级元素转换成行内元素:display:inline; 3、行内元素转行内块级元素:display:inline-block;
  • CSS中,只有块级元素有物理属性,而元素则有三种形态:1. 块级元素:有物理属性,width,height写值起作用,而且要占据一。2. 行内元素:没有物理属性。但是margin,padding值有用。不占据一,后边可以有兄弟...
  • 标签分为两种等级:  1,行内元素。...能接受宽高,如果不设置宽度,那么宽度默认变为父级的100%。 块级元素和行内元素的分类:  在HTML的角度来讲,标签分为:  文本级标签:p , span , a ...
  • 设置标签的css样式代码为“display:block”,标签将变为块级元素。( )答:对青藏高原常见垫状植物有( ? ? )。答:垫状点地梅 甘肃蚤缀、垫状棘豆 垫状驼绒藜 藏亚菊网络外部性导致马歇尔冲突的天平向着垄断的方向...
  • CSS中实现块级元素水平居中的N种方法: CSS中的居中可分为水平居中和垂直居中。 水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中。 下面详细介绍这几种情况...
  • 元素放置在table中,再table的margin-left和margin-right设置成auto,table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范;   2.将块级元素转换行内元素(通过设置display:inline)后再...
  • 块级元素比较霸道,默认状态下每次都占据一整个,后面的内容也必须再新起一显示。当然非块级元素也可以通过css的display:block;其更改成块级元素。此外还有个特殊的,float也具有此功能。Inline element 内联...
  • (1) 块级元素霸占一,不能与其他任何元素并列;可以设置宽、高如果不设置宽度,那么宽度默认变为父亲的100%。(2) 行内元素与其他行内元素并排;不能设置宽、高。默认宽度就是文字宽度。在HTML中将标签分为:...
  • 我们可能听说过,float元素是脱离了文档流的元素,其他元素将无视它的存在。但当我们实际应用中,实际效果并不完全是这样的。
  • 本章介绍行级元素, 块级元素以及行级块元素之间的区别和关联
  • 1、如何让行内元素设置宽高呢,这里又有一个方法,先引入一个普通的行内元素,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • 行内块级元素,设置成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是100%,行内元素默认100%宽度占据一 这时候给行内元素设置 padding-top 和 padding-bottom 或者 width、height 都...
  • 详谈CSS块级元素的宽度

    千次阅读 2013-12-25 18:40:47
    CSS把处在正常文档流中的不同html元素区分为块级元素(block element)和行内元素(inline element)。一般来说,所谓块级元素就是指当它们显示在浏览器中时,会在自身前后各插入一个空行,而使自身在页面中占据一个...
  • 如果没有css的作用,块元素会顺序以每次另起一的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一。需要指出的是,table标签也...
  • 将块级元素转化为行内元素或行内块元素的效果 当若干个容器都包裹在div中即为块级元素时,如果它们转化 则效果如下: 代码: 运行结果: 1.当都转化为inline 2.当都转化为inline-block 3.一个为inline,另一个为...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,454
精华内容 7,381
关键字:

css将块级元素变成行