前端——css盒模型

最新推荐文章于 2023-05-06 16:53:04 发布
最新推荐文章于 2023-05-06 16:53:04 发布
阅读量3.3k 收藏
点赞数
分类专栏： 前端 文章标签： 盒子模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Light__1024/article/details/86721483
版权

文章目录

盒模型的属性

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

如图：

在这里插入图片描述

padding

设置方法：

	<style type="text/css">
		.box{
			width: 300px;
			height: 300px;
			
			/*background-color这个属性将填充padding以及所有的border以内的区域*/
	
			background-color: red; 
			

			方法一：
			padding-top: 30px;
			padding-right: 30px;
			padding-bottom: 30px;
			padding-left: 30px;

			方法二：
			
			/*上 右 下 左*/
			padding: 20px 30px 40px 50px ;

			/*上 左右  下*/
			padding: 20px 30px 40px;

			/* 上下 左右*/
			padding: 20px 30px;

			/*上下左右*/
            padding: 30px
            
		}
	</style>

清除默认边距

一些标签显示时有默认的边距，影响使用

<style type="text/css">

        /*清除默认的边距，效率不高*/

		*{
			padding: 0;
			margin: 0;
		}
	</style>

用并集选择器清除

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
    		margin: 0;
    		padding: 0;
		}

border

边框有三个要素： 粗细 线性 颜色

1、如果颜色不写，默认是黑色的
2、如果 线性样式 solid 不写 不显示。
3、只写 线性样式solid，默认的有上下左右 3px的宽度 颜色为黑（谷歌浏览器），样式有多种：solid dotted double dashed等。

border属性两种设置方式：

	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			border:  5px solid red;


			方法一：按照3要素
			border-width: 5px;
			border-style: solid;
			border-color: red;

			对应位置与padding一致
			border-width: 5px 10px;
			border-style: solid dotted double dashed;
			border-color: red green yellow;



			 方法二：按照方向分
			border-top-width: 10px;
			border-top-color: red;
			border-top-style: solid;

			border-right-color: blue;
			border-right-width: 5px;
			border-right-style: dashed;


			border-bottom-width: 10px;
			border-bottom-color: red;
			border-bottom-style: solid;

			border-left-width: 10px;
			border-left-color: red;
			border-left-style:solid;

			所有没有样式
			border: none;


			设置border没有样式
			border-left: none;

		}
	</style>
</head>
<body>

	 <div class="box"></div>

</body>

看下border四边分别是什么形状？

分别把两边设置成透明（transparent）

.box{
				width: 100px;
				height: 100px;
				border-top:20px solid transparent;
				border-left: 20px solid red;
				border-right: 20px solid red;
				border-bottom: 20px solid transparent;

在这里插入图片描述

width: 100px;
				height: 100px;
				border-top:20px solid red;
				border-left: 20px solid transparent;
				border-right: 20px solid transparent;
				border-bottom: 20px solid red;

在这里插入图片描述

width: 0px;
				height: 0px;
				border-top:20px solid red;
				border-left: 20px solid transparent;
				border-right: 20px solid transparent;
				border-bottom: 20px solid red;

在这里插入图片描述

maigin

外边距 指的是距离
与padding类似，设置方式为：

1		margin: 20px;

2
			margin-top: 30px;
			margin-left: 50px;
			margin-bottom: 100px;

嵌套如果内层超过外层会显示？

*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 300px;
			height: 300px;
			border: 20px solid red;
			background-color: green;
			margin: 100px;
		}
		/*maigin外边距指的是距离*/
		p{
			width: 300px;
			height: 300px;
			padding: 10px;
			border: 10px solid ;
			background-color: red;
			margin: 50px;

		}


 <div class="box">
		<p>
		盒子里嵌套盒子
		</p>
	</div>

在这里插入图片描述

