CSS中的块级元素(block)与行内元素(inline)
css中有3种基本的定位机制:
普通流(相对定位实际上看做普通流定位模型的一部分)
浮动(float)
绝对定位(固定定位是绝对定位的一种)
所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素)。
块级元素:块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素,例如div和p。
常见的块级元素:
(1)div:主要用来进行框架布局。
(2)h1~h6:用来设置不同级别的标题。
(3)p:创建段落,会自动在其前后创建一些空白。
(4)hr:用来创建分隔先。
(5)ol:创建有序列表。
(6)ul:创建无序列表。
块级元素的特点:
1.块级元素既可以容纳内联元素也可以容纳块级元素。
2.块级元素在默认的情况下是独占一行的。
3.块级元素大小是可以控制的,css可以通过width与height设定高度和宽度。宽度默认值就是它所在容器宽度的100%。
4.块级元素可以设置margin和padding属性.
5.块级元素对应属性display:block;
内联元素:任何不是块级元素的可见元素都是内联元素。内联元素只能够容纳文本或者内联元素。
常见的内联元素:
(1)strong:加粗强调。
(2)em:斜体强调。
(3)s:删除线。
(4)u:下划线。
(5)a:超链接。
(6)span:常用行级,可定义文档中的行内元素。
(7)img:图片。
(8)input:表单。
内联元素的特点:
1.内联元素默认情况下可以和其他内联元素元素在一行上。
2.内联元素默认情况下的大小是不可以控制的。
3.内联元素可以产生代码换行和空格。
4.内联元素对应属性display:inline;
5.内联元素只能容纳文本或者内联元素。
内联元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.
display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。
CSS中的块级元素(block)与行内元素(inline)的更多相关文章
- html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。
html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...
- 1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径
1 background(复合属性)与font(复合属性): background: 颜色 图片的链接 是否平铺 背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...
- 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素
元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...
- CSS中的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS中的块级元素与行级元素
最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行 ...
- CSS中的块级元素,行内元素,行内块元素
博客转载于:https://blog.csdn.net/swebin/article/details/90405950 块级元素 block 块级元素,该元素呈现块状,所以他有自己的宽度和高度,也就是 ...
- block,inline-block,行内元素区别及浮动
1.block: 默认占据一行空间,盒子外的元素被迫另起一行 2.inline-block: 行内块盒子,可以设置宽高 3.行内元素: 宽度即使内容宽度,不能设置宽高,如果要设置宽高,需要转换成行内块 ...
- CSS中的块级元素、内联元素(行内元素)
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- css中的块级和内联元素
块级元素: 首先说明display是块级元素,会单独站一行,如 代码: <!DOCTYPE html> <html> <head lang="en"& ...
随机推荐
- HDU1065 I Think I Need a Houseboat 【数学递推】
I Think I Need a Houseboat Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
- A. Arrays(Codeforces Round #317 水题)
A. Arrays time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...
- .NET Core 已经实现了PHP JIT,现在PHP是.NET上的一门开发语言
12月23日,由开源中国联合中国电子技术标准化研究院主办的2017源创会年终盛典在北京万豪酒店顺利举行.在本次大会上,链家集团技术副总裁.PHP 开发组核心成员鸟哥发表了以 " PHP Ne ...
- Centos 7 安装 PostgreSQL
本文只讲PostgreSQL在CentOS 7.x 下的安装,其他系统请查看:https://www.postgresql.org/download PostgreSQL 所用版本为:PostgreS ...
- MyBatis_多查询条件问题
一.多查询条件无法整体接收问题的解决 在实际工作中,表单中所给出的查询条件有时是无法将其封装成一个对象,即查询方法只能携带多个参数,而不能携带将这多个参数进行封装的一个对象.对于这个问题,有两种解决方 ...
- CentOS下nginx php mysql 环境搭建
CentOS下搭建PHP运行环境. 首先是在虚拟机上装好一个命令行的CentOS,如果只是弄服务器的话,不要装图形界面,会比较卡. 一.安装编译工具及库文件 yum -y install make z ...
- django的CMS系统(内容管理系统)
一.什么是CMS系统 CMS具有许多基于模板的优秀设计,可以减少开发的成本. CMS的功能并不只限于文本处理,它也可以处理图片.Flash动画.声像流.图像甚至电子邮件档案. CMS还分各个平台脚本种 ...
- springboot整合系列
Spring Boot 系列 博客原文:http://blog.csdn.net/isea533/article/details/50412212 Spring Boot 入门 Spring Boot ...
- python数字转字符串
参考文献: tt=322 tem='%d' %tt 可用,已经试用
- 【Uva623】500!(高精)
Description 求N! \(N \leq 1000\) Sample Input 10 30 50 100 Sample Output 10! 3628800 30! 265252859812 ...