padding,margin,float,position

Posted 2021-03-13 xdsuannai

padding:内边距，border:边框，margin:外边距
一个padding属性，相当于padding-left,padding-right,padding-top,padding-bottom
一个盒子加上padding,border,margin后，会将盒子撑大；
border: 3px solid black相当于
border-style: solid;
border-color: red;
border-width: 3px;这三个属性

margin:垂直方向上会出现外边距合并，小的合到大的里，也成外边距塌陷
ul li后面会有一个点，要清楚这个点，需要加一个样式：list-style:none;
input{
border:none;
outline:none;
}

浮动元素的现象，float:left,right
0.文字环绕
1.脱离了标准文档流（从左到右，从上到下）
2.浮动元素互相贴靠
3.浮动元素有收缩现象
清楚float浮动带来的破坏
1.给父级元素设置固定高度
缺点：使用不灵活，后期不易维护
应用：网页中盒子固定高度区域，比如固定的导航栏
2.内墙法
规则：在最后一个浮动元素后面加一个空的块级元素，并且设置属性为clear:both;
缺点：结构冗余
3.伪元素（选择器）清除
4,overflow:hidden;（这个用的最多）
BFC区域，一条规则：计算BFC（块级盒子）的高度时，浮动元素也参与计算

相对定位：position:relative
不脱离标准文档流，可以调整元素
参考点：以原来的定位为参考点
固定丁文：position:fixed
将元素放置在浏览器窗口的固定位置，拖拽窗口时元素位置不变。