資訊專欄INFORMATION COLUMN
摘要：一網頁布局方式二標準流三浮動流四定位流一網頁布局方式什么是網頁布局方式布局可以理解為排版，我們所熟知的文本編輯類工具都有自己的排版方式，比如，等等而網頁的布局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的網頁布局排版的三種方式標準
1、什么是網頁布局方式 布局可以理解為排版，我們所熟知的文本編輯類工具都有自己的排版方式，
比如word，nodpad++等等 而網頁的布局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的
2、網頁布局/排版的三種方式
2.1、標準流
2.2、浮動流
2.3、定位流
標準流的排版方式，又稱為：文檔流/普通流，所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
1 、瀏覽器默認的排版方式就是標準流排版方式
2 、在CSS中將元素分為三類：分別是 塊級 行內 行內塊級
3、在標準流中有兩種排版方式，一種是垂直排版，一種是水平排版 垂直排版，如果元素是塊級元素，那么就會垂直排版 水平排版，
如果元素是行內元素或行內塊級元素，那么就會水平排版
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
div,h1,p {
border: 1px solid red;
}
span，strong,b {
border: 1px solid #000;
}
style>
head>
<body>
<div>我是divdiv>
<h1>我是標題h1>
<p>我是段落p>
<span>spanspan>
<strong>我是強調strong>
<b>我是加粗b>
body>
html>
實例
1、浮動流是一種半脫離標準流的排版方式那什么是脫離文檔流？什么又是半脫離文檔流？
1.1 什么是脫離文檔流？
1、浮動元素脫離文檔流意味著
1、不再區分行內、塊級、行內塊級，無論是什么級的元素都可以水平排版
2、無論是什么級的元素都可以設置寬高 綜上所述，浮動流中的元素和標準流總的行內塊級元素很像
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
/*
不再區分行內、塊級、行內塊級，無論是什么級的元素都可以水平排版：span和p都顯示到一行
無論是什么級的元素都可以設置寬高：span這種行內元素也可以設置寬高
*/
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
style>
head>
<body>
<span class="box1">我是spanspan>
<p class="box2">我是段落p>
body>
html>
實例
2、浮動元素脫標文檔流意味著
1、當某一個元素浮動走之后，那么這個元素看上去就像被從標準流中刪除了一樣，這個就是浮動元素的脫標
2、如果前面一個元素浮動走了，而后面一個元素沒有浮動，那么垂直方向的元素會自動填充，浮動元素重新歸位后就會覆蓋該元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動元素脫標title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
body>
html>
實例
注意點：
1、浮動流只有一種排版方式，就是水平排版，它只能設置某個元素左對齊或者右對齊，沒有居中對齊，也就是沒有center這個取值
2、一旦使用了浮動流，則margin:0 auto;失效
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.header {
width: 930px;
height: 100px;
border: 1px solid #000;
margin: 0 auto;
}
.logo {
width: 100px;
height: 50px;
background-color: yellow;
float: left;
}
.nav {
width: 300px;
height: 50px;
background-color: green;
float: left;
/*失效*/
margin: 0 auto;
}
style>
head>
<body>
<div class="header">
<div class="logo">div>
<div class="nav">div>
div>
實例
DOCTYPE html>
<html>
<head>
<title>方式一：修改顯示方式為inline-blocktitle>
<meta charset="utf-8">
<style>
.box1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
/*
當設置box2的margin-left足夠大時，第二個盒子就靠右面顯示了
但是當瀏覽器界面縮小時，box2由于左邊的margin-left不夠930，則必須換一個新行顯示，就無法讓兩個盒子處于一行
*/
margin-left: 930px;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
body>
html>
DOCTYPE html>
<html>
<head>
<title>方式二：用浮動的方式title>
<meta charset="utf-8">
<style>
.box1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
float: right;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
body>
html>
讓兩個元素顯示到一行，有兩種實現方式，一種是修改元素的顯示方式為inline-block，另外一種就是用浮動的方式
1.2、 那什么又是半脫離文檔流？
脫離分為：半脫離與完全脫離， 其中完全脫離指的是元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣
而之所以稱為半脫離：是因為浮動元素浮動之后的位置取決于它在浮動之前的標準流中的位置，跟標準流還是有一定的關系，
比如說浮動的元素在浮動之前處于標準流的第二行，那么他浮動之后也是處于浮動流的第二行，不會去找其他行的浮動元素去貼靠，
打一個比方就是：浮動流就是在標準流上面覆蓋的一層透明薄膜，元素浮動之后就會被從標準流中扔到浮動流這個薄膜上，
他在這個薄膜上的位置還是以前在標準流的位置上找同方向的浮動元素進行貼靠，貼靠的準則就是：
（1）同一個方向上誰先浮動，誰在前面
（2）不同方向上左浮動找左浮動，右浮動找右浮動
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動元素排序規則title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
}
.box3 {
float: left;
width: 250px;
height: 250px;
background-color: yellow;
}
.box4 {
width: 300px;
height: 300px;
background-color: rebeccapurple;
}
style>
head>
<body>
<div class="box1">1div>
<div class="box2">2div>
<div class="box3">3div>
<div class="box4">4div>
浮動元素浮動之后的位置取決于它在浮動之前的標準流中的位置
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動元素排序規則title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
.box3 {
float: left;
width: 250px;
height: 250px;
background-color: yellow;
}
.box4 {
float: left;
width: 300px;
height: 300px;
background-color: rebeccapurple;
}
style>
head>
<body>
<div class="box1">1div>
<div class="box2">2div>
<div class="box3">3div>
<div class="box4">4div>
body>
html>
同一個方向上誰先浮動，誰在前面
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動元素排序規則title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
.box3 {
float: right;
width: 250px;
height: 250px;
background-color: yellow;
}
.box4 {
float: right;
width: 300px;
height: 300px;
background-color: rebeccapurple;
}
style>
head>
<body>
<div class="box1">1div>
<div 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2200.html
摘要：一內聯元素與行元素的區別內聯元素即行內元素。絕對定位，相對于定位以外的第一個父元素進行定位，元素脫離文檔流。 一、內聯元素與行元素的區別 1、內聯元素即行內元素。2、內聯元素，在文檔流中擠在一行；不能設置寬高（即，即使設置了也不管用，例如a標簽）、margin和padding的top和bottom 塊元素，獨占一行；可以設置寬高、margin、padding3、可以使用displa...
摘要：一內聯元素與行元素的區別內聯元素即行內元素。絕對定位，相對于定位以外的第一個父元素進行定位，元素脫離文檔流。 一、內聯元素與行元素的區別 1、內聯元素即行內元素。2、內聯元素，在文檔流中擠在一行；不能設置寬高（即，即使設置了也不管用，例如a標簽）、margin和padding的top和bottom 塊元素，獨占一行；可以設置寬高、margin、padding3、可以使用displa...
摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結 由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...
摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理 標簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...
閱讀 724·2023-04-25 19:43
閱讀 3921·2021-11-30 14:52
閱讀 3794·2021-11-30 14:52
閱讀 3859·2021-11-29 11:00
閱讀 3790·2021-11-29 11:00
閱讀 3882·2021-11-29 11:00
閱讀 3562·2021-11-29 11:00
閱讀 6138·2021-11-29 11:00
