CSS,为啥bottom:-30px和top:30px效果不一样

Posted 2023-03-21

CSS,为什么bottom:-30px和top:30px效果不一样#facebook-icon::before content: "/20"; position: absolute; background: red; width: 40px; height: 90px; top: 30px; right: -37px; border: 20px solid #eee; border-radius: 25px;

参考技术A margin是可以取负值的。例如margin-top：30px，这是取得正值，代表头部的外边距为30像素，就是头部距离相邻元素为30px；
如果取得值为负值的话，就代表元素向头部移动30px。也就是头部距离相邻元素减小30px。 参考技术B 值都不一样效果怎么一样，相当于
坐标轴
，你想想看是不是

盒模型

CSS+DIV

将数据封装到div中，页面中都是有很多div组成的，通过css布局(通过css属性布局)完成这些div位置的存放，一个div就是一个盒子。

边框 　　border:{

　　　　　　--left

　　　　　　--right

　　　　　　--top

　　　　　　--bottom

　　　　};

#div_1{

　　　　border-top:1px solid #ccc;

　　　　border-bottom:1px dashed #ccc;

　　　　border-right:1px dotted #ccc;

　　　　border-left:1px double #ccc;

};

solid:实线

dashed:虚线

dotted:点线

double:双线

 

内边距/内填充

属性：padding{

　　　　　　--top

　　　　　　--bottom

　　　　　　--right

　　　　　　--left

};

padding:20px 20px 20px 20px;

 

外边距

margin 属性{

　　　　　　--top

　　　　　　--bottom

　　　　　　--right

　　　　　　--left

};

margin:20px 20px 20px 20px

在div中，如果margin是0,px，为什么还要空白?那空白就是body本身距离浏览器边框的距离。

所以要设置body{margin:0px};

浏览器解析body的方式不同，造成边宽边窄不同。