css盒子模型

css盒子模型

本质是一个盒子！！！

封装周围的html元素！！！

包括：边距，边框、填充和实际内容！！！

 

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

元素的高度和宽度

当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

最终宽度的计算是：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

Border边框的属性

线条的样式

border-style:solid;

 

 

border-style:dashed;

 

 

order-style:dotted;

 

 

还有double、groove、ridge、inset、outset等

 

边框宽度

 

border-width:5px;

 

 

边框宽颜色

border-color:#98bf21;

css轮廓

 

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 

属性可指定元素轮廓的样式、颜色和宽度。

 

 

 

 

 

 

 

 

 

 

 

注意事项：

1.outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）

2.outline有可能是非矩形的（火狐浏览器下）

 

 

 

 margin(外边距)与padding（填充）

一张图解释

 

 可能的属性值

 auto:设置浏览器边距。这样做的结果会依赖于浏览器（padding中没有）

length:定义一个固定的margin（使用像素，pt，em等）

%:定义一个使用百分比的边距

没有指明边界属性的时候

• margin:25px 50px 75px 100px;
  • 上边距为25px
  • 右边距为50px
  • 下边距为75px
  • 左边距为100px
  
  
• margin:25px 50px 75px;
  • 上边距为25px
  • 左右边距为50px
  • 下边距为75px
  
  
• margin:25px 50px;
  • 上下边距为25px
  • 左右边距为50px
  
  
• margin:25px;
  • 所有的4个边距都是25px