您现在的位置:首页 >> 前端 >> 内容

css盒子模型与div浮动详解

时间:2016/12/2 9:49:00 点击:

  核心提示:css盒子模型CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。CSS padding 属性定义元素边框与元素内容之间的空白区域。CSS paddin...

css盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。 
padding-bottom 设置元素的下内边距。 
padding-left 设置元素的左内边距。 
padding-right 设置元素的右内边距。 
padding-top 设置元素的上内边距。 

CSS border 是围绕元素内容和内边距的一条或多条线。

在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方面:宽度、样式,以及颜色.

定位

相对定位
#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}
绝对定位
#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}
浮动
.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<p class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<p class="clear"></p>
</p>

Tags:CS SS S盒 盒子 
作者:网络 来源:海或天空的博客