div盒子的整体介绍

最新推荐文章于 2024-08-18 10:28:23 发布
最新推荐文章于 2024-08-18 10:28:23 发布
阅读量1.3k 收藏 3
点赞数
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/actores/article/details/105633918
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /* .box1{

            /* 

            内容区：content:元素中的所有的子元素和文本内容都在内容区中排列

                内容区的大小由width和height两个属性来设置

                width: 200px;设置内容区的宽度

                height: 200px;设置内容区的高度

             */

            /* 例子width: 200px;

            height: 200px;

            background-color: #bbffaa; */

            /* 边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部

            要设置边框，需要至少设置三个样式：

             border—width: 200px;设置边框的宽度

             border—height: 200px;设置边框的高度

             border—style：设置边框的样式

             */

             /*例子 border-width: 10px;

             border-color: darkorange;

             border-style: solid; */

             /* 所以盒子大小从200变成220：

             内容区+边框 

             从200*200变成：220*220

        } 

             */

        

        /* .box3{

            width: 200px;

            height: 200px;

            background-color: #bfa;

            border: 10px orange solid; */

 

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

            -背景色的延申到内边距上 

            总结：一个盒子的大小的可见框的大小，由内容区 内边距 和 边框共同决定

                所以在计算盒子的大小的时候，需要将着三个区域加到一起计算

            */

            /* padding-top: 100px;

            padding-left: 100px;

            padding-right: 100px;

            padding-bottom: 100px; */

            /*

                padding内边距的简写属性，可以同时指定四个方向的内边距

                    规则和border-width一模一样（都是顺时针）

                     padding: 10px 20px 30px 40px ; 

        }

             */

            

 

       

        /* .inner{

            width: 100%;

            height: 100%;

            background-color: yellow;

        } */

 

    </style>

</head>

<body>

    <!-- 

    1.盒子模型

        盒模型/盒子模型/框模型(box1 mode1)

            —CSS将页面中的所有元素都设置为一个矩形的盒子

            —将元素设置为矩形的盒子之后，对页面的布局变成将不同的盒子摆放到不同的1位置

            —每一个盒子都有都由以下几个部分组成：

                内容区：(content)

                内边距：(padding)：内容区和边框之间的叫内边距

                边框：(border)

                外边距：(margin):决定当前盒子和其它盒子的距离

    2.边框(border)：0 0 0 0可以设置四个值

             border—width: 200px;设置边框的宽度//有默认的值，有时候不写也可以

             border—width:10px;表示4个方向都是10/或者 border—width:10px 20px 30px 40px;//四个值：上右下左 顺时针旋转 三个值：上左右下 两个值：上下一样左右一样

             border—color: 设置边框的颜色

             border—style：设置边框的样式

                1.solid 表示实线

                2.dotted 点状虚线

                3.dashed 虚线

                4.double 双线

             border简写属性，通过该属性可以同时设置边框所有的相关样式，并没有顺序要求（四边都实现）

             除了border以外还有四个 border-xxx

             border-top  

             border-right

             border-bottom

             border-left

             单独拿出来设置



 

             规则都一样：

             除了border—width:还有

             border—xxx-width:

             xxx表示：top right bottom left，用来单独指定一边的

             除了border—color: 还有

             border—xxx-color: 

             xxx表示：top right bottom left，用来单独指定一边的颜色   

             除了border—style：还有

             border—xxx—style：xxx表示：top right bottom left，用来单独指定一边的实体

             border—style：默认值是none设置无边框



 

    -->

    <!-- 边框和内容区的设置

        <div class="box1"><span>第一个盒子</span></div>

    <div class="box2">第二个盒子</div> -->


 

    <!-- 内边距padding

        -内容区和边框之间的距离是内边距

        -一共有四个方向的内边距

            padding-top

            padding-right

            padding-bottom

            padding-left

        -内边距会影响盒子的大小

        -背景色的延申到内边距上（加上innner的时候）

    -->

    <!--padding内边距的测试 <div class="box3">

        <div class="inner"></div>

    </div> -->


 

    <!-- 

        外边距（margin）：可以设置正负值

            -外边距不会影响盒子可见框的大小

            -但是外边距会影响盒子的大小

            -一共有四个方向的外边距

                margin-top

                    -上外边距，设置一个正值，元素会向下移动

                margin-rigth：挤别人

                    -默认情况下margin-rigth不会产生任何效果

                margin-bottom：挤别人（下外边距）

                -下外边距，设置一个正值，其它的盒子会向下移动

                margin-left

                     -左外边距，设置一个正值，元素会向右移动

            -元素在页面中是按照自左向右的顺序排序的

            -所以默认情况下如果我们设置的左和上外边距则会移动元素自身

            -而设置下和右外边距会移动其他元素

        -maging外边距的简写属性：

            margin 可以同时设置送个方向的外边边距 ，用法和padding一模一样

            margin 会占用盒子的实际占用空间

    -->

    

</body>

</html>

