盒子模型介绍及边框

最新推荐文章于 2022-09-29 00:04:09 发布

昱晟168

最新推荐文章于 2022-09-29 00:04:09 发布

阅读量447

点赞数

分类专栏： HTMLCSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_47267628/article/details/122201227

版权

HTMLCSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

盒子模型

看透网页布局的本质

网页布局过程

先准备好相关的网页元素，网页元素基本都是盒子Box
利用CSS设置好盒子样式，然后摆放到相应位置
往盒子里面将内容

网页布局的核心本质：就是利用CSS摆放盒子

盒子模型（Box Model）组成

盒子模型的组成部分：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS例子模型本质上是一个盒子，封装周围的HTML元素。

盒子模型组成包括：边框（border），内容（content），内边距（padding），外边距（margin）

在这里插入图片描述

边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细），边框样式，边框颜色

语法：

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

属性	作用
border-width	定义边框粗细，单位PX
border-style	边框样式：常用样式（solid : 　实线边框 dotted : 　为点线。否则为实线 dashed : 为虚线。否则为实线）
border-color	边框颜色

在这里插入图片描述

边框综合写法

CSS边框属性允许你指定一个元素边框的样式和颜色

语法：

border: 1px solid red; 没有顺序

边框分开写法

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

练习：请给一个200*200的盒子，设置上边框为红色，其余边框为蓝色（提示：一定注意边框的层叠性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      /*border: 1px solid red;*/
    /*  练习：请给一个200*200的盒子，设置上边框为红色，其余边框为蓝色（提示：一定注意边框的层叠性） */
      border: 1px solid blue;
      border-top: 1px solid red;
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>

表格的细线边框

border-collapse属性控制浏览器绘制表格边框方式。它控制相邻单元格的边框。

格式：

border-collapse: collapse;

collapse单词是合并的意思
border-collapse：collapse；表示想念边框合并在一起

边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们两种方案解决：

测量盒子大小的时候，不量边框
如果测量的时候包含了边框，则需要width/height减去边框宽度

昱晟168

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型介绍及边框

盒子模型看透网页布局的本质网页布局过程先准备好相关的网页元素，网页元素基本都是盒子Box利用CSS设置好盒子样式，然后摆放到相应位置往盒子里面将内容网页布局的核心本质：就是利用CSS摆放盒子盒子模型（Box Model）组成盒子模型的组成部分：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS例子模型本质上是一个盒子，封装周围的HTML元素。盒子模型组成包括：边框（border），内容（content），内边距（padding），外边距（margin
复制链接

扫一扫