CSS的盒子模型

1.介绍盒子的概念1.页面中的一个标签都可看做是一个“盒子”通过盒子的视角更方便的进行布局2.浏览器在渲染显示网页时会将网页中的元素看做是一个个的矩形区域我们也形象的称之为盒子2.盒子模型CSS中规定每个盒子分别由内容区域content、内边距区域padding、边框区域border、外边距区域margin构成这就是盒子模型3.记忆可以联想现实中的包装盒/* 内边距 填充泡沫出现在内容和盒子边缘之间*//* 边框线 纸箱子*//*外边距出现在两个盒子之间出现在盒子的外面*/注意背景色可以对 contentpadding区域起作用不能对margin起效2.宽度和高度 作用利用width 和 height 属性默认设置是盒子 內容区域 的大小 属性width/ height 常见取值数字pX3.边框border1边框单方向 场景只给盒子的某个方向单独设置边框 属性名border- 方位名词(top bottom left right)2边框单属性作用属性名属性值边框粗细borden-width数字px边框样式border-style实线 solid 虚线 dashed 点线 dotted边框颜色border-color颜色取值连写形式单个取值的连写取值之间以空格隔开推荐顺序粗细 样式 颜色顺序不分先后4.内边框paddingpadding 属性可以当做复合属性使用表示单独设置某个方向的内边距取值顺序padding 最多取4个值四值顺序上 右 下 左三值顺序上 左右 下两值顺序上下 左右一值离边框的距离都相等注意多值写法永远都是从上开始顺时针转一圈如果数不够看对面自动内减• 操作给盒子设置属性box-sizingborder-box即可• 优点浏览器会自动计算多余大小自动在内容中减去(以width和height为标准的盒子其他内边距和边框内容等比例缩小)以手动內减为例需求盒子尺寸300*300背景粉色边框10px实线黑色上下左右20px的内边距答当 给盒子设置border或padding时盒子会被撑大需要进行內减5.外边框margin 场景浏览器会默认给部分标签设置默认的margin和padding但一般在项目开始前需要先清除这些标签默认的margin和padding后续自己设置• 比如body标签默认有margin8px• 比如p标签默认有上下的margin• 比如ul标签默认由上下的margin和padding-left解决方法1.blockquote, body, button, dd, dl, dt, fieldset, form,(index): 49 h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, P, pre, td,textarea, th, ul{margin: 0;padding: 0;}2.*{margin: 0;Padding: 0;}居中margin:auto表示横竖都居中margin: 0 auto表示横居中竖不居中margin竖 横6.顺序从外到内先宽高背景色放内容调节内容的位置,控制文字细节有利于浏览器的运行