zoukankan      html  css  js  c++  java
  • 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.浮动:浮动分为两种,左浮动和右浮动。

                  浮动会脱离文档流。

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

  • 相关阅读:
    node03- FS内置模块
    node03- CommonJS
    删除当前目录下的所有文件夹和文件
    解决 idea 项目中Error:java: 无效的标记
    Raid0,Raid1,Raid5,Raid10 总结
    Tcpdump命令
    ClassNotFoundException 和 NoClassDefFoundError 区别
    Dart-List里面常用的属性和方法
    CSS实现等分布局的4种方式
    iOS项目添加CocoaPods
  • 原文地址:https://www.cnblogs.com/ggss/p/10945664.html
Copyright © 2011-2022 走看看