CSS 盒子模型

前言


盒子模型-组成 

CSS盒子模型是一种用来描述元素在页面布局中占据空间的模型。它将每个元素看作由内容区域、内边距、边框和外边距组成的一个矩形框。

CSS盒子模型以及外边框合并的问题 - 知乎

盒子模型的组成部分包括:

  1. 内容区域(Content):显示元素的实际内容,例如文本、图像或其他嵌套元素。

  2. 内边距(Padding):位于内容区域与边框之间的空白区域,可以通过padding属性设置。

  3. 边框(Border):围绕内容和内边距的线条,用于分隔元素与其周围的其他元素。可以使用border属性来设置元素的边框样式、颜色和宽度、

  4. 外边距(Margin):位于元素边框与相邻元素之间的空白区域,用于控制元素之间的间距。可以使用margin属性来设置元素的外边距。


边框

设置边框的相关属性有以下几个:

属性说明
border-width用于设置边框的宽度。可以使用具体的像素值或预定义的关键字来指定宽度。
border-style用于设置边框的样式。常见样式包括实线(solid)、虚线(dashed)、点线(dotted)、双实线(double)等。可以使用属性值none来隐藏边框。
border-color用于设置边框颜色。可以使用具体的颜色值或预定义的颜色关键字来指定颜色。

示例:

div {width: 200px;height: 200px;background-color: orange;border-width: 2px;border-style: solid;border-color: blue;
}

上述代码将<div>元素的边框宽度设置为2像素,样式为实线,颜色为蓝色。

预览:

此外,还可以使用border缩写属性来同时设置边框的宽度、样式和颜色。

例如:

div {width: 200px;height: 200px;background-color: orange;border: 2px solid blue;
}

上述代码与前面的示例效果相同。


设置单方向边框线

要设置元素的单方向边框,可以使用以下属性:

属性说明
border-top用于设置元素的上边框
border-right用于设置元素的右边框
border-bottom用于设置元素的下边框
border-left用于设置元素的左边框

示例:

div {width: 200px;height: 200px;background-color: orange;border-top: 1px solid red;border-right: 2px dashed black;border-bottom: 3px dotted green;border-left: 4px double yellow;
}

预览:


内边距

以下属性可以设置不同方位的内边距:

属性说明
padding-top用于设置上方的内边距值
padding-right用于设置右侧的内边距值
padding-bottom用于设置下方内边距值
padding-left用于设置左侧内边距值

示例:

div {width: 200px;height: 200px;background-color: orange;padding-top: 10px;padding-right:20px;padding-bottom: 10px;padding-left:20px
}

上述代码会将<div>元素的顶部和底部内边距设为10像素,右侧和左侧的内边距设置为20像素。


内边距-多值写法

可以使用缩写属性padding来设置不同方向的内边距。

示例:

  • 统一的内边距:
padding: 10px;
  • 水平和垂直方向的不同内边距:
padding: 10px 20px;
  •  上方、水平、下方方向的不同内边距:
padding: 10px 20px 30px;
  • 上、右、下、左方向的各自不同的内边距:
padding: 10px 20px 30px 40px;

盒子尺寸计算

盒子尺寸=内容尺寸+边框尺寸+内边距尺寸

示例:

div {width: 200px;height: 200px;background-color: orange;border: 5px solid black;padding: 10px 20px;margin: 20px;
}

 上述示例,盒子总宽度=250px,总高度为230px。


外边距

可以使用以下属性设置盒子的外边距:

属性说明
margin-top设置元素顶部的外边距
margin-right设置元素右侧的外边距
margin-bottom设置元素底部的外边距
margin-left设置元素左侧的外边距

示例: 

div {width: 200px;height: 200px;background-color: orange;margin: 100px;
}

预览:

其多值写法与内边距padding属性相同。

自动边距:

div {width: 200px;height: 200px;background-color: orange;margin: 0 auto;
}

上述代码中,将垂直方向外边距设置为0,左右外边距设为"auto"将会自动将容器(或版心)水平居中。

预览:


盒子模型-元素溢出

当元素的内容超出其容器的尺寸时,就会发生溢出的情况。可以使用overflow属性来控制溢出元素的显示方式。

overflow属性有以下几个可选值:

属性值效果
visible默认值,内容会溢出容器显示,并可能遮盖其他元素。
hidden内容会被裁剪,超出容器部分将不可见。
scroll若内容溢出容器,会显示滚动条以便滚动查看内容。
auto若内容溢出容器,会根据需要显示滚动条。若不溢出,则不显示滚动条。

示例:

1.溢出情况:

HTML代码:

<div>生活就是一半诗意,一半烟火,手执烟火以谋生,心怀诗意以谋爱。曾经一直觉得远方才是诗,经历了人间烟火,才发现,油盐酱醋茶,亦可成诗。
</div>

CSS代码:

div {width: 200px;height: 150px;background-color: orange;overflow: visible;
}

溢出情况预览:


2.溢出隐藏:

div {width: 200px;height: 150px;background-color: orange;overflow: hidden;
}

