


Back-end coders talk about front-end (CSS) Lesson 7: Positioning and Floating_html/css_WEB-ITnose
Jun 24, 2016 am 11:47 AM
1. Positioning:
1. Understanding of positioning
(1) Relative positioning
Relative positioning is a very easy concept to master . If an element is positioned relatively, it will appear where it is. You can then move the element "relative to" its origin by setting a vertical or horizontal position.
If you set top to 20px, the box will be 20 pixels below the top of its original position. If left is set to 30 pixels, then 30 pixels of space will be created to the left of the element, which will move the element to the right.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
As shown below Shown:
Note that when using relative positioning, the element still occupies the original space regardless of whether it is moved or not. Therefore, moving an element causes it to cover other boxes.
(2) Absolute positioning
Absolute positioning makes the position of the element independent of the document flow, so it does not occupy space. This is different from relative positioning, which is actually considered part of the normal flow positioning model because the element's position is relative to its position in the normal flow.
Other elements in the normal flow are laid out as if the absolutely positioned element did not exist:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}As shown below:
The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If the element has no positioned ancestor element, then its The position is relative to the original containing block.
The main issue with positioning is to remember what each positioning means. So, now let's review what we learned: relative positioning is "relative to" the element's initial position in the document, while absolute positioning is "relative to" the nearest positioned ancestor element, if no positioned ancestor exists element, then "relative to" the original containing block.
Note: Depending on the user agent, the initial containing block may be a canvas or HTML element.
Tip: Because absolutely positioned boxes are independent of document flow, they can cover other elements on the page. The stacking order of these boxes can be controlled by setting the z-index property.
2. CSS positioning properties
CSS positioning properties allow you to position elements.
(1) position
Place the element in a static, relative, absolute, or fixed position.
Attribute value:
(2) top, right, bottom, left
屬性 | 描述 |
top | 定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 |
right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 |
bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 |
left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 |
屬性值:
(3)overflow
設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情。
屬性值:
(4)clip
設(shè)置元素的形狀。元素被剪入這個(gè)形狀之中,然后顯示出來。
屬性值:
(5)vertical-align
設(shè)置元素的垂直對(duì)齊方式。
屬性值:
(6)z-index:設(shè)置元素的堆疊順序。
屬性值:
二、浮動(dòng)
1、浮動(dòng)的理解
浮動(dòng)的框可以向左或向右移動(dòng),直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
由于浮動(dòng)框不在文檔的普通流中,所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
請(qǐng)看下圖,當(dāng)把框 1 向右浮動(dòng)時(shí),它脫離文檔流并且向右移動(dòng),直到它的右邊緣碰到包含框的右邊緣:
再請(qǐng)看下圖,當(dāng)框 1 向左浮動(dòng)時(shí),它脫離文檔流并且向左移動(dòng),直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中,所以它不占據(jù)空間,實(shí)際上覆蓋住了框 2,使框 2 從視圖中消失。
如果把所有三個(gè)框都向左移動(dòng),那么框 1 向左浮動(dòng)直到碰到包含框,另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。
如下圖所示,如果包含框太窄,無法容納水平排列的三個(gè)浮動(dòng)元素,那么其它浮動(dòng)塊向下移動(dòng),直到有足夠的空間。如果浮動(dòng)元素的高度不同,那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”:
2、CSS 浮動(dòng)屬性
float
屬性值:
實(shí)例(把圖像向右浮動(dòng)):
img
{
float:right;
}
3、來個(gè)實(shí)驗(yàn)吧!
示例1:(認(rèn)識(shí)float的兩種特性)
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<div>
<div style='float:left'><img src="image/1.jpg" ></div>
<div>
<div>
<div>
</div>
</body>
</html>
截圖如是:
第一個(gè)
第二個(gè)
第一個(gè)
我們對(duì)比這幾幅截圖,可以得知以下幾點(diǎn):
- float具有“包裹性”。(所謂包裹性就是普通的div如果沒有設(shè)置寬度,它會(huì)撐滿整個(gè)屏幕,而如果給div增加float:left之后,它會(huì)把內(nèi)容緊緊包裹起來。)【見圖(第一個(gè))與圖(第一個(gè)去掉'float:left')的對(duì)比】
- float具有“破壞性”。(所謂破壞性就是設(shè)置了float屬性的元素會(huì)脫離文檔流。)【見圖(第一個(gè)
)與圖(第二個(gè))】其實(shí),如是解析仍感覺對(duì)float的“破壞性”描述的不太明白,好吧,再來個(gè)例子??纯磃loat的本職工作。
示例2:(我生來是做文字環(huán)繞效果的?。?/h4>
<!DOCTYPE html>
<html lang=“utf8”>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div>
<img src="image/1.jpg" style='float:left'>
哇咔咔,我生來是做文字文字環(huán)繞效果的!
</div>
</body>
</html>
去掉'float:left'的
元素:
帶有'float:left'的
元素:
元素去掉'float:left'時(shí)的
元素:元素帶有'float:left'時(shí)的
元素:其實(shí) ,我一直想強(qiáng)調(diào),但一直沒能說清楚的是:
Statement of this WebsiteThe content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cnHot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Guide: Stellar Blade Save File Location/Save File Lost/Not Saving4 weeks ago By DDDAgnes Tachyon Build Guide | A Pretty Derby Musume2 weeks ago By Jack chenOguri Cap Build Guide | A Pretty Derby Musume2 weeks ago By Jack chenDune: Awakening - Advanced Planetologist Quest Walkthrough4 weeks ago By Jack chenDate Everything: Dirk And Harper Relationship Guide4 weeks ago By Jack chenHot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How do I stay up-to-date with the latest HTML standards and best practices? Jun 20, 2025 am 08:33 AM
The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.
How do I use the element to represent the main content of a document? Jun 19, 2025 pm 11:09 PM
The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.
How do I minimize the size of HTML files? Jun 24, 2025 am 12:53 AM
To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.
How do I create a basic HTML document? Jun 19, 2025 pm 11:01 PM
To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.
How do I create checkboxes in HTML using the element? Jun 19, 2025 pm 11:41 PM
To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.
How has HTML evolved over time, and what are the key milestones in its history? Jun 24, 2025 am 12:54 AM
HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout
How do I use the element to represent the footer of a document or section? Jun 25, 2025 am 12:57 AM
It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.
How do I use the tabindex attribute to control the tab order of elements? Jun 24, 2025 am 12:56 AM
ThetabindexattributecontrolshowelementsreceivefocusviatheTabkey,withthreemainvalues:tabindex="0"addsanelementtothenaturaltaborder,tabindex="-1"allowsprogrammaticfocusonly,andtabindex="n"(positivenumber)setsacustomtabbing
- float具有“破壞性”。(所謂破壞性就是設(shè)置了float屬性的元素會(huì)脫離文檔流。)【見圖(第一個(gè)