盒子模型

最新推荐文章于 2021-12-22 14:39:04 发布
最新推荐文章于 2021-12-22 14:39:04 发布
阅读量105 收藏
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44721518/article/details/108140619
版权 
使用通配符选择器可以初始化所有标签
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
   <p>12</p>
   <h1>12</h1>
   <ul>
      <li>1</li>
	  <li>2</li>
      <li>3</li>
   </ul>
 </body>
</html>

在这里插入图片描述

增加通配符选择器之后。

*{
padding:0;
margin:0;

}

在这里插入图片描述

由于通配符选择器的权重较低，后期你也可以将标签初始化成你想要的样子，两者丝毫不影响。
盒子模型
任何一个元素都是一个盒子
盒子模型的组成部分：margin(外边距) + border（边框） + padding（内边距） + {content = width + height（元素）}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
     <div>
	 香蕉苹果西瓜
	 香蕉苹果西瓜
	 香蕉苹果西瓜
	 </div>
 </body>
</html>



div{
   width:100px;
   height:100px;
   background-color:red;
   border:10px solid black;
   padding:10px;
   margin:10px;

}

在这里插入图片描述

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
     <div class="wrapper">
	    <div class="content"></div>
	</div>
 </body>
</html>

.wrapper{
   width:100px;
   height:100px;
   background-color:red;
   border:10px solid green;
   padding:100px;

}
.content{
   width:100px;
   height:100px;
   background-color:black;
}

在这里插入图片描述

padding:p1 p2 p3 p4;（分别表示上右下左顺时针）	
padding:p1 p2 p3 ;（分别表示上（右左）下）
padding:p1 p2 ;（分别表示（上下）（左右））	
padding:p1 p;（表示上右下左都是p1）	

.wrapper{
   width:100px;
   height:100px;
   background-color:red;
   border:10px solid green;
   padding:100px 200px 150px;

}
.content{
   width:100px;
   height:100px;
   background-color:black;
}

在这里插入图片描述

.wrapper{
   width:100px;
   height:100px;
   background-color:red;
   border:10px solid green;
   padding:100px 0 0 0;/*等价于 padding-top:100px ;*/


}
.content{
   width:100px;
   height:100px;
   background-color:black;
}

在这里插入图片描述

margin与border等与上面的padding类似。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
     <div class="wrapper">
	   <div class="box">
	    <div class="content">
		  <div class="content1">
		  </div>
	    </div>
	  </div>
	</div>
 </body>
</html>




.content1{
   width:10px;
   height:10px;
   background-color:#fff;
}
.content{
   width:10px;
   height:10px;
   padding:10px;
   background-color:#0f0;
}
.box{
   width:30px;
   height:30px;
   background-color:#fff;
   padding:10px ;
}
.wrapper{
   width:50px;
   height:50px;
   background-color:#0f0;
   padding:10px ;
 
}

在这里插入图片描述

margin可以用于两个元素之间的分隔。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
    <span class="s1">123</span>
	<span class="s2">123</span>
 </body>
</html>

在这里插入图片描述

.s1{
background-color:red;
margin-right:20px;

}
.s2{
margin-left:4px;

}

在这里插入图片描述

定位技术：position有四个值
1.绝对定位值（absolute）
脱离原来位置进行定位

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
    <div></div>
 </body>
</html>


div{
  position:absolute;
  right:100px;
  bottom:200px;
  width:100px;
  height:100px;
  background-color:red;
}

在这里插入图片描述

在这里插入图片描述

看上图可以知道图像与边框有一定间隔，这个是body的margin其值为8像素。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
    <div></div>
 </body>
</html>


body{
  margin:0;
}
div{
  width:100px;
  height:100px;
  background-color:red;
}

在这里插入图片描述

所以一般用通配符选择器将所有标签的margin,padding设为0
层模型

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
    <div class="demo"></div>
	<div class="box"></div>
	
 </body>