小周日记
关注
DIV盒子
weixin_46385734的博客
02-23 3557
Div盒子 盒子: 在html中所有标签（元素）都可以看做是一个盒子。 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。 盒子的四要素：内容、补白（padding）、边框（border）、外边距（margin） 盒子模型的使用 每个元素都是一个长方形盒子，有几个属性能确定这个盒子的大小。盒子的核心属性是元素的宽高，这...
html div整体向下移动,html 弹出div实现移动居中非常好用
weixin_34168834的博客
05-31 1255
复制代码代码如下:无标题文档/*弹出层的STYLE*/html,body {height:100%; margin:0px; font-size:12px;}.mydiv {background-color: #ff6;border: 1px solid #f90;text-align: center;line-height: 40px;font-size: 12px;font-weight: b...
DIV盒子介绍
weixin_30600503的博客
05-15 116
1.盒子模型=网页布局的基石，由四部分组成： 　　边框（border）、外边距（margin）、内边距（padding）、盒子中的内容（content） 2.设置顺序是顺时针：上、右、下、左。 　　三个值（上、左右、下） 　　两个值（上下、左右） 　　一个值（上下左右） 3.盒子的层次模型（由上到下） 　　边框（border）、盒子中的内容（content）+内...
CSS知识点详解：div盒子模型
最新发布
qq_62859013的博客
08-18 582
CSS详细知识点div盒子模型
CSS样式（三） - div盒子
Moresweet 猫甜
09-19 2315
CSS样式 - 盒子 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 概述： 1.内边距、边框和外边距都是可选的，默认值是零； 2.margin 和 padding ...
div 简介
lokvin 的 lazy afternoon
09-01 780
 1:的作用是产生一个容器，使得可以对这个容器里面的所有内容进行操作。容器可以理解为网页上的一块。产生的容器会单独占一段，需要把不分段时使用建立容器。此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用，在 Internet Explorer 4.0 及以上版本的脚本中可用。 2:div是不是跟table一样的作用div的作用跟table
div、盒子
云纹铜禁的博客
04-02 252
HTML的div布局在body中： <body> <div id="container" style ="width:950px;"> <div id="heading"style="width :400px;color :aqua; background :url(one.jpg)"> <h1><b&g...
div 盒子整体变成弧形四边形
07-08
要将一个 div 盒子变成整体的弧形四边形，你可以使用 CSS 的 `clip-path` 属性。`clip-path` 可以用来裁剪元素的形状，通过将其设置为一个合适的形状，可以创建一个弧形四边形的效果。 下面是一个示例代码，展示...
CSS设置盒子容器(div)高度(height)始终为100%
11-19
/* 这一步是为了消除默认的浏览器margin，避免影响整体高度 */ } div { height: 100%; background-color: red; /* 仅为示例添加背景色 */ width: 200px; } ``` 在这个例子中，`html`和`body`元素被设置为100%...
div盒子八角拖拽以及相关实现
冷故事的博客
03-30 585
之前一直没有系统的使用过js封装的拖拽代码，所以这次经过自己的研究，总算是封装了一个还算可以的拖拽工具吧，话不多说，上图 盒子的八个角可以按照各自对应的方向进行拖拽，盒子灰色部分拖拽整体，多用于编辑相关组件的封装使用，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
使用DIV+CSS实现整体布局：盒子模型详解
"该资源主要介绍了使用DIV+CSS进行网页布局的基本概念和实践，强调了遵循W3C标准的重要性。内容涵盖了盒子模型、常见的HTML标签、CSS样式设置以及W3C标准的构成部分。" 在网页设计中，`盒子模型`是理解网页布局的...
div盒子模型，方便的盒子插件
09-11
box2使用说明 1、文件引用 需引入必要文件box2.js和box2.css； jquery版本在1.4以上 2、添加方法 在html中添加class为.box2的div即可； 3、属性介绍 <div class="box2" panerTitle="控制面板" panelHeight="" panelWidth="300" showStatus="收缩" panelUrl=""> panerTitle：box2添加左上角标题，可为随意文本 showStatus：若为“收缩”，即可为可改变显示或者隐藏； 若为“更多>>”，即可为链接页面，若要添加链接页面，需添加属性 panelUrl ，即可打开panelUrl的页面； 也可调用JS方法；如javascript:openWin(); panelHeight:设置高度 panelWidth：设置宽度
div简介
cungui5726的博客
08-17 2406
There are several HTML elements that I have not introduced to this point because without CSS they have little point, and almost no meaning. These elements include span and div. 到目前为止，我还没有介绍几个HTML元素，因...
div盒子
RXSB_12的博客
03-10 235
盒子：边框：border、内容：padding内边距 盒子的作用：给网页布局 <marquee></marquee> width:宽 herder：高 border：边框 solid：实线 dashed:虚线 dotted:点线 padding:内边距 left：左边 right:右边 top:上 bottom:下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /
css做div的box阴影
Magician_Programmer
08-01 693
做前台需要给box加上阴影，找了一下css3相关设置
div盒子标签
huaz_md的博客
08-28 909
div本身是没有任何含义的，它一般是作为划分区域的标签，是一个很单纯的标签，可塑性很强，一般用来做容器，所以称为盒子。把对应的内容放在div盒子里面（分割区域，div本身没有宽高、颜色属性）DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > 练习 < style > * {margin : 0;//清除外边距 padding : 0;
细致讲讲div盒子
weixin_45637488的博客
04-02 749
初学的时候，对于‘盒子’这个概念十分的费解。再加上padding，border，margin就更崩溃了，不是自己能力不行，只是刚接触所以不太熟练啦！ 其实所谓的盒子布局，就像是收拾衣柜。买了好多的整理箱，整理盒，将想要收纳的东西放进整理箱里，具体放在柜子的那个地方都可以自己定。 我们想要放在网页里的图片文字就像是我们要整理的东西，整理箱就是一个个盒子，我们可以随意的改变盒子的长宽，颜色，边框，就像是可以随意挑选整理箱的样式。 ...
div+css盒子
u014015448的专栏
09-11 522
在学DIV+CSS,div指一个盒子 ，CSS（层叠样式表）可以理解为对网站的装饰    一、CSS样式类型，分为三种      (1)标签选择器       如：p标签《p》      (2)Class选择器     如：.p .text  以点开始的为class选择器    PS:class选择器可以通用，达到简写代码的效果   (3)ID选择器    如：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值