43 盒子模型

最新推荐文章于 2024-01-11 09:30:00 发布
最新推荐文章于 2024-01-11 09:30:00 发布
阅读量84 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hello_sunny123/article/details/118674430
版权

HTML 边框 内边距 复合写法 盒子模型
关键词由CSDN通过智能技术生成

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一.边框

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-盒子模型之边框.html</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width: 边框的粗细 一般情况下都用px; */
            border-width: 5px;
            /* border-style: 边框的样式  solid 实线边框  dashed 虚线边框  dotted 点线边框*/
            /* border-style: 边框的样式  solid 实线边框  */
            border-style: solid;
            /* border-style: 边框的样式 dashed 虚线边框 */
            /* border-style: dashed; */
            /* border-style: 边框的样式 dotted 点线边框 */
            /* border-style: dotted; */
            /* border-color:边框的颜色 */
            border-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

结果

在这里插入图片描述

二.复合写法

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-复合写法.html</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width: 5px; */
            /* border-style: 边框的样式  solid 实线边框  dashed 虚线边框  dotted 点线边框*/
            /* border-style: solid; */
            /* border-color: pink; */
            /* 边框的复合写法 简写 */
            /* border: 5px solid pink; */
            /* 上边框 */
            border-top: 5px solid pink;
            /* 下边框 */
            border-bottom: 10px dashed purple;
            /* 左边框 */
            border-left: 5px solid #000;
            /* 右边框 */
            border-right: 5px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

结果

在这里插入图片描述
在这里插入图片描述

