文档章节

块级元素行内元素内联元素

小木fan
 小木fan
发布于 2016/09/09 17:16
字数 401
阅读 0
收藏 0

在标准文档流里面,块级元素具有以下特点:
    ①总是在新行上开始,占据一整行;
    ②高度,行高以及外边距和内边距都可控制;
    ③宽带始终是与浏览器宽度一样,与内容无关;
    ④它可以容纳内联元素和其他块元素。

行内元素的特点:
①和其他元素都在一行上;
②高,行高及外边距和内边距部分可改变;
③宽度只与内容有关;
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用

1.块级元素,默认是独自占据一行的。比如是<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr />
2.内联元素,默认是几个内联元素都可以在同一行上显示。比如是<a>、<span>等。

内联不占行,如input,span,a,你会发现写多个input的时候,它们都排在同一行块状元素,占行,如div,p。你会发 现写多个div的时候,它们都各自占一行。
有时候你用到什么元素的时候,可能自己观察下。也可以去看下w3school。
如果你想内联元素占行,可以用css中的display:block;

© 著作权归作者所有

小木fan
粉丝 1
博文 52
码字总数 13186
作品 0
绵阳
私信 提问
css-内联(行内)元素、块元素、margin、padding

css-内联(行内)元素、块元素、margin、padding block元素的特点: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度。<div>, <p>, <h1...

随智阔
2012/11/17
108
0
CSS文档流与块级元素和内联元素

CSS文档流与块级元素(block)、内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让...

i33
2012/12/28
100
0
什么是块级元素和内联级元素(二)

block(块)元素的特点: ①总是在新行上开始; ②高度,行高以及外边距和内边距都可控制; ③宽度缺省是它的容器的100%,除非设定一个宽度。 ④它可以容纳内联元素和其他块元素 inline元素的...

金小川
2010/04/13
27
0
内联元素(inline element)和块元素(block element)

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(bl...

HalaMadrid
2013/12/19
75
3
好程序员分享CSS标签的分类、及显示模式

好程序员分享CSS标签的分类、及显示模式,标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。 一、块级元素(block-level) 每个块元素通常都会独自...

好程序员IT
07/01
11
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
7
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
9
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部