</html>

.demo{
  position:absolute;
  width:100px;
  height:100px;
  background-color:red;
  opacity:0.5;
}
.box{
  width:150px;
  height:150px;
  background-color:green;
}

当demo定义为absolute时，demo便为真空（即脱离原来位置进行定位），故box可以移动上去。

在这里插入图片描述

2.（相对定位值）relative
保留原来位置进行定位

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
    <div class="demo"></div>
	<div class="box"></div>
	
 </body>
</html>


.demo{
  position:relative;
  width:100px;
  height:100px;
  background-color:red;

}
.box{
  width:150px;
  height:150px;
  background-color:green;
}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
    <div class="demo"></div>
	<div class="box"></div>
	
 </body>
</html>


.demo{
  position:relative;
  left:100px;
  top:100px;
  width:100px;
  height:100px;
  background-color:red;

}
.box{
  width:150px;
  height:150px;
  background-color:green;
}

在这里插入图片描述
上面两个图显示了demo是层模型，但box并没有变化。即保留原来位置进行定位

叹！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
盒子模型原理
tlmis的博客
10-21 1316
盒模型原理：对所有的盒子：在浏览器中所占据的【空间】进行计算 盒子：只要在浏览器【占据位置的】html元素：都是我们计算的盒子。 ——————>inline inline-block block 盒模型使用什么计算盒子在浏览器中占据的位置 width height padding border-with margin 盒子分类：边框盒子（IE默认）和内容盒子（谷歌默认） ...
盒子模型总结
鹿蹊zz的博客
05-04 2743
一、定义 盒子模型 ：盒模型、框模型（box model） css将页面汇总所有的元素的都设置为一个个矩形的盒子。将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置，每一个盒子，都有以下几个部分。 内容区（content）：元素中所有的 边框（border）：元素设置边框 内边距（padding）：指的是盒子的内容和边框之间的距离 外边距（margin）：决定是盒子和盒子的距离（盒子可见框大小） 盒子模型内盒总尺寸=...
盒子模型的理解
qq_41818857的博客
05-12 2995
盒子模型分为两种 1、标准盒模型： content（内容）+margin（外边距）+padding（内边距）+border（边框） 2、IE盒模型（怪异盒模型） content +margin 标准盒模型下的宽：盒子总宽度/高度=width/height+padding+border+margin，这种模式下，我们写的元素往往会比设置的宽高要多出一部分padding、border、margin IE盒模型下的宽：盒子的总宽度和高度是包含内边距padding和边框border宽度在内的 盒子总宽度/高度=wi
CSS盒子模型
LiLi的博客
12-22 6259
CSS盒子模型（Box Model） 概念 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin），边框（border），内边距（padding），和实际内容（content） 1 Margin(外边距) - 清除边框外的区域，外边距是透明的 2 Border(边框) - 围绕在内边距和内容外的边框 3 Padding(内边距) - 清除内容周围的区域，内边距是透明的 4 Co
对div盒子模型使用心得总结
09-22
相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧，本文也有一个理解并附有示例代码，喜欢的朋友可以参考下
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
CSS 理解盒子模型
09-25
盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！
盒子模型.xmind
05-12
这是盒子模型的思维导图，便于理解CSS这一核心，通过思维导图我们可以成体系的理解盒子模型，便于学习和记忆
树的遍历（先序、中序、后序详解）
热门推荐
qq_44721518的博客
06-28 3万+
树的遍历主要有三种 1、先序遍历：先遍历根节点，再遍历左节点，最后遍历右节点； 2、中序遍历：先遍历左节点，再遍历根节点，最后遍历右节点； 3、后序遍历：先遍历左节点，再遍历右节点，最后遍历根节点； 总结：先、中、后就表示根节点的遍历处于哪个位置，而总是先左节点后右节点。例如先序遍历，“先”表示根节点最先遍历，再左节点，最后右节点。依此类推中序遍历，后序遍历。 接下来看一个题目，看一下你们是怎么做的。 我们以中序遍历为例来讲（每次以三个节点为一个整体）： 首先从树的根节点开始即C F E 我们再依次来看，
Collections.sort()的详细讲解
qq_44721518的博客
05-29 3万+
Collections.sort()的详细讲解 很多时候都需要对一些数据进行排序的操作。然而那些数据一般都是放在一个集合中如：Map ，Set ，List 等集合中。他们都提供了一个排序方法 sort()，要对数据排序直接使用这个方法就行，但是要保证集合中的对象是 可比较的。 怎么让一个对象是 可比较的，那就需要该对象实现 Comparable 接口啦。然后重写里面的 compareTo()方法。我们可以看到Java中很多类都是实现类这个接口的 如：Integer，Long 等 假设我们有一个学生类，默认需
码分复用的详解
qq_44721518的博客
06-17 1万+
在CDMA中，每个比特时间再划分为m个短的间隔，成为码片，通常m值为64或128，一般m=8 规则如下： 1、使用CDMA的每一个站被指派一个唯一的m bit码片序列，一个站如果要发送比特1，则发送它自己的m bit码片序列，如果要发送0，则发送该码片序列的二进制反码，按照惯例将码片中的0写成-1，将1写成+1、 例如 站点A：0 0 0 1 1 0 1 1 一般写成-1 -1 -1 1 1 -1 1 1 发送比特1，则A站发送码片序列为（0 0 0 1 1 0 1 1）表示发送1 2、【CDMA给每一个站
Spooling（假脱机）系统
qq_44721518的博客
05-01 2945
Spooling（假脱机）系统 多道程序技术：一台物理CPU虚拟为多台逻辑CPU Spooling技术：一台物理I/O设备虚拟为多台逻辑I/O设备 前身：为了缓和CPU的高速性与I/O设备的低速性间的矛盾，引入了脱机输入、脱机输出技术。（例如脱机输入）该技术是利用专门的外围控制机，先将低速I/O设备上的数据传送到高速磁盘上。当处理机需要输入数据时，直接从磁盘中读取数据。 Spooling（Simu...
java中带标号的break与continue详解
qq_44721518的博客
03-10 2183
java中带标号的break与continue详解 结合后都会 int i = 0,j = 0,t = 0; for(i = 0;i<2;i++) { outer: for(j = 0;j<2;j++) { for(t = 0;t<3;t++) { if(t == 2) continue outer; System.out.println("i = "...
实验一循环首次适应算法
qq_44721518的博客
06-12 1898
package Test; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.util.Scanner; public class adapt { public static void main(String[] args) { Txt txt = new Txt(); txt.request(); }
I/O系统的层次结构与模型
qq_44721518的博客
05-03 1629
I/O系统的层次结构与模型
构造函数详细总结
qq_44721518的博客
03-25 958
构造函数详细总结 一.构造函数的功能：在创建对象时初始化对象的实例变量； 【注意事项】 1.构造函数【与类具有相同的名字】，除了构造函数，其他的方法不能与类同名。 2.构造函数【没有返回值】，也不能在前面加void修饰符 3.如果类中没有定义构造函数，编译器会自动创建一个缺省的、不带参数的构造函数。 【构造函数是在对象创建之后，new操作完成前被调用的。】 二.this指代构造函数 1.在一个类...
实验二、进程调度模拟实验
qq_44721518的博客
06-12 867
import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.util.LinkedHashSet; import java.util.LinkedList; import java.util.Queue; import java.util.Scanner; import com.sun.jndi.url.iiopname.iiopnameURLContextFact.
html盒子模型排版
最新发布
12-14
HTML盒子模型是指在HTML中，每个元素都被看作是一个矩形的盒子，这个盒子由四个部分组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。这些部分的大小和位置可以通过CSS来控制，从而实现网页的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值