CSS知识归纳—2
来源:互联网 发布:练级的网络手机游戏 编辑:程序博客网 时间:2024/06/06 05:08
css盒模型
每个元素都有其对应的盒模型:
border边框,border-width、border-style(solid实线、dashed虚线、dotted点状、double双线)、border-color;
padding内边距 ;
margin外边框,可以为赋值,使元素内容区域向外展开;元素间上下外边距会合并,取两元素间较大外边距作为间距,左右外边距则不存在合并;
若一个元素为空元素只有外边距,则上下外边距会合并,在遇到另一个元素后仍会与其外边距合并。
*一些元素默认设定了盒模型属性值,所以在样式表开头一般先去除这些元素的默认样式,方便我们自定义样式。
相关属性计算:
offsetWidth=元素内容区宽度+左右内边距+左右边框宽度;
offsetHeight=元素内容区高度+上下内边距+上下边框宽度;
clientWidth=元素内容区宽度+左右内边距;
clientHeight==元素内容区高度+上下内边距;
css3里border-sizing属性可以重新定义盒模型:
当border-sizing:content-box
width=元素内容区宽度;
height=元素内容区高度;
当border-sizing:border-box
width=元素内容区宽度+左右内边距+左右边框宽度;
height=元素内容区高度+上下内边距+上下边框宽度;
*下一篇是元素的定位
0 0
- CSS知识归纳—2
- CSS知识归纳—1
- CSS知识归纳—3
- CSS知识归纳—4
- sql知识归纳2
- JavaScript知识归纳(2)
- 小知识归纳
- 图的知识归纳
- Java常用知识归纳
- sql知识归纳
- 浏览器缓存知识归纳
- SQL知识归纳
- 学习知识归纳
- Css常见问题归纳
- CSS浏览器兼容性问题 归纳
- css reset归纳
- CSS归纳总结
- CSS及选择器归纳
- CSS3快速上手之10:图文效果
- ubuntu LAMP搭建笔记
- redis的安装与配置
- 《算竞(紫书)》笔记1 STL入门
- 日文身体部位单词_20161009
- CSS知识归纳—2
- 第七周项目4-队列数组
- 流程控制
- 例题9-10 UVA 1626 Brackets sequence (dp递推 || 记忆化搜索)
- 【Dongle】【数据结构】while循环与for循环
- java---异常处理(1)
- WORDBOOK - ForeverStrong
- WebSocket -- Mongoose
- JSP与数据库