目录
十、盒子模型
10.1 初识盒子模型
10.2 盒子模型相关样式
10.3 盒子模型类型
10.4 display属性
10.5 盒子模型扩展
十一、网页布局
9.1 标准流布局
9.2 浮动布局
9.3 定位布局
十、盒子模型
10.1 初识盒子模型
-
什么是盒子模型
-
盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是用来存储其他元素的容器
-
-
盒子模型的应用
-
网页本质：网页元素放入盒子内，通过CSS将网页中的一个个盒子排列起来(网页布局)
-
-
盒子模型结构
width和height设置了内容框的宽/高
padding属性设置内边距的宽度
border属性设置边界的宽度、样式和颜色
margin属性设置包围CSS盒子外部区域的宽度，这个属性用来设置与布局中其他的CSS盒子距离
10.2 盒子模型相关样式
-
内容
-
width height
-
-
内填充 padding
-
边框 border
-
外边距 marign
-
-
margin解决块级元素居中
-
-
<!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> div { width: 100px; height: 100px; } .box-a { height: 200px; padding: 20px; border: 10px solid red; background-color: #369; /* margin:外边距 */ margin-top: 40px; margin-left: 100px; margin-bottom: 100px; } .box-b { background-color: #963; } </style> </head> <body> <div class="box-a"></div> <hr /> <div class="box-b"></div> </body> </html>
10.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> .box-a { text-align: center; } .box-b { padding: 20px 0; background-color: #e0e0e0; } .child { width: 200px; height: 30px; background-color: #932; color: #fff; margin-left: auto; margin-right: auto; } </style> </head> <body> <h1>水平居中</h1> <h2>情况-1: text-align (文本居中)</h2> <!-- text-align: 子元素必须为行内标签 --> <div class="box-a"> <span>text-align</span> <span>text-align</span> </div> <h2>情况-2: margin</h2> <!-- margin: 子元素为块级标签，给子标签添加margin-left和right = auto --> <div class="box-b"> <div class="child">情况-2: margin</div> </div> </body> </html>
10.4 display属性
-
功能
-
用来设置元素的显示方式，如块级元素、行级元素、行级块元素或隐藏等
-
-
常用属性
-
block 块
-
inline 行
-
inline-block 行块
-
none 无
-
...
-
<!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> h1 { display: none; } .box-a, .box-b { width: 100px; height: 100px; /* display: inline; */ display: inline-block; } .box-a { background-color: #963; } .box-b { background-color: #369; } .box-c, .box-d { width: 100px; height: 100px; display: block; } .box-c { background-color: #963; } .box-d { background-color: #369; } </style> </head> <body> <h1>display:决定元素的显示或显示类型(行/块/行块)</h1> <div class="box-a">A</div> <div class="box-b">B</div> <hr /> <span class="box-c">A</span> <span class="box-d">B</span> </body> </html>
10.5 盒子模型扩展
-
内容溢出
-
什么是溢出
-
当用绝对的值设置盒子的大小时（固定像素的 width 和 height），内容可能会超出设置的大小，此时内容就会溢出盒子。要控制这时候发生的事情，我们可以使用 overflow 属性
-
元素没有指定高度时，元素的高度是由内容决定(自适应)
-
元素提字height,当内容高度超出height高度时，出现内容溢出
-
-
通过overflow解决溢出
-
visible
-
hidden ： 隐藏溢出, 超出部分不显示
-
scroll: 滚动
-
auto： 溢出时出现滚动
-
-
-
宽与高
-
height与min-height
-
width与min-width
-
-
盒子模型计算方式
-
怪异模式： box-sizing: border-box
-
标准模式: box-sizing: content-box
-
<!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> .box-a { background-color: #e0e0e0; height: 100px; /* min-height: 100px; */ /* 内容溢出 */ /* overflow: hidden; */ /* overflow: auto; */ /* overflow: scroll; */ } </style> </head> <body> <h1>溢出：盒子子元素超出盒子的高度或宽度</h1> <!-- 前提：盒子设置width或height --> <div class="box-a"> <p>溢出：盒子子元素超出盒子的高度或宽度</p> </div> <hr /> <div>hello,world</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>Document</title> <style> /* 100(内容) + 20(padding) + 10(border) 需要计算的是最终边框*/ .box-a { width: 100px; height: 100px; padding: 10px; border: 5px solid #ddd; box-sizing: content-box; } /* 100 = border(10) + padding(20) + 内容(70) 需要计算的是内容 */ .box-b { width: 100px; height: 100px; padding: 10px; border: 5px solid #ddd; box-sizing: border-box; } </style> </head> <body> <div class="box-a"></div> <hr /> <div class="box-b"></div> </body> </html>
十一、网页布局
9.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> .container { background-color: #e0e0e0; overflow: hidden; } /* 子元素浮动了，父元素的高度变成0 , 父元素清除浮动 也就是要在父元素中添加overflow:hidden */ .box-a, .box-b { width: 100px; height: 100px; float: right; } .box-a { background-color: #963; } .box-b { background-color: #369; } </style> </head> <body> <div class="container"> <div class="box-a"></div> <div class="box-b"></div> </div> </body> </html>
9.2 浮动布局
-
什么是浮动布局
-
浮动布局最早用来解决图文排列的问题
-
浮动技术允许元素浮动到另外一个元素的左侧或右侧，而不是默认的一个堆叠另一个。通过float实现多列排版或文字环绕图片
-
-
案例
-
两列布局
-
三列布局
-
菜单导航
-
-
实现方法
-
float
-
left
-
right
-
-
浮动元素通常都要添加width，浮动元素默认情况下，是没有width,实际宽度是由内容来决定
子元素如果都浮动，父元素就没高度，
父元素
父元素 { overflow:hidden } 复制
伪元素:
::after { /* 清除浮动 clear:left|right|both */ content: ''; height: 0; display: block; clear: both; }复制
/* 两列布局方法一，两列都浮动 */ <!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> /* 容器 */ .content { width: 1280px; margin: 0 auto; background-color: #e0e0e0; height: 400px; } /* 方法-1：两个子元素都向左浮动 */ .content-left { float: left; width: 200px; height: 300px; background-color: #111; } .content-right { /* float: left; */ float: right; width: 1070px; height: 350px; /* margin-left: 10px; */ background-color: #963; } </style> </head> <body> <div class="content"> <div class="content-left"></div> <div class="content-right">A</div> </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>Document</title> <style> .content { width: 1080px; margin: 0 auto; background-color: #e0e0e0; /* 清除浮动 */ overflow: hidden; height: 600px; } .content-left { float: left; width: 200px; height: 300px; background-color: #111; } .content-right { margin-left: 210px; height: 400px; background-color: #963; } </style> </head> <body> <div class="content"> <div class="content-left"></div> <div class="content-right"></div> </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>Document</title> <style> /* 容器 */ .main { width: 1280px; margin: 0 auto; /* 父类清除浮动 */ overflow: hidden; background-color: #e0e0e0; height: 600px; } .left, .right { float: left; width: 200px; height: 300px; background-color: #936; } .center { float: left; width: 860px; height: 400px; margin: 0 10px; background-color: #111; } </style> </head> <body> <h1>三列布局: 全左浮动</h1> <div class="main"> <div class="left"></div> <div class="center"></div> <div class="right"></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>Document</title> <style> .main { width: 1280px; margin: 0 auto; background-color: #e0e0e0; height: 600px; } .left { float: left; width: 200px; height: 300px; background-color: #963; } .right { float: right; width: 200px; height: 300px; background-color: #963; } .center { height: 400px; background-color: #111; margin: 0 210px; } </style> </head> <body> <h1>三列布局-两列浮动，中间不浮动</h1> <div class="main"> <!-- 左浮动 --> <div class="left"></div> <!-- 右浮动 --> <div class="right"></div> <div class="center"></div> </div> </body> </html>
9.3 定位布局
-
什么是定位布局
-
让某个元素固定在父元素或页面的固定位置
-
-
案例
-
弹出框
-
遮盖层
-
-
实现方法
-
position：位置
-
static：默认值
-
relative:相对定位
-
当前元素position:relative时，元素相对原始的位置可以通过left|top|right|bottom来进行调整
-
-
absolute /*绝对定位相对与body或者父类而言 若父类未定位则默认body，若父类定位了则相对于父类，父类一般设为相对定位*/
-
fixed 固定定位相对于屏幕，无论界面如何滑动，其在屏幕的位置固定不动
-
-
/*绝对定位和固定定位*/ <!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> .parent { width: 200px; height: 200px; background-color: #369; position: fixed; right: 10px; top: 100px; } .back { width: 100px; height: 100px; background-color: #963; /*绝对定位相对与body或者父类而言 若父类未定位则默认body，若父类定位了则相对于父类，父类一般设为相对定位*/ position: absolute; /*固定定位相对与屏幕而言 position: fixed; */ right: 50px; bottom: 50px; } </style> </head> <body> <div class="parent"> <div class="back"></div> </div> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> <p>Helloworld</p> </body> </html>
/*相对定位*/ <!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> .box { width: 100px; height: 100px; background-color: #963; /* 相对定位与margin功能一样，主要在子类设为绝对定位时对父类设置相对margin-left: 100px; */ position: relative; left: 100px; top: 200px; } </style> </head> <body> <div class="box"></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>Document</title> <style> .parent { width: 300px; height: 300px; background-color: #e0e0e0; position: relative; } .parent > div { width: 100px; height: 100px; position: absolute; } .child-a { background-color: #369; /*利用z-index设置定位层，-1表示最底层做背景，数越大离屏幕越近*/ z-index: 3; } .child-b { background-color: #693; left: 20px; top: 20px; z-index: 2; } .child-c { background-color: #936; left: 40px; top: 40px; z-index: 14; } </style> </head> <body> <div class="parent"> <div class="child-a"></div> <div class="child-b"></div> <div class="child-c"></div> </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>Document</title> <style> .nav { width: 240px; } .panel { border: 1px solid #ddd; } .panel-header { height: 40px; line-height: 40px; background-color: #f6f6f6; padding-left: 40px; border-bottom: 1px solid #ddd; background-image: url(images/arrow-right.gif); background-repeat: no-repeat; background-size: 20px 20px; background-position: 10px center; } .panel-body { padding: 10px; } .panel-header:hover { background-image: url(images/arrow-down.gif); /*鼠标放上会变成手形状*/ cursor: pointer; } </style> </head> <body> <div class="nav"> <!-- 面板 --> <div class="panel"> <div class="panel-header">导航-1</div> <div class="panel-body"> <p>商品-1</p> <p>商品-2</p> </div> </div> <div class="panel"> <div class="panel-header">导航-1</div> <div class="panel-body"> <p>商品-1</p> <p>商品-2</p> </div> </div> </div> </body> </html>
