margin的问题:
1.margin-top向上传递
解决:1.父元素border边框,2.父元素使用overflow:hidden
3.为父元素或者子元素声明绝对定位,4.为父元素或者子元素声明浮动
2.margin上下叠压
解决
1.使用margin给其中一个元素加预想的margin值
2.没有特殊情况的话,使用padding代替

块元素的特征:1.默认独占一行,2.没有宽度时,默认撑满一行,3.支持所有css命令
内联元素的特征:1.同一行可以跟同类的标签,2.内容 撑开宽度,3.不支持宽高,
4.不支持上下的margin,5.代码换行被解析

清除浮动的方法:
1.加高度(扩展性不好)
2.给父元素加浮动(页面所有元素都假浮动,margin左右auto失效)
3.inline-block (margin左右auto失效)
4.空标签清除浮动 <div class="clearfix"></div> .clearfix{clear:both;} (每个要清楚浮动都要加)
5.after伪类清除浮动

BFC(标准浏览器)
1.float的值不为none;
2.overflow的值不为visible;
3.display的值为table-cell,table-caption,inline-block中的一个;
4.position的值不为relative和static;
5.width | height | min-width | min-height 不为auto;

haslayout(IE浏览器)
1.zoom不为normal;

只要触发了BFC或者haslayout,这个区域就是独立的不受外界影响

相对定位:
1.不影响元素本身的特性;
2.不使元素脱离文档流(元素移动之后原始位置会被保留)
3.如果没有定位偏移量,对元素本身没有任何影响
4.提升层级

HTML和CSS查缺补漏的更多相关文章

  1. CSS查缺补漏篇

    前面的话:关于CSS,之前我已经做过一些基础的知识点介绍.CSS主要是用来给页面设置样式的,一般说来,在一个网站中,CSS应该独立封装在一个单独的.css外部文件中.样式的设置总体来说是不难的,但是需 ...

  2. css查缺补漏2

    15.布局流程 一.确定页面的版心; 二.确定页面中的行模块,以及每个页面中的列模块 三.制作HTML结构 例:.top+.banner+(.main>.left+.right)+.footer ...

  3. css查缺补漏1

    css可以写在哪里 1.和要装饰的标签写在一起 2.内部样式表(内嵌式)是写在head头部标签中,并且用style标签定义 3.外部样式表(外链式) <head><link rel= ...

  4. 「查缺补漏」巩固你的Nginx知识体系

    Nginx篇 基本介绍 Nginx是一款轻量级的 Web服务器 / 反向代理服务器 / 电子邮件(IMAP/POP3)代理服务器,主要的优点是: 支持高并发连接,尤其是静态界面,官方测试Nginx能够 ...

  5. Android查缺补漏--Activity生命周期和启动模式

    一.生命周期 onCreate():启动Activity时,首次创建Activity时回调. onRestart():再次启动Activity时回调. onStart():首次启动Activity时在 ...

  6. Android查缺补漏--BroadcastReceiver的类型与使用

    Broadcast 是一种被用于应用内和应用之间传递信息的机制.一个广播可以对应多个接受者.一个完整的广播机制,需要具有以下三个要素: 发送广播的Broadcast 接受广播的BroadcastRec ...

  7. Android查缺补漏(View篇)--在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0?

    在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0 ? @Override protected void onCreate(Bundle savedInstanc ...

  8. Android查缺补漏--ContentProvider的使用

    ContentProvider (内容提供者)是一种共享型组件,可以为系统内应用于与应用之间提供访问接口. ContentProvide要想正常工作需要三个关键点: ContentProvider:对 ...

  9. Android查缺补漏--Service和IntentService

    Service的运行不依赖界面,即使程序被切换到后台,Service仍然能够保持正常运行.当某个应用程序进程被杀掉时,所有依赖于该进程的Service也会停止运行. Service 分为启动状态和绑定 ...

随机推荐

  1. pandas处理时间序列(4): 移动窗口函数

    六.移动窗口函数 移动窗口和指数加权函数类别如↓: rolling_mean 移动窗口的均值 pandas.rolling_mean(arg, window, min_periods=None, fr ...

  2. tensorflow(3)可视化,日志,调试

    可视化 添加变量 tf.summary.histogram( "weights1", weights1) # 可视化观看变量 还有添加图像和音频. 常量 tf.summary.sc ...

  3. Cocos Creator JS 获取当前日期与时间

    var testDate = new Date(); testDate.getYear();//获取当前年份(2位) testDate.getFullYear(); //获取完整的年份(4位,1970 ...

  4. #WEB安全基础 : HTTP协议 | 0x13 不安全的HTTP

    HTTP作为一个大规模使用的网络协议就真的安全了吗? 我们知道互联网为什么叫互联网,你可以在任何地方都可以与之相连,所以在这些可以连接的点上都可以获取互联网的部分信息. 那么HTTP通信时有什么缺点吗 ...

  5. 《ASP.NET Core In Action》读书笔记系列二 ASP.NET Core 能用于什么样的应用,什么时候选择ASP.NET Core

    ASP.NET Core 能用于什么样的应用 ASP.NET Core 可以用作传统的web服务.RESTful服务.远程过程调用(RPC)服务.微服务,这归功于它的跨平台支持和轻量级设计.如下图所示 ...

  6. python itertools 模块

    Python的内建模块itertools提供了非常有用的用于操作迭代对象的函数 首先,我们看看itertools提供的几个“无限”迭代器: >>> import itertools ...

  7. 用Cocos2dx开发棋牌游戏的观点解析

    众所周知,目前棋牌游戏特别的火.很多游戏公司都想在这一块赚钱,可是却不知用什么软件比较好的去开发棋牌游戏,对此,我列出了两款比较靠谱的软件去开发棋牌游戏,希望对大家有帮助! 第一款软件是cocos2d ...

  8. MVC-Razor视图

    Razor 视图引擎 与Aspx开发区别在于代码: 1.Razor 更智能,摒弃了<%%>格式,直接用@符号开启cs代码,遇到html时自动识别 2.遇到如汉字等即非cs代码,又非html ...

  9. (Review cs231n) Object Detection

    目标:我们有几个类别,然后我们要在这张图中找到这些类的所有实例 解决思路:是否可以按照回归的思路进行求解呢? 但是受限制于确定的种类输出问题. 方法:分类和回归是解决问题的两个套路,我们现在对于目标的 ...

  10. python-布尔表达式

    1.布尔类型(bool): 1.只有两种情况  真/假 (True /  False) 2. print(type(False))      # <class 'bool'> type() ...