CSS中的盒子

盒子

盒子模型解释
元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式。盒子模型示意图如下:

在这里插入图片描述

把元素叫做盒子,设置对应的样式分别为:盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

盒子模型的尺寸

按照下面代码制作页面:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子的真实尺寸</title><style type="text/css">.box01{width:50px;height:50px;background-color:gold;}.box02{width:50px;height:50px;background-color:gold;border:50pxsolid #000}.box03{width:50px;height:50px;background-color:gold;border:50pxsolid #000;padding: 50px;}</style>
</head>
<body><div class="box01">1</div><br /><div class="box02">2</div><br /><div class="box03">3</div>
</body>
</html>

页面显示效果如下:

通过上面的页面得出结论:盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下:

  • 盒子宽度 = width + padding左右 + border左右
  • 盒子高度 = height + padding上下 + border上下

思考题:
在布局中,如果我想增大内容和边框的距离,又不想改变盒子显示的尺寸,应该怎么做?

也就是使用padding时会让改变当前元素的尺寸,可以使用

box-sizing:content-box | border-box

默认值:content-box

课堂练习 请制作图中所示的标题:

margin相关技巧
1、设置元素水平居中: margin:x auto;
2、margin负值让元素位移及边框合并

外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下:

1、使用这种特性
2、设置一边的外边距,一般设置margin-top
3、将元素浮动或者定位

margin-top 塌陷

在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类:

.clearfix:before{content: '';display:table;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/455854.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分享Kali Linux 2017年第17周镜像文件

分享Kali Linux 2017年第17周镜像文件 Kali Linux官方于4月23日发布2017年的第17周镜像。这次维持了11个镜像文件的规模。默认的Gnome桌面的4个镜像&#xff0c;E17、KDE、LXDE、MATE、XFCE桌面的各一个&#xff0c;手机版的包括ARMEL和ARMHF。有最近要安装Kali Linux系统的&am…

Djang重新整理migrations,解决:Django Table xxx already exist

在开发过程中&#xff0c;由于需求变更或者自我重构&#xff0c;需要清理migrations&#xff0c;以保持代码整洁和后续的可维护性。 场景一 不考虑数据库数据表&#xff0c;可以完全清空数据库里面的表的数据。 步骤&#xff1a; 删除所有migrations find . -path "/migr…

安全随笔2:对称加密应用场景

MD5或者说HASH值是一种不可逆的算法。如果需要从密文还原成明文&#xff0c;那么就需要对称和非对称这两类可逆算法。 首先&#xff0c;简单介绍下这两类算法。图9-1是对称算法的示意图&#xff1a; 图9-1 对称算法 在对称算法中&#xff0c;首先需要发送方和接收方协定一个密钥…

python安装多久_python安装与使用

1、进入官网下载python软件 python-3.4.4.amd64.msi http://www.python.org/download/ 这个软件包含三个环境&#xff0c;如下图&#xff1a;2、双击安装软件 3、设置环境变量path";C:\Python34"; 4、验证是否安装成功 进入cmd中&#xff0c;输入python,如果出现如下…

HADAMARD变换

for (j0;j<16;j) { for (i0;i<16;i) { M1[ i ][j]imgY_org[img->opix_yj][img->opix_xi]-img->mprr_2[k][j][ i ]; 计算当前宏块残差块 M0[i%4][i/4][j%4][j/4]M1[ i ][j]; } } current_intra_sad_20; //…

CSS中的块元素,内联元素,内联块元素

块元素,内联元素,内联块元素 元素就是标签&#xff0c;布局中常用的有三种标签&#xff0c;块元素、内联元素、内联块元素&#xff0c;了解这三种元素的特性&#xff0c;才能熟练的进行页面布局。 块元素块元素&#xff0c;也可以称为行元素&#xff0c;布局中常用的标签如&…

django 与 vue 的完美结合

最近接到一个任务&#xff0c;就是用django后端&#xff0c;前段用vue&#xff0c;做一个普通的简单系统&#xff0c;我就是一搞后端的&#xff0c;听到vue也是比较震惊&#xff0c;之前压根没接触过vue。看了vue的一些文档&#xff0c;还有一些项目&#xff0c;先说一下django…

东芝确定半导体重组计划:保留闪存其他全卖

会计丑闻给日本东芝公司的业绩带来严重影响&#xff0c;为了提高盈利&#xff0c;东芝正在对旗下的半导体、个人电脑、白色家电等业务进行一次重大重组。据日经新闻1月23日报道&#xff0c;东芝已经正式制定了芯片业务重组的详细计划&#xff0c;除了占据优势的闪存芯片之外&am…

python画两条曲线图_python绘制多个曲线的折线图

这篇文章利用的是matplotlib.pyplot.plot的工具来绘制折线图&#xff0c;这里先给出一个段代码和结果图&#xff1a; # -*- coding: UTF-8 -*- import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt #这里导入你自己的数据 #...... #...... #x_axix&a…

5.19汇总

int block_x 8*(b8 & 0x01)4*(b4 & 0x01);int block_y 8*(b8 >> 1)4*(b4 >> 1);请问下老大 这两句定义是什么意思啊&#xff1f; 带些值进去算一下就知道了 b8 0 1 2 3b4 0 1 2 3 A&#xff1a;0 ........Er…

oracle 截取字指定的字符串

过滤指定的字符串,一字符串有重复的数据内容,所以需要去掉重复的内容,subst()截取 起止下标;instr()获取终止下标位置 例如:substr(p.address, 0, instr(p.address, -, 1, 1)-1) ); case when length(substr(p.address, 0, instr(p.address, -, 1, 1)-1) ) 13 then substr(sub…

[django]django模型中auto_now和auto_now_add

示例: update_time models.DateTimeField(更新时间, defaulttimezone.now) create_time models.DateTimeField(创建时间, auto_now_addTrue) auto_now无论是你添加还是修改对象&#xff0c;时间为你添加或者修改的时间。 auto_now_add为添加时的时间&#xff0c;更新对象时不…

2014-7-29-阿里电面-第一轮

等了好久&#xff0c;以为简历要挂了&#xff0c;今天最终打来了。面试过程中手抖嘴抖有木有&#xff01; 1、经经常使用的集合类。我回到ArrayList、LinkedList、HashMap&#xff0c;接着问ArrayList、LinkedList的差别&#xff0c;以及分别的适用范围。看了Java集合类基本上是…

数据分级分类实施指南_运营商行业数据安全治理实践

建立组织构建大数据安全保障组一、大数据安全保障工作组职责 1、负责制定大数据信息安全策略&#xff0c;明确信息安全目标。 2、组织相关平台负责人定期召开信息安全会议。 3、负责客户数据安全突发事件应急方案实施和大数据信息系统日常安全运行管理的组织协调及决策工作。 4…

CSS中的定位

定位 关于定位我们可以使用css的position属性来设置元素的定位类型&#xff0c;postion的设置项如下&#xff1a; relative 生成相对定位元素&#xff0c;元素所占据的文档流的位置不变&#xff0c;元素本身相对文档流的位置进行偏移absolute 生成绝对定位元素&#xff0c;元…

servlet中中文正常显示,mysql数据库手动插入中文正常显示,servlet向mysql中插入中文显示乱码...

作者&#xff1a;http://5563447.blog.51cto.com/5553447/1422627 问题是&#xff1a;就是POST请求提交表单数据给servlet,通过JDBC插入Mysql,出现中文乱码。 解决方式&#xff1a;在url后面加这句 ?useUnicodetrue&characterEncodingutf-8 我的项目&#xff1a; 结果&am…

rtp问题引领汇总

视频网络传输一定要用rtp吗&#xff1f; RTP/RTCP有一套很好的反馈机制&#xff0c;通过其可以估算网络状况&#xff0c;然后在编码端进行调整&#xff0c;如网络繁忙时适当的降低画面质量&#xff0c;减小码率等&#xff0c;主要是想通过RTP/RTCP协议实现QoS&#xff01;同时…

Django的信号机制详解

Django的信号机制详解 Django提供一种信号机制。其实就是观察者模式&#xff0c;又叫发布-订阅(Publish/Subscribe) 。当发生一些动作的时候&#xff0c;发出信号&#xff0c;然后监听了这个信号的函数就会执行。 Django内置了一些信号&#xff0c;比如&#xff1a; django.…

垃圾回收算法_垃圾回收算法有哪些

垃圾检测通常通过建立一个根对象的集合以及建立一个从这些根对象开始能够触及的对象集合来实现。如果正在执行的程序可以访问到根对象和某个对象之间存在引用路径&#xff0c;这个对象就是可触及的。对于程序来说&#xff0c;根对象总是可以访问的。从这些根对象开始&#xff0…

不错的电子书下载网站

为什么80%的码农都做不了架构师&#xff1f;>>> www.jb51.net 电子书质量不错,虽然是扫描版的,但是都是高清的. vdisk.weibo.com 网盘, 内容很多! 转载于:https://my.oschina.net/GMT/blog/1188971