웹 프론트엔드 HTML 튜토리얼 CSS3-05 样式 4_html/css_WEB-ITnose

CSS3-05 样式 4_html/css_WEB-ITnose

Jun 24, 2016 am 11:16 AM

前言

关于 CSS 的介绍,基本上告一段落了。在该博客中将介绍如何通过 CSS 去设置一个 HTML 元素,显示在 Web 页面的位置。
로그인 후 복사
定位
  • 概述
  • 定义元素位置的基准,即:该元素与 HTML 文档流 和 其他 HTML 元素的关系。
  • 四种定位方式
  • Static(静态定位)
  • 默认值(没有定位),元素出现在正常的 HTML 文档流中
  • 静态定位的元素不会受到 top、bottom、left、right 的影响
  • Fixed(固定定位)
  • 元素相对于浏览器窗口的位置固定,即:固定在浏览器窗口的固定位置,即使窗口滚动也不会移动
  • 与 HTML 文档流无关,不占据空间
  • Relative(相对定位)
  • 相对于元素正常位置的定位,其原本所占的空间不会改变
  • Absolute(绝对定位)
  • 相对于最近已定位的父元素;若没有已定位的父元素,那么将相对于
  • 与 HTML 文档流无关,不占据空间
  • 四种定位方式比较

    定位方式 是否与文档流有关 是否占据空间 是否可以重叠
    Static
    Fixed
    Relative
    Absolute
  • 注意

    通过观察表格,大家可以看出:在四中定位方式中,凡是与文档流有关的都会占据文档流空间,且不可重叠;凡是与文档流无关的都不会占据文档流空间,且可以重叠。原因是什么呢?HTML 文档流的布局是流式布局(fluid layout),像流水一样布局,怎么可以重叠,没有空间又怎么能布局元素!

  • 三种定位方式
    看了上边的描述,你肯定还是一头雾水,不知道这四种定位方式到底说的是什么,在什么时候该用什么方式的定位。在定位一个元素的时候,我们通常需要选择一种定位方式来确定一个元素的布局方式,还需要设置的它的偏移量,那么问题就来了,偏移量的偏移基准是什么?
    로그인 후 복사
  • Fixed
  • 该方式定位的元素,设置偏移量的参照基准是浏览器窗口(不完全是)
  • 示例
  • 代码

    <!DOCTYPE html><html><head><style>body {    background-color: lightgray;}p.pos_fixed{    position:fixed;    background-color: red;}</style></head><body><p class="pos_fixed">This is a paragrap.</p></body></html>
    로그인 후 복사
  • 效果

    观察发现,元素的左方和上方,会有一定的边距,这是为什么?“这是浏览器为 body 添加的默认边距”,这的这么简单吗?我们来试试。
  • 代码

    // 改变 body 的样式body {    background-color: lightgray;    margin: 0px;}
    로그인 후 복사
  • 效果

    观察发现,元素左边的边距确实没有了,但是上方的边距还在。“这是浏览器为 body 添加的默认填充”,那么我可以明确的告诉你,这不是答案。那么答案到底是什么?

  • 代码

    // 改变 .pos_fixed 类的样式p.pos_fixed{    position:fixed;    background-color: red;    margin: 0px;}
    로그인 후 복사
  • 效果

    我们惊奇的发现,我们的问题解决了。原来是这样:“浏览器为 p 默认添加了上边距(在 p 前后分别添加一个换行)”,但是对于 Fixed 定位方式,我们还需要注意一点,我们来看看如下效果

  • 代码

    // 改变样式表p {    margin: 0px;}p.pos_fixed{    position:fixed;    background-color: red;}// 改变内容<p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p><p class="pos_fixed">This is a paragrap.</p><p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p>
    로그인 후 복사
  • 效果

    我们发现,Fixed 定位的元素,确实没有占据了文档流的空间,当滚动内容是,位置也没有变化。但是默认情况下,Fixed 定位的元素的 top 还是会受到文档流的影响的。这与表格中的描述有矛盾,还请大家注意,非常愿意与大家一起探讨原因之所在。

  • 总结
  • Fixed 方式定位的元素,默认情况下除 top 外不受文档流影响,以浏览器窗口为参照基准;不占据文档流空间;固定在浏览器窗口的某个位置,不随内容的滚动而滚动。(暂且这样理解吧)
  • Relative
  • 该定位方式的元素,设置偏移量的参照基准是元素自身的正常位置
  • 示例
  • 代码

    <!DOCTYPE html><html><head><style>body {    background-color: lightgray;    margin: 0px;}div {    width: 100px;    height: 60px;}#div1 {    background-color: red;    top: 10px;}#div2 {    background-color: blue;}</style></head><body><div id="div1"></div><div id="div2"></div></body></html>
    로그인 후 복사
  • 效果

    观察发现,div1 和 div2 按照流式布局,在没有设置定位方式的情况下,设置了 top 是没有任何效果的。原因想必大家都知道,我们来试试设置定位方式后的效果

  • 代码

    // 改变 div2 的定位方式,且设置偏移量#div2 {    background-color: blue;    position: relative;    top: -10px;    left: 10px;}
    로그인 후 복사
  • 效果

    观察发现,设置定位方式为 relative 后,偏移量产生了效果,相对于正常位置向右向上分别便宜了 10px,且元素可以重叠在一起。我们接下来看看,如何通过 z-index 来控制元素的重叠。

  • 代码

    // 改变 div2 的 z-index 属性#div2 {    background-color: blue;    position: relative;    top: -10px;    left: 10px;    z-index: -1;}
    로그인 후 복사
  • 效果

    改变 div2 的 z-index 后,div2 显示在了 div1 的后边。关于 z-index,我们需要了解以下几点:默认值为 0;只作用于 relative 定位的元素;值大的元素排在前面。

  • 总结
  • Relative方式 定位的元素,受文档流的影响,占据文档流空间,可以重叠,受 top、right、bottom、left 的影响。
  • Absolute
  • Absolute 方式定位的元素,设置偏移量的参照基准是距离最近的已定位的祖先元素,若没有已定位的祖先元素,则以 html 为基准。
  • 示例
  • 代码

    <!DOCTYPE html><html><head><style>body {    background-color: lightgray;    margin: 20px 20px;}#strap {    background-color: green;    width: 200px;    height: 120px;}#div1 {    background-color: red;    width: 160px;    height: 90px;}#div11 {    background-color: blue;    width: 100px;    height: 40px;}#div12 {    background-color: orange;    width: 100px;    height: 40px;}</style></head><body><div id="strap">    <div id="div1">        <div id="div11"></div>        <div id="div12"></div>    </div></div></body></html>
    로그인 후 복사
  • 效果

    在未设置定位和,偏移量的情况下,效果如图。我们来设置绝对定位试试。

  • 代码

    // 设置 div12 的定位方式为 absolute#div12 {    background-color: orange;    width: 100px;    height: 40px;    position: absolute;}
    로그인 후 복사
  • 效果

    观察后,我们发现没有任何效果。若只设置 absolute 定位方式,不设置偏移量,将不会影响元素的布局。接下来我们来设置偏移量。
  • 代码

    // 设置 div12 的偏移量#div12 {    background-color: orange;    width: 100px;    height: 40px;    position: absolute;    top: 0px;    left: 0px;}
    로그인 후 복사
  • 效果

    观察发现,div12 脱离了文档流,移动到了窗口的左上角,而我们在这里设置了 body 的上边距和左边距。接下来我们来设置 div12 祖先元素的定位。

  • 代码
  • 只有一个定位的父元素

    // 设置组向 strap 的定位方式#strap {    background-color: green;    width: 200px;    height: 120px;    position: relative;}#div12 {    background-color: orange;    width: 100px;    height: 40px;    position: absolute;    right: 10px;    bottom: 10px;}
    로그인 후 복사
  • 多个定位的父元素

    // 设置 div1 的定位方式#div1 {    background-color: red;    width: 160px;    height: 90px;    position: relative;}
    로그인 후 복사
  • 效果
  • 只有一个定位的父元素

  • 多个定位的父元素

  • 总结
  • 若只设置定位方式,不设置偏移量,将不会有效果
  • 若没有已定位(Fixed、Relative、Absolute 三种中的一种)的祖先元素,则以 html 为参照基准,而不是以 body 为参照基准
  • 若有已定位的祖先元素
  • 有一个已定位的祖先元素的情况下,以已经定位的祖先元素为参照基准
  • 有多个已定位的祖先元素的情况下,以距离最近的已经定位的祖先元素为参照基准
  • 声明
    本来想以这篇博客,来结束 CSS 的基础介绍。但是已经写了这么多,还是有很多知识点没有涉及到,我本不是一个拖拖拉拉的人。那么,在接下来的博客,我会继续介绍 CSS 的基础知识。“您好,您的文章知识点丰富,但是从读者的角度想可读性略差,您精通css建议您考虑将页面多少美观,整洁一些,以更好达到分享的目的。” ,这样的消息不知你是否收到过,我是收到过。那么在介绍完 CSS 基础知识后,如果有机会的话,我会详细说说如何来定制自己的博客页面。另外,由于最近在赶一个项目,不常写博客。今天突然发现,有几个消息和评论没有及时的回复,在此我表示抱歉,以后定会在一天内给予回复。你也可以加我的 QQ:1829871867,方便及时的联系我。
    로그인 후 복사

    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    인기 기사

    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 최고의 그래픽 설정
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    & lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

    이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

    & lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

    이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

    HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

    기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

    & lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

    이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

    HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

    이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

    html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

    이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

    뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? 뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

    이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

    & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

    이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

    See all articles