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各代表啥属性