CSS盒⼦模型之边框，内外边距详解
CSS盒⼦模型
css盒⼦模型由边框 border，外边距 margin ，内边距 padding ，和实际内容组成
（1）边框 border
border： 1px solid black;  // 第⼀个参数1px指的是边框的粗细，第⼆个参数solid指的是边框的样式：实线
第三个参数指的是边框的颜⾊
border : 1px dashed black; //虚线
border: 1px dotted black;  //点线
（2）外边距 margin （外边距指的是元素边框与相邻元素之间的距离）
外边距的⼀个重要作⽤，使块级盒⼦⽔平居中对齐。要求：1.块级盒⼦必须指定宽度  2.盒⼦左右外边距设置为auto。最常见的做法：  margin : 0  auto;  上下外边距设置为0，左右外边距设置为 auto
⼀个常见的问题，当块级盒⼦B位于块级盒⼦A当中时，是⽆法通过设置外边距margin来实现块级盒⼦B的下移的，要想解决这个问题，可以给A设置⼀个border（或者border-top 上边框）即可。
（3）内边距 padding
⾸先要明确⼀点，边框border是有宽度的，当你设置了⼀个宽度为100px，⾼度为100px的div盒⼦，如果你为其添加了⼀个宽度为1px的边框，那么它的实际宽度，⾼度就会变成101px。⽽外边距margin指的是该元素的边框与其他元素的距离，⽆论你如何调整margin，该元素本⾝的宽度和⾼度是不会发⽣变化的。⽽内边距指的是盒⼦中的内
padding是外边距还是内边距容与盒⼦的边框的距离，⽽内边距会撑开盒⼦
padding : 5px;  //上下左右的内边距都为5px
padding:  5px 10px 15px 30px;  // 第⼀个参数是上⽅内边距为5px，第⼆个参数是右边内边距，第三个参数是下⽅内边距，第四个参数是左边内边距，顺序是⼀个顺时针，上右下左
（4）消除内外边距（重要）
⽹页元素很多都有着默认的内外边距，⽽且不同浏览器的默认格式也不⼀致，所以在布局前要清除⽹页元素的内外边距
* {
  padding:0;
  margin:0;
}
补充⼀个⼩知识点，去除 li 前⾯的项⽬符号（⼩圆点）
list-style:none;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。