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:使用笔记(不断更新中...)的更多相关文章

  1. 微信小程序练习笔记(更新中。。。)

    微信小程序练习笔记 微信小程序的练习笔记,用来整理思路的,文档持续更新中... 案例一:实现行的删除和增加操作  test.js // 当我们在特定方法中创建对象或者定义变量给与初始值的时候,它是局部 ...

  2. vue-学习笔记(更新中...)

    vue学习笔记 2017-08-23  11:10:28 Vue实例: var vm = new Vue({ // 选项 }) 实例化Vue.Vue实例,构造函数Vue.创建一个Vue的根实例,Vue ...

  3. IdentityServer4笔记整理(更新中)

    1 OAuth 2.0 1.1 OAuth 2.0协议流程图 1.2 授权码模式 1.3 简化模式 1.4 资源所有者密码模式 1.5 客户端凭证模式 2 OpenID Connect(OIDC) 2 ...

  4. 保姆级尚硅谷SpringCloud学习笔记(更新中)

    目录 前言 正文内容 001_课程说明 002_零基础微服务架构理论入门 微服务优缺点[^1] SpringCloud与微服务的关系 SpringCloud技术栈 003_第二季Boot和Cloud版 ...

  5. 《Java并发编程实战》读书笔记(更新中)

    一.简介 1.多线程编程要注意的几点: 安全性:永远不发生糟糕的事情 活跃性:某件正确的事情最终会发生(不会发生无限循环或者死锁) 性能:正确的事尽快发生(上下文切换消耗之类的) 二.线程安全 1.为 ...

  6. react-navigation 使用笔记 持续更新中

    目录 基本使用(此处基本使用仅针对导航头部而言,不包含tabbar等) header怎么和app中通信呢? React-Navigation是目前React-Native官方推荐的导航组件,代替了原用 ...

  7. AIX学习笔记(更新中)

    AIX操作系统基本命令 系统的进入和退出login: 输入用户名(例如:user01)password: 输入用户口令若用户名及口令均正确,则用户将登陆成功.此时系统会出现命令提示符 $或#,即表示可 ...

  8. KISSY学习笔记(更新中)

    序:身为一个JAVA开发工程师,前端代码我尽量是使用原生的JS来写的,或是使用一些JQ的开源组件(但是也只是使用,没有好好去研究过JQ这个框架).目前由于工作需要,必须要使用KISSY,打算借此机会, ...

  9. ubuntu学习笔记--不断更新中

    1.rpm软件包相关: rpm软件包安装命令: rpm -ivh linuxqq-v1.0.2-beta1.i386.rpm rpm软件默认安装路径查询: rpm -ql *.rpm ubuntu如何 ...

随机推荐

  1. mvc-6依赖管理

    CommonJS CommonJS规范,主要解决命名空间管理模块和用一套标准的编程模式来加载模块: 很快成为了JavaScript模块写法的事实标准: 它包含IO接口,底层的套接字流,以及单元测试等标 ...

  2. 09_IO流

    1. IO(Input Output)流 IO流用来处理设备之间的数据传输 Java对数据的操作时通过流的方式 Java用于操作流的对象都在IO包中 流按操作数据分为两种: 字节流和字符流 流按类型分 ...

  3. 停靠技术 Dock

    C:\Program Files\Borland\Delphi7\Demos\Docking   delphi例子 网上文档 http://www.docin.com/p-95543759.html

  4. 【面试题】HWL

    1.编程题 设计数据结构,模拟浏览器功能: BACK FORWARD VISIT QUIT Visit 未指定具体网址时,返回主页 http://www.xueersi.com 2.指出下列程序的错误 ...

  5. Hadoop中几个基本命令行命令

    对HDFS操作的几个命令(必须是Hadoop命令,否则只是对本地操作) 1. 查看HDFS中某个目录或文件的包含哪些文件和文件夹: bin/hadoop dfs/fs -ls 文件(夹)路径 若是非空 ...

  6. BZOJ4380 : [POI2015]Myjnie

    将$c$离散化,设: $f[i][j][k]$为区间$[i,j]$最小值为$k$的最大收益. $g[i][j][k]$为$\max(g[i][j][k..m])$. $h[i][j]$为对于当前DP区 ...

  7. 转:苹果应用商店DNS修改加快下载速度

    苹果应用商店DNS修改加快下载速度 具体方法:依次点击进入[设置]→[无线局域网]→[WiFi网络右侧小i图标]→更改DNS地址,可以按照自身需求选择以下某个DNS进行更换. OpenDNS:208. ...

  8. 【Poj】 p2342 Anniversary party(树形DP第一道)

    Anniversary party Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5523   Accepted: 3169 ...

  9. 【bzoj2049】[Sdoi2008]Cave 洞穴勘测 link-cut-tree

    2016-05-30  11:04:51 学习了link-cut-tree 二中神犇封禹的讲义感觉讲的超级清晰易懂啊(没有的可以q窝 算是模板吧 #include<bits/stdc++.h&g ...

  10. nfs的使用

    1.安装命令:sudo apt-get install nfs-kernel-server ;   sudo apt-get install nfs-common; 2.执行命令:mkdir /(目录 ...