CSS盒子模型复习

最新推荐文章于 2022-08-03 08:57:22 发布
最新推荐文章于 2022-08-03 08:57:22 发布
阅读量134 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47683287/article/details/109272172
版权

盒模型复习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 盒子模型：必须规定 width height
		  外边距： margin：上 右 下 左
		  margin-top：上外边距
		  margin-bottom：下外边距
		  margin-right：右外边距
		  margin-left：左外边距

		 边框：border：大小 颜色 样式；
		 border-top-width / color / style
		 border-bottom-width / color / style
		 border-left-width / color / style
		 border-right-width / color / style

		 内边距： padding：上 右 下 左
		  padding-top：上外边距
		  padding-bottom：下外边距
		  padding-right：右外边距
		  padding-left：左外边距

		 内容区

		 -->
		<!-- 样式display
		     修改元素的类型，规定生成框的类型，同样也可以使元素隐藏或显示，不会占用原有的空间
			 block：块
			 inline：内联
			 inline-block：行内块
			 none：隐藏（不占位置）
		 -->
		<!-- 样式overflow
		     设置元素溢出内容
			 hidden：内容被裁减，溢出的内容不可见
			 visible：内容显示
			 scroll：设置滚动条查看
			 auto：自动添加滚动条
		 -->
		 <!-- 样式visibility
		     设置元素隐藏或显示，但是会占用原有的空间
			 hidden：内容被裁减，溢出的内容不可见
			 visible：内容显示
			 scroll：设置滚动条查看
			 auto：自动添加滚动条
		 -->
		 <!-- 样式cursor
			 设置光标的样式
			 可选值有很多：查表

		 -->
		 <!-- 样式opacity：
			   设置背景或图片的透明
			   值大小范围：0 ~ 1

		  -->
		
		<!-- 样式outline：color width style
		     设置元素的轮廓
			 用法和border一样，与border不同的是，不会影响到页面的布局，若有其他元素，会覆盖，而不是像border一样，挤开
		 -->
		<!-- 样式box-shadow
		     设置元素盒子的阴影
			 使用用法：box-shadow：水平偏移量 垂直偏移量 阴影模糊 颜色；
		 -->
		 <!-- 样式border-radius
		      设置元素的圆角边框
			  border-top / bottom-left / right-radius：是个方向角边框
		      简写 border-radius：（圆角半径值）设置四值或三值或二值或一值，与border不同，对角相同
		 -->
		
		
	</body>
</html>
胡先生的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS盒子模型总结（小练习网易新闻列表和京东导航条）
IT_Tea的博客
03-18 542
小练习网易新闻列表和京东导航条
css，盒模型简单练习
shiyu18的博客
11-02 2265
盒模型练习 css盒模型练习 继续熟练练习css，并且更清楚认识到css的好处 完成以下布局： 要求：熟练使用border(边框)，padding(内边距)，margin(外边距) 分析：上图中第一张图需要单独写样式，后面四张图仅需要一个样式即可，并且个块都有上边框(border),外间距间距一样 代码实现： html部分： <!doctype html> <html> <head> <meta charset="utf-8"> <title
从头开始复习css之盒子模型
weixin_33852020的博客
05-17 124
吃完午饭，来写一篇比较简单的文章吧，消化一下吧。 一、 什么叫盒子模型 盒子模型这个名词来自英文里面的Box modelmodel。怎么理解盒子模型呢？我认为凡是里面可以盛装其他内容的标签，我们都可以称之为盒子。例如：div,p,span等等标签都可以往里面再添加元素，我们都可以称之为盒子模型，相反例如img，input等等 里面是无法盛装其他元素，我们就能称之为盒子。 关于盒子，主要有以下几...
Day05-CSS-03-盒子模型复习
weixin_53984771的博客
06-05 189
CSS三个大模块：盒子模型、浮动、定位 属性 作用 border-width 定义边框宽度，单位是px border-style 边框样式 border-color 边框颜色 边框样式常用属性none：没有边框（默认值）solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边距为双实线 其中每一个值可以为数值或百分比的形式让一个正方形变成圆圈 3.内边距 padding是指边框与内容之间的距离 3.1属性值设置 值得个数 表达意思
CSS复习之盒子模型有几种？
weixin_44000173的博客
07-09 605
CSS复习之盒子模型有几种？ 第一种W3C的标准盒子模型 第二种IE标准的盒子模型（怪异盒模型） 两种盒子的宽度和高度不同 w3c标准盒子的宽度和高度是指内容的宽度和高度 content 怪异盒模型的宽度和高度指的是（content + border +padding） 两种盒子的大小计算方法相同 标准盒模型下盒子的大小 = content + border + padding + margin 怪异盒模型下盒子的大小=content + border + padding + margin ..
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
css盒子模型详解加示例
09-25
主要介绍了css盒子模型详解加示例,W3C组织建议把所有的网页上的对象都放在一个盒子中,在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在,这里讲了一个盒子的构成、CSS盒子模型的属性，还有一些示例,需要的...
CSS盒子模型是什么
01-19
 网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性。这些属性和我们日常生活中盒子的属性是一样一样的。内容就是盒子里面装的东西；而填充就是怕...
