精华内容
下载资源
问答
  • 玩转CSS中块元素、内联元素、内联块元素

    千次阅读 多人点赞 2019-07-22 11:21:48
    元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 1.块元素 块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、...

        元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。

    1.块元素 

    块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:

    • 支持全部的样式
    • 如果没有设置宽度,默认的宽度为父级宽度100%

    盒子占据一行、即使设置了宽度

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    
    		body{
    			margin:0;
    		}
    		
    		.box{ /*如果不设置高宽 ,默认是父类的宽度*/
    			background-color:gold;
    			width:300px;
    			height:200px;
    		}
    
    		.box2{
    			background-color:green;
    			width:300px;
    			height:200px;
    		}
    
    	</style>
    </head>
    <body>
    	<div class="box">div元素</div>
    	<p class="box2">p元素</p>
    </body>
    </html>

    2.内联元素

    内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:

    • 支持部分样式(不支持宽、高、margin上下、padding上下)
    • 宽高由内容决定
    • 盒子并在一行
    • 代码换行,盒子之间会产生间距
    • 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式

    解决内联元素间隙的方法 
    1、去掉内联元素之间的换行
    2、将内联元素的父级设置font-size为0,内联元素自身再设置font-size

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.box{
    			width:500px;
    			height:300px;
    			border:1px solid #000;
    			margin:50px auto 0;
    			font-size: 0;
    		}
    		.box a{
    			background-color:gold;
    			/* width:300px;     
    			height:200px; */     /*这里设置内联元素的高宽也是无效的,不支持*/
    			/* margin:100px 20px; */
    			padding:0 10px;
    			font-size:16px;
    		}
    		.box2{
    			width:500px;
    			height:100px;
    			border:1px solid #000;
    			margin:50px auto 0;
    			text-align:center;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		<a href="#">链接文字一链接文字一</a>
    		<a href="#">链接文字二</a>
    		<a href="#">链接文字三</a>
    		<a href="#">链接文字四</a>
    		<a href="#">链接文字五</a>
    	</div>
    
    	<div class="box2">
    		<a href="#">链接文字</a>
    	
    	</div>
    </body>
    </html>

    3. 内联块元素

    内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为:

    • 支持全部样式
    • 如果没有设置宽高,宽高由内容决定
    • 盒子并在一行
    • 代码换行,盒子会产生间距
    • 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.box{
    			width:500px;
    			height:300px;
    			border:1px solid #000;
    			margin:50px auto 0;
    			font-size: 0;
    		}
    
    		.box a{
    			background-color:gold;
    			width:100px;
    			height:50px;
    			margin:20px;
    			padding:10px;
    			font-size:16px;
    			display:inline-block;
    		}
    	
    	</style>
    </head>
    <body>
    	<div class="box">
    		<a href="#">链接文字一</a>
    		<a href="#">链接文字二</a>
    		<a href="#">链接文字三</a>
    		<a href="#">链接文字四</a>
    		<a href="#">链接文字五</a>
    	</div>
    	
    </body>
    </html>

    这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。

    display属性
    display属性是用来设置元素的类型及隐藏的,常用的属性有:

    • 1、none 元素隐藏且不占位置
    • 2、block 元素以块元素显示
    • 3、inline 元素以内联元素显示
    • 4、inline-block 元素以内联块元素显示
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.menu{
    			width:694px;
    			height:50px;
    			/* background-color:cyan; */
    			margin:50px auto 0;
    			font-size:0;
    		}
    
    		.menu a{
    			width:98px;
    			height:48px;
    			background-color:#fff;
    			display:inline-block; /*注意这里display不同属性值的显示结果block ,inlineblock,none等*/
    			border:1px solid gold;
    			font-size:16px;
    			margin-left:-1px;
    			text-align:center;
    			line-height:48px;
    			text-decoration:none;
    			color:pink;
    			font-family:'Microsoft Yahei'
    		}
    
    		.menu a:hover{
    			background-color:gold;
    			color:#fff;
    		}
    
    
    	</style>
    </head>
    <body>
    	<div class="menu">
    		<a href="#">首页</a>
    		<a href="#">公司简介</a>
    		<a href="#">公司简介</a>
    		<a href="#">公司简介</a>
    		<a href="#">公司简介</a>
    		<a href="#">公司简介</a>
    		<a href="#">公司简介</a>
    	</div>
    </body>
    </html>

    展开全文
  • 块元素、内联元素与内联块 1、块元素 1.1块元素又名块级元素(block element), 其特点是: ①总是在新行上开始; ②高度,行高以及外边距和内边距都可控制; ③宽度缺省是它的容器的100%,除非设定一个宽度。 ④它...

    块元素、内联元素与内联块

    1、块元素

    1.1块元素又名块级元素(block element),

    其特点是:

    ①总是在新行上开始;

    ②高度,行高以及外边距和内边距都可控制;

    ③宽度缺省是它的容器的100%,除非设定一个宽度。

    ④它可以容纳内联元素和其他块元素

    1.2常用的块元素

    1. address - 地址
    2. blockquote - 块引用
    3. center - 居中对齐块
    4. dir - 目录列表
    5. div - 常用块级容器,也是css layout的主要标签
    6. dl - 定义列表
    7. fieldset - form控制组
    8. form - 交互表单
    9. h1 - 大标题
    10. h2 - 副标题
    11. h3 - 3级标题
    12. h4 - 4级标题
    13. h5 - 5级标题
    14. h6 - 6级标题
    15. hr - 水平分隔线
    16. isindex - input prompt
    17. menu - 菜单列表
    18. noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容)
    19. noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
    20. ol - 排序表单
    21. p - 段落
    22. pre - 格式化文本
    23. table - 表格
    24. ul - 非排序列表(无序列表)

    2、内联元素

    2.1内联元素(inline element)

    其特点是

    ①和其他元素都在一行上;

    ②高,行高及外边距和内边距不可改变;

    ③宽度就是它的文字或图片的宽度,不可改变

    ④内联元素只能容纳文本或者其他内联元素

    2.2常见的内联元素

    1. a - 锚点
    2. abbr - 缩写
    3. acronym - 首字
    4. b - 粗体(不推荐)
    5. bdo - bidi override
    6. big - 大字体
    7. br - 换行
    8. cite - 引用
    9. code - 计算机代码(在引用源码的时候需要)
    10. dfn - 定义字段
    11. em - 强调
    12. font - 字体设定(不推荐)
    13. i - 斜体
    14. img - 图片
    15. input - 输入框
    16. kbd - 定义键盘文本
    17. label - 表格标签
    18. q - 短引用
    19. s - 中划线(不推荐)
    20. samp - 定义范例计算机代码
    21. select - 项目选择
    22. small - 小字体文本
    23. span - 常用内联容器,定义文本内区块
    24. strike - 中划线
    25. strong - 粗体强调
    26. sub - 下标
    27. sup - 上标
    28. textarea - 多行文本输入框
    29. tt - 电传文本
    30. u - 下划线

    2.1内联元素可能会遇到的问题

    2.1.1内联元素与内联元素之间存在间隙
    2.1.2.解决内联元素的间隙方法:

    (1)设置margin-left为负值

    (2)去掉内联元素之间的换行

    (3)将内联元素的父级设置font-size为0,内联元素自身再设置font-size

    3、内联块

    也称行内块元素,img和input元素的行为类型这种元素,但是也归类于内联元素,可以用display属性将块元素或内联元素转化成这种元素

    其特点是:

    (1)可以设置所有样式(与块元素一样)

    (2) 如果不设置宽度高度,则宽度高度由内容决定

    (3)不会独占一行(与内联元素一下)

    (4)不换行时,元素之间会产生左右间距(与内联元素相同);换行时,如果元素内部没有内容,元素之间就会产生上下间距

    (5)子元素是内联块元素,父元素可以用text-align设置子元素水平对齐方式,用line-height属性设置子元素垂直对齐方式

    4、块元素、内联元素与内联块之间的相互转换

    将块元素转换成内联元素,就可以使多个块元素在同一行显示,不换行

    将内联元素转换成块元素,就可以设置其宽高,会独占一行

    3.1.将内联元素转化为块元素:display:block

    display: block;/*将内联元素转换成块元素*/
    

    3.2将块元素转化为内联元素:display:inline

    display: inline;/*将块元素转换成内联元素*/
    

    3.3将块元素或者内联元素转换成内联块

    display: inline-block;/*将块元素或者内联元素转换成内联块*/
    
    展开全文
  • 块元素,内联元素,内联块元素 1.块元素: 也称行元素, 布局中常用的标签如:div,p, h1-h6,ul,li... 支持全部的样式 可以设置元素的大小,并且元素是独占一行显示,如果没有设置宽度,默认的宽为父级100%盒子占据一行 2....

    一.块元素,内联元素,内联块元素
    1.块元素:
         也称行元素, 布局中常用的标签如:div,p, h1-h6,ul,li...

           支持全部的样式

         可以设置元素的大小,并且元素是独占一行显示,如果没有设置宽度,默认的宽为父级100%盒子占据一行

    2.内联元素:
         也称行内元素,布局中常用的标签如:a,span,b,u,i...  

         (1)支持部分样式(不支持宽,高 margin上下,padding上下)

          (2)宽高由内容决定

          (3)盒子并在一行

          (4)代码换行,盒子之间会产生间距

          (5)不可设置元素的大小,但是元素并在一行显示,先写的先排列,后写的后排列 

          (6)子元素是内联元素,父元素可以用text-align 属性设置子元素水平对齐方式,用line-height属性设置垂直对齐方式

    3.解决内联元素的间隙方法:
          (1)设置margin-left为负值

          (2)去掉内联元素之间的换行

          (3)将内联元素的父级设置font-size为0,内联元素自身再设置font-size

    4.内联块元素:
         也称行内块元素,是新增的元素类型,img和input元素的行为类型这种元素,但是也归类于内联元素,可以用display属性将块元素或内联元素转化成这种元素       

           它们的布局行为:

           (1)支持全部样式

           (2) 如果没有设置宽高,宽高由内容决定

           (3)盒子并在一行

           (4)代码换行,盒子会产生间距

           (5)子元素是内联块元素,父元素可以用text-align设置子元素水平对齐方式,用line-height属性设置子元素垂直对齐方式  

    5.内联块元素之间的转换和使用:
            通过display属性来互相转化,块元素用的较多,经常把内联元素转化为块元素,少量转化为内联块元素,要使用内联元素时,直接使用内联元素,而不用块元素转化.

            display 属性:     none        元素隐藏且不占位置

                                     inline     元素以内联元素显示

                                    block     元素以块元素显示

                                    inline-block    元素以内联块元素显示

    二.元素溢出:当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式
    设置的方法是通过overflow属性来设置overflow属性:

         (1)visibke 默认值 内容不会被修改,会呈现在元素框之外

        (2)hidden 内容会被裁剪,并且其余内容是不可简单,超出父元素内容被隐藏 (此属性还有清除浮动,清除margin-top塌陷的功能)

        (3)scroll 内容会被修改,则浏览器会显示滚动条以便查看其余的内容    内容无论是否超出元素元素框 都会添加滚动条

           overflow-x:scroll 设置水平滚动条     overflow-y:scroll 设置垂直滚动条

        (4)auto  内容被修改,则浏览器会显示滚动条以便查看其余的内容 

        (5) inherit  规定应该从父元素继承overflow属性的值

    三.浮动:
    1.文档流:
          指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排,后写的后排,每个盒子都占据自己的位置.   

    2. 浮动特性:
        (1)浮动元素有 左浮动(float:left)和右浮动(float:right),

        (2)浮动的元素会向左或向右浮动,碰到父级元素边界,浮动元素,未浮动的元素才停下来

        (3)相邻浮动的块元素可以并在一行,超出父级宽度就换行

        (4)浮动让行内元素或块元素自动转化为行内块元素

        (5)浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果

        (6)父元素内整体浮动的元素无法撑开父元素,需要清除浮动

        (7)浮动元素之间没有垂直 margin的合并

    3.清除浮动:   
            (1)父级上增加属性 overflow:hidden 

            (2)在最后一个子元素的后面加一个空的div,给样式属性clear:both

            (3)使用成熟的清除浮动样式类     .clearfix:after,.clearfix:before {

                                                                content:"";

                                                              disply:table;}

    四.定位:使用CSS的position属性来设置元素的定位类型
    1.postion的设置项如下:
        (1)relative:生成相对定位元素,元素本身相对于在html文档流中位置的进行偏移

        (2)absolute: 生成绝对定位元素,该元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对于body元素进行定位.(子绝父相)

        (3)fixed: 生成固定定位元素,匀速脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流动上方,相对于浏览器窗口进行定位

        (4)static:默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性

        (5)inherit :从父元素继承position属性值

    2.定位元素特性:
             绝对定位和固定定位的块元素和行内元素会自动转化为行内元素

    3.定位元素层级:
              定位元素时浮动的正常的文档流之上的,可以用z-index属性设置元素的层级 取值为:0-999 值越大层级越大

    4.典型定位布局 :
                               (1)固定在顶部的菜单

                               (2)水平垂直居中的弹框

                               (3)哭的的侧边的工具栏

                               (4)固定在底部的按钮

     

    展开全文
  • 块元素,内联元素,内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素块元素,也可以称为行元素,布局中常用的标签如:div...

    块元素,内联元素,内联块元素

    元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。

    块元素
    块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6等等都是块元素,它在布局中的行为:

    • 支持全部的样式
    • 如果没有设置宽度,默认的宽度为父级宽度100%
    • 盒子占据一行、即使设置了宽度

    内联元素
    内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:

    • 支持部分样式(不支持宽、高、margin上下)
    • 宽高由内容决定
    • 盒子并在一行
    • 代码换行,盒子之间会产生间距
    • 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置垂直对齐方式

    内联块元素
    内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为:

    • 支持全部样式
    • 如果没有设置宽高,宽高由内容决定
    • 盒子并在一行
    • 代码换行,盒子会产生间距
    • 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置子元素垂直对齐方式

    这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。

    display属性
    display属性是用来设置元素的类型及隐藏的,常用的属性有:
    1、none 元素隐藏且不占位置
    2、block 元素以块元素显示
    3、inline 元素以内联元素显示
    4、inline-block 元素以内联块元素显示

    小试牛刀

    请制作图中所示的菜单:

    在这里插入图片描述

    展开全文
  • 如图:转换为(display-inline-block)内联块元素之后,两个元素之间多了一条为5px的缝隙(根据需求有时需要有时不需要), 解决办法: margin-left:-5px(元素多的话,每个都需要设置) 给其父元素添加一个样式...
  • 块元素、内联元素、内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:...
  • 块元素、内联元素、内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div...
  • 元素就是标签 在布局中常用标签有三种 块元素 内联元素 内联块元素 1.块元素也是行级元素 在布局中常用的标签有:div p ul li h1-h6 dl dd dt等。 在布局中的行为: 如果不设置固定宽度默认百分之百,不设置高度 由...
  • 元素 div就是一个元素, 所谓的元素就是会独占一行的元素,无论它的内容有多少 都会独占一行 p h1 h2…都是元素 div这个标签没有任何语义,就是一个纯粹的元素 并且不会为它里面的元素设置任何的默认样式 ...
  • 块元素、内联元素、内联块元素: 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素: 块元素,也可以称为行元素,布局中常用的...
  • 块元素、内联元素、内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div...
  • 块元素、内联元素、内联块元素元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div...
  • 元素常用标签:div h1~h6 p ul li dl dt dd 元素的特性: 1. 支持全部的样式 2. 如果没有设置宽高,默认的宽高为父级宽度的100% 3. 盒子占据一行,即使设置了宽度 内联元素常用标签:a span em i b strong ...
  • 块和内联

    2017-08-27 00:57:31
    元素和内联元素 div就是一个元素, 所谓元素就是会独占一行的元素,无论有多少内容都会独占一行 例如:p h1 h2 h3... div这个标签没有任何语义就是一个纯粹的元素  并且不会为他里面的元素设置任何...
  • 元素 常见元素:div,p,ul,li,ol,dl,dt,dd,h1~h6,hr ... d)元素作为一个容器,可以容纳其他的元素和内联元素 注:p标签比较特殊,只能在p标签中嵌套内联元素,不能嵌套元素 内联元素...
  • 内联块元素 三者可以相互转化 嵌套问题 前端规范 选择器 标签的划分 1.1单标签 1.2双标签 2.1块元素标签 2.2内联元素标签-行元素 内联块元素标签 块元素标签##块元素标签常见标签 - 基本元素 div 双 语义:无意义...
  • 内联 转换

    2016-06-30 20:32:48
    css 所有内联(行内)元素 都可以通过 display: block 转化成 元素 css 所有元素 都可以通过 display: inline转化成内联(行内)元素 一.内联元素转换为块级元素: 让内联元素产生...
  • 布局中常用的有三种标签,块元素、内联元素、内联块元素,了解了这三种元素的特性,才能熟练的对页面进行布局。 1.块元素 块元素(会占据文档流一行显示),也可以称为行元素,布局中常用的标签如:div、p、ul、li...
  • 内联元素和块元素

    2019-02-02 20:09:57
    内联元素和块元素 一、内联元素 1.内联元素并在一行 2.宽度高度有内容决定 3.元素换行产生间距 4.默认带上下边距 5.不支持样式:width height margin-top maigin-bottom 包括:文本元素(a、span、em、...
  • (3)内联块元素(行内块元素)。 一、内联元素(行内元素)——普通内联元素 特点: 1、多个行内元素可以同时处于同一行上; 2、元素的高度、宽度不可设置; 3、元素的宽度就是它包含的文字或图片(一般a...
  • 块元素、内联元素、内联块元素块元素、内联元素、内联块元素 3.9. 块元素、内联元素、内联块元素 块元素、内联元素、内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 88,715
精华内容 35,486
关键字:

内联块和内块