首页 > 代码库 > CSS定位

CSS定位

2024-11-03 08:02:02   203人阅读

概述

要掌握 CSS 技术。核心就是要掌握元素定位，仅仅有这样才干用 CSS 创造出专业水准的页面布局。

决定元素位置的因素主要有：盒模型、position、display，以及float和clear。


所谓盒模型，就是浏览器为页面中的每一个 HTML 元素生成的矩形盒子。这些盒子们都要依照可见版式模型在页面上排布。可见的页面版式主要由三个属性控制： position 属性、 display 属性和 float 属性。当中，position 属性控制页面上元素间的位置关系。 display 属性控制元素是堆叠、并排，还是根本不在页面上出现， float 属性提供控制的方式，以便把元素组成成多栏布局。

盒模型

什么是盒模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。元素框的最内部分是实际的内容。直接包围内容的是内边距，内边距的边缘是边框。边框以外是外边距。
技术分享
在 CSS 中。width 和 height 指的是内容区域的宽度和高度，添加内边距、边框和外边距不会影响内容区域的尺寸。可是会添加元素框的总尺寸。假设元素没有设置width和height的话，width和height等于父节点元素的width和height减去外边距、边框和内边距——这里暂不讨论IE的怪异模式

盒模型属性具体解释

决定盒模型大小的CSS属性主要有width、height、padding、border和margin，网友飘零雾雨整理了一份具体的CSS參考手冊——列举了每一个CSS属性的可用元素、默认值、可选值、继承性、兼容性等等，在学习或者有疑问的时候，直接參考这份手冊就可以。

  • 尺寸
    • width
    • min-width
    • max-width
    • height
    • min-height
    • max-height
  • 内边距
    • padding
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
  • 边框
    • border
    • border-width
    • border-style
    • border-color
    • border-top
    • border-top-width
    • border-top-style
    • border-top-color
    • border-right
    • border-right-width
    • border-right-style
    • border-right-color
    • border-bottom
    • border-bottom-width
    • border-bottom-style
    • border-bottom-color
    • border-left
    • border-left-width
    • border-left-style
    • border-left-color
    • 另一些不影响盒模型大小的属性就不在这里赘述了
  • 外边距
    • margin
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
  • box-sizing

盒模型属性不一定适用于全部的元素。一些属性仅仅适用于某一类元素。并且不同类型的元素的盒模型大小计算方式不同，有的会占领一行，有的水平一个挨着一个，以下介绍一下元素的主要分类：

  • 替换元素与非替换元素
    • 替换元素：是浏览器依据其标签的元素与属性来推断显示具体的内容。如input
    • 非替换元素：HTML 的大多数元素是不可替换元素。他们将内容直接告诉浏览器。将其显示出来
  • 块级元素与行内元素
    • 块级元素：最明显的特征就是独自占领一行，自己主动充满父级的元素中的内容区域，绝不会让别人“侵略”（当然能够通过其它方式去改变他）
    • 行内元素：略

浏览器兼容性

IE盒模型怪异模式

依据 W3C 的规范，元素内容占领的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。一旦为页面设置了恰当的 DTD，大多数浏览器都会依照这个规则来呈现内容，然而 IE 5 和 6 的呈现却是不对的——假设页面包括某些HTML文件类型描写叙述，则Internet Explorer 6及以上版本号不受该缺陷的影响。

不幸的是。IE5.X 和 6 在怪异模式中使用自己的非标准模型。

这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
很多其它详情可參考IE盒模型缺陷。

边框属性值

CSS 推荐标准并未明白规定 border-width 几个文本值 thin、 medium 和 thick 的确切宽度。实际显示的宽度可能会因浏览器而异。

对于边框样式（border-style） ，除了 solid 值（实线）之外， CSS 规范也没有明白规定。

因此 dashed 值（虚线）在不同浏览器中的短划线长度和线间距也可能会不一样。

