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

原创 2015年11月19日 23:25:54
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



版权声明:本文为博主原创文章,未经博主允许不得转载。

解析HTML中的float和margin的疑惑

对于HTMl中的一些小疑惑,在这里进行解析一下。 一、div的理解 DIV是基于行,就是一个div占据一行,不会让别的元素,和自己同行。 span不是基于行的,就是一个span哪里有空哪里专,不会单...
  • u010924878
  • u010924878
  • 2016年07月31日 15:51
  • 1947

float和margin的区别

padding:10px 0 10px 20px,上10 右0 下10 左20 margin:10px 0 10px 20px,上10 右0 下10 左20 四个值顺时针旋转   ...
  • Mr_gly
  • Mr_gly
  • 2016年07月22日 09:56
  • 509

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

1.float:left、right、【none(默认)】    >加了浮动会破会块级元素独占一行的文档流      (漂浮起来,空出其原来的位置给其他元素使用)    >浮动:第一个元素先移动   ...
  • qq1556837534
  • qq1556837534
  • 2015年11月19日 23:25
  • 265

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

1.float:left、right、【none(默认)】    >加了浮动会破会块级元素独占一行的文档流      (漂浮起来,空出其原来的位置给其他元素使用)    >浮动:第一个元素先移动   ...
  • qq1556837534
  • qq1556837534
  • 2015年11月19日 23:25
  • 265

HTML中margin、padding和border的区别

前端页面是需要给用户展示信息的,是离不开布局的,但是各个标签也不会挤在一起,有的标签距离很远有的很近,有的还有边框,这就需要调试出来了,其中margin、padding和border就是HTML中最常...
  • Coco__D
  • Coco__D
  • 2016年11月25日 15:06
  • 2799

html5标签为什么会有margin和padding两个属性?

个人理解,html5中的每一标签就是一个控件,每一个控件都有自己的大小,如果我们不进行设置其大小,那么控件就会使用默认值。    假设说我现在有一个控件,type类型为button,这个button...
  • fengyufuchen
  • fengyufuchen
  • 2016年09月12日 17:14
  • 2288

CSS布局中的几个重要属性,width,height,margin,padding,float,position

首先来看看CSS中的盒子模型,如下图: 我们可以把它想像成现实中上方开口的盒子,然后从正上往下俯视,边框相当于盒子的厚度,内容相对于盒子中所装物体的空间,而填充呢,相当于为防震而在盒子内填充的泡沫,...
  • kkdelta
  • kkdelta
  • 2013年03月22日 16:14
  • 2290

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

1.float:left、right、【none(默认)】    >加了浮动会破会块级元素独占一行的文档流      (漂浮起来,空出其原来的位置给其他元素使用)    >浮动:第一个元素先移动   ...
  • qq1556837534
  • qq1556837534
  • 2015年11月19日 23:25
  • 265

HTML标签margin和padding的默认属性值

HTML标签margin和padding的默认属性值
  • wangshuxuncom
  • wangshuxuncom
  • 2016年09月10日 10:59
  • 977

html盒模型margin、padding、border使用

盒模型是在html中非常重要的基础知识,这里主要说一下margin,padding、border使用时会遇到的一些需要注意的情况...
  • Victor_Wei_H5
  • Victor_Wei_H5
  • 2016年09月04日 16:10
  • 1222
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html中关于float,margin,padding的语法
举报原因:
原因补充:

(最多只允许输入30个字)