CSS学习进阶

1、浏览器适配
  -moz-     /* 火狐等使用Mozilla浏览器引擎的浏览器 */
  -webkit-  /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */ 
  -o-       /* Opera浏览器 */
2、渐变背景色
    background: -webkit-linear-gradient(left, #8fce81, #ece085); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #8fce81, #ece085); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #8fce81, #ece085); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #8fce81, #ece085); /* 标准的语法 */

  3、!important

作用是提高指定CSS样式规则的应用优先权。优先于所有CSS规则
4、距离计算
calc(100%空格-空格28px)
5、元素位置属性(position)
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。
6、隐藏元素
display:none,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;
visibility:hidden,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。也即是说它仍具有高度、宽度等属性值。
7、元素对齐方式(vertical-align)
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
8、元素生成框类型(display)
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
9、添加网页图标
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

 

 
posted @ 2017-12-19 10:55  付刚的博客  阅读(84)  评论(0编辑  收藏