内外边距、浮动、布局相关

关于清除元素的内外边距:

1、行内元素只有左右边距、没有内外边距、内边距在ie6等低版本的浏览器中也会有问题。尽量不要给元素指定行内的内外边距;

2、外边距的合并

使用margin定义块元素的垂直外边距时,可能会出现外边距的合并;

 

相邻块元素垂直外边距的合并:

当相邻两个块元素相遇时,如果上面的元素有下边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象称之为相邻元素垂直外边距的合并,又称之为外边距的塌陷。

嵌套块元素垂直外边距的合并:

对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。

 

解决方案

可以为父元素定义1px的上边框和上内边距

可以为父元素添加overflow:hidden;

                    

 

 关于padding不会撑开盒子的情况

注意tips

1、宽度属性width和高度属性height仅仅适用于块级元素,对行内元素无效(img标签和input例外);

一点妙用【 如果已经给行内元素添加了浮动,此时不需要转换这个元素也可以有宽高!】

2、计算盒子模型的总高度时还应该考虑上下两个盒子垂直外边距合并的情况;

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度,则padding不会影响本盒子的大小;

 

设定两个盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>padding盒子不会撑开的情况</title>
</head><style>.father {height: 200px;background-color: pink;width: 200px;/* 因为父盒子有宽度给定值了,所以盒子被撑开; */}.son {padding-left: 30px;/* 儿子没有给宽度,用的是默认,所以不会被撑开; */}}</style>
<body><div class="father"><div class="son">123</div>
</div>
</body>
</html>

 

关于盒子阴影

  前两个属性必须写

例:

                          注:参照于小米盒子

 

 关于浮动

css的定位机制有三种:普通流(标准流)[普通流就是一个网页内标签元素正常从上到下、从左到右排列顺序的意思,即普通流布局 ] 、浮动、定位

tips:

关于用    display:inline-block用于布局 会产生间隙的问题。

 

关于浮动移动的内幕特性

浮动脱离标准流、不占位置、会影响标准流。浮动只有左右浮动。

浮动首先创建包含块的概念,也就是说  浮动元素总是找理他最近的父元素对齐,但是不会超过内边距的范围。

 

浮动元素排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素会和上一个元素的顶部对齐;

如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐

 

 

一点妙用【 如果已经给行内元素添加了浮动,此时不需要转换这个元素也可以有宽高!】

夫盒子里面的子盒子,如果某一个子盒子有浮动,其余子盒子都需要浮动,这样才能行对齐显示!

浮动的目的就是为了让块级元素在同一行显示;

 

 三种布局

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

android根据mac地址连接耳机,Android获取设备IMEI和Mac地址

释放双眼&#xff0c;带上耳机&#xff0c;听听看~&#xff01;public static boolean checkPermission(Context context, String permission) {boolean result false;if (Build.VERSION.SDK_INT > 23) {try {Class> clazz Class.forName("android.content.Contex…

让vs2008支持jQuery的智能提示!

告诉大家一个非常好的消息&#xff0c;就是现在我们已可以让VS2008同时支持jQuery的智能提示功能啦可以先看看下面的效果图&#xff1a;jquery1.png (18.76 K)2008-3-30 14:37:54jquery2.png (21.18 K)2008-3-30 14:37:54怎样&#xff1f;酷吧&#xff0c;呵呵想实现以上效果只…

编写干净的测试–提防魔术

很难为干净的代码找到一个好的定义&#xff0c;因为我们每个人都有自己的单词clean的定义。 但是&#xff0c;有一个似乎是通用的定义&#xff1a; 干净的代码易于阅读。 这可能会让您感到有些惊讶&#xff0c;但是我认为该定义也适用于测试代码。 使测试尽可能具有可读性是我…

Eclipse创建Java Web项目及基本配置

https://www.cnblogs.com/zzlback/p/8552622.html转载于:https://www.cnblogs.com/aiyowei/p/10428638.html

为什么要使用Vuex?

为什么要使用Vuex? 1. 假如不使用 1.1 父子组件依赖同一个state 1.2 兄弟组件依赖同一个state 2. 用了Vuex之后 3. 方便记忆和理解 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

十个习惯让你精通新的开发技术

Ben Watson&#xff0c;知名开发者。任职于GeoEye&#xff0c;是其所属开发团队的领导者。本文发表于他自己的博客&#xff0c;阐述了十种学习新技术的方法。 1、要看书 在成千上万的编程图书中&#xff0c;可能很大一部分根本毫无用处。但是仍然有很多图书对你的(编程)能力有很…

基于android平台的24点游戏设计与实现需求分析,基于Android平台的24点游戏设计与实现需求分析_毕业设计论文.doc...

基于Android平台的24点游戏设计与实现摘要随着移动设备的普及以及移动设备的硬件的提升&#xff0c;移动设备的功能越来越完善&#xff0c;移动设备的系统平台也日渐火热起来。目前国内最常见的移动开发平台有Symbian&#xff0c;iPhone&#xff0c;Windows Phone以及当下正在逐…

