css：使用笔记(不断更新中...)
1，inline-block
Inline :1是不支持宽高的 2 在一行内显示 span 啥的~
Block:1,占一行 2支持宽高
但是img因为在一行并排显示，我们归为行(内嵌)元素，但支持设置宽高就是inline-block 。
本质inline-block :行内的块：
一特性，行并排显示，2，并支持宽高设定3，内容撑开宽度。只是宽度
一问题1，多个inline的标签之间有间隙，宽度为字体（哪个字体？）大小的一半，设置字体16 间隙为8 20--10
解决：解决方案1 doyue解决方案2
一问题2，IE6 7不支持块元素的设置inline-block，块元素设置之后，依然占据一行。但支持行元素设置
IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，
所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：
全兼容的inline-block：
div {
display: inline-block;
*display: inline;
*zoom: 1;
}
2，鼠标指针：
1，Gif png 兼容性有问题。使用.cur 文件
2，pionter,当前面的图片不现实的时候，显示的
3，textarea的宽度不能，高度可以调整。
textarea{ resize: vertical; }
4,网页重排
加载一个页面读取，在向下滚动时，内容看似“上下跳动”，这就是网页重排。
这是因为浏览器不知道图像的尺寸，不能保留空间为它。因此，当图像被加载，它必须将其插入到页面中，并把它下面和右面的东西移走，做一个重排。
解决此问题的一个先决条件是，要知道图片的高宽。
http://www.webkaka.com/blog/archives/responsive-images-how-to-prevent-reflow.html
5,块元素内容（p）不能自动换行
<article class="section02-eng">English，EnglishEnglishEng，lishEnglis中文hEnglishEnglishEnglishE，nglishEnglish，EnglishEnglishEnglishEnglishEngli，shEnglishEnglishEngl，ishEnglishEnglishEnglishEnglishEnglishEngliv，mshEnglishEnglishEnglishEnglishEng，lishEnglishEnglishEnglishEng，lishEnglishEnglishEnglish</article>
你换成中文就自动换行了，连续的英文被识别成一个单词，所以只会撑开。
word-wrap: break-word;
6,内层div负外边距，可以抵消外层div的padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.divout{
width:300px;
height:300px;
background:skyblue;
border:10px solid lightgreen;
padding-left:100px;/**/
}
.divinner{
width:100px;
height:100px;
background:skyblue;
border:10px solid red;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="divout">
<div class="divinner">
22222
</div>
</div>
</body>
</html>
css：使用笔记(不断更新中...)的更多相关文章
- 微信小程序练习笔记（更新中。。。）
微信小程序练习笔记 微信小程序的练习笔记,用来整理思路的,文档持续更新中... 案例一:实现行的删除和增加操作 test.js // 当我们在特定方法中创建对象或者定义变量给与初始值的时候,它是局部 ...
- vue-学习笔记（更新中...）
vue学习笔记 2017-08-23 11:10:28 Vue实例: var vm = new Vue({ // 选项 }) 实例化Vue.Vue实例,构造函数Vue.创建一个Vue的根实例,Vue ...
- IdentityServer4笔记整理(更新中)
1 OAuth 2.0 1.1 OAuth 2.0协议流程图 1.2 授权码模式 1.3 简化模式 1.4 资源所有者密码模式 1.5 客户端凭证模式 2 OpenID Connect(OIDC) 2 ...
- 保姆级尚硅谷SpringCloud学习笔记（更新中）
目录 前言 正文内容 001_课程说明 002_零基础微服务架构理论入门 微服务优缺点[^1] SpringCloud与微服务的关系 SpringCloud技术栈 003_第二季Boot和Cloud版 ...
- 《Java并发编程实战》读书笔记（更新中）
一.简介 1.多线程编程要注意的几点: 安全性:永远不发生糟糕的事情 活跃性:某件正确的事情最终会发生(不会发生无限循环或者死锁) 性能:正确的事尽快发生(上下文切换消耗之类的) 二.线程安全 1.为 ...
- react-navigation 使用笔记 持续更新中
目录 基本使用(此处基本使用仅针对导航头部而言,不包含tabbar等) header怎么和app中通信呢? React-Navigation是目前React-Native官方推荐的导航组件,代替了原用 ...
- AIX学习笔记（更新中）
AIX操作系统基本命令 系统的进入和退出login: 输入用户名(例如:user01)password: 输入用户口令若用户名及口令均正确,则用户将登陆成功.此时系统会出现命令提示符 $或#,即表示可 ...
- KISSY学习笔记（更新中）
序:身为一个JAVA开发工程师,前端代码我尽量是使用原生的JS来写的,或是使用一些JQ的开源组件(但是也只是使用,没有好好去研究过JQ这个框架).目前由于工作需要,必须要使用KISSY,打算借此机会, ...
- ubuntu学习笔记--不断更新中
1.rpm软件包相关: rpm软件包安装命令: rpm -ivh linuxqq-v1.0.2-beta1.i386.rpm rpm软件默认安装路径查询: rpm -ql *.rpm ubuntu如何 ...
随机推荐
- 5分钟弄懂Docker--转载
编者按:7月3日的“CSDN在线培训:Docker之道”,同时在线人数达到了历史新高,但是最后的QA环节,笔者发现大家的问题 还是很初级的,Docker技术还处在Gartner技术曲线的萌芽期.刚好前 ...
- C# 词法分析器（一）词法分析介绍 update 2014.1.8
系列导航 (一)词法分析介绍 (二)输入缓冲和代码定位 (三)正则表达式 (四)构造 NFA (五)转换 DFA (六)构造词法分析器 (七)总结 虽然文章的标题是词法分析,但首先还是要从编译原理说开 ...
- WPF画线问题，几千条以后就有明显的延迟了。
我现在是这么画的,class A { private GeometryGroup _lines; private Path _path; public A() { _path.Data = ...
- Ubuntu下SVN配置
今天上午写了一个脚本,然后想起来现在写的R脚本,常常在分析过程中就直接改掉了.隐隐还是觉得存在隐患,想着svn部署应该不会太难,于是就直接动手干了. 弄了一上午的时间,感觉还是花了点时间. 这里有篇b ...
- BZOJ1103[POI2007]大都市meg 题解
题目大意: 有一棵树,最先每条边的权值是1,然后给出n+m-1个操作,操作有两种:1.询问一个点到根的路径上的权值和:2.将一条边的权值改为0. 思路: 用dfs序将树化为序列,在dfs序中我们会保存 ...
- 【HDU】3516 Tree Construction
http://acm.hdu.edu.cn/showproblem.php?pid=3516 题意:平面n个点且满足xi<xj, yi>yj, i<j.xi,yi均为整数.求一棵树边 ...
- BZOJ3992: [SDOI2015]序列统计
Description 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数列,数列中的每个数都属于集合S. 小C用这个生成器生成了许多这样的数列. ...
- Redis_master-slave模式
类似mysql的master-slave模式一样,redis的master-slave可以提升系统的可用性,master节点写入cache后,会自动同步到slave上. 环境: master node ...
- jquery过滤器之:contains()、.filter()
:contains 选择器选取包含指定字符串的元素. 该字符串可以是直接包含在元素中的文本,或者被包含于子元素中. 经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素,如: $(&qu ...
- [LintCode] Create Maximum Number 创建最大数
Given two arrays of length m and n with digits 0-9 representing two numbers. Create the maximum numb ...