常见问题

  • width和height
    • 对于img对象来说。仅指定width和height中的一个属性，另外一个值将依据图片源尺寸等比例缩放
    • 假设min-width属性的值大于max-width属性的值，max-width将会自己主动以min-width的值作为自己的值。min-heigth和max-height同理。

    • width和height的值单位为百分比的时候。參照的是包括块的width和height
  • 内外边距
    • 内外边距的简写规则
      • 一个值
      • 两个值
      • 三个值
      • 四个值
    • 内边距不可是负值，而外边距能够是负值，并且在非常多情况下都要使用负值的外边距。
    • 用百分比来定义内边距和外边距时，水平（默认）书写模式下，參照其包括块 width 进行计算，其它情况參照 height ，不同意负值。

      參考演示样例padding-percentage

    • 外边距top/bottom和left/right为auto的差别？
      margin-top/margin-bottom计算值为0，margin-left/margin-right取决于可用空间
    • 非替换行内元素能够使用margin属性设置左、右两边的外边距，若要设置上、下两边的外补丁。必须先使该对象表现为块级或内联块级。
    • 外边距的单位选择
      一个段落的左、右外边距能够使用像素。以便该段文本始终与包括元素边界保持固定间距，不受字号变大或变小的影响。而对于上、下外边距。以 em 为单位则能够让段间距随字号变化而对应增大或缩小。
    • margin折叠规则
      • 仅仅发生在块级元素上；
      • 叠加的仅仅是垂直外边距，水平外边距不叠加。对于水平相邻的元素，它们的水平间距是相邻外边距之和。
      • 较宽的外边距决定两个元素终于离多远。
      • 浮动元素的margin不与不论什么margin发生折叠；
      • 绝对定位元素的margin不与不论什么margin发生折叠；
      • 设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
      • 根元素的margin不与其它不论什么margin发生折叠；
  • 盒模型大小计算规则
    • 非替换行内元素
      • 宽度 = 内容宽度 + 左右内边距 + 边框 + 左右外边距
      • 高度 = 内容高度 + 上下内边距 + 边框 （上下内边距无效）
        内容宽度或高度加上内边距和外边距（margin的top和bottom无效）
    • 没有设置大小的替换行内元素/没有设置大小的行内块级元素
      • 宽度 = 内容宽度 + 左右内边距 + 边框 + 左右外边距
      • 高度 = 内容高度 + 上下内边距 + 边框 + 上下内边距
    • 没有设置大小的块级元素
      • 宽度 = 父节点内容宽度
      • 高度 = 内容高度 + 上下内边距 + 边框 + 上下内边距
    • 有设置大小的元素
      • 默认盒模型/box-sizing=content-box
        • 内容宽度 = width
        • 内容高度 = height
        • 宽度 = width + 左右外边距 + 边框 + 左右内边距
        • 高度 = 相似宽度
      • IE怪异模式/box-sizing=border-box
        • 内容宽度 = width属性 - 左右外边距 - 边框 - 左右内边距
        • 内容高度 = 相似内容宽度
        • 宽度 = width
        • height = height
  • 什么情况会触发IE的quirks模式——盒模型怪异模式
    1. 文件类型描写叙述缺失或不完整时
    2. 遇到一个HTML 3或者更早的文档时
    3. 使用HTML 4.0 Transitional或Frameset的文件类型描写叙述且系统标识符（URI）不存在时
    4. 在DOCTYPE声明之前出现SGML凝视或者其它无法识别的内容时
    5. 文档不论什么地方有错误时
    6. 凝视符相遇时出现末尾文字反复
    7. Internet Explorer 6也会在DOCTYPE声明之前出现XML声明时使用quirks模式

浮动与清除

认识浮动与清除

浮动与清除是用来组织布局的一柄利剑，这柄剑的剑刃便是 float 和 clear属性。设置了浮动的元素脱离了常规文档流之后。原来紧跟其后的元素就会在空间同意的情况下。向上提升到与浮动元素平起平坐。假设浮动元素后面有两个段落。而你仅仅想让第一段与浮动元素并列，用 clear 属性设置清除。

浮动与清除属性具体解释

  • float
  • clear

浮动的应用场景

  • 文字绕排图片
  • 段落首字母特效
  • 水平菜单
  • 多栏布局
  • …

运用清除

在后文的常见问题里会提到清除的运用

常见问题

  • 浮动元素嵌套
  • 浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。这样会影响父元素的相邻元素的布局。那么怎样才干围住浮动的子元素呢？
    • 问题演示样例
    • 解决方式1: overlow=hidden
      overflow=hidden真正用途是防止包括元素被超大内容撑大（超出的不显示）。除此之外。它还有另外一个个作用：它能可靠地迫使父元素包括其浮动的子元素。
    • 解决方式2: 同一时候浮动父类元素
      父元素设置为浮动后，无论子元素是否浮动，它都会紧紧的包围住子元素，因为浮动父元素后，其盒模型大小计算规则变化了（不再是自己主动扩充父元素），所以须要手动设置宽度。另外为了避免父元素其后的元素也挤到上面。设置了clear
    • 解决方式3: 加入清除元素
      给父元素加入一个非浮动的子元素，然后清除该子元素，因为父元素一定会包围非浮动的子元素。所以父元素也会包围住浮动元素了。加入子元素总感觉略显多余，我们能够使用奇妙的clearfix规则来解决问题，參考clearfix——这个clearfix规则最早是由程序猿 Tony Aslett 发明
    • 总结：三种不同的解决方式可因地适宜的使用，强烈推荐clearfix规则
  • 浮动元素的盒模型
    • display: 浮动元素的display属性计算规则例如以下
      • flex/inline-flex: flex
      • inline-table/table: table
      • list-item: list-item
      • 其它: block
    • display计算出来的值即使等于block，但不同于块级元素，浮动元素的默认宽度不会自己主动填充父级的元素中，而是依赖于内容的宽度，假设设置百分比宽度的话却是參照父元素

