display:block;

块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理。

块级元素width、height、padding、margin生效

块级元素有以下几个特点:

  1、总是另起一行(特立独行)

  2、可以设置其宽度、高度、内外边距

  3、在不手动设置宽度的情况下,宽度默认为所在容器的100%(即容器宽度)

  4、可以容纳行内元素和其他块元素

display:inline;

行内元素也称为内联元素,行内元素不占有独立区域,其大小仅仅被动的依赖于自身内容的大小(例如文字和图片),所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

width、height无效,padding、margin生效

行内元素的特点:

  1、总是和相邻的行内元素在同一行上(物以类聚)。

  2、设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。

  3、默认宽度是他自身内容的宽度。

  4、行内元素只能容纳其他行内元素或者和文本。

display:inline-block;

行内块元素,width、height、padding、margin生效,典型代表元素:img、input

html:块级元素和行内元素的特点的更多相关文章

  1. 【CSS3】块级元素与行内元素的区别

    一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...

  2. HTML中块级元素与行内元素

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  3. CSS里常见的块级元素和行内元素

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

  4. CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  5. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  6. html块级元素与行内元素

    1.关于行内元素和快元素的说明: 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...

  7. css块级元素和行内元素详细解析

    块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; ...

  8. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  9. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

随机推荐

  1. Ajax中最有名axios插件(只应用于Ajax)(post方法,官网写错了,应是字符串格式)

    /* axios v0.18.0 | (c) 2018 by Matt Zabriskie */!function(e,t){"object"==typeof exports&am ...

  2. python基础介绍

    一. 1.计算机基础 cpu:运算和控制:速度:飞机 内存:临时存储,供给cup数据,断电数据清空.成本高,速度:高铁 硬盘:相当于电脑的数据库,存储大量数据,数据永久保存(除非物理结构被破坏).速度 ...

  3. [UE4]虚幻4链接独立服务器

    如果虚幻4只做客户端的话,应该怎么连接服务器呢? 官方并没有提供蓝图的网络函数,C++里面有. 一.自己实现,提供接口给蓝图使用. 二.第三方插件.插件下载地址:https://github.com/ ...

  4. Anaconda(python3.6)中使用python2.7

    因为我现在安装的是最新版Anaconda3,其自带的Python版本为3.6,如果我们需要添加2.7版本的Python,可以进行如下操作.(同理,如果有人安装的是Anaconda2需要添加Python ...

  5. windows 日志解决方法

    1.sql server 2012 报错 MSSQLSERVER 服务无法使用当前配置的密码以 .\MSSQL_SF_A9JGSK 身份登录,错误原因如下: 此帐户的密码已过期. 要确保服务配置正确, ...

  6. Javascript-关于break、continue、return语句

    JS-break:break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句.由于它是用来退出循环或者switch语句,所以只有当它出现在这些语句时,这种形式的break语句才 ...

  7. Delphi7 中文汉字转网址格式 Utf8编码转换(淘宝搜索中文转网址)

    function HttpEncode(S:AnsiString):string; var   P:^Byte;   I:Cardinal; begin   Result:='';   P:=@S[1 ...

  8. Linux下使用OTL操作mysql数据库

    首先重点推荐介绍otl介绍及用法的文章:http://www.cnblogs.com/fnlingnzb-learner/p/5835560.html 一.编写代码 注:以下代码来自OTL示例,略有改 ...

  9. 17 RAID与mdadm管理命令

    在"14 磁盘及文件系统管理详解"中,我们详细介绍了磁盘的工作原理,但是,有一点我们一定要明白,作为现在存储数据的主要设备,机械磁盘早就是上个世纪的产品,而它的读写速度与内存.CP ...

  10. 【LeetCode】2. Add Two Numbers 两数相加

    给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和 ...