预览:


3.溢出滚动(无论是否溢出都会显示滚动条):

准备两个盒子模型

HTML代码:

<div class="div_1">生活就是一半诗意,一半烟火,手执烟火以谋生,心怀诗意以谋爱。曾经一直觉得远方才是诗,经历了人间烟火,才发现,油盐酱醋茶,亦可成诗。
</div><div class="div_2">人面不知何处去,桃花依旧笑春风。
</div>

CSS代码:

.div_1 {width: 200px;height: 150px;background-color: orange;margin: 20px 0;overflow: scroll;
}.div_2 {width: 200px;height: 150px;background-color: green;overflow: scroll;
}

预览:


4.溢出滚动(元素溢出才显示滚动条):

.div_1 {width: 200px;height: 150px;background-color: orange;margin: 20px 0;overflow: auto;
}.div_2 {width: 200px;height: 150px;background-color: green;overflow: auto;
}

预览:


盒子模型-圆角

盒子模型中的圆角(border-radius)属性用于为元素的边框添加圆角效果。通过设置适当的圆角半径,可以使元素的边框变得圆润。

圆角属性可以应用于四个角落:

属性说明
border-top-left-radius左上角的圆角半径
border-top-right-radius右上角的圆角半径
border-bottom-right-radius右下角的圆角半径
border-bottom-left-radius左下角的圆角半径

使用这些属性,你可以指定一个长度值(如像素或百分比)来定义圆角的大小。

示例:

div {width: 200px;height: 200px;background-color: orange;border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-right-radius: 30px;border-bottom-left-radius: 40px;
}

预览:


多值写法

语法格式如下:

.element {border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
}

具体说明:

  • top-left:左上角的圆角半径。
  • top-right:右上角的圆角半径。
  • bottom-right:右下角的圆角半径。
  • bottom-left:左下角的圆角半径。
示例效果
border-radius: 10px;所有角都具有相同的圆角半径10px。
border-radius: 10px 20px;左上角和右下角为10px,右上角和左下角为20px。
border-radius: 10px 20px 30px;左上角为10px,右上角和左下角为20px,右下角为30px。
border-radius: 10px 20px 30px 40px;左上角为10px,右上角为20px,右下角为30px,左下角为40px。

常见应用:

  • 正圆形状:给正方形盒子设置圆角属性值为宽高的一半(或50%)
div {width: 200px;height: 200px;background-color: orange;border-radius: 50%;
}

预览:

  • 胶囊形状:给长方形盒子设置圆角属性值为盒子高度的一半
div {width: 300px;height: 100px;background-color: orange;border-radius: 50px;
}

预览:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/59377.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无涯教程-Android - Frame Layout函数

Frame Layout 旨在遮挡屏幕上的某个区域以显示单个项目&#xff0c;通常&#xff0c;应使用FrameLayout来保存单个子视图&#xff0c;因为在子视图彼此不重叠的情况下&#xff0c;难以以可扩展到不同屏幕尺寸的方式组织子视图。 不过&#xff0c;您可以使用android:layout_grav…

Axure RP 8.1.0.3400(原型设计工具)

Axure RP 8是一款原型设计工具&#xff0c;它提供了丰富的功能和工具&#xff0c;帮助用户创建高质量的网页、移动应用和桌面软件原型。以下是Axure RP 8的一些特色介绍&#xff1a; 强大的交互设计&#xff1a;Axure RP 8支持创建复杂的动画和过渡效果&#xff0c;让你的原型更…

微信短链跳转到小程序指定页面调试

首先说下背景&#xff1a;后端给了短链地址&#xff0c;但是无法跳转到指定页面。总是在小程序首页。指定的页面我们是h5页面。排查步骤如下&#xff1a; 1、通过快速URL Scheme 编译。上部普通编译 下拉找到此选项。 、 2、按照小程序的要求的URL Scheme输入。另外后端给的…

Redis7之介绍(一)

