CSS基础6之盒子模型1
盒子概述
以下是盒子模型的一个图形解释
一、内边距（填充）
属性有： (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的更多相关文章
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- css的两种盒子模型
css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...
- CSS Box Model（盒子模型）
CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...
- [CSS属性设置，盒子模型，网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- CSS魔法堂：盒子模型简介
本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) 一.W3C标准的盒子模型 二.IE盒子模型 三.两种模型的区别 W3C标准盒子模型: 外盒模型 元素空间宽度 ...
- css那些事儿2 盒子模型
盒子模型是网页元素所占据页面窗口的矩形范围,是网页布局的核心基础之一,这里的盒子模型与我们平常收到的包裹类似. 一个包裹从内到外,分为真实物品部分,物品与外壳之间的填充区,外壳的厚度,当多个包裹放置在 ...
- CSS——（2）盒子模型与标准流
上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除 ...
- CSS核心概念之盒子模型
盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub--CSS核心概念. 当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basi ...
- 【转】CSS（10）盒子模型
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...
随机推荐
- Linux系统的负载与CPU、内存、硬盘、用户数监控的shell脚本
利用Shell脚本来监控Linux系统的负载.CPU.内存.硬盘.用户登录数. 这几天在学习研究shell脚本,写的一些系统负载.CPU.内存.硬盘.用户数监控脚本程序.在没有nagios监控的情况下 ...
- 用运oracel中的伪列rownum分页
在实际应用中我们经常碰到这样的问题,比如一张表比较大,我们只要其中的查看其中的前几条数据,或者对分页处理数据.在这些情况下我们都需要用到rownum.因此我们要理解rownum的原理和使用方法. Or ...
- 拷贝txt文本中的某行的数据到excel中
package com.hope.day01;import java.io.*;import java.util.ArrayList;public class HelloWorld { publ ...
- 11、Redis的配置文件
Redis的配置文件 一.Redis配置文件简介 Redis是通过配置文件启动的 Redis对大小写字母不敏感 Redis基本上环境搭建都在配置文件 关于Redis配置文件位置是安装时放的位置,关于R ...
- python函数概念
函数介绍 函数就类似与一个工具,作用就是在有需求时可以直接使用. 函数作用 1.精简代码,不需要重复写代码. 2.提高代码兼容性 3.提供返回值 函数语法结构 def 函数名(参数1, 参数2): & ...
- [BUUCTF]PWN13——ciscn_2019_n_8
[BUUCTF]PWN13--ciscn_2019_n_8 题目网址:https://buuoj.cn/challenges#ciscn_2019_n_8 步骤: 例行检查,32位,保护开的挺多,ca ...
- 【论文笔记】 Denoising Implicit Feedback for Recommendation
Denoising Implicit Feedback for Recommendation Authors: 王文杰,冯福利,何向南,聂礼强,蔡达成 WSDM'21 新加坡国立大学,中国科学技术大学 ...
- ArcGIS中重采样栅格像元对齐问题
转发自我的知乎文章 我们通常要进行基于像元的运算,往往我们的研究中涉及到多源数据,因此就需要对数据进行地理配准.空间配准.重采样等操作. 一开始,我认为相同的地理椭球与投影坐标系下,不同来源,不同分辨 ...
- C# 脚本
有些情况下,需要在程序运行期间动态执行C#代码,比如,将某些经常改变的算法保存在配置文件中,在运行期间从配置文件中读取并执行运算.这时可以使用C#脚本来完成这些工作. 使用C#脚本需要引用库Micro ...
- Mybatis-Plus一键生成代码
Mybatis-Plus一键生成代码 一.闲言碎语 闲来无事看了看了MP的官网看到一键生成的代码更新了! 整个Ui风格都变了,遂决定瞅一眼新的代码生成器 官网地址~~ 二.引入依赖 新的代码生成只有在 ...