css盒模型。边框和内外边距

css盒模型：
外边距 边框 内填充 内容

盒模型分为两种：
标准盒模型：
怪异盒模型（IE盒模型）：

边框：border
border: 10px solid blue;表示设置10像素蓝色实线条的边框
是以下三个样式的复合语法
border-width: 10px; 设置边框的宽度
border-color: blue; 设置边框的颜色
border-style: solid; 设置边框的样式
solid：实线
dashed: 虚线 装订线
dotted: 点线
double: 双线
如何单独设置一个边的边框：
border-left:
border-right:
border-top:
border-bottom:
border-radius 设置圆角边框 取值可以是 px % em 最大设置范围到50% 超出则按照50%计算
参数最少可以设置一个 最多可以设置八个
border-radius: 5px 50% 50% 50% / 5px 50% 50% 50%;
前四个值代表水平方向的取值 左上 右上 右下 左下
后四个值代表垂直方向的取值

利用css边框知识 在页面绘制一个三角形：
需要将一个盒子宽高设置为0 然后设置四个边框，其中三个面的边框颜色设置成透明色，则会显示成一个三角形
width: 0px;
height: 0px;
border-left: 200px solid transparent;
border-top: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid #ff0;

内容： 我们所设置的宽和高 实际上指的是内容区域的宽高 （标准盒模型）
width 宽
height 高

外边距和内填充：
padding 内填充 （内边距/内补白） ： 表示一个元素，边框和内容之间的距离
padding: 20px; 如果只给一个值，代表上下左右的内填充同时设置20px
padding: 20px 40px; 如果给两个值 第一个值代表上下 第二个值代表左右
padding: 20px 40px 60px; 三个值 第一个值代表上 第二个值代表左右 第三个之代表下
padding: 20px 40px 60px 80px; 四个值分别对应 上 右 下 左 以顺时针方向赋值
padding-bottom:; 单独设置一边的内填充 可以使用 padding-方向 来设置
margin 外边距（外补白） 表示元素与元素之间的距离，也就是边框以外的距离 设置的值和内填充原理一致
当设置外边距时 如果兄弟元素之间，上下的外边距有重合，则取最大值

去除浏览器默认的所有标签的外边距和内填充
*{
margin: 0;
padding: 0;
}

设置一个盒子在父元素宽度内水平居中
margin:0 auto;

外边距的重合问题：
当子元素和父元素的上外边距重合到一起时，不管给小盒子还是大盒子设置上外边距，影响的都是大盒子，
取值取两者的最大值

盒模型的计算：
标准盒模型 宽度计算： width + paddingleft + paddingright + borderleft + borderright + marginleft + marginright
IE盒模型 宽度计算： width + marginleft + marginright

标准盒模型 设置的 width = 实际内容的宽度
IE盒模型 设置的 width = 实际内容的宽度 + 边框的宽度 + 内填充的宽度

两种盒模型之间的转换：
box-sizing:content-box; 标准
box-sizing:border-box; IE

原文链接:https://www.cnblogs.com/kyhboke/p/11798284.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有