css盒子模型的深入理解,在块级、行内元素的区别和特性
css盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
* {
margin: ;
padding: ;
}
css盒子模型到底的思想是什么?
CSS实现页面布局的一种思想:把页面的所有元素都看成一个类似于礼品盒的盒子,礼品盒可能会有好多层包装组成,那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下,盒模型是要把元素看成立体的,它确实有空间的3D属性,css盒子3D模型从上到下分为5层:1、border;2、content+padding;3、background-image;4、background-color;5、margin。
目前有:标准盒子模型和IE盒子模型 2种盒模型 ,区别在于:
标准盒模型:元素的width和height = content //内容
IE盒模型:元素的width和height =content+border+padding //内容+边框+内边距
为了满足跨浏览器的差异,我们比较肯定的方式是使用标准盒模型,这里通过在网页顶部增加DOCTYPE的声明,来解决跨浏览器兼容方案(或者使用css3的声明方式):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS盒子模型对行内元素和块级元素的区别和特点
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化,另外
块级元素可以设置width,height属性。
行内元素设置width,height属性无效,它的长度高度主要根据内容决定。
块级元素即使设置了宽度,仍然是独占一行。
块级元素可以设置margin和padding属性。
行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果。
块级元素对应于display:block. 行内元素对应于display:inline。
块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table...
如果想让一个元素可以设置宽度高度,又让它以行内形式显示,我们可以设置display的值为inline-block。
Box-sizing说明
CSS3增加的box-sizing属性,允许我们规定元素使用哪种盒模型。IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-。它具有有3个属性值:
box-sizing:content-box: W3C标准盒模型,默认属性。padding和border不被包含在定义的width和height之内。
box-sizing:border-box:IE6混杂模式盒模型, padding和border被包含在定义的width和height之内。此属性表现为怪异模式下的盒模型。
box-sizing:inherit: 从父级元素中继承该属性。
如果设置box-sizing:border-box来使用IE6混杂盒模型 ,那么
.demo {
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box; /*增*/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
设置padding与border后,内容区的宽度和高度被压缩为70px*70px,盒子的原尺寸仍然是100px*100px
办公资源网址导航 https://www.wode007.com
Box-sizing 的应用场景?
当一个容器宽度定义为 width:100%; 之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的。如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果是非常实用的。
css盒子模型的深入理解,在块级、行内元素的区别和特性的更多相关文章
- 块级&行内元素总结
一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的 ...
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- css position 和 块级/行内元素解释
一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...
- 块级&行内(内联)元素
行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的 ...
- 【CSS3】块级元素与行内元素的区别
一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...
- 块级元素和行内元素的区别 (block vs. inline)
块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...
- HTML块级元素与行内元素的区别
块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1>. ...
- CSS盒子模型的一些理解
盒子模型相当于把现实中的盒子形象化. 盒子模型的大小="内容(content)+内填充(padding)+边框(border)+外边距(margin)" 盒子模型方向为:top, ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
随机推荐
- Java实现第九届蓝桥杯等腰三角形
等腰三角形 题目描述 本题目要求你在控制台输出一个由数字组成的等腰三角形. 具体的步骤是: 1. 先用1,2,3,...的自然数拼一个足够长的串 2. 用这个串填充三角形的三条边.从上方顶点开始,逆时 ...
- 关于EF的五种状态
最近半个多月没更新原因是在赶项目...在做项目的时候就会发现自己很多问题,也有很多东西要记录,今天就记录一下对ef新的认识. 也就是关于ef的五种状态管理. Unchanged(持久态) Midifi ...
- Hbase的基本架构以及对应的读写流程
一.HBase简介 1,定义: HBase 是一种分布式.可扩展.支持海量数据存储的 NoSQL 数据库. 2,HBase的架构图: 架构角色: 1)Master Master是所有Region Se ...
- Autoware 进行 Robosense-16 线雷达与 ZED 双目相机联合标定!
项目要标定雷达和相机,这里记录下我标定过程,用的速腾 Robosense - 16 线雷达和 ZED 双目相机. 一.编译安装 Autoware-1.10.0 我没有安装最新版本的 Autoware, ...
- [xDebug] 服务器端的配置参数
[Xdebug] ;load xdebug extensionzend_extension_ts = path/tp/xdebug;是否开启自动跟踪xdebug.auto_trace = On;是否开 ...
- php5.5下安装pdflib的步骤
php5.5下安装pdflib的步骤 1. 下载pdflib 下载地址为:http://www.pdflib.com/download/pdflib-family/pdflib/ 然后选择对应的版本, ...
- # 详细了解HTML5中的form表单
4.规范使用 <form>元素用于组织所有表单部件(也称为控件或字段),负责告诉浏览器把数据提交到哪里,方法是在action属性中提供一个URL.加入你只是想在客户端使用JavaScrip ...
- JVM进阶之路(一)
JVM是Java程序运行的基本,了解Java程序的运行原理绝对有必要了解JVM的内容,JVM的内容其实很多,而且版本不同,其中的内容也很多不同,接下来就通过几篇文章来慢慢讲述JVM的内容. 一.Jvm ...
- deepin双屏实现方式
先xrandr --listproviders看下有几个provider,如果有多个,那么可能是不同显示口在不同显卡上,运行xrandr --setprovideroutputsource 0 1或x ...
- [搬运]Intellij IDEA 汉化
Github地址: https://github.com/pingfangx/TranslatorX