1. 是什么 Redis:REmote Dictionary Server(远程字典服务器&#xff09; Remote Dictionary Server( 远程字典服务)是完全开源的&#xff0c;使用ANSIC语言编写遵守BSD协议&#xff0c;是一个高性能的Key-Value数据库提供了丰富的数据结构&#xff0c;例如String、Hash、List、…

PlantUML文本绘制类图

记录下文本绘制类图的语法 参考 https://juejin.cn/post/6844903731293585421 类的UML表示 使用UML表示一个类&#xff0c;主要由三部分组成。类名、属性、方法。其中属性和方法的访问修饰符用 - 、# 、 表示 private、protected、public。 如图所示&#xff0c;表示A类有一个…

筑牢数据隐私安全底线,ADSCOPE通过ISO隐私信息管理体系认证!

数字时代&#xff0c;信息安全尤其是数据隐私信息保护已经成为社会共识。近日&#xff0c;ADSCOPE&#xff08;上海倍孜网络技术有限公司&#xff09;已通过相关组织机构评审&#xff0c;符合ISO/IEC 27701&#xff1a;2019标准&#xff0c;获得隐私信息管理体系认证证书&#…

Django基础5——ORM中间程序

文章目录 一、基本了解二、ORM基本操作2.1 连接数据库2.1.1 使用sqlite数据库2.1.2 使用MySQL数据库 2.2 对数据库操作2.2.1 增&#xff08;前端数据——>数据库&#xff09;2.2.2 查&#xff08;数据库——>前端展示&#xff09;2.2.3 改&#xff08;修改数据&#xff0…

已知两地经纬度,计算两地直线距离

文章目录 1 原理公式2 代码实现2.1 JavaScript2.2 C2.3 Python2.4 MATLAB 1 原理公式 在地球上&#xff0c;计算两点之间的直线距离通常使用地理坐标系&#xff08;例如WGS84&#xff09;。计算两地直线距离的公式是根据经纬度之间的大圆距离&#xff08;Great Circle Distanc…

C语言练习4(巩固提升)

C语言练习4 选择题 前言 面对复杂变化的世界&#xff0c;人类社会向何处去&#xff1f;亚洲前途在哪里&#xff1f;我认为&#xff0c;回答这些时代之问&#xff0c;我们要不畏浮云遮望眼&#xff0c;善于拨云见日&#xff0c;把握历史规律&#xff0c;认清世界大势。 选择题 …

shell常用脚本

1、Java项目重启脚本 #!/bin/bash# 定义一个函数来结束进程和启动新进程 function restart(){JAR_NAME$1 # jar包LOG_NAME$2 # 日志JVM_ARGS$3 # jvm 参数PID$(ps -ef | grep java | grep ${JAR_NAME} | awk { print $2 })if [[ ! -z "$PID" ]]; thenecho "…

postgresql-字符函数

postgresql-字符函数 字符串连接字符与编码字符串长度大小写转换子串查找与替换截断与填充字符串格式化MD5 值字符串拆分字符串反转 字符串连接 concat(str, …)函数用于连接字符串&#xff0c;并且忽略其中的 NULL 参数&#xff1b;concat_ws(sep, str, …) 函数使用指定分隔…

【黑科技】游戏开发程序员必备工具【一】

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;效率…

递归算法学习——子集

目录 一&#xff0c;题目解析 二&#xff0c;例子 三&#xff0c;题目接口 四&#xff0c;解题思路以及代码 1.完全深度搜索 2.广度搜索加上深度优先搜索 五&#xff0c;相似题 1.题目 2.题目接口 3.解题代码 一&#xff0c;题目解析 给你一个整数数组 nums &#xff0c…

软件开发的201个原则 阅读笔记 第172-201个原则

目录 原则172 做项目总结 第8章 产品保证原则 原则173 产品保证并不是奢侈品 原则 174 尽早建立软件配置管理过程 原则175 使软件配置管理适应软件过程 原则176 组织SCM 独立于项目管理 原则 177 轮换人员到产品保证组织 给所有中间产品一个名称和版本 原则179 控制基准 原则…

学习JAVA打卡第四十五天

StringBuffer类 StringBuffer对象 String对象的字符序列是不可修改的&#xff0c;也就是说&#xff0c;String对象的字符序列的字符不能被修改、删除&#xff0c;即String对象的实体是不可以再发生变化&#xff0c;例如&#xff1a;对于 StringBuffer有三个构造方法&#xff…

PHP敬老院管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 敬老院管理系统&#xff08;养老&#xff09;是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 论文 https://download.csdn.net/download/qq_41221322/…

财务部发布《企业数据资源相关会计处理暂行规定》

导读 财务部为规范企业数据资源相关会计处理&#xff0c;强化相关会计信息披露&#xff0c;根据《中华人民共和国会计法》和相关企业会计准则&#xff0c;制定了《企业数据资源相关会计处理暂行规定》。 加gzh“大数据食铁兽”&#xff0c;回复“20230828”获取材料完整版 来…

adb 命令

1.adb shell dumpsys activity top | find "ACTIVITY" 查看当前运行的activity包名 2.adb shell am start -n 包名/页面名 打开应用的页面 3.查看将要启动或退出app的包名 adb shell am monitor 只有在启动或退出的时候才会打印 4.查看当前启动应用的包名 ad…

工单管理报修系统有什么用?的修工单系统助您解决报修难点

随着互联网的快速发展&#xff0c;许多企业都开始使用“的修”工单管理系统&#xff0c;这是一款企业管理软件&#xff0c;可以帮助管理员用户针对不同的机构、单位以及外部客户的需求来选择性地管理、维护及追踪各种各样的问题和请求&#xff0c;也可用作公司内部员工工作上的…

人员闯入检测告警算法

人员闯入检测告警算法通过yolov5网络模型识别检测算法&#xff0c;人员闯入检测告警算法对未经许可或非法进入的人员进行及时识别告警&#xff0c;确保对危险区域的安全管理和保护。YOLO系列算法是一类典型的one-stage目标检测算法&#xff0c;其利用anchor box将分类与目标定位…