一、盒子模型练习

我们有个需求：

创建两个盒子，大盒子嵌套一个小盒子，大盒子是红色的，小盒子是蓝色的，并且小盒子在大盒子中是居中的。

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.  
  7.     <meta charset="UTF-8">
  8.  
  9.     <title>Title</title>
  10.  
  11.     <style>
  12.  
  13.         .big{
  14.  
  15.             width:500px;
  16.  
  17.             height: 500px;
  18.  
  19.             background-color: red;
  20.  
  21.             box-sizing: border-box;
  22.  
  23.             border:1px solid;
  24.  
  25.         }
  26.  
  27.         .small{
  28.  
  29.             width:300px;
  30.  
  31.             height:300px;
  32.  
  33.             background-color: blue;
  34.  
  35.             /*margin-left:100px;*/
  36.  
  37.             /*margin-top:100px;*/
  38.  
  39.             margin:100px auto;/*这样写是等价于上面两个语句，这种方法就是让我们的小盒子居中
  40.  
  41.             /*注意点：如果两个盒子是嵌套关系，设置里面的盒子，外边距的话，外面的盒子也会顶下来
  42.  
  43.             解决方法：在外面的大盒子中添加一个border属性，因此在企业开发中，一般情况下入伏哦需要控制嵌套关系盒子的举例，
  44.  
  45.             应该首先考虑padding，其次在考虑margin,因为margin本质上是用于控制兄弟关系之间的间隙的，*/
  46.  
  47. ​
  48.  
  49.         }
  50.  
  51. </style>
  52.  
  53. </head>
  54.  
  55. <body>
  56.  
  57. <div class="big">
  58.  
  59.     <div class="small"></div>
  60.  
  61. </div>
  62.  
  63. </body>
  64.  
  65. </html>

注意点：

（1）

注意点：如果两个盒子是嵌套关系，设置里面的盒子的外边距的话，外面的

盒子也会顶下来 ，即：仅有属性：

margin-left:100px;

margin-top:100px;

 
   

解决方法：在外面的大盒子中添加一个border属性，因此在企业开发中，一般情况下如果需要控制嵌套关系盒子的距离，应该首先考虑padding，其次在考虑margin,因为margin本质上是用于控制兄弟关系之间的间隙的

（2）我们看到一个新的属性值

margin:100px auto

这个前面是距离，后面auto就会将小盒子进行居中，如果写成：margin:0 auto.那么只会在水平方向上进行居中，因此我们要计算好距离像素，写到属性值中。

二、text-align:center和margin:0 auto之间的区别

1.text-align:center;作用：设置盒子中的存储的文字/图片水平居中。

2.margin:0 auto;作用：让盒子自己水平居中。

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.  
  7.     <meta charset="UTF-8">
  8.  
  9.     <title>d116_box_center_and_content_center</title>
  10.  
  11.     <style>
  12.  
  13.         .father{
  14.  
  15.             width:800px;
  16.  
  17.             height:500px;
  18.  
  19.             background-color:red;
  20.  
  21.             text-align: center;
  22.  
  23.             margin: 0 auto;
  24.  
  25.         }
  26.  
  27.         .son{
  28.  
  29.             width:100px;
  30.  
  31.             height:100px;
  32.  
  33.             background-color: blue;
  34.  
  35.             margin: 0 auto;
  36.  
  37.         }
  38.  
  39. </style>
  40.  
  41. </head>
  42.  
  43. <body>
  44.  
  45. <div class="father">
  46.  
  47.     我是一个文字
  48.  
  49.     <br>
  50.  
  51.     <img src="data:image/example1.jpg" alt="">
  52.  
  53.     <div class="son">
  54.  
  55. ​
  56.  
  57.     </div>
  58.  
  59. </div>
  60.  
  61. </body>
  62.  
  63. </html>

三、源码：

d115_box_in_the_center.html

d116_box_center_and_content_center.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/d115_box_in_the_center.html

