盒模型
盒模型分类![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9d3b0d93954c4fa279e9372d30b3691b.png#pic_center)
块级盒模型
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