序列化代理模式示例

有些书可以极大地改变您的生活。 其中一本是Joshua Bloch撰写的“ Effective Java” 。 在下面您可能会发现一些小的实验&#xff0c;该实验的灵感来自于本书的第11章“串行化”。 假设我们有一个为继承而设计的类&#xff0c;它本身不是可序列化的 &#xff0c;并且没有无参数…

fit_transform和transform的区别

部分转载 https://blog.csdn.net/weixin_38278334/article/details/82971752 https://www.cnblogs.com/summer-nude/p/7380694.html 写在前面fit和transform没有任何关系&#xff0c;仅仅是数据处理的两个不同环节&#xff0c;之所以出来fit_transform这个函数名&#xff0c;仅…

使用注解配置Spring

使用注解配置Spring 1.为主配置文件引入新的命名空间(约束) 2.开启使用注解代理配置文件 3.在类中使用注解完成配置 将对象注册到容器 修改对象的作用范围 值类型注入 引用类型注入 注意: 初始化|销毁方法 转载于:https://www.cnblogs.com/HiJackykun/p/10428728.html

android监控指纹信息变化,android监听指纹变化(解决反射思路在android10不生效的问题)...

前天偶尔运行代码&#xff0c;一个段异常映入眼帘&#xff0c;我擦android10上反射机制监听不到指纹id等数据了&#xff0c;原因是android10彻底抛弃了之前指纹的api。所以反射不到了。怎么解决这个问题&#xff1f;我们换个思路当然反射依然可以&#xff0c;不过你需要在andro…

[转载]数据结构笔试题基础

第一章 数据结构与算法 一.算法的基本概念计算机解题的过程实际上是在实施某种算法&#xff0c;这种算法称为计算机算法。 1.算法的基本特征&#xff1a;可行性&#xff0c;确定性&#xff0c;有穷性&#xff0c;拥有足够的情报。 2.算法的基本要素&#xff1a;算法中对数据的运…

random_state ---summary

1-简介 random_state 相当于随机数种子random.seed() 。random_state 与 random seed 作用是相同的。可参考&#xff1a;https://www.jianshu.com/p/4deb2cb2502f 对模型没有影响&#xff0c;但是对于一些进行随机选择的过程有影响。比如随机拆分训练集和测试集。随机种子一致的…

基于cookie的SSO单点登录系统

利用COOKIE实现单点登录功能 近期公司要求帮一个项目实现单点登录功能&#xff0c;在综合考量下决定采用cookie实现&#xff0c;大概的流程如下图所&#xff1a; 转载于:https://www.cnblogs.com/buggeerWang/p/10430770.html

js的栈与堆

JavaScript中基本数据类型和引用数据类型的区别 这是我引用别人的 觉得很好 1、基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值&#xff1a;基本数据类型和引用数据类型。 基本数据类型指的是简单的数据段&#xff0c;引用数据类型指的是有多个值构成的对象。 当…

休眠调试–查找查询的来源

Hibernate为什么在程序的哪个部分以及在哪个部分中生成给定的SQL查询并不总是立即的&#xff0c;尤其是当我们处理的是我们自己编写的代码时。 这篇文章将介绍如何配置Hibernate查询日志记录&#xff0c;并将其与其他技巧一起使用&#xff0c;以找出在程序中执行给定查询的原因…

Java各种对象(PO,BO,VO,DTO,POJO,DAO,Entity,JavaBean,JavaBeans)的区分

PO&#xff1a;持久对象 (persistent object)&#xff0c;po(persistent object)就是在Object/Relation Mapping框架中的Entity&#xff0c;po的每个属性基本上都对应数据库表里面的某个字段。完全是一个符合Java Bean规范的纯Java对象&#xff0c;没有增加别的属性和方法。持久…

REMBER

第一句如果我们之间有1000步的距离 你只要跨出第1步我就会朝你的方向走其余的999步 第二句通常愿意留下来跟你争吵的人 才是真正爱你的人第三句付出真心 才会得到真心 却也可能伤得彻底保持距离 就能保护自己 却也注定永远寂寞第四句有时候 不是对方不在乎你 而是你把对…

android 获取程序,Android获取桌面应用程序

转载请注明出处&#xff0c;谢谢&#xff1a;http://blog.csdn.net/harryweasley/article/details/50057029首先在看这个博客之前&#xff0c; 你可以先看下这个博客&#xff0c;http://blog.csdn.net/harryweasley/article/details/50057707里面介绍了两种方式来获取应用程序的…

等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规

随着等保 2.0 时代的到来&#xff0c;网络安全要求更加严格&#xff0c;应用场景更加丰富&#xff0c;等级保护已成为互联网企业义不容辞的责任。作为国内移动安全领域的技术创新企业&#xff0c;几维安全在积极响应等保2.0时代的战略布局&#xff0c;推出等保2.0检测、等保加固…