前端学习-CSS盒子内边距-边框-外边距

最新推荐文章于 2022-07-12 19:25:14 发布
最新推荐文章于 2022-07-12 19:25:14 发布
阅读量130 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Corgi_gg/article/details/122398798
版权

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

   

    <style>

        .box{

            width: 200px;

            height: 200px;

            background-color: rgb(255, 0, 0);

            /* border-width 4个值顺序就是瞬时间顺序

                3个值的顺序就是 上 左右  下

                2个值就是 上下 左右

                1个值就是四周都一样

                还有一种方式 border-xxx-width

                XXX可以 top上 botton下 left左 right右            

            */

            /* 边框 会影响盒子大小*/

            border-width: 10px 10px 10px 10px ; ;

            border-color: green black blue yellow;

            border-style:solid;

            /* 常用写法如下 不必三个条件分开写 前后顺序都行 */

            /* border:red,10px,solid; */

            /* 内边距  会影响盒子大小*/

            padding-top: 100px;

            padding-right: 100px;

            padding-bottom: 100px;

            padding-left: 100px;

            /* 简写方法和边框相同 */

           

            /* 外边边距  margin 不会影响盒子大小 但是会影响盒子的位置*/

           

            /* 移动自身盒子 */

            margin-top: 100px;

            margin-left: 100px;

            /* 移动其他盒子  默认情况下botton与right无用*/

            margin-bottom: 100px;

            margin-right: 100px;

           

           

           

       

         }

           





 

         .inner{

            width: 100%;

            height: 100%;

            background-color: yellow;

        }

    </style>

</head>

<body>

    <div class="box">啊啊<div class="inner"><span>你好</span></div></div>

   

</body>

</html>

Corgi_gg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css盒子模型之内边距（padding）
xinghuo0007的博客
04-25 1194
知识点一：哪里是内边距，使用什么属性控制？ 元素的内边距在边框和内容区之间。 控制该区域最简单的属性是 padding 属性。 CSS padding 属性定义元素边框与元素内容之间的空白区域。知识点二：padding可以接受什么值？padding 属性接受长度值或百分比值，但不允许使用负值。案例：例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：h1 {
CSS盒子内边距
ZhouZz997的博客
05-23 4437
CSS盒子内外边距 一.内边距（padding) 0.思维导图 1.内边距属性 padding属性用于设置内边框，即边框与内容之间的距离 案例一： 设置左内边距20px 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
css---盒子模型---内边距
chen_zan_yu_的博客
04-19 334
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; backgr...
css 盒子模型 内外边距
weixin_64195420的博客
03-28 582
盒子模型 //盒子模型是由 margin + border + padding + 网页元素（content） 边框颜色 /* 边框的粗细 */ border-width: 10px; /* 边框的颜色 * / /* border-color:red; /* 边框的类型 solid 实线 */ border-style:solid; /* 设置上边框的颜色 */ border-top-color: red; /* 设置右边框...
【温故知新】CSS学习笔记（盒子内边距介绍）
少年休闲海
05-03 620
CSS盒子内边距 这一节我们开始介绍内边距（Padding）。 内边距（Padding）属性用于设置内边距，内边距是指边框与显示内容之间的距离。 【例子】 默认情况下边框和内容紧挨着的； 这里我们设置“padding: 10px;”，发现上下左右都有了10像素的间距； 和上一节的边框一样，内边距同样分上下左右： padding-top:上内边距 padding-bot...
HTML-第七章-CSS盒子模型+排版.pdf
01-13
盒子模型由 content（内容）、border（边框）、padding（内边距）和 margin（外边距）组成。 在盒子模型中，content 是盒子的主要内容，border 是盒子的边框，padding 是盒子边框和内容之间的空白区域，margin 是...
CSS3样式表-框模型（盒子模型）.pptx
05-06
单元二 CSS3样式表端基础前Web单元2-6 框模型（盒子模型）13内边距框模型概述42边框外边距文档结构与标准文档流span为inline元素，若干个inline元素是水平排列的body，ul，li为block元素，它们独占一整行，兄弟之间...
最新大厂前端面试题-面试指南css篇面试题.docx
06-06
盒模型是指页面上所有的 HTML 元素都可以看作是盒子，每个盒子由 4 部分构成：外边距 margin、内边距 padding、内容 content、边框 border。标准盒模型和 IE 盒子模型是两种不同的盒模型，前者将 width 和 height ...
前端速查手册-12301752.pdf
08-18
* 盒子模型，包括边框、内边距、外边距 * 布局方式，如块级元素、行内元素、浮动布局等 * Flex 布局，包括 flex-grow、flex-shrink 等 四、JavaScript 基本语法 * 变量、数据类型、操作符 * 流程控制语句，如 if、...
1st-Challenge:第一届前端导师挑战赛
04-12
Frontend Mentor-3列预览卡组件解决方案这是的解决方案。 前端导师挑战可帮助您构建现实的项目，从而提高您的编码技能。... 使用flexbox时观察什么是容器，什么是项，并使用边框帮助您在工作时看到盒子。
CSS之布局（盒子模型--内边距）
不动声色的小蜗牛的博客
07-15 226
盒子模型--内边距： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型--内边距</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; border: solid 10px orange;
前端学习笔记：盒子模型内边距padding复合属性
weixin_43339892的博客
08-20 401
值的个数 表达意思 padding：5px; 1个值，代表上下左右都有5像素内边距 padding：5px 10px; 2个值，代表上下内边距是5像素，左右内边距是10像素 padding：5px 10px 20px; 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素 padding：5px 10px 20px 30px; 4个值，代表上内边距5像素，右内边距10像素，下内边距20像素，左内边距是30像素 顺时针 ...
Day5 CSS 内边距 外边距 盒子模型
Zler的博客
05-08 165
CSS 内边距（padding） padding 会改变元素的实际大小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS 内边距</title> <style> div{ ...
css盒子模型的外边距和内边距
weixin_52984349的博客
07-12 3911
css盒子模型的外边距和内边距
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
星辰迷上大海的博客
05-01 3348
今天分享的是Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
CSS基础(9)_盒子模型之内边距、外边距
no15870678621的博客
09-09 1738
盒子模型之内边距、外边距 内边距(padding) 内容区和边框之间的距离是内边距，内边距一共有四个方向： padding-top padding-right padding-bottom padding-left 简写属性： padding是内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样。 特点： 1、内边距的设置会影响到盒子的大小。 2、背景颜色会延伸到内边距上。 总结： 一个盒子的可见框的大小，由内容区、内边距和边框共同决定。所以在计算盒子大小时，需要将这三个区域加
CSS 之盒子模型——边框、内边距、外边距
小王的博客
05-28 5493
使用width来设置盒子内容区的宽度 使用height来设置盒子内容区的高度 width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定 为元素设置边框 要为一个元素设置边框必须指定三个样式 border-width:边框的宽度 border-color:边框颜色 border-style:边框的样式 使用b...
CsS 元素框模
yxpjx的专栏
11-13 1009
 CSS 框模型概述  元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别
web前端css盒子
最新发布
11-17
CSS盒子模型的默认宽度和高度是指内容区域的宽度和高度，如果要计算整个元素所占据的空间，需要加上内边距、边框和外边距的宽度和高度。 以下是一个示例代码，演示如何使用CSS盒子模型： ```html <!DOCTYPE html> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值