css(五)盒子模型
盒子模型
边框属性
边框宽度:border-width
边框颜色:border-color
边框样式:border-style
4个方向来表示(上下左右)
设置元素边框宽度
border-width:thin | medium | thick |长度值
边框颜色
border-color:颜色
边框样式
border-style:值 | none | hidden
padding
padding为内边距属性,设置元素的内容与内 边框之间的距离(内边距或填充),分四个方向(上、右、下、左)
padding-top:长度值 | 百分比
padding-right:长度值 | 百分比
padding-bottom:长度值 | 百分比
padding-left:长度值 | 百分比
注意:值不能为负数
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{width: 100px;height: 100px; border: 1px red solid} </style> </head> <body> <div>测试</div> </body> </html>
上面的代码效果是一个100*100的边框,测试两个字在左上角,如果我们想让文字距离顶部20px,就可以加上padding-top
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{width: 100px;height: 100px; border: 1px red solid; padding-top: 20px; } </style> </head> <body> <div>测试</div> </body> </html>
说明,因为加了内填充padding-top: 20px,所以之前的100*100的边框的高度就变为了120,宽度还是100
如果想距离左边30px,就可以加上padding-left
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{width: 100px;height: 100px; border: 1px red solid; padding-top: 20px; padding-left: 30px; } </style> </head> <body> <div>测试</div> </body> </html>
说明:边框的宽度增加了30px
如果要给内容的上下左右都增加padding,我们可以简写‘
padding:值1; 4个方向都为值1
padding:值1值2; 上下=值1,左右=值2
padding:值1值2值3; 上=值1,左右=值2,下=值3
padding:值1值2值3值4: 上=值1,右=值2,下=值3,左=值2
margin
margin为内边距属性,设置元素与元素之间的距离(外边距),分四个方向(上、右、下、左)
margin-top:长度值 | 百分比 | auto
margin-right:长度值 | 百分比 | auto
margin-bottom:长度值 | 百分比 | auto
margin-left:长度值 | 百分比 | auto
说明:值可为负值
margin:值1; 4个方向都为值1 margin:值1值2; 上下=值1,左右=值2 margin:值1值2值3; 上=值1,左右=值2,下=值3 margin:值1值2值3值4: 上=值1,右=值2,下=值3,左=值2
外边距属性
默认情况下,相应HTML块级元素存在外边距
body、h1~h6、p......
声明margin属性,覆盖默认样式
body,h1,h6,p{margin:0;}
margin值为auto,实现水平方向居中显示,由浏览器计算外边距
垂直方向,两个相邻元素都设置外边距,外边距会发生合并,合并后外边距高度=两个发生合并外边距的高度中的最大值
盒子模型的计算
在CSS中,width和height指的是内容区域的宽度和高度
增加内边距,边框,和外边距不会影响内容区域的尺寸,但会增加元素框的总尺寸
display属性
inline:元素将显示为内联元素,元素前后没有换行符
block:元素将显示为块级元素,元素前后会带有换行符
inline-block:行内块元素,元素呈现为inline,具有block相应特性
none:此元素不会被显示
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{color: red;} span{display: none} div:hover span{display: inline} </style> </head> <body> <div href="#">指我。。。 <span > 捉迷藏。。。 </span> </div> </body> </html>
1.相应内联元素及使用 display: inline设置成内联元素的元素width和 height属性无效。
水平方向 margin-left/ margin- right/ padding-left / padding-right有效
垂直方向 margin-top/ margin- bottom/ padding-top/padding- bottom无效
2.块级元素及使用 display: block设置成块级元素的元素width/ height/ margin/ padding属性都生效
原文地址:https://www.cnblogs.com/zouzou-busy/p/11032912.html
- JavaWeb(六)之MVC与三层架构设计
- 纸上谈兵: 最短路径与贪婪
- Java魔法堂:枚举类型详解
- 机器学习笔记(5):多类逻辑回归-手动添加隐藏层
- JavaWeb(五)之JSTL标签库
- spring cloud:Edgware.RELEASE版本中zuul回退方法的变化
- js中几种实用的跨域方法原理详解
- spring cloud:Edgware.RELEASE版本hystrix超时新坑
- JS魔法堂:再识ASCII实体、符号实体和字符实体
- MyBatis之传入参数——parameterType
- 被解放的姜戈07 马不停蹄
- 机器学习笔记(6):多类逻辑回归-使用gluon
- JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性
- JavaWeb(四)EL表达式
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- [Hei.Captcha] Asp.Net Core 跨平台图形验证码实现
- Asp.Net Core 3.1 获取不到Post、Put请求的内容 System.NotSupportedException Specified method is not supported
- OpenGL ES for Android 播放视频
- Centos 7 在线安装 离线安装 最新 Docker-compose 的正确姿势 实践笔记
- OpenGL ES for Android 视频缩放、旋转、平移
- OpenGL ES for Android 相机预览
- OpenGL ES for Android 相机预览适配不同分辨率的手机
- Flutter Widgets 之 Container
- Flutter Widgets 之 Row和Column
- Flutter Widgets 之 SafeArea
- Flutter Widgets 之 Wrap
- Flutter Widgets 之 Expanded和Flexible
- 可能是Asp.net Core On host、 docker、kubernetes(K8s) 配置读取的最佳实践
- Flutter Widgets 之 AnimatedContainer
- Flutter Widgets 之 Opacity 和AnimatedOpacity