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. 关于O(logN)的正确理解

    学计算机的或许对O(logN)这个符号并不陌生,快排.堆排.归并等等排序的平均时间复杂度. 问题来了,之前一直有个歧义就是:logN的底数到底是多少? 这个问题搁置着并没有去深究,仅仅是想应该是2吧. ...

  2. Intellij IDEA安装golang插件

    原文作者:Jianan - qinxiandiqi@foxmail.com 原文地址:http://blog.csdn.net/qinxiandiqi/article/details/50319953 ...

  3. jQuery里使用setinterval

    如果第一个参数是一个已写好的函数而不是匿名代码块,一定不要加引号,直接var ** = setinterval{myFunction ,500},只能这样,加括号会直接只调用一次,自然不行,加引号和括 ...

  4. Spring Boot [使用 Druid 数据库连接池]

    导读 最近一段时间比较忙,以至于很久没有更新Spring Boot系列文章,恰好最近用到Druid, 就将Spring Boot 使用 Druid作为数据源做一个简单的介绍. Druid介绍: Dru ...

  5. navicat创建存储过程、触发器和使用游标

    创建存储过程和触发器 1.建表 首先先建两张表(users表和number表),具体设计如下图: 2.存储过程 写一个存储过程,往users表中插入数据,创建过程如下: 代码如下: BEGIN #Ro ...

  6. Unable to resolve persistence unit root URL

    异常信息 时间:2017-03-07 11:46:05,516 - 级别:[ WARN] - 消息: [other] The web application [ROOT] appears to hav ...

  7. webpack+vue-cil 中proxyTable配置接口地址代理

    webpack+vue-cil 中proxyTable配置接口地址代理 在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包 ...

  8. LR接口压力测试实战(限量抢红包接口)

    一.业务描述:微信群中,运营人员放出活动链接,用户单击活动链接进入活动页面如下图,用户输入手机号抢红包(红包数量有限) 二.接口测试代码 Action() { lr_rendezvous(" ...

  9. Visual simultaneous localization and mapping: a survey 论文解析(全)

    当激光或声纳等距离传感器被用来构建小的静态环境的二维地图时,SLAM的问题被认为是解决的.然而,对于动态,复杂和大规模的环境,使用视觉作为唯一的外部传感器,SLAM是一个活跃的研究领域. 第一部分是简 ...

  10. Java 反编译工具下载

    反编译,通俗来讲,就是将.java 文件经过编译生成的 .class 文件还原.注意这里的还原不等于 .java 文件.因为Java编译器在编译.java 文件的时候,会对代码进行一些处理. 那么接下 ...