web编程之第三章CSS盒子模型

zulkar的专栏

已于 2022-06-17 22:44:06 修改

阅读量476

点赞数 2

分类专栏： Web安全文章标签： css html html5 web

于 2021-06-03 11:05:32 首次发布

本文链接：https://blog.csdn.net/qq_41993356/article/details/117514124

版权

10 篇文章 0 订阅

订阅专栏

网页布局过程：

1.先准备好相关网页元素，网页元素基本都是盒子Box

2.利用CSS设置好盒子样式，然后摆放到相应位置

3.往盒子里面装内容

网页布局的核心本质：就是利用CSS把盒子摆放到相应位置

网页布局要学习三大核心，盒子模型、浮动和定位。学习盒子模型能非常好的帮助我们布局页面。

所谓盒子模型：就是把HTML页面中布局元素看作是一个矩形的盒子，也就是盛装内容的容器。CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容
- border边框：围绕在内边距和内容外的边框。
- content内容：盒子的内容，显示文本和图像。
- padding内边距：清除内容周围的区域，内边距是透明的。
- margin外边距：外边距会在元素之间创建“空白”，定义了元素与其他相邻元素的距离，这段空白通常不能放置其他内容。
叫兽的精彩口诀（配合快板更好）：竹板这么一打呀，别的咱不夸，盒子模型实际开发用处非常大，border是边框，content内容哒，padding内边距，非常重要啦，边框与内容的距离主要就靠它，margin外边距，他是干啥的？盒子与盒子的距离就靠它说话，盒子模型掌握了，你乐的像朵花。

语法：

border: border-width | border-style |border-color

border-width 示例

  div {
      width: 300px;
      height: 20px;
      border-width: 5px;/*边框的粗细*/
  }

border-style

语法

border-style: none|hidden|dotted|dashed|solid|double|ridge|inset|outset

参数（常用样式）

参数值	含义
solid	实线边框，边框宽度跟border-width有关
dashed	虚线，显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。
dotted	点线(圆线)，显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是border-width计算值的一半。
none	和关键字 `hidden` 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 `0`，即使先前已经指定过它的值。在单元格边框重叠情况下，`none` 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
hidden	和关键字 `none` 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width计算后的值将是 `0`，即使先前已经指定过它的值。在单元格边框重叠情况下，`hidden` 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。

border-color 示例

div {
    width: 300px;
    height: 20px;
    border-width: 5px;/*边框的粗细*/
    border-style: dotted;/*边框的样式*/
    border-color: red;/*边框的颜色*/
}

边框的复合写法

语法

border: 2px solid red; /*注意没有顺序*/

边框分开写法

border-top: 1px solid red;/*只设定上边框，其余同理*/

表格的细线边框
- border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
- 语法
```
border-collapse: collapse;
```
  - border-collapse: collapse; 表示相邻边框合并在一起。
边框会影响盒子实际的大小
- 边框会额外增加盒子的实际大小。因此我们有两种方案解决：
  1. 测量盒子大小的时候，不要量边框
  2. 如果测量的时候包含了边框，则需要width/height减去边框的宽度

内边距复合写法（简写）

padding: top right bottom left;

当我们给盒子指定padding值之后，发生了2件事：
1. 内容和边框有了距离，添加了内边距
2. padding也会影响盒子实际的大小
  - 也就是说，如果盒子已经有了宽和高，此时再指定内边距，会撑大盒子
3. 解决方案
  - 如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可
padding不会撑大盒子大小的情况
- 如果盒子本身没有指定width/height属性，则此时padding不会撑大盒子的大小。
- 不指定宽度或高度则会跟父级元素的一样大