padding,margin,float,position

Posted xdsuannai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了padding,margin,float,position相关的知识,希望对你有一定的参考价值。

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
将元素放置在浏览器窗口的固定位置,拖拽窗口时元素位置不变。

以上是关于padding,margin,float,position的主要内容,如果未能解决你的问题,请参考以下文章

css中的padding和margin和float各代表啥属性

html中margin外边距和padding内边距有啥用? 一般在啥情下使用?只对块级标签都有用还是只对div?

float:left margin-left区别

float塌陷有关问题

margin, padding的区别

常见的兼容性问题