大神，起风了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试之CSS总结
01-29
CSS渲染的过程就好像在一张白纸上画画一样，你需要清楚的知道在什么位置画上那些内容(定位过程)，这些内容的大小(盒模型)是多少以及该内容的颜色(color)，背景(background属性)，文字(text属性)等属性。文档中的每个...
CSS之有点绕的盒子模型
Mr_zhang的博客
03-20 237
CSS盒子模型盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置边框 设置一边的边框，比如顶部边框，可以按如下设置：border-top-color...
web前端 之 CSS盒模型
mao871863224的博客
11-04 282
CSS盒模型题目：谈谈你对CSS盒模型的认识基本概念：标准模型+IE模型这两者的区别（计算高度和宽度的不同）CSS如何设置这两种模型JS如何设置获取盒模型对应得高和宽实例题（根据盒模型解释边距重叠）BFC（边距重叠解决方案）： 题目：谈谈你对CSS盒模型的认识 基本概念：标准模型+IE模型 盒模型包括margin、border、padding、content（由外向里） 盒模型包括标准模型和IE模...
前端 CSS 盒子模型
wuxingge的博客
04-08 1243
在网页中，一切皆盒子 盒子 CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里 如果把所有的元素都想象成盒子，那么对网页的布局就相当于是摆放盒子 只需要将相应的盒子摆放到网页中的相应的位置即可完成网页的布局 盒子模型 一个盒子分成几个部分： 内容区(content) 内边距(padding) 边框(border) 外边距(margin) 边框 设置边框 设置边框需要同时设置三个...
前端CSS——盒子模型
Y_jun1004的博客
06-12 174
前端CSS——盒子模型
web前端之CSS盒子模型
weixin_46820017的博客
05-06 1239
盒子模型 前言 盒子模型，英文即box model。无论是div、span、还是a都是盒子。 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。 盒子中的区域 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。 盒子模型的示意图： 代码演示
CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation
10-14
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》内容精练、重点突出、实例丰富、讲解通俗，是广大CSS设计人员和前端开发人员必备的参考书，同时也非常适合大中专院校师生学习阅读，也可作为高等...
下一代Web应用模型——ProgressiveWebApp
02-25
导读：2016年，Google提出了PWA，志在增强Web体验。可显著提高加载速度、可...包括但不限于基于Node.js的前端工程化方案；诸如Webpack、Rollup这样的打包工具；Babel、PostCSS这样的转译工具；TypeScript、Elm这样转
前端开发之css盒模型
问鼎63的博客
08-30 682
css盒模型 内联元素转换为块级元素（使其具有块级元素的特点） a{display:block;} 块级元素的特点 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
前端系列之CSS（盒子模型）
十二指环的博客
01-19 484
一.盒子模型概念 盒子模型用来“放”网页中的各种元素 网页设计中内容，如文字，图片等元素，都可是盒子（DIV嵌套） 二.盒子模型属性宽高属性边框属性填充内边距（padding）属性盒子在网页中占的空间，不单单与width与height属性有关，还与padding有关，注意，padding属性值不可为负值。外边距（margin）属性盒子计算display属性
前端CSS基础—盒模型
木的又
04-08 684
盒模型基础盒子模型的重要性什么是盒模型盒子的组成部分1.内容2.内边距3.边框4.外边距开发实用技巧1）div的宽高问题2）背景的覆盖问题3）溢出处理4）溢出处理的简单应用 盒子模型的重要性 盒子模型是CSS中最重要的知识点之一，它是一个非常重要的知识点，如果没有理解好盒子模型的概念，那么在以后的网页设计开发中没有办法布局出一个优美的网页，它是你接下来学习布局的基础。 什么是盒模型 盒模型是CSS...
前端开发CSS盒子模型——基础篇
m0_74304535的博客
05-06 494
CSS中规定每个盒子分别由：内容区域（content），内边距区域（padding），边框区域（border），外边距区域（margin）构成。顾名思义：内边距就是内容与边框之间的距离，外边距就是两个盒子之间的距离。例如我想要一个盒子尺寸为600px，边框线为10px，内边距为20px的盒子。设置内外边距：padding：10px；②塌陷现象： 互相嵌套的块级元素，子元素的margin-top会作用在父级身上。①合并现象：垂直布局的块级元素，上下两个元素的margin会合并。
【web前端开发】超详细讲解CSS盒子模型
云泽野の编程日记
03-23 2923
所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。
浅谈前端两种盒模型
Mr_RedStar的博客
02-25 392
盒模型讲解 先说说一个盒子的结构：由content+padding+border+margin组成 先说说标准盒模型的宽高怎么计算： 元素宽度 = borderLeft + paddingLeft + width + paddingRight + borderRight 元素高度=borderTop+paddingTop+height+paddingBottom+borderBottom 这里说到的元素宽度和高度，指的是实际占据的宽高，而且在标准模式盒模型下，我们设置的 width 和 height 指的
前端——css相对定位，绝对定位，固定定位
起风了
02-03 8148
文章目录相对定位 position: relative;特性用途绝对定位 position: absolute;绝对定位参考点单独盒子绝对定位参考点：父辈元素设置了相对定位，则子元素绝对定位以父辈元素为参考点。绝对定位水平居中固定定位参考点 相对定位 position: relative; &lt;style type="text/css"&gt; .box1{ width: 200p...
前端——css z-index
起风了
02-07 1504
文章目录特点 特点 1.z-index值没有单位，就是一个正整数，默认的z-index值为0，定义层级遮盖效果，数值较大的显示在前面。 2.只有定位了的元素，相对定位，绝对定位，固定定位，才能有z-index，而浮动元素不能使用z-index。 3.如果没有z-index值，或者z-index值一样,后面的元素层级高，定位了的元素层级高于没有定位的元素。 4.如果是嵌套在两个父盒子里的子...
前端——table标签和form标签和控件：table,input的type类型，select和option,label，textarea
起风了
01-30 1187
表格标签 table 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等 图片来源于路飞学城 用法 &amp;amp;amp;amp;lt;table&amp;amp;amp;amp;gt; 表格 &amp;amp;amp;amp;lt;thead&amp;amp;amp;amp;gt; 表格头 &amp;amp;amp;amp;lt;tr&amp;amp;amp;amp;gt; 表格行 &amp;amp;amp;amp;
CSS从入门到精通——盒模型
最新发布
09-11
CSS（层叠样式表）是一种用于描述网页上元素样式的语言。在CSS中，盒模型是一个...了解盒模型的概念对于理解和掌握CSS布局和样式非常重要。可以通过设置元素的宽度、高度、内边距、边框和外边距来实现不同的布局效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值