码迷,mamicode.com
首页 > 其他好文 > 详细

padding,margin,float,position

时间:2020-01-30 20:42:07      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:文档   ott   区域   hid   方向   fixed   块级元素   line   需要   

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

标签:文档   ott   区域   hid   方向   fixed   块级元素   line   需要   

原文地址:https://www.cnblogs.com/xdsuannai/p/12243771.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!