css 小常识
一、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
,scroll
或hidden
。display
的值为table-cell
,table-caption
,或inline-block
。position
的值不为relative
和static
。
待续··
最新文章
- KBMMW 4.93.10 发布
- shell 面试题
- UNITY3D在线更新之道-CSlight 使用总结
- fuser命令小结
- 在VS2010中使用附加进程的方式调试IIS中的页面
- SQL Server 2008 R2 性能计数器详细列表(二)
- tmp1
- vector中删除第k个元素的巧妙方法
- RQPro 公募FOF策略实例——晨星基金筛选和风险平价配置
- String.valueOf(Thread.currentThread().getContextClassLoader().getResource(";";)) 获取项目的绝对路径(shiro项目中来的八)
- 04 入门 - ASP.NET MVC应用程序的结构
- linux和sqlserver 2017的安装
- Spring的事务管理基础知识
- [TestNG] Eclipse/STS中两种安装TestNG的方法
- 关于Jquery 插件开发,写的很清楚了。。。
- MyBatis.4关联
- 2015.10.9js(页面坐标)
- 关于keil不同容量和不同引脚大小的编译以及下载出错问题
- Oracle Solaris 11.4 GA 版发布,这将是 Solaris 的绝唱
- hdu 1070 Milk(贪心)