3、对文本布局，可以使用column-count

4、行间距可以用百分数来设定，例如：line-height:100%

5、line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半，分别加到一个文本行内容的顶部和底部。

6、div, h1,p, span,经常在这四个标签中包含文字，现在比较一下：

width和height:对div, h1, p均有效，span不支持

div:布局里有两个div，由于块级元素后面加了换行符，因此是上下各放置一个；相当于display:block;

如果设置display:inline-block的话，则这两个div会水平放置，width和height仍然生效；

如果设置为display:inline的话，则这两个div会完全变成span的样式，即水平放置，但是width和height都不生效；

h1和p同上。

span:布局里有两个span，会放置在同一行，相当于display:inline;

如果设置为display:inline-block和display:block时，和div标签相同；

注意的是：这4个标签，设置为display:block时，块级元素间的距离是不同的，这点不知道是为什么。

7、text-align的值，只用于文本，常用的有：left,right,start,center;

8、vertical-align:使用该属性的元素的display需要设置成inline-block

9、要想要块级元素中的文字居中，让line-height和块级元素的height相同即可

10、div标签要指定background，需要给【该】div标签指定width和height，才能显示

和img不同，img指定宽度和高度后，显示的仍然是完整的图片；background指定后，如果width或者height比图片(背景是图片的话)小，显示的是图片的部分；如果更大，也不会放大图片；因此可以通过指定width,height,position来完成只显示图片的固定部分。

11、两个块级元素要放置在同一行，需要把它们两个都设置成display:inline-block，而不是把它们的父级元素设置成inline-block

12、当设置一个元素的熟悉为box-sizing:border-box;时，此元素的内边距和边框不再会增加它的宽度。

13、

#outer {

width: 500px;

height: 200px;

background: #FFCCCC;

margin: 50px auto 0 auto;

display: block;

}

#inner {

background: #FFCC33;

margin: 50px 50px 50px 50px;

padding: 10px;

display: block;

}

由于css的特性，以上inner的margin-top:50px的效果并不会呈现出来，解决办法有三个：

1)给inner元素加上display:inline-block属性

2)给outer元素加上：padding-top:1px

3) 给outer元素加上:overflow：auto

a标签点击跳转失效--IE6、7的奇葩bug

一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

百度MIP页规范详解 —— canonical标签

百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签 缺失或错误 这 ...

【CSS进阶】伪元素的妙用--单标签之美

最近在研读 (CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

TODO：Laravel 使用blade标签布局页面

TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

最新 去掉 Chrome 新标签页的8个缩略图

chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

css-父标签中的子标签默认位置

& ...

xpath提取多个标签下的text

title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

多个Img标签之间的间隙处理方法

1.多个标签写在一行 ...

html5标签canvas函数drawImage使用方法

html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

JSP目录

JSP目录   课时1    jsp概述和背后原理31:11 课时2    三种jsp的scriptlet语法27:29 课时3    jsp的注释14:00 课时4    JSP4个域对象的作用域3 ...

JS浏览器全屏

//全屏 function fullScreen() { var el = document.documentElement; var rfs = el.requestFullScreen || el ...

转载——PLSQL developer 连接不上64位Oracle 解决办法

前两天刚下载了oracle 11g 64位的最新版本,安装成功之后,再安装PLSQL.结果使用PLSQL访问数据库时,死活连接不上.报错如下: Could not load "……\bin\ ...

Android学习笔记1 android adb启动失败问题 adb server is out of date. killing...