css盒子模型
08-22
通过这个css盒子模型的实战，更好的理解css盒子模型
css复习整理(三)：盒子模型
weiweitb8的博客
08-18 361
一.盒子模型 1.盒子模型   CSS中，一个独立的盒子模型由content(内容)、border（边框）、padding(内边距)和margin（外边距）4个部分组成。通常设置的width，height是实际内容的尺寸，元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距呈现了元素的背景，内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素，盒子模型如
CSS练习三(盒子练习)
屈帅波的技术博客
05-23 1652
练习题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
css_盒子模型
子龙修仙的博客
05-14 1055
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距的方式。    元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。盒子示意图示：  l border元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允...
CSS学习文档（三）：CSS三大特性、盒子模型、两个案例练习
weixin_42044763的博客
03-19 1409
一、CSS三大特性 1.层叠性 简单来说就是后设置的样式会覆盖前设置的样式，但是只有冲突的样式会覆盖。像下面这种情况，颜色黑会被红色覆盖掉，但是字体大小却不会有变化。 div { color: black; font-size: 15px; } div { color: red; } 2.继承性 子标签继承父标签的某些样式，主要是text、font、line等开头的以及color属性
CSS 盒子模型(Box Model) ｜ 青训营笔记
ProgramNovice的博客
07-28 186
CSS盒子模型(Box Model) ｜ 青训营笔记 这是我参与「第四届青训营」笔记创作活动的的第4天，主要介绍了盒子的组成、盒子的大小和不同浏览器的兼容适配问题。
CSS复习之盒子的浮动和定位
Java学习之乐的博客
05-12 870
今日目录        1、盒子的浮动float        2、使用clear消除浮动的影响        3、盒子定位postion        4、z-index空间位置        5、盒子的display属性一、盒子浮动 floatFloat 属性：默认是 none ，按照标准流来定位；Left：左悬浮；Right：右悬浮；二、使用 clear 清除浮动的影响Clear 属性：默认...
盒子模型及练习
weixin_30662539的博客
05-28 471
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
css3复习P3（盒子模型）
weixin_48931100的博客
08-03 332
css3复习P3（盒子模型）
WEB前端学习 （5）CSS复习四（盒子模型）
Puppy_CQ的博客
04-27 451
页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页 网页布局的本质：就是利用 CSS 摆盒子。 网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容. 1.盒子模型 盒子模型（Box Model）组成 所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本
387day（盒子模型复习，新闻列表实例练习）
orangecloudy的博客
10-26 378
《2018年10月26日》【连续387天】 标题：盒子模型复习，新闻列表实例练习； 内容： &lt;div class="nav"&gt; &lt;div class="cen"&gt;&lt;/div&gt; &lt;/div&gt; * { margin: 0; padding: 0; } /*padding : x y z d; (顺时针) padding: x y...
css盒子模型知识点
最新发布
12-06
CSS盒子模型是CSS中的一个重要概念，它指的是在网页布局中，每个HTML元素都被看作是一个矩形的盒子，这个盒子包含了元素的内容、内边距、边框和外边距。CSS盒子模型由四个部分组成：内容区域、内边距、边框和外边距。其中，内容区域包含了元素的实际内容，内边距是内容区域和边框之间的空白区域，边框是内边距和外边距之间的线条，外边距是边框和相邻元素之间的空白区域。 CSS盒子模型的知识点包括以下内容： 1. 盒子模型的四个部分：内容区域、内边距、边框和外边距； 2. 盒子模型的属性：width、height、padding、border、margin等； 3. 盒子模型的标准盒模型和IE盒模型； 4. 盒子模型的应用：通过设置盒子模型的属性，可以实现网页布局、美化等效果。 下面是一个例子，演示如何使用CSS盒子模型的属性设置一个带有边框和内边距的盒子： ```html <!DOCTYPE html> <html> <head> <title>CSS盒子模型演示</title> <style type="text/css"> .box { width: 200px; height: 100px; padding: 20px; border: 1px solid #000; margin: 20px; } </style> </head> <body> <div class="box"> 这是一个带有边框和内边距的盒子。 </div> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值