Web前端——CSS布局

科技2022-08-04 149

文章目录

一. 文档流（normal flow）1. 定义2. 对于我们来说元素主要有两个状态3. 元素在文档流中有什么特点：二. 盒子模型（box model）1. 定义2. 盒子模型边框设置(1). 在一条样式代码中同时对盒子的颜色、宽度、样式进行设置(2). 在一条样式代码中对四条边（某条边）的边框的某一属性进行设置 3. 盒子模型内边距(1). 设置盒子所有内边距属性(2). 单独为某一个内边距设置属性 4. 盒子模型外边距设置(1). 设置盒子所有外边距属性(2). 单独为某一个外边距设置属性 5. 盒子内容大小设置6. 行内元素的盒子模型三. 盒子的布局1. 盒子的水平布局2. 盒子垂直方向布局3. 垂直外边距的重叠(1). 定义1. 合并的情况一2. 合并的情况二 (2). 垂直外边距合并发生的情况1. 相邻元素外边距合并2. 父子元素外边距合并 (3). 举例 4. 相邻盒子之间水平间距(1). 定义四. 盒子的CSS排版1. 普通流排版(1). 网页元素分类1. 块级元素2. 行内元素3. 行内元素和块级元素的相互转换 (2). 普通流排版定义 2. 定位排版(1). 定义1. static2. relative3. absolute4. fixed 3. 浮动排版(1). 定义(2). 浮动设置(3). 浮动清除五. 让页面具有默认样式的方式1. 自己手动修改2. 通过引入外部文件修改为默认样式六. 常见网页布局版式1. 山中下一栏版式2. 左右两栏版式3. 左右两栏+页眉+页脚版式4. 左右宽度固定中间自适应的三栏版式5. 左右宽度固定中间自适应+页眉+页脚版式七. 题目练习1. 京东的图片列表

一. 文档流（normal flow）

1. 定义

网页是一个多层的结构，一层叠着一层通过CSS可以分别为每一层设置样式

作为用户来讲只能看到最顶上一层

这些层中，最底下的一层称为文档流，文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列的

2. 对于我们来说元素主要有两个状态

在文档流中不在文档流中（脱离文档流）

3. 元素在文档流中有什么特点：

块元素块元素会在页面独占一行（自上向下垂直排列）默认宽度是父元素的全部（会把父元素撑满）默认高度是被内容撑开（子元素撑开） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文档流</title> <style> .box1{ width: 100px; background-color: yellow; } .box2{ background-color: green; } </style> </head> <body> <div class="box1">我是div1</div> <div class="box2">我是div2</div> </body> </html>

行内元素行内元素不会独占页面的一行，只占自身的大小

行内元素在页面中自左向右水平排列

如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）

行内元素的默认宽度和高度都是被内容撑开

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文档流</title> <style> span{ background-color: greenyellow; } </style> </head> <body> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> </body> </html>

二. 盒子模型（box model）

1. 定义

CSS将页面中的所有元素都设置为了一个矩形的盒子

将元素设置为矩形的盒子之后，对页面的布局就变成将不同的盒子摆放到不同的位置

每一个盒子都由以下几个部分组成：内容区(content)：内边距(padding)：边框(border)：外边距(margin)：

盒子实际在页面中占据的空间是由“内容+内边距+边框+外边距”组成的

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> .box1{ /* 内容区(content)：元素中所有的子元素和文本内容都在内容区中排列内容区的大小由width 和 height两个属性来设置 width 设置内容区的宽度 height 设置内容区的高度 */ width: 200px; height: 200px; background-color: #bbffaa; /* 边框(border)：边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部边框的大小会影响到整个盒子的大小要设置边框，需要至少设置三个样式：边框的宽度：border-width 边框的颜色：border-color 边框的样式：border-style */ border-width: 10px; border-color: red; border-style: solid; } </style> </head> <body> <div class="box1"> 这是内容区</div> </body> </html>

2. 盒子模型边框设置

盒子边框border包围了盒子的内边距和内容，形成盒子模型的边界

(1). 在一条样式代码中同时对盒子的颜色、宽度、样式进行设置

语法：

border：颜色(color) 宽度(width) 样式(style)；解释：对所有边所有样式进行设置

其中style属性有：

none 无边框 dotted 边框为点状 dashed 边框为虚线 solid 边框为实线 ...

语法：

border-top border-right border-bottom border-left 解释：对某条边的所有样式进行设置

(2). 在一条样式代码中对四条边（某条边）的边框的某一属性进行设置

语法：

border-style border-width border-color border-top-color border-top-width border-top-style <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型边框</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; /* 边框：边框的宽度：border-width 边框的颜色：border-color 边框的样式：border-style */ /* border-width: 10px; 默认值一般都是3个像素 border-width可以用来指定四个方向的边框的宽度值的情况：四个值：上、右、下、左（顺时针）三个值：上、左右、下两个值：上下、左右一个值：上下左右除了border-width还有一组border-xxx-width xxx可以是 top、right、bottom、left 用来单独指定某一边宽度 */ border-width: 10px 20px 30px 40px; border-top-width: 10px; border-left-width: 30px; color: red; /* border-color用来指定边框的颜色，同样可以分别指定四个边的边框规则和border-width一样 border-color也可以省略不写，如果省略了则自动使用color的颜色值，color是前景色默认是blcak */ border-color: orange; border-color: orange red yellow green; /* border-style 指定边框的样式 border-style 默认值是none 表示没有边框 solid 表示实线 dotted 点状虚线 dashed 表示虚线 double 双实线 */ border-style: solid dotted dashed double; /* border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求 */ border: 10px red solid; } /* 除了border以外还有4个 xxxx border-top border-right border-bottom border-left border-top: 10px solid red; border-bottom: 10px solid red; 或者使用： border: 10px solid red; border-right: none; border-left: none; */ </style> </head> <body> <div class="box1"></div> </body> </html>

