CSS盒子模型[盒子模型分为哪几部分?/ 内容区/内边距/边框/边框样式/外边距/]
2018-12-24 17:00
2606 查看
盒子模型解释
元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式
``
盒子模型分为哪几部分?
一个盒子模型分成几部分: - 内容区(content) - 内边距(padding) - 边框(border) - 外边距(margin)
内容区
内容区:盒子中放置内容的区域,也就是元素中的文本内容,子元素都是存在于内容区中的。 如果没有元素设置内边距和边框,则设置内容大小偶人和盒子大小一致
通过width 和height 两个属性可以设置内容的大小
width 和height属性值适合用于块元素
内边距
内边距:元素内容区与边框以内的空间
默认情况下width和height不包含padding的大小
使用padding属性来设置元素的内边距 举例: -padding:10px 20px 30px 40px; 这样会设置元素的 上,右,下,上 四个方向的内边距。(按照顺时针方向) padding:10px 20px 30px; 分别指定 上,左右,下 四个方向的内边距 padding:10px 20px; 分别指定 上下,左右 四个方向的内边距 padding:10px ; 分别指定 上左下右 四个方向的内边距 同时在CSS中还提供padding-top padding-right padding-left padding-bottom
边框
可以在元素周围创建边框,边框是元素可见的最外部
可以使用border属性来设置盒子的边框: -border:1px red solid; 上边的样式分别指定了边框的 宽度 ,颜色,样式
也可以使用border-top/left/right/bottom分别指定 上右下左 四个方向的边框 和padding一样,默认width 和height 并包括边框的宽度
边框样式
边框样式可以设置多种样式: -none(没有边框) -dotted(点线) -dashed(虚线) -solid(实线) -double(双线) -groove(槽线) -ridge(脊线) -inset(凹线) -outset(凸线)
外边距
外边距是原素边框与周围元素相距的空间
使用margin属性可以设置外边距
用法和padding 类似,同样也提供了四个方向的 margin-top/right/bottom/left
当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等,所以这行代码 margin:0 auto 可以使元素居中
margin 在一个声明中设置所有外边距属性。 margin-top 设置元素的上外边距。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。
相关文章推荐
- CSS增加这3行,盒子模型的内边距和边框不再会增加它的宽度
- CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式...
- CSS中背景图片,文本,列表与盒子模型的边框与边距
- html 盒子模型基础(单位,边框,内边距,外边距)(一)
- [置顶] 内容(content)、填充(padding)、边框(border)、边界(margin):CSS中盒子模型有何区别?
- css 样式设计(一)( 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 )
- css基础 盒子模型 外边距 边线 内边距 内容的布局(图)
- css基础 盒子模型 外边距 边线 内边距 内容的布局(图)
- css中的行高,盒子模型(边框,内边距,外边距),以及firework的基本使用
- HTML基础-样式位置、背景、边框、内外边距、盒模型和结构、文本、常见样式
- CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式
- Js中盒子模型的样式获取
- CSS边框盒子模型详解
- CSS核心内容之盒子模型
- CSS核心内容之盒子模型
- content内容,padding内边距,board边框,margin外边距
- 盒子模型外边距问题&display&visible&浮动
- IE6盒子模型没问题——详测双倍边距
- 数据模型所描述的内容包括三个部分:数据结构、数据操作、数据约束。
- 第六章:CSS框模型样式(box模型 \盒子模型)和CSS3