关闭

Html中关于float,margin,padding的语法

140人阅读 评论(0) 收藏 举报
1.float:left、right、【none(默认)】
   >加了浮动会破会块级元素独占一行的文档流
     (漂浮起来,空出其原来的位置给其他元素使用)
   >浮动:第一个元素先移动

   >clear:both 清除该元素的浮动(不受前面元素的浮动效果影响,设置分水岭)


 ---------------------------------------------------------------------
2.display:block、inline、inline-block
   >block:  可以将行内元素转为块级元素(一般不建议使用,可用于导航栏)
   >inline:   可以将块级元素转为行内原素(不建议使用)
   >inline-block:根据文本内自动缩放(不会独占一行,受度与宽度的影响)
----------------------------------------------------------------------
3.margin、padding:【只需记住上、右、下、左顺序】
   >margin:(外边距)【块级元素间的距离:用法类似于padding】
   >padding(内边距):【用来修饰行内文本文字距离块级元素的位置】
     ->写法1: padding:上、右、下、左(等价于写法2)
     ->写法2: padding-left;padding-right;padding-top;padding-bottom
     ->写法3: padding 10px;(上、右、下、左均为10px)
     ->写法4: padding 10px 20px;(上下10px,左右20px)
     ->写法5:  padding 10px 5px 20px;代表(top:10;right:5px;bottom:20px;left:10px)
----------------------------------------------------------------------
4.盒模型
   >  W3C元素宽度和高度的构成:
     ->width: =border-left+padding-left+width+padding-right+border-right
     ->height:=border-top+padding-top+height+padding-bottom +border-bottom



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:863次
    • 积分:56
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档