随笔- 310  文章- 1  评论- 0  阅读- 86009 
css

-moz firefox浏览器私有属性
-ms ie浏览器私有属性
-webkit safari、chrome私有属性
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->

CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），
对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，
我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把
这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
CSS Hack大致有3种表现形式:CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）

响应式

@charset "utf-8";
/* PC或中大型笔记本设备 desktop */
@media all and (min-width: 1201px) {}
/* 中小型笔记本或大平板 laptop */
@media all and (min-width: 980px) and (max-width: 1200px) {}
/* 中型平板或小型笔记本 tablet */
@media all and (min-width: 768px) and (max-width: 979px) {}
/* 手机或小平板 phone */
@media all and (max-width: 767px) {}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 991px) {}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 1200px) {}

css中引入css文件

?
1
2
3
<style type="text/css">
    @import url(CSS文件路径地址);
</style>

　优先级

?
1
2
内联样式(style="")>id选择器>class>html
!important:提升优先级

　基本样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
column-width： [每列的宽度]
-webkit-column-count    [对象的列数]
-webkit-column-gap:30px;       
-webkit-column-rule:1px solid #000;
column-count: 列数目
column-gap: 各列之间间隙宽度
column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算
column-rule-width：列之间分割线宽度
column-rule-style：列之间分割线风格
column-rule-color：列之间分割线演示
column-span: 允许一个元素的宽度跨越多列
column-fill: 分列方式
 
transform:rotate(180deg);【旋转180度】
transform:rotateX(45deg);
transform:rotate3d(1,1,0,45deg);【x轴和y轴都旋转45度，z轴不旋转】
ul li a ：表示ul标签下的li标签中的a标签
div.div1:表示类等于div1的div标签属性
transform: rotate(90deg) 旋转90度
transform: scale(1.2); 放大1.2倍
margin:定义区域块与区域块间距离的属性
        可以使用 ：margin-top、margin-right
        margin-bottom、margin-left
margin:0 auto;【自适应居中】
margin【上下相邻的普通元素，上下边距，并非简单的相加，而是取其中较大的边距值】
padding:用于设置区域的内边距属性(参考margin)
border:边框属性用于设置一个元素边框风格、边框颜色、可以一起设置4边的边框
border-style： none(默认为不显示边框)dotted solid、double dashed;(点状、实线、双线、虚线)
    groove(3D陷入线）、 ridge（3D山脊？线）、ridge（3D山脊？线）outset(使页面有浮出感)
border: 10px solid ;
border-color: red yellow blue pink;（必须设置bordre-style）
border-image:url("border.png") 30 30 stretch;【stretch拉伸(默认值)，repeat重复，round平铺】
border-image-source 用在边框的图片的路径。
border-image-slice  图片边框向内偏移。  
border-image-width  图片边框的宽度。   
border-image-outset 边框图像区域超出边框的量。  
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
border-radius:25px;【设置边框为圆角】
border-radius:20px 40px 60px 80px/10px 20px 30px 40px;【分别设置x轴/y轴半径】
box-shadow【向框添加一个或多个阴影】
text-shadow: 3px 4px 5px #FF0000;【给文字添加阴影;5px为模糊的距离】
background:-moz-linear-gradient(left top,red,green);【线性渐变】
background:-moz-radial-gradient(left top,red ,green );【径向渐变】
background:-moz-repeating-linear-gradient(15deg,green 0,green 10px,#fff 10px,#fff 20px);
background:-moz-linear-gradient(top, rgba(255,255,255,1) 30%, rgba(255,255,255,0.4) 90%), url(2.jpg);
[top表示从上到下，left表示从左到右，如果定义成left top表示从左上角到右下角]
background:-moz-repeating-linear-gradient(left top,red 0,green 20%,yellow 50%);【平铺(left top或30deg度数)】
background-image: url(img_flwr.gif);【设置背景图像】
background-color:blue;
background-clip:border-box(默认)|padding-box(边框不加背景)|content【背景裁切(显示背景的区域)】
background-clip:content-box;【指定绘图区的背景】
background-origin:border|padding|conten【背景图原点设置】
background:url("/images/back40.gif") no-repeat,url(2.jpg) no-repeat;【两张背景图片】
background-repeat:no-repeat;【背景图像不重复(repeat-x|repeat-y)】
background-attachment:fixed【设置背景图片固定，不随鼠标滚动而变化】
background-size:80px 60px;【背景尺寸,也可用cover contain】
background-size:100% 100%;【背景尺寸与元素大小相同】
background-position:left top;【设置背景图片的位置】
background-position: -350px 60px;【显示背景图片的相对位置】
position：absolute(绝对)，relative(相对)，static（静态),fixed(固定)
    static：静态定位的元素不会受到top, bottom, left, right影响
    fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
    relative：相对定位元素的定位是相对其正常位置，可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变
    绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
top：层距离顶点纵坐标的距离
left:层距离顶点横坐标的距离
white-space:normal;【正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行】
word-wrap : break-word【连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行】
writing-mode：tb-rl【设置对象书写方向，lr-tb：从左向右,从上往下 tb-rl：从上往下,从右向左】
vertical-align:middle|top|text-top|bottom|text-bottom 【元素垂直对齐】
line-height:指定行高，内容都是在行的中间
z-index:决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
display:设置block值是以块状显示，在元素后面添加换行符，既其他元素不能在其后面并列显示。
如果设置为inline值则为内联显示，在元素后面删除换行符，既可以并列显示
display:none【隐藏，同时位置也消失】
visibility:hidden【隐藏，位置不变】
overflow:内容超出范围的处理方式(hidden、scroll【无论是否超出都显示滚动条】，auto【超出范围显示滚动条】)
font-style:normal/italic/oblique【斜体……】
outline:green dotted thick;【（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围】
font-weight:bold;【加粗】
font-family:"Times New Roman";【字体样式】
font-size:23px【字体尺寸】
white-space: nowrap;【文本不进行换行】
writing-mode：tb-rl【设置对象书写方向，lr-tb：从左向右,从上往下 tb-rl：从上往下,从右向左】
text-shadow: 3px 4px 5px #FF0000;【给文字添加阴影;5px为模糊的距离】
line-height:23px;【行高，当行高和块的高度相同可以使得字体居中】
float:right【靠右漂浮，不换行】
clear:指定一个元素是否允许有元素漂浮在它的旁边（left、right、both）
mix-width:最小宽度
color:字体颜色
cursor: pointer;【鼠标形状】
a {text-decoration:none;}【移除链接下划线】
text-align:横向排列left、right、center【字体的位置】
text-indent:50px;【字体缩进】
text-decoration:underline;   【在文字下显示下划线】
text-decoration:line-through;【删除线】
text-decoration:overline;    【顶划线】
text-transform：
    none : 无转换发生
    capitalize : 将每个单词的第一个字母转换成大写，其余无转换发生
    uppercase : 转换成大写
    lowercase : 转换成小写
letter-spacing:2px;【指定字符间的空间】
{line-height:20px;【指定行间的空间】
list-style-type:none;【不显示样式类型】
list-style-image    将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。

　　

 posted on   boye169  阅读(79)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
点击右上角即可分享
微信分享提示
SQL AI 助手