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. 廖雪峰Java1-3流程控制-4switch多重选择

    switch语句 根据switch(表达式)跳转到匹配的case结果,继续执行case结果: 的后续语句,遇到break结束执行,没有匹配条件,执行default语句. int i = 3 switc ...

  2. Zabbix 课程大纲

    Zabbix 课程笔记  day1 Zabbix 安装  day1 Zabbix 添加主机 day1 Zabbix 创建监控项目 day1 Zabbix 创建触发器 day1 Zabbix 告警内容配 ...

  3. Tomcat 环境部署网站. 帆软平台部署.

    主要内容. 需要使用Tomcat 部署 帆软报表平台(以下简称报表平台). 报表平台可以集成到网站, 也可独立部署. 此处是独立部署.即通过 网址:域名 独立访问这个报表平台. -- 技术要点 Tom ...

  4. java使用jedis访问CentOS中的redis

    pom.xml <dependency> <groupId>redis.clients</groupId> <artifactId>jedis</ ...

  5. Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK. Looked here: C:\Users\Administrator\AppData\Local\Android\sdk\tools\templates\gradle\wrapper

    在Windows7上运行 “cordova build Android” 报错,如下: C:\test\hello> cordova build androidANDROID_HOME=C:\U ...

  6. Delphi2010/XE2下隐藏程序系统任务栏的图标

    Delphi7代码: SetWindowLong(Application.Handle,GWL_EXSTYLE,WS_EX_TOOLWINDOW); 以上的代码在Delphi7中可以用,但是在Delp ...

  7. MySQL--局域网、外网访问MySQL

    一.局域网.外网访问 1. 打开CMD,导航到当前MySQL的bin路径,如下图: 2. 访问MySQL:输入MySQL -u root -p,点击Enter键,即可看到密码输入框: 输入密码,点需E ...

  8. 使用nginx secure_link指令实现下载防盗链

    一.安装nginx并检查是否已安装模块 [root@img_server ~]# nginx -V #输出nginx所有已安装模块,检查是否有ngx_http_secure_link_module 二 ...

  9. DRF 视图组件,路由组件

    视图组件  -- 第一次封装   -- GenericAPIView(APIView):    queryset = None    serializer_class = None    def ge ...

  10. 错误为Lc.exe已退出,代码为-1

    近来在做项目的时候,突然遇到 了 LC.exe 已退出,代码为-1 的提示,怎么也编译不了,在查了相关的资料后,终于明白了原因,其解决方案如下 : 1. 以管理员的身份来运行vs, 并把项目中“pro ...