盒子概述

以下是盒子模型的一个图形解释

一、内边距（填充）

属性有： (1) padding  设置所有内边距

(2) padding-top  设置上边距

(3) padding-left 设置左边距

(4) padding-right 设置右边距

(5) padding-bottom 设置底边距

如果在设置时：

padding：100px    这代表四个边距都为100px。

内边距例子：

首先我们设置一个div

.neibianju {

width:50px;

height:30px;

background:red;

}

<div class="neibianju">

内边距

</div>

效果如下：

（6）加入左内边距

.neibianju {

width:50px;

height:30px;

background:red;

  padding-left:100px;

}

然后我们在通过"开发者选项(F12)"查看，在左边增加了100px的内边距

其他边距同理

 

二、边框

同样使用上边的代码

.neibianju {

width:50px;

height:30px;

background:red;

padding:100px;

 border:5px solid blue;

}

border：边框

5px: 边框宽度为5像素。

solid: 边框为实线

blue：边框颜色为蓝色

下过如下图：

边框为蓝色的

三、外边距属性：margin

控制块与块之间的距离

（1）上下外边距会重叠

比如：上边的块距离下边的块30px，下边的块距离上边的块也30px。结果他们之间的距离不会变成60，还是30px。

例子：

<divstyle="width:300px;height:100px;background:red;margin-bottom:30px"></div>

<divstyle="width:200px;height:100px;background:yellow;margin-top:30px"></div>

（2）div能够实现嵌套，但是子div的margin-top的属性值会传递给父级div。效果就是子盒子不会离父盒子有30px。而是他们俩同时向下移动30px.

 可以使用内边距离是子盒子向下移动

  注意：尽量少使用外边距

 

例子：.a {

width:600px;

height:300px;

background:aqua;

          border:1px solid aqua;                         

}

.b {

width:100px;

height:100px;

background:red;

             margin-top:30px;

}

<body>

<div class="a">

<div class="b">

</div>

</div>

</body>

正常下效果如下：               将子div设置margin-top效果如下

　　　　　　

但是在父级div上加入border:1px solid aqua;

子div的margin-top就不会传递给父div。不知道是什么原因效果如下：

上边这种情况称之为:外边距塌陷

首先盒子与盒子之间属于嵌套关系

解决方式

(1)、给父盒子添加border值

但是这样会影响盒子本身的大小。

(2)、给父盒子添加 overflow: hidden;

overflow:hidden:  触发元素的bfc(格式化上下文)

　(3)单个盒子的外边距

 {margin：0 auto 0 auto}：他始终都是居中的。

 简写为：{margin：0 auto;}

CSS基础6之盒子模型1的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. css的两种盒子模型

    css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...

  3. CSS Box Model（盒子模型）

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  4. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  5. CSS魔法堂：盒子模型简介

    本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) 一.W3C标准的盒子模型   二.IE盒子模型 三.两种模型的区别 W3C标准盒子模型: 外盒模型 元素空间宽度 ...

  6. css那些事儿2 盒子模型

    盒子模型是网页元素所占据页面窗口的矩形范围,是网页布局的核心基础之一,这里的盒子模型与我们平常收到的包裹类似. 一个包裹从内到外,分为真实物品部分,物品与外壳之间的填充区,外壳的厚度,当多个包裹放置在 ...

  7. CSS——（2）盒子模型与标准流

    上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除 ...

  8. CSS核心概念之盒子模型

    盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub--CSS核心概念. 当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basi ...

  9. 【转】CSS（10）盒子模型

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...

随机推荐

  1. MySQL(1)：SQLyog

    数据库(DataBase,简称DB) 一. 基本数据库操作命令 flush privileges 刷新数据库 show databases 显示所有数据库 use dbname 打开某个数据库 sho ...

  2. 【Python】【Module】random

    mport random print random.random() print random.randint(1,2) print random.randrange(1,10) 随机数 import ...

  3. web前段canvasjs图表制作一

    关于web图表制作的方法有很多种,大家可以去网上这里我就介绍我经常使用的一种方法CanvasJS,这也是一款非常容易掌握并且好用的一种方法. 首先可以去网上下载canvasjs.js插件.下载路径:h ...

  4. matplotlib animation

    import numpy as np from matplotlib import pyplot as plt from matplotlib import animation fig, ax = p ...

  5. 面渣逆袭：Java集合连环三十问

    大家好,我是老三.上期发布了一篇:面渣逆袭:HashMap追魂二十三问,反响很好! 围观群众纷纷表示 不写,是不可能不写的,只有卷才能维持了生活这样子. 当然,我写的这一系列,不是背诵版,是理解版,很 ...

  6. yum的epel源

    目录 一.centos7的源 一.centos7的源 以下一个不行,可以试试另一个 rpm -ivh https://mirrors.aliyun.com/epel/epel-release-late ...

  7. int i=i++;和i=++i;和i++

    1.int i=i++; 2.i=++i; 3.i++

  8. 误入 GitHub 游戏区，意外地收获颇丰

    这天中午,我和往常一样就着美食视频吃完午饭,然后起身泡了一杯"高沫". 我闻着茶香享受着午后的阳光,慵懒地坐在工位上习惯性的打开 GitHub 游荡,酝酿着睡意. 误打误撞,我来到 ...

  9. CF999B Reversing Encryption 题解

    Content 给一个长度为 \(n\) 的字符串 \(s\),执行以下操作: 降序遍历 \(n\) 的所有因子(从 \(n\) 到 \(1\)). 对于每一个因子 \(i\) 翻转字符串 \(s_{ ...

  10. Django的安全机制 CSRF 跨站请求访问

    跨站请求伪造 一.简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防 ...