定位

认识定位属性

CSS布局的核心是position属性，对元素盒子应用这个属性，能够相对于它在常规文档流中的位置又一次定位。

定位属性具体解释

  • postion
  • z-index
  • top
  • right
  • bottom
  • left

常见问题

  • 静态定位元素设置top，right，bottom和left属性。是否会影响元素定位
    不会。參考演示样例static-position-with-offset
  • 相对定位元素是否影响父元素的盒模型
    尽管relative元素相对原来的位置发生了偏移（可能会超出父元素的包围范围）。但原来位置的空间占用还是存在的，所以relative元素不会影响父元素的盒模型。在计算relative元素的位置的时候，首先要想到设置relative之前的元素盒模型，然后依据这个元素盒模型计算偏移量。得出元素的相对位置。

  • 绝对定位的定位上下文
    绝对定位元素的定位上下文——偏移參照元素。不一定是她的父节点元素。假设父节点时相对定位或决定定位或固定定位元素的话，则父元素就是绝对定位元素的定位上下文。假设不是的话，就从父节点開始按着DOM树结构往上层找符合条件的元素。假设知道body都没找到的话，body就是定位上下文。

  • position对块级元素宽度默认值的影响
    • static：父元素的内容宽度
    • relative：父元素的内容宽度，假设relative元素设置了top和left。该元素会超出父元素的包围范围
    • absolute：内容宽度
    • fixed：内容宽度
    • 总结：position尽管不会影响块级元素的display终于值，但会影响其默认宽度。參考演示样例auto-width
  • position对元素宽度和高度百分比的影响
    • 静态定位：參照父元素
    • 相对定位：參照父元素
    • 绝对定位：參照定位上下文
    • 固定定位：參照窗体
    • 演示样例：percentage-width
  • top/left/bottom/right百分比计算规则
    • 相对定位：參照父元素的宽度或高度。且能够是负值
    • 绝对定位：參照定位上下文的宽度或高度，且能够是负值
    • 固定定位：參照窗体的宽度或高度，且能够是负值
  • position=relative/absolute/fixed时， top 与 bottom 或 left 与 right 存在时，谁的优先级高？
    假设 top 和 left 不等于 auto 的话，top 和 left 的优先级高，參考演示样例relative-priority

应用案例

  • …

显示

display

溢出

溢出属性

  • overflow
  • overflow-x
  • overflow-y

常见问题

  • 滚动栏对盒模型的影响
    • 默认盒模型/box-sizing=content-box
      • 内容宽度 = width - 垂直滚动栏宽度
      • 内容高度 = height - 水平滚动栏宽度
      • 宽度 = width + 左右外边距 + 边框 + 左右内边距
      • 高度 = height + 上下外边距 + 边框 + 上下内边距
      • 子元素可用宽度：内容宽度
      • 子元素可用高度：内容高度
      • 总结：滚动栏会占领内容的宽度或高度。且滚动栏是出如今内边距与边框之间的。

        所以在元素出现滚动栏的时候。元素盒模型总体大小并未发生变化，也不会对盒模型之外的其它元素产生影响。仅仅是因为内容大小变化了。其子元素的盒模型大小会受影响。參考演示样例scroll-bar-and-box-model

    • IE怪异模式/box-sizing=border-box
      • 内容宽度 = width - 左右外边距 - 边框 - 左右内边距
      • 内容高度 = width - 上下外边距 - 边框 - 上下内边距
      • 宽度 = width
      • height = height
      • 子元素可用宽度：内容宽度 - 滚动栏宽度
      • 子元素可用高度：内容高度 - 滚动栏高度
      • 总结：盒模型总体大小不会受滚动栏影响，也就不会对盒模型之外的其它元素产生影响。须要注意的是。滚动栏的显示是与内边距重叠的。尽管盒模型的内容大小并不受滚动栏的影响（将滚动栏当成了自己的子元素）。可是会影响子元素的盒模型。假设子元素的宽度或高度为auto或百分比，不是直接參考父元素的内容宽度或高度。实际參考的值须要父元素的内容宽度或高度减去滚动栏的宽度或高度。參考演示样例scroll-bar-and-box-model-in-border-box
  • …

背景

TODO…

參考文献

  • 学习CSS布局
<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

CSS定位


联系
我们