css复习整理(三):盒子模型
来源:互联网 发布:星游记网络大电影 编辑:程序博客网 时间:2024/05/18 06:19
一.盒子模型
1.盒子模型
CSS中,一个独立的盒子模型由content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。通常设置的width,height是实际内容的尺寸,元素框的最内部分是实际的内容,直接包围内容的是内边距,内边距呈现了元素的背景,内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素,盒子模型如下图所示:
2.尺寸计算
css通常设置的width,height是实际内容的尺寸,这里注意:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距;
二.样式
1.盒子样式
可设计元素的padding, margin, border,前两个可用绝对值,也可用百分比表示,当用百分比表示时,意为占父元素宽度/高度的比例,padding在设置后是增加了内容区域与边框的距离,不会改变内容区域的尺寸,这里要注意内容+内边距后不可超过父元素的尺寸,我们可以使用max-height等属性进行限制,而border可设置边框的颜色,样式,宽度。
2.外边距合并(塌陷现象)
当两个行内元素紧邻时,他们之间的距离为第一个元素的 margin-right 加上第2个元素的margin-left但是垂直元素相邻时注margin是可以合并的,即上一个元素的margin-bottom与下面一个元素的margin-top可以合并,则两者之间的间距为两个值中较大的一个;当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并,如下图所示。
阅读全文
0 0
- css复习整理(三):盒子模型
- CSS样式三--盒子模型
- CSS(三)_表格,盒子模型,边框
- css核心-盒子模型(Box Model)整理
- css核心-盒子模型(Box Model)整理
- 理解CSS盒子模型
- 盒子模型 css
- css盒子模型
- CSS盒子模型
- CSS核心--盒子模型
- CSS核心--盒子模型
- CSS盒子模型
- CSS盒子模型
- DIV+CSS盒子模型
- CSS盒子模型
- css盒子模型
- CSS盒子模型介绍
- CSS+DIV 盒子模型
- kafka2:性能优化
- jq鼠标经过隐藏当前显示另一个
- python逻辑控制
- Delphi 動態創建控件,賦值,使用
- python3 爬虫时遇到问题:cannot use a string pattern on a bytes-like object
- css复习整理(三):盒子模型
- 经验分享 | 一个程序员的运气有多重要
- Web自动化测试中针对图片验证码问题的常见解决思路,看看对您有没有帮助
- 完美运动框架
- iOS 通用链接(UniversalLinks)+ 分享功能的一些看法
- ArrayBlockingQueue源码分析
- Python
- 评论平台
- linux 命令