css盒子（一）

最新推荐文章于 2024-07-14 10:25:44 发布
最新推荐文章于 2024-07-14 10:25:44 发布
阅读量75 收藏
点赞数
文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ywxcsdd/article/details/121177432
版权

盒子模型

它包括：边框（border）、外边距（magin)、内边距(padding）、和实际内容（content)。

边框（border）

border:boreder-width    border-style     border-color 

border-style:solid ;  ---- 实线边框  border-style：dashed;----虚线边框   border-style：dotted；----点线边框

边框的复合写法：border: 1px solid red;没有顺序  边框分开写法：border-top:1px solid   red;

border:1px solid red ; 使用了边框的层叠性。

表格的细线边框--border-collapse:collapse;合并相邻边框

边框影响盒子大小 的解决方案1.测量盒子大小的时候不量盒子边框 2.如果测量的时候包括了盒子边框，则需要width/height减去边框宽度

内边距(padding)

即边框和内容的距离；padding-left/right/top/bottom;复合写法：padding：5px;/5px 10px;(上下。左右)/5px 10px 5px;(上 左右 下）/5px 10px 20px 10px(上右下左，顺时针）

padding影响盒子大小

盒子已有宽度和高度，再指定内边距，撑大盒子大小；解决方案：width/height减去多出来的内边距

新浪导航栏

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav{
				height：41px;
				border-top:3px solid #ff8500;
				border-bottom: 1px solid #edeef0;
				background-color:#fcfcfc;
				line-height:41px;
			}
			.nav a{
				font-size:12px;
				color:#4c4c4c;
				text-decoration:none;
				/* height:a链接属于行内元素没有高,转化为行内块元素 */
				display:inline-block;
				padding:0 20px;
			}
			.nav a:hover{
				background-color:#eee;
				color:#ff8500;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#">新浪导航</a>
			<a href="#">手机新浪网</a>
			<a href="#">移动客户端</a>
			<a href="#">微博</a>
		</div>
	</body>
</html>

小米侧边栏

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
display:block;
width:200px;
height:40px;
background-color:#55585a;
font-size:14px;
color:#fff;
text-decoration:none;
/* text-indent:2em */
padding-left:30px;
line-height:40px;
}
a:hover{
background-color:#ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
<div></div>
</body>
<html>

星星承载
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS设置盒子阴影
宝子的博客
02-15 958
向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。a、给元素右边框和下边框加外阴影——把。
CSS盒子模型
LiLi的博客
12-22 6404
CSS盒子模型（Box Model） 概念 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin），边框（border），内边距（padding），和实际内容（content） 1 Margin(外边距) - 清除边框外的区域，外边距是透明的 2 Border(边框) - 围绕在内边距和内容外的边框 3 Padding(内边距) - 清除内容周围的区域，内边距是透明的 4 Co
CSS 盒子模型
m0_52861684的博客
08-28 1433
CSS 盒子模型总结。
css盒子概述
m0_63029399的博客
05-04 2792
盒子的概念 1.页面中的每一个标签,都可以看作一个盒子，通过盒子的视角更方便的进行布局。是 2.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的 称之为盒子。 3. 盒子组成 css中规定每一个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域 (border)、外边距区域(margin)构成,这就是...
CSS盒子的属性
m0_66868047的博客
03-28 1843
1. 内容区域设定(content)： width：宽度的设定 height：高度的设定 宽度和高度的设定可以是具体的数值（带单位），也可以是百分比设置。 2. 内边距（padding）的设定： 盒子的内边距分为上右下左四个方向 内边距的设定用来控制盒子中装载的内容到盒子边缘（边框）之间距离。 盒子的内边距占据的是盒子里面的空间，最小为0，不允许出现负值。 3. 外边距（margin）的设定 盒子的外边距分为上右下左四个方向 外边距的设定用来控制盒子外围四周的距离，不属于盒子本身范畴 外边距的主要用
css盒子模型
m0_61255374的博客
01-06 1531
1.什么是盒子模型 在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 2.盒子的组成 一个
css盒子覆盖问题
weixin_42583802的博客
06-22 1427
css盒子覆盖问题
CSS 的布局 盒子
GoodManS的CSDN
10-29 1379
了解CSS相关盒子的内容
CSS盒子模型总结
热门推荐
码厩
09-27 6万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding...
css中使用盒子模型构造一个三角形
YSJ_Dumpling的博客
01-03 1810
相关知识点： 盒子模型：网页中所有的标签都是盒子模型 盒子模型组成部分： 1.内容区content：由宽高组成 width height 2.内边距（内填充）padding：内容到边框的距离 3.边框border：盒子的边框 包裹住内容区和内边距 4.外边距margin：盒子边框距离其他盒子边框的距离，或者是距离浏览器边框的距离 分析一下：盒子模型有width,height,padd...
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
21.4 CSS 盒子模型
09-02
CSS盒子模型有两种不同的解析方式：标准盒模型（W3C Box Model）和IE盒模型（IE Quirk Mode）。在标准盒模型中，元素的总宽度和高度计算公式为：内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
CSS盒子模型是什么
09-24
CSS盒子模型是网页设计中一个基础且至关重要的概念，它帮助开发者理解和控制网页元素的布局。CSS（Cascading Style Sheet）是用来分离HTML或XML文档内容与其表现样式的一种语言，使得我们可以独立地调整内容的外观和...
scss概念及使用
m0_74293254的博客
07-10 1124
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1227
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
CSS 技巧与案例详解：开篇介绍
最新发布
粉丝们务必加入微信粉丝群
07-14 19
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2628
title>充电效果
web前端css盒子
11-17
CSS盒子模型是Web前端开发中非常重要的概念，它描述了一个HTML元素在页面中所占据的空间。盒子模型由四个部分组成：内容区域、内边距、边框和外边距。以下是CSS盒子模型的详细介绍： 1. 内容区域：指的是HTML元素的实际内容，例如文本、图片等。 2. 内边距：指的是内容区域与边框之间的距离，可以通过padding属性来设置。 3. 边框：指的是内容区域和外边距之间的边框，可以通过border属性来设置。 4. 外边距：指的是边框和相邻元素之间的距离，可以通过margin属性来设置。 CSS盒子模型的默认宽度和高度是指内容区域的宽度和高度，如果要计算整个元素所占据的空间，需要加上内边距、边框和外边距的宽度和高度。 以下是一个示例代码，演示如何使用CSS盒子模型： ```html <!DOCTYPE html> <html> <head> <title>CSS盒子模型示例</title> <style> .box { width: 200px; height: 100px; padding: 20px; border: 1px solid black; margin: 10px; } </style> </head> <body> <div class="box">这是一个盒子</div> </body> </html> ``` 在上面的代码中，我们定义了一个名为“box”的CSS类，它的宽度为200像素，高度为100像素，内边距为20像素，边框为1像素实线黑色，外边距为10像素。在HTML中，我们使用`<div>`元素来创建一个盒子，并将其应用到“box”类。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值