一、盒子模型练习

我们有个需求：

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .big{

            width:500px;

            height: 500px;

            background-color: red;

            box-sizing: border-box;

            border:1px solid;

        }

        .small{

            width:300px;

            height:300px;

            background-color: blue;

            /*margin-left:100px;*/

            /*margin-top:100px;*/

            margin:100px auto;/*这样写是等价于上面两个语句，这种方法就是让我们的小盒子居中

            /*注意点：如果两个盒子是嵌套关系，设置里面的盒子，外边距的话，外面的盒子也会顶下来

            解决方法：在外面的大盒子中添加一个border属性，因此在企业开发中，一般情况下入伏哦需要控制嵌套关系盒子的举例，

            应该首先考虑padding，其次在考虑margin,因为margin本质上是用于控制兄弟关系之间的间隙的，*/

​

        }

</style>

</head>

<body>

<div class="big">

    <div class="small"></div>

</div>

</body>

</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;作用：让盒子自己水平居中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>d116_box_center_and_content_center</title>

    <style>

        .father{

            width:800px;

            height:500px;

            background-color:red;

            text-align: center;

            margin: 0 auto;

        }

        .son{

            width:100px;

            height:100px;

            background-color: blue;

            margin: 0 auto;

        }

</style>

</head>

<body>

<div class="father">

    我是一个文字

    <br>

    <img src="data:image/example1.jpg" alt="">

    <div class="son">

​

    </div>

</div>

</body>

</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. 基于django中间件的编程思想

    目录 前言 前期准备 importlib模块介绍 基于django中间件的编程思想 django中settings源码 配置文件的插拔式设计 基于django中间件的思想,实现功能配置 前言 在学习d ...

  2. 关于在Arduino下STM32编程——RTC函数解析

    注意:相关RTC基础知识这里不提! 该库头文件引用: #include <RTClock.h>   该库所在Arduino位置: 初始化RTC相关时钟 Arduino版的库里初始化配置PW ...

  3. reduce方法实现累加累乘的方式

    reduce函数对参数序列中的值进行积累,第二个参数可以为:str,tuple,list,代码示例如下: from functools import reduce#实现列表内的所有数的累加,即第一步x ...

  4. 如何清除Mac上的空间，让Mac更有效地运行

    清理Mac上的空间通常被认为是一件必须要做的事情.因为这样,Mac将在驱动器上具有更多可用空间,从而可以更好地运行,并且您(以及系统和各种应用程序)可以根据需要利用额外的空间. 您可能会问的一个问题是 ...

  5. [译]Vulkan教程(31)加载模型

    [译]Vulkan教程(31)加载模型 Loading models 加载模型 Introduction 入门 Your program is now ready to render textured ...

  6. Java的BIO和NIO很难懂？用代码实践给你看，再不懂我转行！

    本文原题“从实践角度重新理解BIO和NIO”,原文由Object分享,为了更好的内容表现力,收录时有改动. 1.引言 这段时间自己在看一些Java中BIO和NIO之类的东西,也看了很多博客,发现各种关 ...

  7. abp去掉AbpUser中的Name,Surname，去掉姓和名分离

    abp是国外的框架,默认的框架中的AbpUser表中的Name和Surname是分开的,这不符合国情:可以先去掉 1. 在User类中重写Name和Surname,并设置为私有 2. 在DbConte ...

  8. Sql sever DateDiff 函数

    函数: DATEDIFF(datepart,startdate,enddate) 具体实例: --相差年数 结果0 SELECT DATEDIFF(yy,'2008-12-29','2008-12-1 ...

  9. PlayJava Day019

    今日所学: /* 2019.08.19开始学习,此为补档. */ 1.this: ①this是成员方法的一个特殊的固有的本地变量,它表达了调用这个方法的那个对象. ②在成员方法内部直接调用自己(thi ...

  10. css3动画如何解决动画的播放、暂停和重新开始

    0921自我总结 css3如何解决动画的播放.暂停和重新开始 一.解决的本质思路 播放的解决思路 先定义好动画效果通过类名的增加达到样式的出现 暂停的解决思路 我们播放动画时,如要暂停动画,就要用到a ...