CSS边距---盒子模型
CSS盒子模型
盒子模型主要是有margin(外边距)、border(边框)、padding(内边距)、content(内容)组成,这些属性我们可以把它转移到我们日常生活中的盒子上来理解,日常生活中所见的盒子也就是装东西的箱子,也具有这些属性,所以叫它盒子模型
其中content(内容)又可以有两个元素width(宽)和height(高)
CSS边框样式
可以使用border-style来设置边框的样式,也可以分别来设置上下左右的样式:
border-top-style
border-left-style
border-right-style
border-bottom-style
边框样式有很多种,可以定义很多,比如单边框,虚线的边框,实线的边框,双边框,还有没有边框的边框。
分别都可以用border-style属性的上下左右后面接上,下表的值
值 | 描述 |
none | 定义无边框 |
hidden | 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
<!DOCTYPE html> <html><head><title>测试内边距</title><meta charset="utf-8"><!-- 调用CSS样式表 --><style type="text/css">p.none{border-style: none;}/*设置无边的边框*/p.dotted {border-style: dotted}/*设置点状边框*/p.dashed {border-style: dashed}/*设置虚线边框*/p.solid {border-style: solid}/*设置实线边框*/p.double {border-style: double}/*设置双线边框*/ p.groove {border-style: groove}/*设置3D凹槽边框*/ p.ridge {border-style: ridge}/*设置3D垄状边框*/p.inset {border-style: inset}/*设置3D inset 边框*/p.outset {border-style: outset}/*设置3D outset 边框*/</style></head><body><p class="none">我没有边框</p><p class="dotted">点状边框</p><p class="dashed">虚线边框</p><p class="solid">实线边框</p><p class="double">双线边框</p><p class="groove">3D凹槽边框</p><p class="ridge">3D 垄状边框</p><p class="inset">3D inset 边框</p><p class="outset"> 3D outset 边框</p></body> </html>
CSS边框宽度与高度
边框宽度
边框宽度是通过border-width来定义的,可以分别设置上下左右4个属性
border-top-width
border-bottom-width
border-left-width
border-right-width
边框颜色
边框宽度是通过border-color来定义的,同样也可以分别设置上下左右4个属性
border-top-color
border-bottom-color
border-left-color
border-right-color
<!DOCTYPE html> <html><head><title>测试内边距</title><meta charset="utf-8"><!-- 调用CSS样式表 --><style type="text/css">/*定义p标签,是实线边框*/p {border-style: solid;}.all {/*定义所有边框宽度为5像素*/border-width: 5px; /*定义所有边框是颜色为橙色*/border-color: #FF8000}.top {/*定义上边框宽度为5像素*/border-top-width: 5px; /*定义上边框是颜色为橙色*/border-top-color: #FF8000}.bottom {/*定义下边框宽度为5像素*/border-bottom-width: 5px; /*定义下边框是颜色为橙色*/border-bottom-color: #FF8000}.left {/*定义左边框宽度为5像素*/border-left-width: 5px; /*定义左边框是颜色为橙色*/border-left-color: #FF8000}.right {/*定义右边框宽度为5像素*/border-right-width: 5px; /*定义右边框是颜色为橙色*/border-right-color: #FF8000}</style></head><body><p class="all">我是设置所有边框的</p><p class="top">我只负责上面</p><p class="bottom">我负责下面</p><p class="left">我设置的是左边</p><p class="right">我设置的是右边</p></body> </html>
CSS3边框:
border-radius: 圆角边框
圆角边框后面设置值,边框就会变得有弧度了。
box-shadow: 边框阴影
边框阴影有几个很有意思的值,还可以设置内阴影,外阴影,阴影颜色,阴影位置什么的。见下表:
值 | 描述 |
h-shadow | 必须。水平阴影的位置。允许负值 |
v-shadow | 必须。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的尺寸 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影(outset)改为内部阴影 |
<!DOCTYPE html> <html><head><title>测试内边距</title><meta charset="utf-8"><!-- 调用CSS样式表 --><style type="text/css">.divtest {/*定义颜色为橙色*/background-color: #FF8000;width: 300px;height: 300px;/*设置圆角为20像数*/border-radius: 20px;/*第1个值是阴影向右移动5个像数第2个值是阴影向下移动5个像数第3个值是阴影模糊度的属性第4个值是阴影的颜色,我设置是黑色默认是外部阴影,所以我没有设置outset*/box-shadow: 5px 5px 5px black;}</style></head><body><div class="divtest"></div></body> </html>
CSS内边距
内边距是在内容外、边框内,内边距的属性有5个,其中padding是设置所有的边距,其他4个则分别设置上下左右的边距。
属性 | 描述 |
padding | 设置所有的边距 |
padding-top | 设置上边距 |
padding-bottom | 设置下边距 |
padding-left | 设置左边距 |
padding-right | 设置右边距 |
下面HTML分别设置padding所有属性的样式:
<!DOCTYPE html> <html><head><title>测试内边距</title><meta charset="utf-8"><!-- 调用CSS样式表 --><style type="text/css"> #all{padding: 100px;}/*设置所有内边距*/ #top{padding-top: 100px;}/*设置上面的内边距*/ #bottom{padding-bottom: 100px;}/*设置下面的内边距*/ #left{padding-left: 100px;}/*设置左边的内边距*/#right{padding-right: 100px;}/*设置右边的内边距*/</style></head><body><table border="1"><tr><td id="top">我是padding-top,我设置了上边距</td></tr></table><br /><table border="1"><tr><td id="bottom">我是padding-bottom,我设置了下边距</td></tr></table><br /><table border="1"><tr><td id="left">我是padding-left,我设置了左边距</td></tr></table><br /><table border="1"><tr><td id="right">我是padding-right,我设置了右边距</td></tr></table><table border="1"><tr><td id="all">我是padding,我设置了所有内边距</td></tr></table></body> </html>
CSS外边距
围绕在内容边框的区域就是外边距,外边距默认为透明区域,外边距接受任何长度的单位、百分数。
外边距常用属性:
属性 | 描述 |
margin | 设置所有边距 |
margin-top | 设置上边距 |
margin-bottom | 设置下边距 |
margin-left | 设置左边距 |
margin-right | 设置右边距 |
外边距也有上下左右4个属性,就不一一列出来了,因为下边和右边的显示不太明显,如果有需要,可以根据上表来调边距
<!DOCTYPE html> <html><head><title>测试内边距</title><meta charset="utf-8"><!-- 调用CSS样式表 --><style type="text/css">.divtest {/*定义颜色为橙色*/background-color: #FF8000;width: 100px;height: 100px;/*设置圆角为20像数*/border-radius: 20px;/*第1个值是阴影向右移动5个像数第2个值是阴影向下移动5个像数第3个值是阴影模糊度的属性第4个值是阴影的颜色,我设置是黑色默认是外部阴影,所以我没有设置outset*/box-shadow: 5px 5px 5px black;/*设置所有边距为100像数*/ margin: 100px}</style></head><body><div class="divtest"></div></body> </html>
转载于:https://www.cnblogs.com/yyhh/p/4222567.html
CSS边距---盒子模型相关推荐
- CSS学习之盒子模型
1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
- CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 外边距 属性设置 块级盒子水平居中 文字居中以及盒子居中 插入图片和背景图片的区别 清除元素的默认内外边距 外边距合并(只存在垂 ...
- CSS基础(part11)--盒子模型之内边距
学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 内边距(padding) 属性设置 内盒尺寸计算 padding什么时候不影响盒子大小 盒子模型 内边距(padding) pa ...
- CSS选择器、盒子模型及布局
一.CSS的简介 Cascading Style Sheets:层叠样式表 可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能. 将网页内容和显示样式进行了 ...
- 三、CSS重要的盒子模型知识总结(中篇)
@Author:Runsen CSS知识总结(上) 继续上篇文章,总结css 今天一篇全讲重要的盒子模型 文章目录 边框属性 什么边框? 边框属性的格式 连写(分别设置四条边的边框) 内边距 什么是内 ...
- CSS基础(part10)--盒子模型之边框
学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 盒子模型简介 边框(border) 边框属性 举个例子 边框综合设置 盒子边框写法总结表 边框重叠设置 盒子模型 盒子模型简介 ...
- CSS布局(二) 盒子模型属性
盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...
- (9)css常用样式--盒子模型
一.CSS盒子模型介绍 盒子模型又叫框模型,包含了五个用来描述盒子位置.尺寸的属性,分别是宽度 width.高度 height.内边距 padding. 边框 border.外边距 margin. ...
- CSS Box Model 盒子模型
1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...
最新文章
- AJAX 请求真的不安全么?
- java本地方法封装库_JNA-Java本地方法封装库
- “乘客迟到5分钟,滴滴司机无责取消订单”是一个好策略吗?
- mysql左键关联_MySQL的:左键删除重复列加入,3个表
- SystemC 代码添加和测试方法
- Python操作文件和目录
- PIE SDK矢量数据编辑的撤销和回退
- 手机 modem开发(19)---LTE注网总体流程
- python 简单的接口测试框架
- html动态创建table不成功的一个问题
- 区块链性能测试工具Hyperbench详解
- 邮件html签名手机电脑不一致,HTML电子邮件签名不能在iPhone上正确渲染
- 用单片机的RAM虚拟U盘(文件系统:Fat16)
- 微信小程序显示当前时间
- 关于电脑版/PC微信如何恢复聊天记录【实践可行】
- 6月13日木叶下向量
- 虚拟机(VM)与JVM
- linux 查看内存地址 rw,如何查看Linux内存中的程序所有堆的地址
- ABB 120 六轴机械手臂编程调试(三)
- 流畅的python 对象引用 可变性和垃圾回收
热门文章
- 64位win10系统无法安装.Net framework3.5的两种解决方法【转】
- Linux中Mysql root用户看不到mysql库问题解决方式
- 解决Linux下pcieport 0000:00:1c.5问题导致的系统根目录/磁盘空间不足
- 解决select2在bootstrap的modal中默认不显示的问题
- Win11未安装Defender怎么办?解决Win11未安装Defender的方法
- win11资源管理器卡顿怎么办 Windows11解决资源管理器卡顿的步骤方法
- Nginx安装手册,反向代理,负载均衡,keepalived高可用
- AT指令:AT+CMGF
- oracle 天转换成月函数_oracle中to_date详细用法示例(oracle日期格式转换)
- 粘性定位(HTML、CSS)