一、vertical-align可以采用负值(正/负值根据基线上下移动),也可以采用百分比值,而这个百分比值不是相对于字体大小或者其他什么属性计算的,而是相对于line-height计算的。

此外,width,height,font-size的百分比是相当于父元素的相同属性的值来计算的;

line-height的百分比值是根据父元素的font-size来计算的;

二、浏览器标题栏小图标:

<link rel="shortcut icon" href="图片位置" type="image/x-icon"/>

三、首行缩进使用text-indent:2em。

四、我们知道默认浏览器默认字体大小是16px,通过body{font-size:62.5%},我们将默认字体变为62.5%*16px=10px;这时候1em刚好等10px。

统一使用em作为单位就很简单了。

五、css具有继承性。

(1)文本相关属性:font-*{family、size、style、weight};line-heigh;text-align;text-indent;word-spacing。

(2)颜色:color。

(3)列表属性:list-style-{image、position、type}。

六、外边距叠加。

这里指的是垂直外边距叠加(margin-top;margin-bottom)。水平外边距不会叠加。

外边距叠加之后外边距高度等于发生叠加之前的二个外边距中的最大值。外边距叠加针对的是block以及inline-块元素,不包括inline元素。

七、用边框border创建三角形:

 div{border: 20px solid;
border-color: red transparent transparent transparent;
height: 0;
width: 0;
}

八、inline元素和inline-block元素的vertical-align是针对周围的元素来说的;table-cell元素的vertical-align属性是针对自身。

九、当表单元素与标签不对齐时,可以调整vertical-align属性的值,正常为vertical-align:-3px(表示元素相对于基线向下偏移3px)。

十、单行文字居中:

对于单行文字,我们可以设置父元素行高(line-height)和高(height)相等就可以实现文字垂直居中。加上text-align:center可以实现完全居中。

十一、多行文字居中:

父元素高度固定,我们可以可以采用下面的方法:

父元素{
display: table-cell;vertical-align: middle;
}

 

十二、z-index只对position值为static之外的值有效(absolute、relative、fixed)

十三、页面顶部阴影

body::before{
content:"";
position:fixed;
top:-10px;left:0;
width:100%;height:10px;
box-shadow:0 0 10px red;
z-index:200;}

十四、禁用文本框缩放功能

textarea{resize:none}

十五、

哪些情况会触发BFC(块级格式化上下文)呢?常见的如下:

  • float的值不为none
  • overflow的值为auto,scrollhidden
  • display的值为table-celltable-caption,或inline-block
  • position的值不为relativestatic

待续··

css 小常识的更多相关文章

  1. css小常识

    static:对象遵循常规流.此时4个定位偏移属性不会被应用(即 没有声明position:relative, top.right.bottom.left不管用). 当position的值为非stat ...

  2. 总结的一些网站利于搜索引擎优化的小常识及SEO优化

    网站利于搜索引擎优化的小常识 1. 尽量用独立IP和空间原因:同IP下其他网站受罚,可能会对你站有影响.如果你的站和很多垃圾.色情站同在一个服务器,搜索引擎会喜欢吗? 2. 做不同内容网站时,避免使用 ...

  3. css小技巧(1)

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  4. HTML+CSS小实战案例

    HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...

  5. IC 小常识

    IC产品的命名规则: 大部分IC产品型号的开头字母,也就是通常所说的前缀都是为生产厂家的前两个或前三个字母,比如:MAXIM公司的以MAX为前缀,AD公司的以AD为前缀,ATMEL公司的以AT为前缀, ...

  6. CSS小tip整理

    CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...

  7. h5 做app时和原生交互的小常识。

    距离上次随笔或许有半年了吧,最近在用hybrid模式开发移动app,所以就简单的说说用h5技术开发app时候,做原生交互的几个小常识: 一.拨打电话或者发送短信: <a href="t ...

  8. css小细节罗列

    有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...

  9. css小随笔(二)与通用样式

    51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...

随机推荐

  1. SDUT OJ 数据结构实验之排序八:快速排序

    数据结构实验之排序八:快速排序 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 给定N ...

  2. Js屏蔽键盘输入的某些字符,用以部分代替正则表达式

    工作当中用到的:有是,用户会在文本框里输入一些无效的(错误的)内容,比如在手机号中输入#等等,一般使用正则表达式,但是只有点击的时候才会验证,用户体验不好,所以想屏蔽这些按键,让键盘根本打不出来,以下 ...

  3. 斐讯 N1 刷 Armbian 5.64

    前言 N1 天天链是斐讯出的一款挖矿产品,虽然已经翻车,但是本身硬件配置还是很不错的,晶晨 S905D 主控,蓝牙 4.1,双频 WiFi,2G + 8G,USB2.0,HDMI.而一个只要不到 80 ...

  4. ggplot你不知道的细节

    例一 Michaelis-Menten动力学方程 这个例子中采用出自文献中的一组有关于浮萍氮摄取的数据,共2两个变量8个观测值,其中底物浓度与浮萍的氮取速率之间可以通过M-M动力学方程来进行描述.在这 ...

  5. SPOJ - FREQ2 莫队 / n^1.5logn爆炸

    题意:给定\(a[1...n]\)和\(Q\)次询问,每次统计\([L,R]\)范围内出现频率最高的数的次数 想法没啥好说的,分别统计该数出现的次数和次数出现的次数,然后莫队暴力 注意本题时间卡的很紧 ...

  6. ThinkPHP5.0的助手函数汇总

    load_trait:快速导入Traits,PHP5.5以上无需调用 /** * 快速导入Traits PHP5.5以上无需调用 * @param string $class trait库 * @pa ...

  7. Hibernate复合主键的注解

    [转自] http://blog.csdn.net/happylee6688/article/details/17636801 最近做项目用到了Hibernate框架,采用了纯面向对象的思想,使用OR ...

  8. HTML5必须知道的那些事

    [转自] http://www.cnblogs.com/hamy/archive/2012/02/21/2362110.html 再普及一次HTML5基础,HTML5必须知道的那些事,HTML5扫盲. ...

  9. iptables 命令记录

    安装 原理 基本命令 实践 脚本 1.安装 以centos 7为例子安装 yum install -q -y iptables-services配置 iptables [-t table] comma ...

  10. C#串口编程 操作硬件

    -------通过USB将硬件连接PC, 更新USB驱动,使用下面方法可控制相关设备. //1声明一个串口对象 public static SerialPort MainModule_Port_ = ...