本文主要介绍盒子模型知识点总结
网页布局的过程
所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距和实际内容
盒子模型边框代码如下(示例):
div {
width: 200px;
height: 200px;
/*border-width: 5px;
/*border-width: 为边框粗细,一般都用px作为单位;*/
/*border-style: solid;*/
/*border-style: dashed;*/
/*border-style: solid为边框样式,solid为实线 dashed为虚,线dotted为点线;*/
/*border-style: dotted;
border-color: pink;*/
border: 1px solid red;
border-top: 1px solid blue;
}
</style>
</head>
<body>
<div></div>
CSS 边框属性允许你指定一个元素边框的样式和颜色。
盒子边框的语法:
border : border-width || border-style || border-color
边框样式 border-style 可以设置如下值:
1.none:没有边框即忽略所有边框的宽度(默认值)
2. solid:边框为单实线(最为常用的) dashed:边框为虚线
3. dotted:边框为点线
边框简写:
border: 1px solid red; (没有顺序)
边框的分开写法:
border-top: 1px solid red; (只设定上边框, 其余同理)
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框.
表格细线边框的语法:
border-collapse:collapse;
1.collapse 意为合并 2.border-collapse: collapse; 表示相邻边框合并在一起
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框影响盒子的实际大小</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注意:
当我们给盒子指定 padding 值之后,发生了 2 件事情:
<title>盒子内边距及复合写法</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*padding-left: 20px;
padding-top: 20px;*/
padding: 5px;
}
</style>
</head>
<body>
<div>
据中国天气网气象分析师王伟跃介绍,1951年以来,北京常年平均首个高温日一般出现在6月10日,
今年相较常年平均高温日提前了18天,来得稍微有点偏早,但并不算是排在前几位的。
北京高温日最早出现在1986年的5月7日,当天最高温达35.7℃,
是自1951年以来高温来得最早的;最晚出现在1991年7月25日,到7月才迎来35℃以上的高温天气,可谓是姗姗来迟。
</div>
</body>
margin 属性用于设置外边距,即控制盒子和盒子之间的距离。
外边距可以让块级盒子水平居中,但是必须满足两个条件:
<title>盒子外边距</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
/*.one {
margin-bottom: 20px;
}*/
.two {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。
主要有两种情况:
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
清除盒子内外边距代码如下(示例):
语法:
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除内外边距</title>
<style>
* {
margin: 0;
padding: 0;
}
span {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
123
<ul>
<li>abcd</li>
</ul>
<span>行内元素尽量只设置左右的内外边距</span>
</body>
</html>
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了
在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角
语法:border-radius:length;
<title>圆角边框</title>
<style>
div {
width: 300px;
height: 150px;
background-color: pink;
border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影。
圆角边框代码如下(示例):
语法:
box-shadow: h-shadow v-shadow blur spread color inset;