目录
十、盒子模型
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>