3. 盒子模型内边距

盒子padding定义了边框和内容之间的空白区域，这空白区域称为盒子内边距

(1). 设置盒子所有内边距属性

语法：

padding：属性值1 属性值2 属性值3 属性值4；

属性值单位：length（像素|厘米）、%（所占百分比）、inherit（从父元素继承内边距）

当指定一个属性值：表示设置上下左右4个方向内边距当指定四个属性值：表示设置上、右、下、左内边距

(2). 单独为某一个内边距设置属性

padding-top：属性值 padding-right：属性值 padding-left：属性值 padding-bottom：属性值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型内边距</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; border: 10px orange solid; /* 内边距（padding）内容区和边框之间的距离一共有四个方向的内边距 padding-top padding-bottom padding-right padding-left 内边距的设置会影响到盒子的大小背景颜色会延伸到内边距上一共盒子的可见框的大小，由内容区、内边距、边框共同决定所以在计算盒子大小时，需要将这三个区域加到一起计算 */ padding-top: 100px; padding-bottom: 100px; padding-right: 100px; /* paddinhg内边距的简写属性，可以同时指定四个方向的内边距规则和border-width一样 */ padding: 10px 20px 30px 40px; } .inner{ width: 100%; height: 100%; background-color: yellow; } </style> </head> <body> <div class="box1"> <div class="inner"></div> </div> </body> </html>

4. 盒子模型外边距设置

盒子margin定义了页面元素和元素之间的空白区域

(1). 设置盒子所有外边距属性

语法：

margin：属性值1 属性值2 属性值3 属性值4；

属性值单位：length（像素|厘米）、%（所占百分比）、inherit（从父元素继承内边距）、auto（浏览器计算外边距）

当指定一个属性值：表示设置上下左右4个方向外边距当指定四个属性值：表示设置上、右、下、左外边距

(2). 单独为某一个外边距设置属性

