CSS3-05 样式 4_html/css_WEB-ITnose
前言
关于 CSS 的介绍,基本上告一段落了。在该博客中将介绍如何通过 CSS 去设置一个 HTML 元素,显示在 Web 页面的位置。
四种定位方式比较
Static | 是 | 是 | 否 |
Fixed | 否 | 否 | 是 |
Relative | 是 | 是 | 否 |
Absolute | 否 | 否 | 是 |
注意
通过观察表格,大家可以看出:在四中定位方式中,凡是与文档流有关的都会占据文档流空间,且不可重叠;凡是与文档流无关的都不会占据文档流空间,且可以重叠。原因是什么呢?HTML 文档流的布局是流式布局(fluid layout),像流水一样布局,怎么可以重叠,没有空间又怎么能布局元素!
看了上边的描述,你肯定还是一头雾水,不知道这四种定位方式到底说的是什么,在什么时候该用什么方式的定位。在定位一个元素的时候,我们通常需要选择一种定位方式来确定一个元素的布局方式,还需要设置的它的偏移量,那么问题就来了,偏移量的偏移基准是什么?
代码
<!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 还是会受到文档流的影响的。这与表格中的描述有矛盾,还请大家注意,非常愿意与大家一起探讨原因之所在。
代码
<!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 定位的元素;值大的元素排在前面。
代码
<!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;}
只有一个定位的父元素
多个定位的父元素
本来想以这篇博客,来结束 CSS 的基础介绍。但是已经写了这么多,还是有很多知识点没有涉及到,我本不是一个拖拖拉拉的人。那么,在接下来的博客,我会继续介绍 CSS 的基础知识。“您好,您的文章知识点丰富,但是从读者的角度想可读性略差,您精通css建议您考虑将页面多少美观,整洁一些,以更好达到分享的目的。” ,这样的消息不知你是否收到过,我是收到过。那么在介绍完 CSS 基础知识后,如果有机会的话,我会详细说说如何来定制自己的博客页面。另外,由于最近在赶一个项目,不常写博客。今天突然发现,有几个消息和评论没有及时的回复,在此我表示抱歉,以后定会在一天内给予回复。你也可以加我的 QQ:1829871867,方便及时的联系我。

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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

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

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