盒模型

盒模型

盒模型分类

块级盒模型

1、定义块级盒模型的区域大小width和height值与元素样式，元素的内容从width和height的左上角原点开始排列内容

<style>
	.boxmd{
		width:200px;
		height:200px;
		background-color;green;
        border:50px solid red;
	}
</style>

盒模型元素

边框取值的写法:border: width style color; (这是复合写法)

边框宽度: border-width:50px

边框种类: border-style:solid (默认是none 没有边框)

<
​ 设置顶部边框:border-top:宽度 种类 颜色; (50px dashed green;)

边框颜色: (transparent) 透明色

padding:

padding 作用于元素的 内容区与边框线之间 加一个内部间距，使得元素内容更加突出明显, 默认情况下, padding 区域的颜色和内容区的颜色保持一致。
padding 也可以单独设置四个方向不同的值, 具体的概念与border相似参照margin。

margin:

margin 作用于元素与其他元素以及元素与浏览器边缘之间的间距，

margin 也可以单独设置四个方向不同的值,
margin:10px 20px 30px 40px;
/* 元素的上外边距的值是10px , 右是20px, 下外边距是30px,左外边距是40px*/。

元素位置实际占据大小

块元素在网页内容中实际占据空间的大小是:
实际占据宽度=width+左padding+右padding+左border+右border
实际占据高度=height+上padding+下padding+上border+下border