盒子模型--边框--内边距--外边距

Posted 2021-12-05 by xiongmao; tagged with 边框 , 内边距 , 外边框

盒子模型：
　　内容区（content）
　　内边距（padding）
　　边框（border）
　　外边框（margin）

border简写属性，通过该属性可以设置边框所有的相关样式，并且没有顺序要求
　　border: 10px red solid ;

内容区(content).
　　内容由width 和 height 两个属性来设置
　　width 设置内容区宽度
　　height 设置内容区的高度

边框:(border),边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
　边框的大小会影响整个盒子的大小
　　要设置边框，需要至少设置三个样式：
　　　边框的宽度：border-width
　　　边框的颜色:border-color
　　　边框的样式：border-style
补充：
边框样式值
　 none：无边框
　　hidden：隐藏边框 IE不支持
　dotted:在MAC平台上IE4+与windows和UNIX平台上IE5.5+为点线。否则为实线（常用）
　 dashed：在MAC平台上IE4+与windows和unix平台上IE5.5+为虚线，否则为实线（常用）
　 solid:实线边框（常用）
　double：双实线边框，两条单线与其间隔的和等于指定的booder-width值
　groove：
　ridge
　 inset
　 outset
内边距
内边距（padding）
　　-内容区和边框之间的距离是内边距
　 -一共四个方向
　　　　-padding-top
　　　　-right
　　　　-bottom
　　　　-left
　　-内边距的设置会影响到盒子的大小
　　-背景颜色会延伸到内边距上

一个盒子的可见框的大小，由内容区 内边框和边框共同决定
盒子大小=内容区()+内边框(padding)+边框(border)

外边距
外边距（margin）
　　-外边距不会影响盒子可见框的大小
　　-但是外边距会影响盒子的位置
　 -一共有四个方向的1外边距：
margin-top
　　-上外边距，设置一个正值，元素会向下移动
margin-right
　　-默认情况下设置margin-right不会产生任何效果
margin-bottom
　　-下外边距，设置一个正值，其下边的元素会向下移动
margin-left
　　-左外边距，设置一个正，元素会向右移动
　　-margin也可以设置负值，如果是负值则元素会向右移动

　　-元素在页面中是按照自左向右的顺序排列的，
　　所以默认情况下如果设置左和上边距则会移动元素自身
　　而设置下和右边距会移动其他元素

-margin的简写属性
margin 可以同时设置四个方向的外边距，用法和padding（内边距）一样
margin会影响到盒子实际占用空间