元素类型

在CSS中,HTML标签元素分为三种类型:
  • 块状元素
  • 内联元素(也叫行内元素)
  • 内联块状元素

它们之间的区别在于:
  1. 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示
  2. 块状元素和内联块状元素可以设置宽高,而内联元素则不行
  3. 块状元素默认宽度为父容器的100%,内联块状元素的默认宽度则根据内容决定

可以看出,块级元素和内联元素的区别主要在 “是否能够独立设置宽高” 以及 “是否独占整行“,而内联块状元素则综合了两者的特性,在行内显示且可以设置宽高。

元素可以通过display属性进行类型转换:
  • display:block;  转换为块级
  • display:inline;  转换为内联
  • display:inline-block;  转换为内联块级

常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> ...

常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<code> ...

常用的内联块状元素有:
<img>、<input> ...


盒模型

页面上的元素整体都可以看成一个盒子,以chrome中的截图为例:
 一个元素的内容,如上图蓝色的200*200;它放在一个盒子里,盒子的外形即border;而padding的翻译也很贴切——“填充”,物品在盒子内并不一定是完全正好放满的,可能会放一些填充物,如快递过程中起缓冲作用的废纸屑等;最后margin,也就是边界,和其他元素的距离。

所以如上图一个元素的宽度我们设定为width:200px,而它实际的宽度占比还需要加上padding、border、margin,也就是200+10*2+5*2+20*2=270px


参考链接:



[浅谈CSS核心概念] CSS元素类型和盒模型的更多相关文章

  1. [浅谈CSS核心概念] CSS布局模型:float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

  2. CSS核心概念之盒子模型

    盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub--CSS核心概念. 当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basi ...

  3. 【转】浅谈UML的概念和模型之UML九种图

    原文地址:浅谈UML的概念和模型之UML九种图 目录: UML的视图 UML的九种图 UML中类间的关系 上文我们介绍了,UML的视图,在每一种视图中都包含一个或多种图.本文我们重点讲解UML每种图的 ...

  4. CSS基础知识---浮动,定位和盒模型

    转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...

  5. 学习总结:CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  6. 浅谈SpringBoot核心注解原理

    SpringBoot核心注解原理 今天跟大家来探讨下SpringBoot的核心注解@SpringBootApplication以及run方法,理解下springBoot为什么不需要XML,达到零配置 ...

  7. CSS——(2)与标准流盒模型

    部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...

  8. css布局详解(一)——盒模型

    一.网页布局的几种情况 今天让我们总结一下在css布局的各种情况做一个总结,为我们以后布局网页时做一个参考. 先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的: 如图所 ...

  9. 关于CSS你应该知道的基础知识 - 盒模型篇

    浏览器渲染引擎通过盒模型的方式来布局html元素.我们可以将每一个html元素都看做是一个盒子,每一个盒子都有长和款,多个这样的盒子组成了我们的网页. Margin,Border,Padding 每一 ...

随机推荐

  1. apicloud 自定义模块引用aar

    apicloud 引入aar包,如果使用apicloud自定义模块的话,如果是一般的jar包,我们需要把jar down到本地然后添加到module的libs中就可以了(不要想着用远程地址了,既然用a ...

  2. css 常用的几种垂直居中(包括图片)

    我知道现在有非常多的水平垂直居中的写法,我就写一些我自己常用的方法,同时说明一下优缺点 <div class="wrapper"> <div class=&quo ...

  3. AJAX的基本操作

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和 ...

  4. Oracle EBS 用户职责人员取值

    SELECT fu.user_name 用户名, fu.description 用户说明, fu.start_date 用户启用日期, fu.end_date 用户终止日期 --,fu.employe ...

  5. jmeter如何保持JSESSIONID

    利用Jmeter做接口测试的时候,如何提取头部的JSESSIONID然后传递到下一个请求,继续完成当前用户的请求. 一.如果响应数据里面没有返回JSESSIONID,直接添加http cookies ...

  6. django直接操作MySQL,中文乱码

    sql_insert = '''insert into sinfors_hvvms values (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)''' c ...

  7. C Programming vs. Java Programming

    Thing C Java type of language function oriented object oriented basic programming unit function clas ...

  8. Skype 服务器客户端策略参数优化

    1.skype通讯录原理 对于skype客户端的通讯录同步,首先说说原理,通讯簿信息是从AD同步的skype前端服务器(每天1:30),在从前端服务器同步的客户端(大概1小时内同步一次). skype ...

  9. opengl 实体和网格绘图函数(基础)(转)

    http://blog.csdn.net/he_wen_jian/article/details/8594880 GLUT工具箱提供几种图形3维图形的函数: void glutWireSphere(G ...

  10. 在eclipse中方便的比较各个语言 资源文件—jinto的安装

    一.下载与安装jinto Eclipse插件的插件,用来解决资源文件的国际化问题 用jinto编辑器打开properties文件后,就可以方便的建立出各国和各种语言的资源文件,同时可以方便的对比书写各 ...