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



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

相关文章推荐

1.width是核心内部元素,margin,padding,border值不属于width 2.absolute 两个绝对定位的元素如果是同一父元素会发生重叠,而不是与float一样会正常排布

1  一个元素的width值,不包括 padding,border,margin值。只是最核心的内容的宽度。 内部再有元素,内部元素的 margin border padding都算在外部元素的 ...

position,display,float,overflow,margin,padding之间的相互影响

1、元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题。行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且...

html中元素的padding属性与margin属性

padding padding-top padding-right padding-bottom padding-left margin margin-top margin-right margin...

网站开发进阶(四十七)html中padding-top与margin-top的区别

网站开发进阶(四十七)html中padding-top与margin-top的区别  padding-top:10px;是指容器内的内容距离容器的顶部有10个像素,是包含在容器内的;   margi...

html padding 和 margin

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素...

HTML5 codecademy Margin Border Padding Content

这个章节讲的是,关于区域的名字和分布状态 content就是我们平时输入的内容,比如段落啊这些 其他的就看下图吧,同时请注意缩写 接下来我们来分步讲解每个区域的作用 首先是margin,...

HTML边距设置之padding和margin

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。       下面讲解 pad...

HTML 学习笔记(四)padding、margin、border

CSS的padding,margin,border W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。...

html盒模型margin、padding、border使用

盒模型是在html中非常重要的基础知识,这里主要说一下margin,padding、border使用时会遇到的一些需要注意的情况...

解析HTML中的float和margin的疑惑

对于HTMl中的一些小疑惑,在这里进行解析一下。 一、div的理解 DIV是基于行,就是一个div占据一行,不会让别的元素,和自己同行。 span不是基于行的,就是一个span哪里有空哪里专,不会单...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html中关于float,margin,padding的语法
举报原因:
原因补充:

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