css3盒子模型微课_css3 盒模型记
css3 盒模型
css假定每个元素都会生成一个或多个矩形框,这称为元素框。各元素框中心有一个内容区。这个内容区周围有可选的内边距,边框和外边距。这些项之所以被认为是可选的,原因是它们的宽度可以设置为0,实际上这样就从元素框去除了这些项。
在W3C传统css2.1盒模型中,通过声明width和height值来控制内容区域的宽度和高度,然后附加上内边距和边框等,这通常称为内容盒模型。
在css中盒模型被分为两种,第一种是W3C的标准模型,另一种是IE的传统模型,它们相同之处都是对元素计算尺寸的模型,不同之处是两者的计算方式不一样。
W3C的标准盒模型
外盒尺寸计算(元素空间尺寸)
element 空间高度 = 内容高度 + 内边距 + 边框 + 外边距
element 空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距
内盒尺寸计算(元素大小)
element 高度 = 内容高度 + 内边距 + 边框
element 宽度 = 内容宽度 + 内边距 + 边框
IE传统盒模型(IE6以下,不包括IE6)
外盒尺寸计算(元素空间尺寸)
element 空间高度 = 内容高度(包括了height+padding+border) + 外边距
element 空间宽度 = 内容宽度(包括了width+padding+border) + 内边距 + 边框 + 外边距
内盒尺寸计算(元素大小)
element 高度 = 内容高度(包括了height+padding+border)
element 宽度 = 内容宽度(包括了height+padding+border)
换句话说,IE6以下版本其内容真正的宽度是width,padding,border。用内外盒来说,W3C标准浏览器的内容宽度等于IE6以下版本浏览器的内盒宽度。
box-sizing
前面讲到在IE传统盒模型下,边框和内边距都包含在宽度和高度内。而在标准的浏览器中,宽度和高度仅仅包含了内容宽度,除去了边框和内边距,这样就为web设计处理增添了很多麻烦。比如我们需要一个100px的元素,元素有10px的内边距,1px的边框,在W3C标准盒模型下就必须要做一番加减了,最后得出内容宽度为100-20-2=78px,而在IE传统盒模型下却只需要声明盒子内容等于100px,内边距与边框自动算在里面。为了解决这个问题,css3增添了一个盒模型属性box-sizing,能够事先定义盒模型的尺寸解析方式。
box-sizing:content-box | border-box | inherit
content-box:默认值,让元素维持W3C的标准盒模型。
border-box:此值会让元素维持IE传统盒模型。
inherit:此值使元素继承父元素的盒模型模式。
div{
width:100px;
height:100px;
background:hsla(360,50%,30%,0.5);
padding:10px;
border:10px solid red;
box-sizing:content-box;
}
在默认值(content-box)标准盒模型下,盒子被内边距与边框撑大了。
div{
width:100px;
height:100px;
background:hsla(360,50%,30%,0.5);
padding:10px;
border:10px solid red;
box-sizing:border-box;
}
在IE传统盒模型(border-box)下,盒子大小不变。
IE6以下版本对盒模型的解析模式虽然不符合W3C的标准规范,但这种方式并不是一无是处,它也有好的一面:不管如果修改元素的边框或者内边距大小,都不会影响元素盒子的总尺寸,也就不会打乱页面的整体布局。而在标准浏览器下,按照W3C规范对盒模型的解析,一旦修改了元素的边框或者内边距,就会影响元素的盒子尺寸,也就不得不重新计算元素的盒子尺寸,从而影响到整个页面的布局。
overflow-x和overflow-y
overflow属性是css2.1规范中的特性,而在css3中增加了overflow-x和overflow-y属性。
overflow-x与overflow-y主要用来定义水平或垂直方向内容溢出的效果。
overflow-x:visible | hidden | scroll | auto | no-display | no-content
overflow-y:visible | hidden | scroll | auto | no-display | no-content
visible:默认值。不裁剪内容,可能会显示在内容框之外。
hidden:裁剪内容,不提供滚动机制。
scroll:裁剪内容,提供滚动机制。
auto:如果溢出框,则提供滚动机制。
no-display:如果内容不适合内容框,则删除整个框。
no-content: 如果内容不适合内容框,则隐藏整个内容。
div{
width:200px;
white-space:nowrap;
overflow-x:scroll;
}
overflow-x:scorll,使x轴添加了滚动机制。
div{
width:100px;
height:100px;
overflow-y:scroll;
}
overflow-y:scorll,使y轴添加了滚动机制。
resize
用来改变元素尺寸大小,主要目的是增强用户体验。
resize:none | both | horizontal | vertical | inherit
none:用户不能拖动元素修改尺寸大小。
both:用户可以拖动元素,同时修改元素的宽度和高度。
horizontal:用户可以拖动元素,仅可以修改元素的宽度。
vertical:用户可以拖动元素,仅可以修改元素的高度。
inherit:继承父元素的resize属性值。
div{
width:100px;
height:100px;
overflow-y:scroll;
resize:none;
}
resize为默认值时,不能拖动元素改变大小。
div{
width:100px;
height:100px;
overflow-y:scroll;
resize:both;
}
resize为both时,在元素右下角出现了特殊符号,拖动它就可以改变元素宽和高了。如下为拖动后的效果:
div{
width:100px;
height:100px;
overflow:scroll;
resize:horizontal;
}
resize为horizontal时,也出现了特殊符号,但是只能拖动水平方向,也就是宽度的大小,如下为拖动后的效果。
div{
width:100px;
height:100px;
overflow:scroll;
resize:vertical;
}
riseze为vertical时也一样,但是只能拖动垂直的方向,也就是高度大小,如下是拖动后的效果。
outline
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和border不同,外轮廓线不占用网页布局的空间,不一定是矩形。
outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
outline-color:定义轮廓线的颜色。
outline-style:定义轮廓线的样式。
outline-width:定义轮廓线的宽度。
outline-offset:定义轮廓线离边框的偏移值。
inherit:元素继承父元素的outline效果。
div{
width:100px;
height:100px;
border:10px solid;
outline:10px solid red;
}
胸无大志者,必受制于人
outline的效果与border的效果类似,但却不占据文档流,所以能够覆盖住后边的文本。
css3盒模型完。学习路漫漫,当知晓并非一日之功,中间必有千辛万苦。子曰:吾道一以贯之。就是说要有始有终,贵在坚持啊。
css3盒子模型微课_css3 盒模型记相关推荐
- css3盒子模型微课_css3之盒模型
什么是盒模型? css中的每个元素都是一个盒模型, 包括html body元素, 浏览器解析css的时候也会把每个元素看成一个盒子来解析. 盒模型具备的属性有: content .padding .m ...
- css3盒子模型微课_CSS3 盒子模型
元素性质 元素的性质分为两类 块元素 和 行元素. 块元素 行元素 效果 块元素 行元素 块元素 是我们在 HTML 篇中列举过的 盒子,它们通常作为其他元素的容器.跟 行元素 的区域在于,块元素可以 ...
- CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- 【盒模型】什么是盒模型
盒模型在前端的作用及概念: 在前端中盒模型可谓是十分重要的,它是CSS进行页面加载的基石,在页面CSS布局中盒模型规定了网页元素如何排列显示以及元素之间的相互关系.在H5中CSS样式定义所有元素都可以 ...
- css3盒子模型微课_CSS 盒子模型
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个 ...
- html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets) 盒模型 盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...
- CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
- html盒子模型的实例,html盒模型的示例分析
html盒模型的示例分析 发布时间:2021-06-04 12:04:12 来源:亿速云 阅读:61 作者:小新 小编给大家分享一下html盒模型的示例分析,相信大部分人都还不怎么了解,因此分享这篇文 ...
- css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型 元素分类 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
最新文章
- 虚拟键码对照表与ASCII对照表的区别
- GoldWave合并多段音乐,去除噪音,剪切想要的片段
- am335x 配置 GPIO 为可输入也可输出
- CMake 构建项目Android NDK项目基础知识
- python 生成xml文件
- 忘记mysql root管理员帐号密码处理方法
- 计算机网络课设-小型校园网,计算机网络课设 小型校园网
- 超级大水题(还是自己过不了的水题)
- 58 页 PPT 揭示图神经网络研究最新进展
- 数据库方面是知识和实战
- 人工智能的目标与进化
- 移动开发程序员的悲哀是什么?
- 卡内基梅隆大学计算机专业介绍,美国卡内基梅隆大学计算机专业介绍
- 什么是Scheme?原来还可以这样应用!
- 2023最新SSM计算机毕业设计选题大全(附源码+LW)之java社区闲置物品交易平台z10mc
- npoi 设定视图为分页预览_NPOI导出EXCEL 打印设置分页及打印标题
- CMD 常用命令总结
- Adobe国际认证|3D产品可视化:赢得内容竞赛的关键
- 一文读懂Kubernetes Scheduler扩展功能
- 小学计算机课画小鸡,信息技术三年级册《画小鸡》.doc