文章目录

一、元素分类
- 块级元素
- 行内元素
- 行内块元素
二、区块模型
- padding(内边距)
- border(边框)
- margin(外边距)
- 高级的框操作
三、背景
四、图片
五、表格
六、轮廓
七、高级区块效果
- 盒子阴影
- 圆角边框

一、元素分类

块级元素

什么是块级别元素？
- 呈“块状”，有自己的宽度和高度，可以自定义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 4px1px 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

2、CSS的格式化区块相关推荐

php怎么调用css格式化,css文件格式化脚本的方法
这次给大家带来css文件格式化脚本的方法,css文件格式化脚本的注意事项有哪些,下面就是实战案例,一起来看一下.#!/usr/bin/python # -*- coding: UTF-8 -*- im ...
格式化css文件,css文件格式化脚本的方法
这次给大家带来css文件格式化脚本的方法,css文件格式化脚本的注意事项有哪些,下面就是实战案例,一起来看一下.#!/usr/bin/python # -*- coding: UTF-8 -*- im ...
原生JavaScript对CSS进行格式化和压缩
全是正则表达式测试地址:http://jsfiddle.net/dtdxrk/AX5wN/embedded/result/ 1 <!DOCTYPE> 2 <HTMLxmlns=&q ...
前端CSS代码格式化、JavaScript代码格式化函数
CSS代码格式化 format = (s) =>s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1").replace(/;\s*;/g, &quo ...
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)
原标题:CSS的命名方式:BEM(区块.元素.修饰符) 本资源由伯乐在线- 凝枫整理,您也想贡献一份力量?欢迎加入我们 » 重要概念 "Block"区块区块的定义是:一个逻辑和 ...
CSS 块格式化上下文 BFC
块级框参与的格式化上下文,称作块格式化上下文(Block Formatting Contexts,简称BFC),它规定了内部的块级框如何排列. 块格式化上下文看似抽象,其实比较简单,它实际上就是页面上 ...
CSS可见格式化模型
1.盒模型 1.1 盒子大小盒模型描述了元素如何显示,以及如何相互作用.相互影响. 页面中的所有元素都被看作一个矩形盒子,这个盒子包含元素的内容.内边距.边框和外边距. 给元素应用的背景会作用于元素 ...
Css视觉格式化模型
本文涉及Css基础内容较多,(包含盒模型.文档流.浮动.定位)可以选择性阅读. 视觉格式化模型就是指页面中多个盒子(即盒模型)的排列规则,在了解视觉格式化模型前,先重温下盒模型. 盒模型当对一个文档 ...

2、CSS的格式化区块

文章目录

一、元素分类

块级元素

行内元素

行内块元素

二、区块模型

padding(内边距)

border(边框)

margin(外边距)

高级的框操作

三、背景

四、图片

五、表格

六、轮廓

七、高级区块效果

盒子阴影

圆角边框

2、CSS的格式化区块相关推荐

最新文章

热门文章