练习代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框练习 </title>
    <style>
        div {
            /* 给一个200*200的盒子，设置上边框为红色，其他边框都为蓝色 */
            width: 200px;
            height: 200px;
            /* border  包含了四条边 */
            border: 10px solid blue;
            /* 层叠性 只层叠了上边框*/
            border-top: 10px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

结果

在这里插入图片描述

三.表格细线边框

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说排行榜</title>
    <style>
        table {
            width: 500px;
            height: 249px;
        }

        th {
            height: 35px;
        }

        table,
        td,
        th {
            border: 1px solid pink;
            /*border-collapse 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/down.jpg" /></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="images/up.jpg" /></td>
                <td>124</td>
                <td>675432</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="images/down.jpg" /></td>
                <td>212</td>
                <td>7654</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="images/down.jpg" /></td>
                <td>23</td>
                <td>75645</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="images/up.jpg" /></td>
                <td>121</td>
                <td>7676</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="images/down.jpg" /></td>
                <td>576576</td>
                <td>1231421</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="images/down.jpg" />></td>
                <td>234</td>
                <td>7686</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

结果

在这里插入图片描述

四.（1）边框会影响盒子的实际大小

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-边框会影响盒子的实际大小</title>
    <style>
        div {
            width: 180px;
            height: 180px;
            background-color: pink;
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

结果

在这里插入图片描述

四.(2)内边距

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13-盒子模型之内边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;
            padding-top: 30px;
            padding-right: 20px;
        }
    </style>
</head>

<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>

</html>

结果

在这里插入图片描述

四.内边距padding属性：以上4种，开发中都会遇到

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14-盒子模型的内边距复合写法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding-left: 5px;
            padding-top: 5px;
            padding-right: 5px;
            padding-bottom: 5px; */
            /* 内边距复合写法 */
            /*后面跟一个数：代表上下左右都是5px*/
            /* padding: 5px; */
            /*后面跟两个数：代表上下是5px 左右是10px*/
            /* padding: 5px 10px; */
            /*后面跟三个数：代表上是5px 左右是10px  下是20px*/
            /* padding: 5px 10px 20px; */
            /*后面跟三个数：代表上是5px 右是10px* 下是20px 左是30px   顺时针*/
            padding: 5px 10px 20px 30px;

        }
    </style>
</head>

<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>

</html>

结果

在这里插入图片描述

五.内边距会影响盒子实际大小

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15-内边距会影响盒子实际大小</title>
    <style>
        div {
            /* width: 200px;
            height: 200px; */
            /* 为了避免撑大盒子200-20*2=160 */
            width: 160px;
            height: 160px;
            background-color: pink;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小</div>
</body>

</html>

结果

在这里插入图片描述

hello_sunny123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css边框border(含代码,易懂)
m0_74577714的博客
09-14 6493
css中边框属性方法
HTML中边框样式、内外边距、盒子模型尺寸计算（附代码图文示例）【详解】
Jin_Xiang123的博客
12-18 5609
本篇文章主要介绍HTML中边框样式、内外边距、盒子模型尺寸计算以及部分理论知识 边框基本样式是指在HTML和CSS中设置元素的边框的样式。常见的边框样式包括实线边框、虚线边框、双线边框、边框颜色、边框粗细等。边框颜色可以用于控制边框的外观和视觉效果，例如与元素的背景色形成对比，或者与其他元素产生视觉分隔。通过调整边框颜色的值，可以灵活地满足不同的设计需求和风格要求。边框粗细可以用于控制边框的外观和视觉效果，例如细边框可以给元素提供轻盈的外观，而粗边框则可以给元素增加强烈的视觉分割效果。通过调整边框粗细的值，
HTML5提供了多种方式来设计图像边框，以下是几种常用的方法
BLOG域名:programb.blog.csdn.net
06-30 1667
实际上，通过组合这些属性和使用更复杂的CSS技巧，你可以创建出几乎任何你想要的边框效果。当然，我可以继续为你介绍更多关于使用HTML5和CSS来设计图像边框的高级技巧和方法。以上只是一些例子，展示了你可以使用HTML5和CSS来创建多么复杂和吸引人的图像边框。通过结合这些技术，你可以为网页上的图像元素添加独特的视觉效果，提升用户体验。HTML5与CSS一起，为设计图像边框提供了多种强大的方法。这个例子中，图像的边框宽度为1像素，样式为实线，颜色为黑色。的CSS类，其中设置了边框的样式。
python -- pyQt5中 样式设置(边框、按钮、CSS 颜色代码)
最新发布
weixin_45939263的博客
01-11 3571
QFrame 作为容器，放入其他多种部件，里面的边框都生效在类名后面用 #号串接变量名，子控件不受影响，达到预期效果。
div样式
jgwei的专栏
06-17 1012
★双线框代码★ 文字 效果如框内，是带背景色（熏衣草色）的简单双线框。 文字 显示的效果是背景色为桃色的简单双线框。效果如框内所示，边框的颜色是橙红色#ff4500，框内背景色为桃色#ffdab9。 文字 显示的效果是背景色为NAVAJO白的简单双线框。效果如框内所示，边框的颜色是橙红色#ff4500，框内背
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
CSS 理解盒子模型
09-25
CSS盒模型是网页布局的基础，它是CSS样式中用于描述元素占据空间的方式。理解盒模型对于任何想要精通网页设计的人来说都是至关重要的。盒模型定义了元素的总尺寸，包括内容(content)、内边距(padding)、边框(border)...
盒子模型.xmind
05-12
这是盒子模型的思维导图，便于理解CSS这一核心，通过思维导图我们可以成体系的理解盒子模型，便于学习和记忆
对div盒子模型使用心得总结
09-22
相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧，本文也有一个理解并附有示例代码，喜欢的朋友可以参考下
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
html 框架代码全集
08-09
html 框架代码全集
设置边框的各种方法
iiiF_的博客
11-30 125
下边框：1.border-bottom-style:样式；2.border-bottom-width：宽度；3.border-bottom-color：颜色；左边框：1.border-left-style:样式；2.border-left-width：宽度；3.border-left-color：颜色；右边框：1，border-righ-style：样式；2.border-righ-width：宽度；3.border-righ-color：颜色；上边框：1.border-top-style:样式；
css网页边框样式代码,css3边框样式(示例代码)
weixin_30620431的博客
08-04 6417
我们在设计网页样式的时候，经常会用到边框，那么css中的边框具体有哪些样式呢，下面我们来看。首先，在css中设置border的时候，我们一般给给出三个值，线条样式，线条粗细，线条颜色。以上的三个值，线条样式是必须要设置的，否则边框则无法显示到页面上，border的线条样式有四种，分别是：实线(solid)点线(dotted)双实线(double)虚线(dashed)粗细和颜色可以默认，粗细默认是3...
180day(边框示例代码)
orangecloudy的博客
04-09 110
陈国佳总结《2018年4月8日》【连续180天】 标题：边框示例代码; 内容： 1.边框： public class BorderFrame extends JFrame { private JPanel demoPanel ; private JPanel buttonPanel ; private ButtonGroup group; public Border
外边框HTML代码,HTML代码-边框篇
weixin_36036925的博客
06-04 3078
HTML代码-边框篇2018-09-12表格以和分别作起始标识符。其中，里有一些必要的参数。border参数定义表格边框的粗细，记为border=数值，数值取0，1，2，3等整数。width是我们要定义的参数，它规定表格的宽度，数值通常用100%，记作width=100%，值得注意的是，如果不设置width值，表格将根据单元格里的内容自动定义宽度。height参数规范表格的高度，通常可以不设置，而...
用html代码给边框加线条
DJCBPL的专栏
03-05 5543
&lt;TABLE style="RIGHT: 30px; WIDTH: 720px; POSITION: relative; TOP: 20px" height=492 width=720 cellSpacing=15 cellPadding=0 background=http://www.yysohu.com/upload/050908184...
css边框套边框代码,纯css实现动态边框的示例代码
weixin_29129919的博客
08-03 795
背景这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图：动态边框思路看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添加四个div来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。难道就没有更好的解决方案了…就在我绞尽脑汁的时候，灵光乍现，为...
html的边框间距代码,纯CSS实现可自定义间距虚线边框
weixin_33522643的博客
06-15 821
.border-wrapper {position: relative;margin: 100px auto;width: 200px;height: 50px;background: #ff0000;z-index: 9999;border-radius: 5px;}.border-top {width: calc(100% - 10px);left: 5px;height: 1px;backg...
理解HTML5盒子模型与CSS3布局
通过本节学习，应能够理解和应用盒子模型，知道每个盒子都有固定的大小，并且能够使用`<div>`标记来有效地组织和定位网页元素。 HTML5的盒子模型和CSS3的样式控制相结合，提供了强大的网页设计工具，使开发者能够...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值