HTML和CSS查缺补漏
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查缺补漏的更多相关文章
- CSS查缺补漏篇
前面的话:关于CSS,之前我已经做过一些基础的知识点介绍.CSS主要是用来给页面设置样式的,一般说来,在一个网站中,CSS应该独立封装在一个单独的.css外部文件中.样式的设置总体来说是不难的,但是需 ...
- css查缺补漏2
15.布局流程 一.确定页面的版心; 二.确定页面中的行模块,以及每个页面中的列模块 三.制作HTML结构 例:.top+.banner+(.main>.left+.right)+.footer ...
- css查缺补漏1
css可以写在哪里 1.和要装饰的标签写在一起 2.内部样式表(内嵌式)是写在head头部标签中,并且用style标签定义 3.外部样式表(外链式) <head><link rel= ...
- 「查缺补漏」巩固你的Nginx知识体系
Nginx篇 基本介绍 Nginx是一款轻量级的 Web服务器 / 反向代理服务器 / 电子邮件(IMAP/POP3)代理服务器,主要的优点是: 支持高并发连接,尤其是静态界面,官方测试Nginx能够 ...
- Android查缺补漏--Activity生命周期和启动模式
一.生命周期 onCreate():启动Activity时,首次创建Activity时回调. onRestart():再次启动Activity时回调. onStart():首次启动Activity时在 ...
- Android查缺补漏--BroadcastReceiver的类型与使用
Broadcast 是一种被用于应用内和应用之间传递信息的机制.一个广播可以对应多个接受者.一个完整的广播机制,需要具有以下三个要素: 发送广播的Broadcast 接受广播的BroadcastRec ...
- Android查缺补漏(View篇)--在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0?
在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0 ? @Override protected void onCreate(Bundle savedInstanc ...
- Android查缺补漏--ContentProvider的使用
ContentProvider (内容提供者)是一种共享型组件,可以为系统内应用于与应用之间提供访问接口. ContentProvide要想正常工作需要三个关键点: ContentProvider:对 ...
- Android查缺补漏--Service和IntentService
Service的运行不依赖界面,即使程序被切换到后台,Service仍然能够保持正常运行.当某个应用程序进程被杀掉时,所有依赖于该进程的Service也会停止运行. Service 分为启动状态和绑定 ...
随机推荐
- Response内置对象
request内置对象:主要用来处理用户的请求 response内置对象:处理对用户的响应(在调用service方法时容器会传递过来) response重要方法: public void addCoo ...
- html-webpack-plugin插件使用
项目使用hightopo框架,使用webpack打包.这里的场景是:点击预览按钮,页面会打开一个新页面. 但是由于使用了webpack打包,所以直接使用以下代码是不行的.报404 window.ope ...
- Podfile语法参考
中文翻译可以参考:Podfile语法参考(译) 英文官方文档:Podfile Syntax Reference
- json文件常用代码
1.json数据内容格式化处理 package com.sklm.lhb.json; public class JsonFormatTool { /** * 单位缩进字符串. */ private s ...
- sql server导出数据,详细操作!(自用)
右键数据库——>任务——>导出数据 填写数据源连接信息 填写 要导入的数据库 连接信息 导出表时,全选,[编辑映射],勾选启用标识插入,这样才能让自增的字段 行正常插入. 然后导出即可. ...
- C#-----集合List<T>的常用方法
雇员实体类 using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...
- OpenCV学习笔记(二) - 写入视频、jpg格式
写入视频: import sys, os import cv2 imgDir = '/Users/xxx/salient/' videoName = 'vname' fps = 30 #帧频 outp ...
- Selenium WebDriver的工作原理
先通过一个简单的类比说个好理解的,这个比喻是我从美版知乎Quora上看到的,觉得比较形象.好理解拿来用用. 我们可以把WebDriver驱动浏览器类比成出租车司机开出租车. 在开出租车时有三个角色: ...
- tomcat1(servlet,http,socket)
1.servlet容器是如何工作的? a.创建一个request对象,用可能会在调用的Servlet中使用到的信息填充该request对象(参数,头,cookies,查询字符串,URI等).reque ...
- 安装redis报错 you need tcl 8.5 or newer in order to run redis test
解决方法: wget http://downloads.sourceforge.net/tcl/tcl8.6.1-src.tar.gz tar -zxvf tcl8.6.1-src.tar.gz -C ...