1、padding的使用方法(内间距): 当分析一个缝隙相对于当前容器来说是里面的时候,就用padding。
填充:padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。
用法:
1)用来调整内容在容器中的位置关系
2)padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉后添加的padding属性值
属性值的4种方式:
四个值:上 右 下 左 {padding:0px 0px 0px 40px;}
三个值:上 左右 下 {padding:10px 20px 30px ;}
二个值:上下 左右 {padding:10px 20px ;}
一个值:四个方向 padding:2px;
2、margin的使用方法 :在元素外边的空白区域,被称为边距。
属性值的4种方式:同上
margin可以给负数
margin:0 auto;/*一个有宽度的元素在浏览器中横向居中。*/
margin-top的解析
现象:默认情况下给子元素添加了margin-top之后,父元素会跟着一起下来。
解决方法:A、给最近的父元素添加border-top
B、给父元素添加overflow:hidden;(溢出隐藏)
<style>
.box{
height: 300px;
background-color: yellow;
/* 方法一:border: 1px solid red; */
/*方法二*/ overflow: hidden;
}
.wrap{
height: 100px;
background-color: grey;
margin-top: 100px;
}
</style>
<body>
<div class="box">
<div class="wrap"></div>
</div>
</body>
3、 边框宽度:border-width:
边框颜色:border-color:
边框样式:border-style:solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)
简写:border:30px solid blue; 参数的顺序可以随意调换
CSS盒子模型
最新推荐文章于 2024-08-26 19:16:26 发布