网页上的元素辣么多,我该用什么办法让它们排列整齐、间距合理呢。常干家务的朋友们就容易理解了,用收纳盒呀!

所以用CSS做网页布局就涉及一个盒子的概念,简单理解,我们可以把页面上的所有HTML元素看作一个个的盒子,网页上所展示出来的具体内容,如:文字、图片等都可以理解为内容,是放在盒子里面的东西。

这些装着内容的盒子排列在网页上,盒子与盒子存在着一定的间隙,我们称为外边距,

每个盒子都有边框,每条边框都可以设置自己的样式,边框与内容之间也可以存在一定的间隙,我们称为内边距。

外边距、边框、内边距按顺时针方向又都可以分为上、右、下、左四个部分,注意,这四个部分我们都是可以单独设置其样式的哟!

有图有真相,下图:

由上述可知,盒子由外到内可以列出以下四个属性:

♐外边距margin和内边距padding

外边距margin和内边距padding以边框为分界线,它们分四个方向可以分别设置四个不同的值,按顺时针方向分别是上、右、下、左,如下:

【WEB基础】HTML & CSS 基础入门(9)CSS盒子的更多相关文章

  1. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  2. 【WEB基础】HTML & CSS 基础入门(4)列表及其样式

    前面 网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...

  3. 【WEB基础】HTML & CSS 基础入门(3)段落及文本

    写在前面:CSS选择器 网页要显示很多内容,想要为每个内容设置不同的样式,我们就得首先选中要设置样式的内容,CSS选择器就是指明该样式是针对HTML里哪一个元素的.简单的例子,网页上有几段文字,我们想 ...

  4. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  5. 第五模块:WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  6. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  7. HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  8. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  9. h5 . css入门 2.CSS基础

    CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...

  10. Web学习篇之---css基础知识(一)

    css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...

随机推荐

  1. 【转】 Pro Android学习笔记(二八):用户界面和控制(16):GridLayout

    网格布局:GridLayout 我个人觉得GridLayout的设计还不很完善,每个网格的大小,由填充的cell决定,即默认是wrap很容易整个GridLayout超出屏幕.下面是一个例子: < ...

  2. vue 给嵌套的iframe子页面传数据 postMessage

    Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...

  3. mybatis 学习二 conf xml 配置信息

    xml映射配置文件      这个xml文件主要包括一下节点信息      * properties 属性      * settings 设置      * typeAliases 类型命名     ...

  4. ASP.NET Core 中文文档 第四章 MVC(2.2)模型验证【转载】

    http://www.cnblogs.com/dotNETCoreSG/p/aspnetcore-4_2_2-validation.html 介绍模型验证 在一个应用程序将数据存储到数据库之前,这个应 ...

  5. 关于surf显示立体图,可视化分析数据

    如果想判断一个点(x,y)对应的ZV值是否在平面上方.平面上.平面下方,只要将(x,y)带入方程,得到z. 如果ZV大于>Z,则在平面上方:如果ZV<Z,则在方面下方:若ZV=Z,则在平面 ...

  6. 基于OpenCV之视频读取,处理和显示框架的搭建(一)

    主要包括以下内容: 1.使用的主要函数的说明. 2.两个实例:视频读取和显示.搭建视频读取和处理框架,调用canny函数提取边缘并显示. 3.一些注意事项和代码说明. 一.使用的主要函数 1.延时函数 ...

  7. spring----IOC注解方式以及AOP

    技术分析之Spring框架的IOC功能之注解的方式 Spring框架的IOC之注解方式的快速入门 1. 步骤一:导入注解开发所有需要的jar包 * 引入IOC容器必须的6个jar包 * 多引入一个:S ...

  8. 笔试题: 数据库 已看1 一些关键的sql语句练习 和选择题 有用 sql语句练习 挺好

    一.     选择题 1.SQL语言是( C )语言. A.层次数据库 B.网络数据库 C.关系数据库 D.非数据库     redis 是 3.如果在where子句中有两个条件要同时满足,应该用哪个 ...

  9. 介绍两款常用的“图表统计图"的插件

    一.相信朋友们在开发的过程中都会使用到“数据统计”的功能,图表的统计更为直观,在这里就介绍两款插件:fusionChart.DataVisualization. 1.fusionChart实际项目中用 ...

  10. 支持Mono的盘古分词(PanGu)

    不废话,直接上下载地址http://files.cnblogs.com/files/RainbowInTheSky/PanGu.rar 群友在做项目移植到Mono+jexus上时遇到了问题,盘古分词无 ...