• 技术文章 >web前端 >css教程

    css怎么用id进行定位

    anonymityanonymity2019-05-28 11:19:43原创2749
    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

    id 选择器以 "#" 来定义。下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

    #red {color:red;}
    #green {color:green;}

    下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。

    <p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>

    注意:id 属性只能在每个 HTML 文档中出现一次。

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

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

    CSS 定位机制

    CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

    除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

    块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

    行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

    CSS position 属性

    通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。

    position 属性值的含义:

    static

    元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

    relative

    元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

    absolute

    元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

    fixed

    元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

    提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

    以上就是css怎么用id进行定位的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css solid什么意思 下一篇:css 搜索框怎么变大
    PHP编程就业班

    相关文章推荐

    • css page-break-after属性怎么用• css outline-color属性怎么用• css中怎么把ul居中• css怎么设置横向导航

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网