【CSS系列】块级元素和行内元素
块级元素:
块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”。
列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项还会生成一个标记符。
常用块级元素:
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
行内元素:
行内元素在一个文本行内生成元素框,而不会打断这行文本,行内元素最好的例子就是XHTML中的a元素。strong和em也属于行内元素,这些元素不会再他本身之前会之后生成“分隔符”,所以可以出现另一个元素的内容中,而不会破坏其显示。
XHTML层次结构要求:行内元素可以继承块元素,反之则不可以。
CSS没有这种限制。
常用行内元素:
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
块级元素和行内元素的转换:
可以在css样式中使用display:inline将块级元素设为行内元素。
也可以用display:block将行级元素转换为块级元素。
为行级元素设置宽高:
可以使用display:inline-block将元素设为行级-块级元素,即可为行内元素设置宽度、高度、底边距等。
【CSS系列】块级元素和行内元素的更多相关文章
- CSS(3)---块级标签、行内标签、行内块标签
块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...
- 【CSS3】块级元素与行内元素的区别
一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
- 前端css之文本操作及块级元素和行内元素
1.文本操作 1.1文本颜色(color) 颜色指定方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 1.2水平对齐方式 ...
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- CSS块级元素与行内元素
CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性. 行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...
随机推荐
- platform_driver_probe 函数解析
结构体列举 // 几个结构体 // include/linux/device.h struct bus_type { const char *name; // "platform" ...
- win7怎么把软件加入开机启动项
点击开机菜单进入. 2 然后点击菜单栏中的所有程序. 3 在所有程序中找到‘启动’,这个启动就是开机启动项来的. 4 右键进行打开启动项. 5 把快捷方式复制到开机启动项中.如果找不到快捷方式可以右键 ...
- Phalcon的MVC框架解析
1. mvc/simple从最简单的入手吧. 把一些能及时说明白的东西写在注释里了,需要扩展的知识列在下面. public/index.php <?php $loader = new \Phal ...
- 如何打印Qt中的枚举所对应的字符串
比如,想获得socket的状态枚举文字, 代码如下: QMetaObject mo=QAbstractSocket::staticMetaObject; int index=mo.indexOfEnu ...
- 【转】【C#】ZIP、RAR 压缩与解压缩
压缩文件夹 源码如下 using System; using System.Data; using System.Configuration; using System.Web; using Syst ...
- Android ArryaList 笔记
Arraylist相当于动态数组,可以动态的添加或者删除其中的元素. 参考链接 http://beginnersbook.com/2013/12/java-arraylist/ package com ...
- android Menu 笔记
菜单是应用中常见的用户组件.本文介绍如何在布局文件和代码中添加menu,submenu以及在代码中添加的方法. 参考链接 https://developer.android.com/guide/top ...
- e657. 用直线和曲线绘制图形
GeneralPath shape = new GeneralPath(); shape.moveTo(x, y); shape.lineTo(x, y); shape.quadTo(controlP ...
- Qt模态与非模态
模态对话框就是指在子对话框弹出时,焦点被强行集中于该子对话框,子对话框不关闭,用户将无法操作其他的窗口.非模态相反,用户仍然可以操作其他的窗口,包括该子对话框的父对话框. 如果从线程角度来讲,模态对话 ...
- ROS文件系统介绍--2
ros初级核心教程--ROS文件系统介绍(原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/) 1.ROS文件系统介绍: 1.1.预备工作:本教程中 ...