css框模型、定位、浮动

一、CSS 框模型概述

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

2.元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

提示:背景应用于由内容和内边距、边框组成的区域。

二、css内边框

1.元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

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

   CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。

3.单边内边距属性

 分别设置上、右、下、左内边距:padding-top

                                                       padding-right

                                                       padding-bottom

                                                       padding-left

三、css的定位与浮动

CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。

另一方面,CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

1.定位 : top,left,right,bottom 只有元素增加定位的情况下才会使用。

       相对定位:一般不要去用top,left,right,bottom。

       绝对定位:元素会脱离文档流,一般不要去用margin,用top,left,right,bottom。

备注:一般的情况下:相对定位和绝对定位是同时出现的。

           一般所有的下拉框都是绝对配合着相对定位完成的。

2.浮动:浮动分为两种,左浮动和右浮动。

              浮动会脱离文档流。

              清除浮动: 不是清除自身的浮动,而是清除上一个浮动对自身造成影响。

原文地址:https://www.cnblogs.com/ggss/p/10945664.html