盒子模型

CSS 在处理网页的时候会认为每个元素都是一个盒子，一个盒子分为以下几个部分：
1、内容区：content
2、内边距：padding
3、边框：border
4、外边距：margin

image.png

内容区


p{
    width:100px;
    height:100px;
}

内边距

内边距指的是元素内容区与边框以内的空间默认情况下width和height不包含padding的大小。可以使用padding属性来设置元素的内边距
例1：
padding：10px，5px，5px，10px（设置元素的上右下左的内边距）
例2：
padding:10px,10px,10px
(设置上，左右，下的内边距)
例3：
padding：10px，10px
(设置上下，左右的内边距)
例4：
padding：10px
（设置上下左右的内边距）
另外在CSS中还提供了padding-top、padding-right、padding-left、padding-bottom分别制定四个方向的内边距

p{
   padding:10px,10px,10px,10px
}

边框

可以在元素周围创建边框，边框是元素可见框的最外部可以同border属性来设置盒子的边框
边框和内边距一样，默认width和height不包括边框的宽度 ,也能使用border-top/left/right/bottom来指定边框

置边框的宽度、颜色、样式

p{
    border:1px red solid
}

边框的样式
没有 none；点线 dotted；虚线 dashed；实线 solid ；双线 double；脊线 ridge；凹线 inset；凸线 outset

外边距

外边距是元素边框与周围元素相距的空间使用margin属性设置外边距

用法与内边距，边框类似，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以margin：0 ，auto可以是元素居中

display

不能为行内元素设置width、height、margin-top和margin-bottom。因为他们只适用于块元素，这时我们可以通过修改display来修改元素的性质。

可选值：

block 设置元素为块元素
inline 设置元素为行内元素
inline-block 设置元素为行内块元素
none （隐藏元素元素将在页面内完全消失）

visibility

主要适用于元素是否可见

和display的区别：使用display设置为none时，元素彻底消失，使用visibility隐藏元素，隐藏后的元素在文档中所占的位置依然存在，不会被其他元素覆盖

可选值
visible 可见的
hidden 隐藏的

overflow

当相关标签里面的内容超出了样式的宽度和高度时，浏览器会让内容溢出盒子，