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)的更多相关文章

  1. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  2. 1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  3. 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  4. CSS中的块级元素和行内元素

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

  5. CSS中的块级元素与行级元素

    最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行 ...

  6. CSS中的块级元素,行内元素,行内块元素

    博客转载于:https://blog.csdn.net/swebin/article/details/90405950 块级元素 block 块级元素,该元素呈现块状,所以他有自己的宽度和高度,也就是 ...

  7. block,inline-block,行内元素区别及浮动

    1.block: 默认占据一行空间,盒子外的元素被迫另起一行 2.inline-block: 行内块盒子,可以设置宽高 3.行内元素: 宽度即使内容宽度,不能设置宽高,如果要设置宽高,需要转换成行内块 ...

  8. CSS中的块级元素、内联元素(行内元素)

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  9. css中的块级和内联元素

    块级元素: 首先说明display是块级元素,会单独站一行,如 代码: <!DOCTYPE html> <html> <head lang="en"& ...

随机推荐

  1. Golang开发环境搭建(Notepad++、LiteIDE两种方式以及martini框架使用)

    本文介绍两种Golang的开发环境一种基于notepad++.还有一种基于liteide. 1.下载Golang语言的pkg:http://golangtc.com/download 直接点击安装,一 ...

  2. 机器学习——深度学习(Deep Learning)

    Deep Learning是机器学习中一个非常接近AI的领域,其动机在于建立.模拟人脑进行分析学习的神经网络,近期研究了机器学习中一些深度学习的相关知识,本文给出一些非常实用的资料和心得. Key W ...

  3. 開始:触摸MySQL

    学习MySQL.少不了安装一个MySQL数据库,安装想必非常easy,事实上也是.我下载了一个MySQL5.7.百度了一下安装步骤,就成功安装了.相对于Oracle来说要简单不少. 买了两本书,看了& ...

  4. startup alter.log spfile.ora

    SQL> select * from v$version where rownum=1; BANNER --------------------------------------------- ...

  5. 用maven建立java web项目

    1.在eclipse的菜单栏选择File->New->Other->Maven->Maven ,并在第一个框打勾,然后点击下一步 2.转换为java的Dynamic Web P ...

  6. Python的几个常用模块

    一.sys 用于提供对Python解释器相关的操作: sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) sys.version ...

  7. Intellij 解除(去除)SVN关联

    方法一:通过Intellj 来处理 1. 安装插件 打开Intellij的setting(ctrl+alt+s),选择plugins,在右边搜索框输入"SVN",搜索.选择&quo ...

  8. React学习总结(一)

    React学习总结 一.什么是React? 是Facebook公司开发的一套JS库 React的详细介绍https://www.jianshu.com/p/ae482813b791 二.老版本Reac ...

  9. (精选)Xcode极速代码,征服Xcode,xcode插件

    插件  1 http://blog.csdn.net/qq_30513483/article/details/52349997 插件2 http://www.code4app.com/forum.ph ...

  10. Mybatis-----优化配置文件,基于注解CR

    这篇主要写配置文件的优化,例如  jdbc.properties 配置文件  ,引入数据库的文件,例如driver,url,username,password 等,然后在 SqlMapConfig.x ...