margin-top：属性值 margin-right：属性值 margin-left：属性值 margin-bottom：属性值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型外边距</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; border: 10px red solid; /* 外边距（margin）外边距不会影响盒子可见框的大小但是外边距会影响盒子的位置一共有四个方向的外边距 margin-top 上外边距，设置一个正值，元素会向下移动 margin-right 默认情况下设置margin-right不会产生任何效果 margin-bottom 下外边距，设置一个正值，其下边的元素会向下移动 margin-left 左外边距，设置一个正值，元素会向右移动 margin也可以设置负值，如果是负值则元素会向相反的方向移动元素在页面中是按照自左向右的顺序排列的所以默认情况下如果我们设置的左和上外边距则会移动元素自身而设置下和右外边距会移动其他元素 margin简写属性 margin可以同时设置四个方向的外边距，用法和padding一样 margin会影响到盒子实际占用空间大小 */ margin-top: 100px; margin-left: -100px; margin-bottom: 100px; margin-right: 0px; } .box2{ width: 220px; height: 220px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>

5. 盒子内容大小设置

盒子的内容大小分别使用width（宽度）、height（高度）两个属性进行设置

6. 行内元素的盒子模型

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .s1{ background-color: yellow; /* 行内元素的盒模型行内元素不支持设置宽度和高度行内元素可以设置padding，但是垂直方向padding不会影响页面的布局行内元素可以设置border，垂直方向的border不会影响页面的布局行内元素可以设置margin，垂直方向的margin不会影响布局 */ width: 100px; height: 100px; /* padding: 100px; */ /* border: 100px solid red; */ margin: 100px; } .box1{ width: 200px; height: 200px; background-color: #bbaaff; } a{ /* display 用来设置元素的显示类型可选值： inline 将元素设置为行内元素 block 将元素设置为块元素 inline-block 将元素设置为行内块元素行内块元素，既可以设置宽高和高度，又不会独占一行 table 将元素设置为一个表格 none 元素不在页面中显示，可以用来隐藏一个元素 visibility 用来设置元素的显示状态可选值： visible默认值，元素在页面中正常显示 hidden 元素在页面中隐藏不显示,但是依然占据页面的位置 */ /* display: block; */ display: inline-block; visibility: hidden; width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <a href="javascrip:;">超链接</a>  <a href="javascrip:;">超链接</a> <span class="s1">我是span</span> <span class="s1">我是span</span> <div class="box1"></div> </body> </html>

三. 盒子的布局

1. 盒子的水平布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的水平布局</title> <style> .outer{ width: 800px; height: 200px; border: 10px red solid; } .inner{ width: 200px; /* width: auto; width的值默认就是auto */ height: 200px; background-color: #bbffaa; /* 元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定 margin-left border-left padding-left width padding-right border-right margin-right 一个元素在其父元素中，水平布局必须满足以下等式 margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度（必须满足） 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800 以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整调整的情况：如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式满足 0 + 0 + 0 + 200 + 0 + 0 + 600 = 800 这七个值中有三个值可以设置为auto width margin-left margin-right 如果某个值为auto，则会自动调整为auto的那个值以使等式成立 0 + 0 + 0 + auto + 0 + 0 + 0 = 800 则width会自动变为800，把内容填满 200 + 0 + 0 + auto + 0 + 0 + 200 = 800 则width会变成居中的400px宽度如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0 如果将三个值都设置为auto，则外边距都是0，宽度最大如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值所以我们经常利用这个特点来使一个元素在其父元素中水平居中实例： width：xxxpx; margin：0 auto;（表示上下为0，左右为auto） */ } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>

2. 盒子垂直方向布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的垂直布局</title> <style> .outer{ background-color: #bbffaa; height: 600; /* 默认情况下父元素的高度被内容撑开 */ } .inner{ width: 100px; background-color: yellow; height: 200px; margin-bottom: 100px; } .box1{ width: 200px; height: 200px; background-color: #bbffaa; overflow: auto; } /* 子元素是在父元素的内容中排列的如果子元素的大小超过了父元素，则子元素会从父元素中溢出使用overflow属性来设置父元素如何处理溢出的子元素可选值： visible 默认值子元素会从父元素中溢出来，在父元素外部的位置显示 hidden 溢出的内容将会被裁剪不会显示 scroll 生成两个滚动条（水平方向和垂直方向），通过滚动条来查看完整的内容 auto 根据需要生成滚动条（需要水平方向，就会生成水平方向的，不会生成多于多于滚动条） overflow-x; 单独处理水平方向 overflow-y; 单独处理垂直方向 */ .box2{ width: 100px; height: 400px; background-color: orange; } </style> </head> <body>  <div class="box1"> <div class="box2"></div> </div> </body> </html>

3. 垂直外边距的重叠

(1). 定义

盒子外边距合并主要针对普通流排版，指的是两个或以上多个相邻普通流块级元素在垂直外边距相遇时，将合并成一个外边距

1. 合并的情况一

如果外边距都为正，合并后的外边距高度等于这些高度值最大的外边距值

2. 合并的情况二

如果发生合并的外边距不全为正，会拉近两个块级元素垂直距离，甚至发生重叠

(2). 垂直外边距合并发生的情况

1. 相邻元素外边距合并

2. 父子元素外边距合并

(3). 举例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1,.box2{ width: 200px; height: 200px; font-size: 100px; } /* 垂直外边距的重叠（折叠）相邻的垂直方向外边距会发生重叠现象兄弟元素兄弟元素间相邻垂直外边距会取两者之间的较大值（两者都是正值）特殊情况：如果相邻的外边距一正一负，则取两者的和如果相邻的外边距都是负值，则取两者中绝对值较大的兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理父子元素父子元素间相邻的外边距，子元素的会传递给父元素（上外边距）父子外边距的折叠，会影响到页面的布局，必须要进行处理 */ .box1{ background-color: #bbffaa; /* 设置一个外边距 */ margin-bottom: 100px; } .box2{ background-color: orange; /* 设置一个上外边距 */ margin-top: 100px; } .box3{ width: 200px; height: 200px; background-color: red; /* padding-top: 100px; */ } .box4{ width: 100px; height: 100px; background-color: seagreen; /* margin-top: 100px; */ } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"> <div class="box4"></div> </div> </body> </html>

4. 相邻盒子之间水平间距

(1). 定义

只有行内元素和浮动排版，才需要考虑相邻盒子之间水平间距

两个盒子之间的水平间距 = 左元素margin-right + 右元素margin-left

四. 盒子的CSS排版

1. 普通流排版

(1). 网页元素分类

1. 块级元素

块级元素独占一行，其宽度自动填满父元素宽度，并和相邻的块级元素依次垂直排列

可以设定元素的宽度、高度、四个方向的内外边距

块级元素一般是其他元素的容器，可容纳块级元素和行内元素

常见块级元素：div、li、h1~h6

2. 行内元素

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才换行

行内元素可以设置四个方向的内边距、左、右方向外边距，不可以设置宽、高、上、下外边距

行内元素的高度由元素高度决定，宽度由内容长度控制

行内元素一般不可以包含块级元素

常见行内元素：span、a、em、strong

3. 行内元素和块级元素的相互转换

使用元素的display属性

display = block：行内元素以块级元素方式呈现 display = inline：块级元素以行内元素形式呈现 display = inline-block ：元素变为行内块元素

既具有行内元素所有特征，也有块级元素可以设置宽高，上下外边距

(2). 普通流排版定义

指在不使用其他与排版和定位相关的特殊CSS规则时，各种页面元素默认的排列规则

整个页面如同河流一般

普通流排版是页面元素默认的排版方式

2. 定位排版

(1). 定义

通过设置position属性的不同值，实现四种类型定位

1. static

默认属性值，实现静态定位，就是元素按照普通流布局

2. relative

相对定位，设置元素相对于它在普通流中的位置偏移

3. absolute

绝对定位，元素会基于相对于距离它最近的那个已定位的祖先元素偏移某个距离。

如果元素没有已近定义的祖先元素，那么它的偏移位置相对于最外层的包含框

4. fixed

固定定位，元素相对于浏览器窗口偏移某个位置，且固定不动，不会随着网页移动而移动

3. 浮动排版

(1). 定义

浮动排版中，块级元素的宽度不再自动伸展，而是根据盒子里放置的内容决定其宽度，要修改该宽度，可设置元素的宽度和内边距

浮动盒子可以向左向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

(2). 浮动设置

使用float属性设置盒子浮动。

float:none：盒子不浮动float:left：盒子浮在父元素左边float:right：盒子浮在父元素右边

(3). 浮动清除

使用clear属性清除元素的浮动

clear:left：在元素左侧不允许出现浮动元素clear:right：在元素右侧不允许出现浮动元素clear:both：在元素左右不允许出现浮动元素clear:none：默认值，运行在左右两侧出现浮动元素

五. 让页面具有默认样式的方式

1. 自己手动修改

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 默认样式：通常情况下，浏览器都会为元素设置一些默认样式默认样式的存在会影响到页面的布局，通常情况下，我们在编写网页时要去除浏览器的默认样式（PC端的页面） */ body{ margin: 0; } p{ margin: 0; } ul{ margin: 0; padding: 0; /* 去除项目符号 */ list-style: none; /* margin-left: 20px; */ } /* 最方便的方法 */ *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; border: 1px solid black; } </style> </head> <body> <div class="box1"></div> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </body> </html>

2. 通过引入外部文件修改为默认样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  <link rel="stylesheet" href="./css/normalize.css">  <style> /* 默认样式：通常情况下，浏览器都会为元素设置一些默认样式默认样式的存在会影响到页面的布局，通常情况下，我们在编写网页时要去除浏览器的默认样式（PC端的页面） */ .box1{ width: 100px; height: 100px; border: 1px solid black; } </style> </head> <body> <div class="box1"></div> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </body> </html>

六. 常见网页布局版式

1. 山中下一栏版式

2. 左右两栏版式

3. 左右两栏+页眉+页脚版式

4. 左右宽度固定中间自适应的三栏版式

5. 左右宽度固定中间自适应+页眉+页脚版式

七. 题目练习

1. 京东的图片列表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片列表</title> <link rel="stylesheet" href="../03_layout/css/reset.css"> <style> /* 设置body的背景颜色 */ body{ background-color: antiquewhite; } /* 设置外部ul的样式 */ .img-list{ /* 设置ul的宽度 */ width: 190px; /* 设置ul高度 */ height: 470px; /* 裁剪溢出的内容 */ overflow: hidden; /* 使ul在页面中居中（实际开发中不需要这么写） */ margin: 50px auto; background-color: #F4F4F4; } /* 设置li的位置 :not(:last-child)可以没有，这个是除去最后一个图片的下外边距*/ .img-list li:not(:last-child){ margin-bottom: 9px; } /* 设置图片大小 */ .img-list img{ width: 100%; } </style> </head> <body>  <ul class="img-list"> <li> <a href="javascript:;"> <img src="./images/1.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="./images/2.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="./images/3.jpg" alt=""> </a> </li> </ul> </body> </html>

Processed: 0.017, SQL: 8