CSS 块元素,行内元素,行内块元素及元素之间转换
元素的显示模式
元素一般分为
块级元素和行内元素
| 元素种类 | 排列 | 设置样式 | 默认 | 包含 |
|---|---|---|---|---|
| 块元素 | 独占一行 | 可以设置宽高 | 容器的100% | 可以包含任何标签 |
| 行内元素 | 一行可以放多个行内样式 | 不可直接设置宽高 | 根据内容改变宽高 | 可包含文本或其他行内样式 |
| 行内块元素 | 一行可以放多个 | 可以设置宽高 | 根据内容改变宽高 | … |
1. 块元素
- 常见的的块元素:
<h1>-<h6>,<p>,<div>,<ol>,<li>
1.1 块元素特点
- 独占一行
- 高度,宽度,外边距及内边距都可以控制
- 宽度默认是容器(父级宽度)100%
- 是一个容器盒子,里边可以放行内或者块级元素
1.2 注意
- 文字类元素内不能使用块级元素
- 如:
<p>,<h1>~<h6>…
2. 行内元素
- 常见的行内元素(内联元素):
<a>,<strong>,<b>,<em>,<i>,<del>,<s>,ins,<u>,<span>
2.1 行内元素特点
- 行内元素在一行上,一行可以显示多个
- 宽高直接设置是无效的
- 默认宽度就是它本省内容得宽度
- 行内元素只能容纳文本或者其他行内元素
2.2 注意:
- 链接里面不能再放链接
- 特殊情况链接
<a>里可以放块级元素,此时建议将<a>标签转化为块级元素
3. 行内块元素
- 行内元素中
<img/>,<input/>,<td>他们同时具有块级元素和行内元素得特点
3.1 行内块元素特点
- 和相邻得元素在同一行上(中间又空白缝隙)
- 默认宽度是它本身内容得宽度
- 高度,行高,外边距以及内边距都可以控制(块元素特点)
4. 元素显示模式的转换
元素模式转换使用属性:
display
| 值 | 描述 |
|---|---|
| block | 元素将显示为块级元素，此元素前后会带有换行符 |
| inline-block | 元素将显示为行内块元素 |
| inline | 元素将显示为行内元素 |
| list-item | 此元素会作为列表显示 |
CSS 块元素,行内元素,行内块元素及元素之间转换相关推荐
- CSS之 块、行内、行内块元素
块元素 独占一行 如h1-h6.p.div.ul.ol.li等: 宽高内外边距可以调: 宽度默认是父级宽度100%: 都是容器盒子,里面可以放行内或块级元素. 注意点:文字类元素如p. ...
- html的div块float后宽度无效,行内元素（例如）设置float之后才能用width调整宽度...
本文将要为您介绍的是行内元素(例如)设置float之后才能用width调整宽度,具体完成步骤: 因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西,1.块元素. 特性:有物理属性,wid ...
- html行内元素转为块级元素,前端面试题-行内元素和块级元素
一.行内元素 一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素 块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. ...
- 元素（块、行内、行内块
块元素的特点 1.支持所有样式 2.块级元素 独占一行 3.块级元素默认宽度和父元素一样 常用块元素块级元素 一般 div p ol ul h1-h6 li dl dt dd 等都是 初始化(样式重置 ...
- 块元素div转变为行内块元素之后如何消除之间间隙
块元素div转变为行内块元素之后如何消除之间间隙 写了三个div,使其变成行内块元素之后,发现,有间隙,哟,我的小天使啊. 最外层父级div宽度width大于三个小div宽度之和 父级div: #aa ...
- 行内元素和块级元素：内联(行级)元素不能设置margin-top
内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...
- 行转换html,块级、行内、行内元素相互转换
块级.行内.行内元素相互转换 html> 块级.行内.行内块元素相互转换 *{margin: 0px;padding: 0px;} body{background: url(images/5.j ...
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
行内元素有哪些? 常用的行内元素: a - 锚点 em - 强调 br - 换行 img - 图片 font - 字体设定(不推荐) span - 常用内联容器,定义文本内区块 input - 输入框 ...
- 行内元素与块级元素的区别，行内元素与块级元素分别有哪些
文章目录 1.块级元素 2.行内元素 3.行内块元素(融合了前两者的特点) 4.三个元素的转换 5.常用的行内元素 6.常用的块级元素 6.常用的块级元素 1.块级元素 1.总是从新的一行开始,即各个 ...
最新文章
- OSChina 周四乱弹 ——震惊！程序员的时间都用来干这个！
- tomcat7下配置session复制和nginx做负载均衡
- HDU 2154 跳舞毯
- python程序开发_用python进行桌面程序开发
- 诺基亚：Symbian 3操作系统拥有多点触控功能
- oracle帮助系统,Oracle1 0g扩展的帮助文件的安装
- qt鼠标键盘钩子类设计
- 【NA】高斯型积分公式(一)
- 嵌入式linux指纹识别项目,基于嵌入式应用平台的指纹识别系统设计
- 企业邮箱客户端POP协议收信后，Webmail的邮件被删除，如何调整？
- oracle 计算母亲节日期,致母亲节：云和数据 一个满满是爱的地方
- android对cpu硬件要求,Android手机想用64位处理器？系统阻碍
- 分享一些可用的淘宝（1688）关于订单信息获取的相关接口（开放API收费）
- Systemback使用精简教程
- pandas将dataframe的所有数据列的名称转化为大写形式（all column labels in dataframe to uppercase）
- Ground Segmentation based on Loopy Belief Propagation for Sparse 3D Point Clouds （论文速读）
- 气象接口返回图标_天气预报查询接口
- 微信营销大师是一款什么软件
- Unity XCode自动发布ipa
- 计算机应用评估和调整,随时评估并进行相应的调整.doc