https://github.com/ruigege66/HTML_learning/blob/master/d116_box_center_and_content_center.html​

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载41-水平居中的注意点、盒子居中和内容居中的更多相关文章

  1. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  2. 如何将一个div盒子水平垂直都居中？

    html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...

  3. div盒子或者图片并排居中

    要使div总是找不到原因居中很简单,float和display都可以实现,float就不说了,这里说一下display:line-block,比如四个或者多个div盒子,明明设置好了宽度后,总有一个上 ...

  4. css - inline-block 盒子下的内容文字错位问题

    参考资料: “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落.错位”的原因及解决方法: 正文: 场景:两个 div 排在一行上,各有固定宽高, ...

  5. 小程序一个大盒子里面的盒子内容居中对其显示wxss写法

    对小程序研究感兴趣的可加(交流QQ群:604788754)入群联系群主可得到小程序教学资源. 这个案例只是想展示效果,内容部分未进行for循环绑定处理: WXML: <view class=&q ...

  6. 盒子绝对定位 position:foxed ; 居中

    方法1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  7. 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  8. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  9. 前端CSS技术全解（二）

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52813761 本文出自:[余志强的博客] 一.CSS三大特性 1)继 ...

随机推荐

  1. LeetCode刷题191121

    博主渣渣一枚,刷刷leetcode给自己瞅瞅,大神们由更好方法还望不吝赐教.题目及解法来自于力扣(LeetCode),传送门. 数据库: 编写一个 SQL 查询,来删除 Person 表中所有重复的电 ...

  2. 48-创建 overlay 网络

    上一节我们搭建好实验环境,配置并运行了consul,今天开始创建 overlay 网络. 在 host1 中创建 overlay 网络 ov_net1: -d overlay 指定 driver 为 ...

  3. MySQL数据库～～～～pymysql 连接 MySQL的客户端

    import pymysql conn = pymysql.connect( host = '127.0.0.1', # 主机 port = 3306, # 端口号 user = 'root', # ...

  4. 并发编程~~~协程~~~greenlet模块, gevent模块

    一 协程 1. 协程: 单线程下的并发,又称微线程,纤程.协程是一种用户态的轻量级线程,即协程是由用户程序自己控制调度的. 并发真正的核心: 切换并且保持状态. 开启协程并发的执行,自己的程序把控着C ...

  5. diango中的MTV——FBV/CBV以及装饰器的复用问题解决

    MVC M: model 模型 与数据库交互 V: view 视图 HTML C:controller 控制器 流程 和 业务逻辑 MTV M:model ORM T:template 模板 HTML ...

  6. Django实现标签联动以及xadmin中实现标签联动

    如图,即实现点击一个城市,出现对应的学校名称.开始一直以为是建立数据表的时候实现的,原来是通过ajax实现的. 思路:当get请求显示原始状态(即下拉框呈现全部内容).当点击一个城市后,通过ajax的 ...

  7. [C]链接和生存周期

    链接和生存周期的区别: 链接是标识符的属性: 生存周期是对象的属性: 链接可以是外部(external),内部(internal)或没有(none): 生存周期可以是自动的.静态的,或已分配的(all ...

  8. 第04组 Beta冲刺（1/4）

    队名:斗地组 组长博客:地址 作业博客:Beta冲刺(1/4) 各组员情况 林涛(组长) 过去两天完成了哪些任务: 1.分配展示任务 2.收集各个组员的进度 3.写博客 展示GitHub当日代码/文档 ...

  9. Python爬虫的概括以及实战

    第一章主要讲解爬虫相关的知识如:http.网页.爬虫法律等,让大家对爬虫有了一个比较完善的了解和一些题外的知识点.​ 今天这篇文章将是我们第二章的第一篇,我们从今天开始就正式进入实战阶段,后面将会有更 ...

  10. sublime插件开发教程3

    今天就看下api的使用方法 中文的api文档 https://mux.alimama.com/posts/549.html#sublime.View sublime模块 方法 返回值 描述 set_t ...