EasyClick Html UI 第十四节 CSS 盒子模型
EasyClick Html UI 第十四节 CSS 盒子模型
CSS 盒子模型(Box Model)
所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。
盒子模型示意图如下图所示：
盒子模型相关样式属性
- 盒子的内容宽度(
width)，注意：不是盒子的宽度 - 盒子的内容高度(
height)，注意：不是盒子的高度 - 盒子的边框(
border) - 盒子内的内容和边框之间的间距(
padding) - 盒子与盒子之间的间距(
margin)
设置宽高
设置盒子的宽高，此宽高是指盒子内容的宽高，不是盒子整体宽高
width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
设置边框
设置一边的边框，比如顶部边框，可以按照如下代码设置：
border-top:10px solid red;
说明：其中10px表示线框的粗细；solid表示线性；red表示边框的颜色。
设置其它三个边的方法和上面一样，把上面的top换成left就是设置左边，换成right就是设置右边，换成bottom就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句：
border:10px solid red;
设置内间距 padding
设置盒子四边的内间距，可按如下代码设置：
padding-top：20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */
上面的设置可以简写如下：
padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左
四个方向的内边距值。 */
padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
padding：20px; /* 设置四边内边距为20px */
设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding‘换成’margin'就是外边距设置方法。
盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：
- 盒子宽度 =
width+padding左右 +border左右 - 盒子高度 =
height+padding上下 +border上下
总结
- 盒子模型的5个主要样式属性
width：内容的宽度(不是盒子的宽度)
height：内容的高度(不是盒子的高度)
padding：内边距。
border：边框。
margin：外边距
- 盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响，不会受到外边距属性的影响。
交流QQ群：620028786，647082990，772810035
————————————————— 版权声明—————————————-————
版权所有~Mr-老鬼 ~转载请注明原文地址
免责声明：本文所有的教程仅限交流学习使用不得用于违法用途，造成的法律后果本人不承担责任。
EasyClick Html UI 第十四节 CSS 盒子模型相关推荐
- 风炫安全WEB安全学习第四十四节课 敏感信息泄漏
第四十四节课 敏感信息泄漏 敏感信息泄漏 0x01 漏洞简介 敏感数据包括但不限于:口令.密钥.证书.会话标识.License.隐私数据(如短消息的内容).授权凭据.个人数据(如姓名.住址.电话等)等 ...
- Python编程基础：第五十四节 排序Sort
第五十四节 排序Sort 前言 实践 前言 我们常需要对列表.元组中的元素进行排序,例如按照字母表排列学生的名称.这里就需要用到列表的sort()方法,以及sorted()函数. 实践 我们先来构建一 ...
- Python编程基础：第四十四节 方法重写Method Overriding
第四十四节 方法重写Method Overriding 前言 实践 前言 我们前面说了,子类继承于父类,可以调用父类的所有属性和方法.那么如果我们想在继承的过程中重新书写父类的某些方法,此时就用到了方 ...
- Python编程基础：第三十四节 文件移动Move a File
第三十四节 文件移动Move a File 前言 实践 前言 当我们需要将一个文件/文件夹移动到另一个指定路径时,就需要用到shutil.move()函数,该函数需要指定两个参数shutil.move ...
- Python编程基础：第二十四节 作用域Scope
第二十四节 作用域Scope 前言 实践 前言 在Python中每一个变量都有其自己的生命周期,我们一般将变量分为全局变量与局部变量,全局变量是指在整个代码内部都可以访问到的变量,局部变量是指只有在函 ...
- Python编程基础：第十四节 列表Lists
第十四节 列表Lists 前言 实践 前言 列表是一种非常常用的数据结构.我们可以用它来存储各种类型的数据. 实践 我们先来创建一个名为food的列表,里面存储了一系列我喜欢的食物名称: food = ...
- matlab练习_MATLAB教程-台大郭彦甫-第十四节，含练习答案
14-回归与内插 一.Polynomial curve fitting(多项式曲线拟合) (一)Simple Linear Regression(简单线性回归) 1.A bunch of data p ...
- 大白话5分钟带你走进人工智能-第二十四节决策树系列之分裂流程和Gini系数评估(3)...
第二十四节决策树系列之分裂流程和Gini系数评估(3) 上一节中我们讲解了决策树的数学表达形式,本节的话我们讲解决策树的分裂流程以及分裂条件的评估.我们基于决策树的递归表达式上: ...
- 第十四节 OSAL工作原理
第十四节 OSAL工作原理 蓝牙为了实现同多个设备相连,或实现多功能,也实现了功能扩充,这就产生了调度问题.因为,虽然软件和协议栈可扩充,但终究最底层的执行部门只有一个.为了实现多事件和多任 ...
- 大白话5分钟带你走进人工智能-第十四节过拟合解决手段L1和L2正则
第十四节过拟合解决手段L1和L2正则 第十三节中,我们讲解了过拟合的情 ...
最新文章
- 《JavaScript DOM 编程艺术》 读书笔记
- Java常用工具类---IP工具类、File文件工具类
- [C++11]自动类型推导auto
- js中 json详解
- 计算机课是一体化教学吗,计算机基础课程理实一体化教学模式
- mysql 账户管理_Mysql账户管理原理与实现方法详解
- c语言指针f32*,还没搞懂C语言指针？这里有最详细的纯干货讲解（附代码）
- 转电感和磁珠两兄弟的差别
- DateFormat与SimpleDateFormat区别和使用详解
- 甘肃银行借助HDIM打造综合数据保护平台
- 元宇宙游戏控制这几个因素，正确姿势解锁元宇宙游戏开发盈利痛点
- Servlet 中的四大作用域
- 错误：类 SubClass 是公共的, 应在名为 SubClass.java 的文件中声明
- Python逐行读取tsv文件
- C++ Reference: Standard C++ Library reference: C Library: cmath: cosh
- 十个相似图片搜索网站（以图找图）
- 解决markdown图片存储位置的问题
- 夜神模拟器如何把模拟器里的文件拷出来呢 亲测
- http://www.cnblogs.com/zyw-205520/p/4771253.html
- 第七章（1.2）图像处理——人脸识别技术发展及实用方案设计