CSS盒子模型

最新推荐文章于 2022-03-26 15:53:41 发布
最新推荐文章于 2022-03-26 15:53:41 发布
阅读量146 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiyinweini3/article/details/104383611
版权

背景：学习前端知识，自己做页面
目的：学习前端知识
组网图：不涉及
工具：vscode1.41.0
简介：CSS盒子模型；
使用css的border属性设置边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        ul{
            width: 200px;
            height: 400px;
            background-color: yellow;

            list-style-type: none;

            /* border: 1px solid black; */
            border: 1px dashed black;
        }
    </style>
</head>
<body>
    <ul>
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
        <li>项目四</li>
    </ul>
</body>
</html>

在这里插入图片描述
使用css的border属性设置上、下、左、右边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        ul{
            width: 200px;
            height: 400px;
            background-color: yellow;

            list-style-type: none;

            /* border: 1px solid black; */
            /* border: 1px dashed black; */
            /* border-top: 1px dashed black;
            border-right: 1px dashed black;
            border-bottom: 1px dashed black; */
            border-left: 1px dashed black;
        }
    </style>
</head>
<body>
    <ul>
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
        <li>项目四</li>
    </ul>
</body>
</html>

在这里插入图片描述
使用css的padding属性内边距：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        ul{
            width: 200px;
            height: 400px;
            background-color: yellow;

            list-style-type: none;

            /* border: 1px solid black; */
            /* border: 1px dashed black; */
            border-top: 1px dashed black;
            /* border-right: 1px dashed black;
            border-bottom: 1px dashed black;
            border-left: 1px dashed black; */

            padding: 0px;
        }
    </style>
</head>
<body>
    <ul>
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
        <li>项目四</li>
    </ul>
</body>
</html>

在这里插入图片描述
使用css的margin属性外边距：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        ul{
            width: 200px;
            height: 200px;
            background-color: yellow;

            list-style-type: none;

            /* border: 1px solid black; */
            /* border: 1px dashed black; */
            border-top: 1px dashed black;
            /* border-right: 1px dashed black;
            border-bottom: 1px dashed black;
            border-left: 1px dashed black; */

            padding: 0px;

            margin: 100px;
        }
        ol{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
        <li>项目四</li>
    </ul>
    <ol>
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
        <li>项目四</li>
    </ol>
</body>
</html>

在这里插入图片描述

just_花生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS——盒子模型
s310040799的博客
08-11 322
在我学习CSS视频的时候，发现所有的元素都是由一个个的盒子模型包围着的，它们是我们使用CSS实现准确布局，处理元素排列的关键，因此今天就来写篇博客总结下。 盒子模型分为两种——块级盒子模型（Block box）和 内联盒子模型（Inlinebox） 为什么要这么区分呢，是因为这两种盒子模型会在页面流和元素之间的关系上表现出不同的行为 块级盒子模型（Block box） 一个被定义成块级的（block）盒子会表现出以下行为: 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味
前端学习之CSS——盒子模型
Jane_xxxxxy的博客
07-29 296
1、网页布局的本质 网页布局的核心本质： 就是利用 CSS 摆盒子。 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 利用 CSS 设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容 2、盒子模型（Box Model）组成 盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容 3、边框（border） 3.1、边框的使用
CSS之有点绕的盒子模型
Mr_zhang的博客
03-20 247
CSS盒子模型盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置边框 设置一边的边框，比如顶部边框，可以按如下设置：border-top-color...
CSS 盒子模型
冷月醉雪的博客
05-18 311
   所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。    CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。    下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) - 清除边框外的区...
CSS--盒子模型
cmy741741的博客
09-14 120
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。 盒子的分类和大小 ...
css盒子模型
08-22
CSS盒子模型是网页布局的基础，它是CSS（Cascading Style Sheets）中用于描述网页元素在屏幕上占用空间的方式。深入理解盒子模型对于精确控制网页元素的布局至关重要。在本实战中，我们将探讨盒子模型的各个组成部分...
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
21.4 CSS 盒子模型
09-02
CSS盒子模型有两种不同的解析方式：标准盒模型（W3C Box Model）和IE盒模型（IE Quirk Mode）。在标准盒模型中，元素的总宽度和高度计算公式为：内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
css:盒子模型
11-13
文档资源整理来源网络，仅供初学者参考，下载、收藏请随意。
css_盒子模型
子龙修仙的博客
05-14 1057
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距的方式。    元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。盒子示意图示：  l border元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允...
css之盒子模型
haha_hello的博客
02-22 638
一，盒子模型<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>50-css盒子模型.html</title> <style> /* 利用并集选择器设置标签属性 */ span,a,strong,b{ display: inline-
css中盒子模型
zsl15039718107的博客
10-15 959
css中盒子模型 css盒模型 简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 box-sizing(有3个值哦)：content-box | border-box | inherit 标准盒子模型： box-sizing: content-box; IE盒子模型： box-sizing: border-box; 从上图可以看出标准盒子模型与I...
【CSS】盒子模型
进击的巨人--小天贵
04-11 328
CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。盒子边框语法： border : border-width || border-style || border-color 边框属性—设
【CSS】 盒子模型
weixin_43885779的博客
12-28 93
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) - 清除边框...
CSS之盒子模型
m0_62774164的博客
03-26 441
1.盒子模型 2.圆角边框 3.盒子阴影 4.文字阴影 1.1盒子模型 网页布局的本质：摆放盒子。 所谓盒子模型：就是把HTML页面中的布局元素看做一个矩形的盒子，也就是盛装内容的容器。 CSS盒子模型本质是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容 ...
css盒子模型知识点
最新发布
12-06
CSS盒子模型由四个部分组成：内容区域、内边距、边框和外边距。其中，内容区域包含了元素的实际内容，内边距是内容区域和边框之间的空白区域，边框是内边距和外边距之间的线条，外边距是边框和相邻元素之间的空白...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值