文章目录
一、元素分类
块级元素
- 什么是块级别元素？
-
呈“块状”， 有自己的宽度和高度，可以自定义width和height, 除此之外，块级元素独自占据一行高度（float 浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。块级元素有以下特点：
- 每个块级元素都从新一行开始，并且其后的元素都另起一行。 - 元素的高度、宽度、行高以及顶和底边间距都可以设置。 - 元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素宽度一致）。
-
- 常见的块级元素
<div>
<p></p>
<h1>
...
<h6>
<ol>
<ul>
<table>
<address>
<blockquote>
<form></form>
</blockquote>
</address>
</table>
</ul>
</ol>
</h6>
</h1>
</div>
行内元素
-
什么是行内元素？
-
行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。行内元素有以下特点：
- 和其他元素在一行上。 - 元素的高度、宽度、行高以及顶和底边间距都不可以设置。 - 元素的宽度就是它包含的文字或图片的宽度，不可改变。
-
-
常见的行内元素
<a>
<span>
<br />
<i>
<em>
<strong> <label></label></strong></em></i></span
></a>
行内块元素
- 什么是行内块元素？
-
行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如 input、img 就是行内块级元素，它可以设置高宽以及一行多个。具体特点如下：
和其他元素在一行上。 元素的高度、宽度、行高以及顶和底边间距都可以设置。
-
二、区块模型
-
区块模型也就是我们常说的盒子模型，而所谓盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
-
盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的。CSS 定义的宽和高，指的是填充以里的内容范围。
-
盒子的宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。我们用一张图来表示：
padding(内边距)
- padding 内边距位于内容框的外边缘与边界的内边缘之间
- padding-top:上内边
- padding-right:右内边
- padding-bottom:下内边
- padding-left:左内边距
- 设置内边距的写法
- padding:5px 10px 15px 20px;表示上内边距是 5 px，右内边距是 10 px，下内边距是 15 px，左内边距是 20 px。
- padding:5px 10px 15px;表示上内边距是 5 px，右内边距和左内边距是 10 px，下内边距是 15 px。
- padding:5px 10px;表示上内边距和下内边距是 5 px，右内边距和左内边距是 10 px。
- padding:10px;表示所有 4 个内边距都是 10 px。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#box1 {
width: 200px;
height: 200px;
background-color: red;
padding: 20px 10px 10px 50px;
}
#box2 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
- 可以看到，同样是设置高宽为 200 像素的盒子，有 padding 的明显要大一些，padding 在边框里面。
border(边框)
- 举例
/*border: border-width||border-style||border-color;*/
div {
border: 2px solid red;
}
- border-style（边框样式）：dashed（虚线）、dotted（点线）、solid（实线）
- 也可单独设置一个边框
div {
border-top: 1px solid red;
}
/*只给上边框设置一像素的红色实线*/
- border-right：右边框
- border-left：左边框
- border-bottom：下边框
- 边框颜色
p {
border-style: dashed;
border-color: yellow rgb(25%, 35%, 45%) #909990 red;
}
margin(外边距)
-
外边距（margin）代表 CSS 框周围的外部区域，称为外边距。和 padding 类似，也有 margin-top、margin-right、margin-bottom 和 margin-left。写法仿照 padding。
-
与 padding 不同的是 margin 可以是负值。
-
外边距合并问题：
- 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
-
外边距合并示例图：
高级的框操作
-
溢流：当你使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用 overflow 属性来控制这种情况的发生。常用的值：
auto:当内容过多的时候溢流的内容被隐藏，然后出现滚动条，让我们滚动查看所有的内容。 hidden: 当内容过多，溢流的内容被隐藏。 visible: 当内容过多，溢流的内容被显示在盒子的外边。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
p {
width: 500px;
height: 2.5em;
padding: 1em 1em 1em 1em;
border: 1px solid black;
}
.one {
overflow: auto;
}
.two {
overflow: hidden;
}
.three {
overflow: visible;
}
</style>
</head>
<body>
<p class="one">
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
</p>
<p class="two">
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
</p>
<p class="three">
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
我爱学习，学习使我快乐！我爱学习，学习使我快乐！
</p>
</body>
</html>
三、背景
四、图片
-
我们在 HTML 模块中学习了 img 标签来添加图片，现在我们来了解它的一些常用的 CSS 属性。
height：定义图片的高度。 width：定义图片的宽度。 border：定义图片周围的边框。
<img src="/实验楼.jpg" width="px" height="200px" border="1" />
五、表格
- 表格边框： 同样的我们使用border属性为表格设置边框
table,
th,
td {
border: 2px solid red;
}
- 折叠边框： 使用 border-collapse 属性设置是否将表格边框折叠为单一边框
table {
border-collapse: collapse;
}
- 表格的宽度和高度： 正如你所预料的一样， 我们使用weight和height属性设置表格的高度和宽度
table {
width: 50%;
}
th {
height: 50px;
}
-
表格文本对齐的方式：
通过 text-align 属性设置水平对齐方式，取值有 left（左对齐）right（右对齐）和 center（居中对齐），通过 vertical-align 属性 设置垂直对齐方式，取值有：top（顶端对齐）bottom（底部对齐）和 middle（居中对齐）。
六、轮廓
- 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
- outline-color 设置轮廓的颜色。取值和其余颜色的取值一样。
- outline-style 设置轮廓的样式。取值如下：
- outline-width 设置轮廓的宽度。它的值有：
- thin 规定细轮廓。
- medium 默认取值规定中等的轮廓。
- thick 规定粗的轮廓。
- length 允许你自定义轮廓粗细的值。
- inherit 规定应该从父元素继承轮廓宽度的设置
- outline 上面三个属性的连写。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
p {
outline: red dotted thick;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<p>好嗨哟</p>
</body>
</html>
七、高级区块效果
盒子阴影
-
box-shadow 属性设置盒子阴影。box-shadow 有四个值:
- 第一个值是水平偏移量（水平阴影）：即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。 - 第二个值是垂直偏移量（垂直阴影）：即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。 - 第三个值是模糊半径（影子大小）：即在阴影中应用的模糊度。 - 第四个值是阴影的基本颜色。你可以使用任何长度和颜色单位来定义这些值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.shadow {
box-shadow: inset 1px 1px 1px yellow, 2px 2px 1px yellow, 3px 3px 1px blue, 4px 4px
1px blue, 5px 5px 1px black, 6px 6px 1px black;
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="shadow">多个盒子，用逗号分开， 还有inset关键字， 使他变成内部阴影</div>
</body>
</html>
圆角边框
- border-radius 属性来创建圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.radius {
width: 200px;
height: 200px;
border: 1px;
background-color: red;
border-radius: 50%; /*将正方形变成圆, 也可以用25px*/
}
</style>
</head>
<body>
<div class="radius"></div>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/CSS
2645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
