盒子模型与内外边距设置

盒子模型
（1）box-sizing:content-box: 盒子模型默认值，元素应用该模型时，计算方式为外边距+边框宽度+内边距+内容区域（margin ， border-width ，padding，实际内容占宽），设置的width/height属性只是内容区域宽度；
（2）box-sizing:border-box: 元素应用该模型时，计算方式为外边距+宽度，设置的宽度包含了边框宽度+内边距+内容区域，这种方式更方便我们平时的布局，省却了很多人为的计算过程；
外边距
（1）margin-top/right/bottom/left 上/右/下/左外边距
（2）margin：15px; 同时设置上右下左四个方向外边距
（3）margin：10px 15px; 第一个值为上下外边距10px；第二个值为左右15px外边距，margin：0 auto；常用于设置元素内容水平居中
（4）margin：5px 10px 15px；第一个值为上外边距5px，第二个值为左右外边距10px，第三个值为下外边距15px
外边距合并：竖直方向上的两个外边距相遇时，会合并为一个外边距，值以较大的一个为准
外边距溢出：父元素没有上边框，子元素与父元素上沿重合，为子元素添加上外边距会作用到父元素身上，可以给父元素设置 :before{content:’’,display:table}伪元素占位
内边距
（1）设置内边距会直接作用在元素上，使元素变大
（2）padding设置方式与外边距margin设置方式一样，没有auto属性
（3）给一个元素设置padding，会使padding部分呈现出该元素的背景色

盒子模型与内外边距设置相关推荐

html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录一.实现效果二.基本 HTML 结构三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...
7.css内外边距设置
1.常用写法总结常用属性说明 margin 设置外边距 padding 设置内边距,注意:设置内边距会改变原有容器的大小 2.代码示例 <!DOCTYPE html> <html ...
前端：CSS/13/HTML引入CSS的方法，CSS表格属性，盒子模型，上下外边距合并
HTML引入CSS的方法 1,嵌入式通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
（盒子模型常见问题）外边距合并问题，嵌套盒子边距塌陷问题解决
1.兄弟盒子边距合并. <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
盒模型、内外边距和边框
盒模型:内容.内边距.边框.外边距如图: 边框颜色: border-color:blue || rgb(255,0,0) || #fff000 || transparent(透明,默认值不常用可不记 ...
前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
CSS盒子模型（内容区、边框、内外边距）
一.盒子模型 1.什么是盒子模型.为什么要设置盒子模型,盒子模型具体怎么构成,怎么设置? 把各种元素布局到页面,就像想买个桌子,放到家里,要知道桌子的大小,形状,然后才能放到家里所以我们把所有的元素都 ...
css --- [读书笔记] 盒模型(边框、内外边距)
说明源代码学习盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距能说出内边距的作用,设置不同数值分别代表 ...

盒子模型与内外边距设置

盒子模型与内外边距设置相关推荐

最新文章

热门文章