• 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.浮动:浮动分为两种,左浮动和右浮动。

                  浮动会脱离文档流。

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

  • 相关阅读:
    C++高级程序员(廊坊+高薪)欢迎各种漂回家!(该职位已截止)
    utf8_unicode_ci和utf8_general_ci区别
    Percentencoding
    libiconv GNU Project Free Software Foundation (FSF)
    2013年1月6日北京交流会:当当网如何打造个性化推荐&精准营销生态系统
    COM Vs .NET (Qt ActiveQt)
    新一篇: Unicode字符编码规范 实例详细介绍各种字符集编码转换问题
    甩开外包,雄踞榜首:揭开“宫爆老奶奶”成功的秘密
    awk使用命令
    API SOCKET基础(三)网络字节序与主机字节序的转换
  • 原文地址:https://www.cnblogs.com/ggss/p/10945664.html
Copyright © 2020-2023  润新知