CSS笔记03
盒子模型
什么是盒子模型
- 概念：
- CSS 盒子模型就是在网页设计中经常用到的一种思维模型，是 CSS 布局的基石，主要规定了元素是如何显示的以及元素间的相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、内边距区、边框区和外边距区共四个区域，这就是盒子模型。
- 组成：
margin：外边距区域border：边框区域padding：内边距区域content：内容区域
- 盒子占用空间大小的计算方式：
content+padding+border+margin
边框 - border
-
设置边框：
border: 粗细 样式 颜色
-
下面我们就通过写代码的方式来学习理解什么是边框以及怎样设置边框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
body、h1等标签总有一个默认的外边距
例如body的默认外边距 - margin: 8px;
*/
/* 常见操作：初始化，去除默认外边距 */
body,h2 {
margin: 0;
}
/*
设置边框 - border: 粗细 样式 颜色
样式：
solid - 实线
dashed - 虚线
*/
#box {
width: 300px;
border: 1px solid red;
}
h2 {
font-size: 16px;
background-color: red;
line-height: 50px;
color: white;
}
form {
background: lightpink;
}
span {
font-size: 14px;
color: darkred;
}
/* 结构伪类选择器 + 后代选择器 */
.inputs:nth-of-type(1) input {
border: 3px solid black;
}
.inputs:nth-of-type(2) input {
border: 3px dashed blue;
}
.inputs:nth-of-type(3) input {
border: 3px dashed red;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="#">
<div class="inputs">
<span>账号：</span>
<input type="text">
</div>
<div class="inputs">
<span>密码：</span>
<input type="text">
</div>
<div class="inputs">
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
- 查看网页效果：
内外边距 - padding & margin
-
内边距
padding与外边距margin的设置方式大致相同，这里以外边距margin为例，它共有三种常用的设置方式：margin: 0;- 表示上下左右外边距都为零。margin: 0 auto;- 表示上下外边距都为0，左右外边距都为自动居中对齐（auto）- 注意：使用
margin: 0 auto;对元素进行居中操作的前提是该元素必须是块元素（display:block;），且有固定的宽度（如input、button、img等元素，自带宽度可以不用设置其宽度） 。 - 可以通过对块级元素设置
text-align：center;的方式来实现内联元素（如文本、图片）居中 margin:0 auto;可以使盒子居中，text-align:center;可以使此盒子内的内联元素居中，故有时需要两者结合使用才能使得盒子及其中的元素一起居中。
- 注意：使用
margin: 0 1px 2px 3px;- 表示上外边距为0，右外边距为1px，下外边距为2px，左外边距为3px（上右下左 --> 顺时针方向）。
-
下面我们通过写代码的方式来学习理解什么是内外边距以及怎样设置内外边距：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距margin的妙用：居中元素
margin: 0; - 上下左右外边距都为零
margin: 0 auto; - 上下外边距为0，左右外边距为自动居中对齐(auto)
margin: 0 1px 2px 3px; - 上外边距为0，右外边距为1px，下外边距为2px，左外边距为3px(上右下左 -> 顺时针)
-->
<!-- 内边距padding的使用方法与margin大致相同 -->
<style>
#box {
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2 {
font-size: 16px;
background-color: red;
line-height: 50px;
color: white;
margin: 0;
padding: 0 115px;
}
form {
background: lightpink;
}
.inputs {
padding: 10px 40px;
}
span {
font-size: 14px;
color: darkred;
}
input {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="#">
<div class="inputs">
<span>账号：</span>
<input type="text">
</div>
<div class="inputs">
<span>密码：</span>
<input type="text">
</div>
<div class="inputs">
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
- 查看网页效果：
圆角边框
圆角边框的设置
- CSS 属性
border-radius允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。 - 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 圆角边框 - border-radius:
border-radius: 20px; - 边框的四个角的圆形半径都是20px
border-radius: 50px 10px; - 边框的左上角(↖)和右下角(↘)的圆形半径都是50px，边框的右上角(↗)和左下角(↙)都是50px【对角线】
border-radius: 50px 30px 10px 0; - 边框的左上角(↖)的圆形半径是50px，右上角(↗)是30px，右下角(↘)是10px，左下角(↙)是0【顺时针】
将正方形的边框变为圆形：当圆角的半径 = 1/2*(content的宽度+左右(上下)padding的宽度之和+border的宽度*2)时，该盒子的边框将由正方形变为圆形
-->
<style >
div {
width: 100px;
height: 100px;
border: 10px solid red;
margin: 10px;
}
#box1 {
border-radius: 20px;
}
#box2 {
border-radius: 50px 10px;
}
#box3 {
border-radius: 50px 30px 10px 0;
}
#box4 {
border-radius: 60px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</body>
</html>
- 查看网页效果：
- 关于上述圆形边框的理解可以参照下图：
圆角边框的应用
- 我们可以利用圆角边框来绘制各种图形，制作圆形的头像等等：
- 示例：
- 准备一张正方形的头像图片：
- 具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background: red;
margin: 50px;
}
#box1 {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
#box2 {
width: 50px;
height: 100px;
border-radius: 0 50px 50px 0;
}
#box3 {
width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
}
img {
border-radius: 50px;
margin: 0 50px;
}
span {
margin: 0 59px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="images/ProfilePic.png" alt="ProfilePicture">
<br/>
<span>头像</span>
</body>
</html>
- 查看网页效果：
盒子阴影
- CSS
box-shadow属性用于在元素的框架上添加阴影效果。- 具体用法如下
box-shadow: 水平偏移量 垂直偏移量 阴影模糊半径 阴影颜色
- 具体用法如下
- 示例 - 利用
box-shadow实现盒子的阴影效果以及头像图片的发光效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!-- 盒子阴影 - box-shadow: 水平偏移量 垂直偏移量 阴影模糊半径 阴影颜色 -->
<style>
div {
width: 100px;
height: 100px;
background-color: skyblue;
margin: 100px auto;
box-shadow: 20px 20px 5px black;
}
img {
display: block;
margin: 100px auto;
border-radius: 50px;
box-shadow: 0 0 100px yellow;
}
</style>
<body>
<div></div>
<img src="images/ProfilePic.png" alt="ProfilePicture"/>
</body>
</html>
- 查看网页效果：
拓展 - 关于快速搭建网站
-
我们在设计编写前端页面的时候要避免 “重复造轮子” ，很多复杂的样式自己用 CSS 写起来很繁琐，我们没必要花费大量时间自己去编写。我们可以直接用开源网站上提供的源码或者使用 element-ui 这类网站上的组件来搭建我们的前端页面。
-
推荐几个网站：
- 源码之家 - 提供了很多网站设计的源码
- 模板之家 - 提供了很多网站设计的模板
- Element - 网站快速成型工具 - 提供了很多快捷搭建网站的组件
