目录
| 网页布局的本质
看透网页布局的本质
网页布局的步骤：
-
先准备好相关的网页元素，网页元素基本都是盒子 Box 如 <div></div>
-
利用 CSS 设置好盒子样式，然后摆放到相应位置。（设置样式我们之前学过了。 摆放盒子到相应的位置，则是利用【浮动、定位】）
-
往盒子里面装内容
网页布局的核心本质： 就是利用 CSS 摆盒子。
| 盒子模型简介
-
盒子模型，就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
-
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容
CSS 盒子 的基本构成
-
border 边框（决定盒子壁的厚度）
-
padding 内边距 （决定物品和盒子内壁的距离）
-
margin 外边距 （决定盒子和盒子之间的距离）
| 盒子模型的基本属性
1-1 边框 border
语法 border : border-width || border-style || border-color
简写语法 示例 border: 1px solid red;
还可以指定 某条边框 的样式和颜色 示例 border-top: 1px solid red; /* 只设定上边框， 其余同理 */
需要注意的是，盒子的实际大小并不包含边框。 即：盒子的实际宽度 = width + border 高度同理
1-2 表格边框 border-collapse
-
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
-
本质上，表格是一个大盒子，里面的表格是一个一个的小单元格，若我们直接把小单元格的cellspacing=0，则会出现两个小单元格的边重叠为2个像素的边，从而看起来很粗的情况，而border-collapse:collapse 的作用就是把相邻的单元格由2像素合并为1像素
示例（没加 border-collapse）
需要说明的是：只对table声明样式，只相当于给大盒子声明了样式。 若想给单元格也设置样式，则需要使用并集选择器，同时选择table td
2-1 内边距 padding
padding 属性用于设置内边距，即边框与内容之间的距离。
内边距还可以简写成一句话：各值之间以 空格 隔开
2-2 内边距影响盒子大小
解决办法：把宽度减去左右边距即可 width - padding-left - padding-right height同理
当盒子没有设置wight / height属性时，添加Padding的时候不会撑大盒子 ~
3-1 外边距margin
margin 用于控制盒子和盒子之间的距离
3-2 外边距 auto 设置块级盒子页面水平居中
注意
-
盒子必须指定了 width
-
盒子的 左右外边距都设置为 auto
-
margin : 0 auto 这个语法，是让块级元素水平居中，而对于行内/行内块元素的水平居中：是使用 text-align: center 来实现的
语法
-
常见写法： margin: 0 auto 代表上下外边距为0，左右外边距自动（居中）
-
其它写法： margin-left: auto; margin-right: auto;
-
其他写法2： margin: auto;
3-3 外边距 盒内盒子的外边距
这个BUG在开发中经常遇到，而且很重要，也很难理解。请根据下面的笔记一步步看
盒子塌陷 只在块级元素之间会出现。 行级元素和块级元素之间没有。
假如有两个盒子、BUG：
-
A盒子：外盒子，100px
-
B盒子：放在A盒子里面，50px
-
B盒子始终内嵌在A盒子里，且B盒子 需要和 A盒子 之间有一个距离，这个距离为B盒子的margin值
-
如果我们直接给内盒子加一个margin，则会出现下列的状况（父子塌陷）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
height: 100px;
width: 100px;
margin: 0 auto;
background-color: aqua;
}
.div2 {
height: 50px;
width: 50px;
margin: 10px auto; /*内盒子 有一个10px 的边距，但是此时被父亲塌陷了，粘在了一起*/
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>如何解决上述BUG？
-
为父元素定义上边框
-
为父元素定义上内边距
-
为父元素添加 overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
height: 100px;
width: 100px;
margin: 0 auto;
background-color: aqua;
/*下列三个方法用于解决上述的BUG，任选其一即可*/
border: 1px transparent solid; /*方法一：给父元素添加边界， 颜色为transparent*/
padding: 1px; /*方法二：给父盒子添加一个内边距*/
overflow:hidden; /*方法三：添加这一句话（推荐：因为不会增加内边距和外边距、盒子的大小不会改变） */
}
.div2 {
height: 50px;
width: 50px;
margin: 10px auto; /*内盒子 有一个10px 的边距，但是此时被父亲塌陷了，粘在了一起*/
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>4 清除网页默认的内外边距
在写列表、文本的时候，浏览器会给我们的内容默认加一个边距（不同的浏览器不一样），如：
清除上述默认边距的办法
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<p>默认内外边距</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</body>
</html>| 盒子样式
盒子不一定是方的，也可能是圆角的。
天下不一定非黑即白，所以我们也可以给盒子、文字添加阴影
圆角盒子
语法
border-radius:length;
原理： 以 length 的值为 半径 ，在四个角进行画椭圆，然后切成圆角矩形。因此：
若 border-radius: 10px 则代表以 10px 为半径做圆 （也就是一个对称的椭圆）
若 border-radius: 30% 则代表以 max ( height * 0.3 , width * 0.3 ) / 2 为长半轴 、 min ( height * 0.3 , width * 0.3 ) / 2 为短半轴 做椭圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.roundRectangle{
width: 300px;
height: 100px;
background-color: pink;
border-radius: 20%;
}
</style>
</head>
<body>
<div class="roundRectangle"></div>
</body>
</html>盒子阴影
基本语法
注意： 默认是outset（这个单词不能写 否则没阴影）。 若需要内阴影则需要在最后添加上 inset（这个有需要的话就要写）
注意2：阴影不会影响盒子大小
.基础阴影 {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
box-shadow: 10px 10px 10px 10px black; /* 水平位置、垂直位置、阴影模糊度、阴影大小、颜色 */
} 
.基础阴影 {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
box-shadow: 10px 8px 10px 10px rgba(0, 0, 0, .3); /* 一般使用 rgba透明度颜色 进行阴影的设置 */
}动效：鼠标放置盒子上产生阴影
语法
div:hover { // CSS阴影语句 }
文字阴影（了解）
1772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
