CSS 一些特别的属性
一、关于 CSS 的重置问题
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img,
ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary, time, mark,
audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body { line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{ display:block; }
nav ul {list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none; }
a,a:hover {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration:none;
}
/* change colors to suit your needs */
ins { background-color:#ff9;color:#000; text-decoration:none; }
/* change colors to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
/* change border color to suit your needs */
hr { display:block; height:1px;border:0; border-top:1px solid #cccccc; margin:1em 0;padding:0; }
input, select { vertical-align:middle; outline:none;}二、width 中的特殊属性
2.1、fill-available
width:fill-available;表示撑满可用空间。
2.2、fit-content
width:fit-content;表示将元素宽度收缩为内容宽度。
2.3、min-content
width:min-content;表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。
2.4、max-content
width:max-content;表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行。
三、-webkit-text-fill-color 文字填充颜色属性
文字填充色：
-webkit-text-fill-color: yellowgreen;镂空字体：
-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px #000;字体添加过渡色：
background-image:-webkit-linear-gradient(#eee,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px transparent; # 让效果更柔和四、transparent 的用法
1、transparent
background-color:transparent
2、background-color:rgba(0,0,0,0);只要透明度设为0，则为白色
3、opacity:透明;（取值0-1之间）
注意：不支持IE，若要兼容IE，加：filter:alpha(opacity=50); 此方法仅限IE
五、css3字体缩放样式
5.1、-webkit-text-size-adjust属性
html { -webkit-text-size-adjust: none; }PS：
1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的
5.2、利用 transform:scale() 属性实现缩放：
谷歌浏览器支持CSS缩放，于是，我们可以在这方面做文章：
-webkit-transform: scale(0.5);既然最小支持到12px，那么就以12px为基点进行缩放，同时可以使用-webkit-transform-origin-x: 0; 来解决缩放后margin-left的位移问题：
.test_tag{
font-size:12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.5833333333333334);
/* scale值的计算方法为： 7 / 12 = 0.5833333333333334*/
}六、如何隐藏html中标签
在制作网页时，隐藏内容也是一种比较常用的手法，它的作用一般有：隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏弹出层、隐藏滚动条、清除错位和浮动等等。 使用CSS即可使以上提到的内容隐藏起来，几种隐藏内容的方法：
1、使用display:none来隐藏所有内容
display:none可以让网页中所有内容不显示，如代码、文字、链接、图片、div层，是推荐的内容隐藏方式。
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| inherit | 规定应该从父元素继承 display 属性的值。 |
2、使用visibility:hidden来隐藏内容
visibility:hidden和display:none可以隐藏的内容几乎一样，但唯一区别是它虽然隐藏了内容，
但被隐藏掉的内容仍旧占据空间，这段隐藏了内容却保留空间的位置会在网页中显示为空白。
| 值 | 描述 |
|---|---|
| visible | 默认值。元素是可见的。 |
| hidden | 元素是不可见的。 |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 |
| inherit | 规定应该从父元素继承 visibility 属性的值。 |
3、使用overflow:hidden隐藏溢出内容
overflow:hidden这种方式可以隐藏掉固定区域外的内容，它可以有效控制显示区域。但应注意，使用它时需要给它定义宽度和高度，否则会无效。
overflow用法中存在一个分支，overflow-x:hidden和overflow-y:hidden，x是横向范围，y是纵向范围，这两个属性经常用在需要隐藏滚动条时。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
七、 pointer-events 属性
pointer-events就是用来进行事件穿透的；这个属性有很多可以使用的属性值，但大部分都是针对SVG的：auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。其中none值能阻止点击、状态变化和鼠标指针变化，auto为默认，表示不阻止。
PS：
- 子元素可以声明
pointer-events来解禁父元素的阻止鼠标事件限制。 - 如果你对一个元素设置了click事件监听器，然后你移除了
pointer-events样式声明，或把它的值改变为auto，监听器会重新生效。基本上，监听器会遵守pointer-events的设定。
八、混合属性
8.1、-webkit-user-select 和 -moz-user-select 禁止页面文字选择 ，此属性不继承
将-webkit-user-select 和-moz-user-select 的值设为none，设置在父元素上才会生效。
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;8.2、-webkit-appearance 和 -moz-appearance 把一个元素伪装为其他元素
-webkit-appearance: none; 消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。 注意：不同type的input使用这个属性之后表现不一；text、button无样式，radio、checkbox直接消失。
| 值 | 描述 |
|---|---|
| normal | 将元素呈现为常规元素。 |
| icon | 将元素呈现为图标（小图片）。 |
| window | 将元素呈现为视口。 |
| button | 将元素呈现为按钮。 |
| menu | 将元素呈现为一套供用户选择的选项。 |
| field | 将元素呈现为输入字段。 |
示例
| 1 2 3 4 |
|
8.3、-webkit-tap-highlight-color 去除a和按钮的高亮
想要禁用这个高亮，设置颜色的alpha值为0即可。
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
8.4、outline：none
(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性，需要在a标签上添加hidefocus="true"
(2)input，textarea{outline:none} 取消chrome下默认的文本框聚焦样式
(3)在移动端是不起作用的，想要去除文本框的默认样式可以使用-webkit-appearance，聚焦时候默认样式的取消是-webkit-tap-highlight-color。
8.5、设置选中后的颜色
::selection{ background:#FFF; color:#333; }
::-moz-selection{ background:#FFF; color:#333; }
::-webkit-selection{ background:#FFF; color:#333;}8.6、-webkit-touch-callout 禁止或显示系统默认菜单
当触摸并按住触摸目标时候，禁止或显示系统默认菜单。
- -webkit-touch-callout: default; /* 系统默认菜单不被禁用 */
- -webkit-touch-callout: none; /* 系统默认菜单被禁用 */
- -webkit-touch-callout: initial; /* 起始值 */
- -webkit-touch-callout: inherit; /* 继承 */
- -webkit-touch-callout: unset; /* 不确定 */
8.7、vertical-align 属性设置元素的垂直对齐方式。
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
九、CSS控制文字，超出部分显示省略号
9.1、单行文本
实现方法：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;9.2、多行文本
9.2.1、第一种方法
实现方法：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;PS：
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
9.2.2、第二种方法
p{
position: relative;
line-height: 20px;
max-height: 40px;overflow: hidden;
}
p::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}适用范围：
该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注：
- 将height设置为line-height的整数倍，防止超出的文字露出。
- 给p::after添加渐变背景可避免文字只显示一半。
- 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：…）；兼容ie8需要将::after替换成:after。
9.3、设置字间距
letter-spacing:8px
十、关于 input 的使用
input,input[type="radio"],input[type="checkbox"]{
display:block;
border:0 none;
background: #fff;
outline:none;
border-radius:0;/*去除圆角*/
box-shadow:none;
-webkit-appearance: none;/*去掉默认样式*/
}
/*设置选择边框*/
input[type="radio"],input[type="checkbox"]{
width:1rem;
height:1rem;
border:1px solid #787777;
border-radius:50%;
}
form input:checked{
-webkit-appearance:none;/*去掉默认样式*/
background: url('../images/checked.jpg') no-repeat center /.1rem .1rem;/*选中时的背景图片*/
}