css技巧总结
注意,以下所有内容都来自本人看过张鑫旭大哥的《css世界》中相关css知识。有兴趣的小伙伴可以拿来读一读~
一.其实css比大家了解的要神奇的多,可以利用css实现凹凸效果:
<html>
<span class="ao"></span>
<span class="tu"></span>
</html>
<style>
.ao,
.tu {
display: inline-block;
width: 0;
font-size: 14px;
line-height: 18px;
margin: 35px;
color: #fff;
}
.ao:before,
.tu:before {
outline: 2px solid #cd0000;
font-family: Consolas, Monaco, monospace;
}
.ao:before {
content: "love你love";
pad
}
.tu {
direction: rtl;
}
.tu:before {
content: "我love你";
}
效果如图
二. css中的direction 属性规定文本的方向 / 书写方向,因为改变的只是内联元素块的左右顺序 如img, button, input, video, object’等,或者inline-block水平的元素,才可以生效。
ltr为默认值,rtl为文本方向从右到左,这里指的文本方向并非文字方向!因此改变文字方向是不生效的,改变的只是内联元素块的左右顺序,实际开发中我觉得最方便的一个用途就是比如一个dialog弹框中的确认取消需要更换位置时就会即可用到:
<div>
<button>确认</button>
<button>取消</button>
</div>
div{
width: 500px;
height: 300px;
margin: 0 auto;
background: #ccc;
text-align: center;
/* direction: rtl;*/
}
此时效果为:
此时我们把上列的css属性放开direction: rtl,按钮也改变了位置,为什么大家没在开发中见过呢,因为大家想到更方便的是直接更改dom元素位置更方便没必要增加多余代码量,此文章是为大家增加知识并非介绍实用性。
三. 超越!important
各位前端同学写过css相比也知道!important 权重是无敌的,但是我建议大家在项目中谨慎使用,有开发经验的同学应该知道其中缘由。接下来给大家介绍一个可能开发过程中不会注意到的知识点, 当给元素同时设置 max-width与width !important 时,大家猜猜哪一个会生效呢,好,上代码:
div{
width: 1000px !important;
max-width: 500px;
height: 300px;
background: #ccc;
}
为了测试哪一个优先级更高,我们把width设置为1000px,反之最大宽度设置为500px,结果如下:
div只有500宽度!所以min-width 、max-height 、min-height同理。
四.超越最大
接下来大家可能会想到,上面介绍了权重,那max-width与min-width哪个优先级更高呢?好,我们开始测试,脑洞要打开了同学们!为了测试,我们把两个测试值取相反值如下,最小宽度居然比最大宽度设置的还大,此时,两者必定是你死我活的状态。究竟谁死呢?遵循超越最大原则(注意不是后来居上原则),min-width活下来了,max-width被忽略。
div{
min-width: 800px;
max-width: 500px;
}
最小宽度为800px,反之最大为500px,结果如下:
五.幽灵空白节点
‘幽灵空白节点’是内联盒模型中非常重要的一个概念,具体指的是:在HTML5文档声明中,内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取,就好像幽灵一样,但又确确实实地存在,表现如同文本节点一样,因此,称之为“幽灵空白节点”。 注意,这里有个前提,文档声明必须是HTML5文档声明,如果还是很多年前的老声明,则不存在“幽灵空白节点”。
<!DOCTYPE html>
<div> <span></span>
</div>
</html>
div{
background: #ccc;
}
span{
display: inline-block;
}
结果,div的高度并不是0,大家都知道如果没内容的前提下没定义高度是不可能有高度,所以现在就是“幽灵空白节点”在作祟!
六.替换元素
替换元素,顾名思义,内容可以被替换。比如下列的img标签:
<img src="1.jpg" alt="">
如果我们把上面的1.jpg换成2.jpg,是不是图片就会替换了。这种通过某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此,img、object、video、iframe或者表单元素textarea和input都是典型的替换元素。替换元素的默认display值是不一样的:
元素 | Chrome | Firefox | IE |
---|---|---|---|
<img> | inline | inline | inline |
<iframe> | inline | inline | inline |
<video> | inline | inline | inline |
<select> | inline-block | inline-block | inline-block |
<input> | inline-block | inline | inline-block |
<button> | inline-block | inline-block | inline-block |
<textarea> | inline-block | inline | inline-block |
通过对比发现,IE浏览器和Chrome浏览器的返回值都是一样的,但是Firefox浏览器在textarea和绝大多数类型的input元素上却是返回的inline而不是inline-block,这其实一个很奇怪也很有意思的现象
<input type="button" value="按钮">
<button type="button">按钮</button>
我们都知道这两种按钮元素的表示方法尺寸长相都是一模一样的,但是在firefox下,前者的display属性默认值是inline,后者却是inline-block,很自然会奇怪明明一个模子出来的,怎么会这样呢?实际上,是每个浏览器都有自己的一套规则。 很多替换属性都有默认值,比如input默认的长度宽度字体大小等,比video标签在所有现代浏览器下的尺寸表现都是300像素150像素。再例如img标签在Chrome浏览器下的默认尺寸是0像素0像素,IE浏览器下是28像素30像素,在firefox浏览器下显示的是0像素22像素,不过我们平时使用都会设置尺寸。
七.src缺省时img元素的alt信息展示技术
如果我们网络较慢或者因为某些原因图片加载不出来,会出现空白,没有任何信息,用户完全不知道这里的内容是什么,虽然图片的alt属性可以提供描述信息,但是视觉效果不好,可能会被隐藏掉。此时,我们要是在图片还没加载时就把alt信息呈现出来就好了:
<img alt="美女沉思图" data-src="1.jpg">
<p><button>设置src属性显示图片</button></p>
img {
display: inline-block;
width: 256px; height: 192px;
/* 隐藏Firefox alt文字 */
color: transparent;
position: relative;
overflow: hidden;
}
img:not([src]) {
/* 隐藏Chrome alt文字以及银色边框 */
visibility: hidden;
}
img::before {
/* 淡蓝色占位背景 */
content: "";
position: absolute; left: 0;
width: 100%; height: 100%;
background-color: #f0f3f9;
visibility: visible;
}
img::after {
/* 黑色alt信息条 */
content: attr(alt);
position: absolute;
left: 0; bottom: 0;
width: 100%;
line-height: 30px;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 14px;
transform: translateY(100%);
/* 来点过渡动画效果 */
transition: transform .2s;
visibility: visible;
}
img:hover::after {
transform: translateY(0);
}
var eleButton = document.querySelector('button'),
eleImg = document.querySelector('img');
if (eleButton && eleImg) {
var initValueButton = eleButton.innerHTML;
// 图片地址
var srcImage = eleImg.getAttribute('data-src');
// 移除该属性
eleImg.removeAttribute('data-src');
// 按钮点击事件
eleButton.addEventListener('click', function() {
if (this.innerHTML == initValueButton) {
this.innerHTML = '移除src属性';
// 图片显示
eleImg.setAttribute('src', srcImage);
} else {
this.innerHTML = initValueButton;
// src属性移除
eleImg.removeAttribute('src');
}
});
}
当没有src时,滑过效果如下:
当有src时,也就是有图片时:
相关alt显示也不会出现,增加了用户体验。
八.css计数器counter
counter成员 counter的成员主要有三个: counter-reset(计数器声明及初始值设置) counter-increment(递增规则) counter()/counters(计算结果生成)
counter-reset counter-reset主要有三个属性。 none:默认。不能对选择器的计数器进行重置。 name num:name即标记计数器名称,num即记录计数器初始值。num非必写,默认为0。 inherit:规定应该从父元素继承 counter-reset 属性的值。
counter-increment counter-increment主要有三个属性。 none:没有计数器将递增。 name num:name即选择递增的计数器,num即增量。num非必写,默认为1,可以是正数、零或者负数。 inherit:指定counter-increment属性的值,应该从父元素继承。
counter()/counters() 这是个方法,不是属性。类似CSS3中才calc()计算。
body {
counter-reset: icecream;
}
input:checked {
counter-increment: icecream;
}
.total::after {
content: counter(icecream);
}
<strong>下面中国十大冰淇淋你吃过几个?</strong>
<ol>
<li><input type="checkbox" id="icecream1"><label for="icecream1">哈根达斯</label></li>
<li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall's</label></li>
<li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li>
<li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li>
<li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li>
<li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li>
<li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li>
<li><input type="checkbox" id="icecream8"><label for="icecream8">乐可可冰淇淋</label></li>
<li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li>
<li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li>
</ol>
你总共选择了 <strong class="total"></strong> 款冰淇淋!
九.margin的妙用
其实大家都知道padding能改变元素尺寸,但是大家可能不知道的是margin也可以改变元素尺寸:
<div class="father">
大家好
<div class="son"></div>
</div>
.father{
width: 300px;
}
.son{
margin: 0 -20px;
}
大家可以看到father盒子300px,然后son盒子设置margin为0 -20px,此时son盒子为340px,这个就是margin的特性,‘充分利用可用空间’。 再给大家介绍一个右对齐的方法,也是比浮动定位之类都特别实用的方法:
<div>
<li></li>
</div>
div{
width: 300px;
height: 300px;
background: red;
}
li{
list-style: none;
width: 100px;
height: 300px;
background: #ccc;
}
此时我想把li移动到最右侧,大家一般的方法就是 float: right;,或者再麻烦点儿就是定位之类的,但是利用margin:auto就可以实现,可别小瞧了auto这个属性值,也就是自动计算剩余空间!
div{
width: 300px;
height: 300px;
background: red;
}
li{
list-style: none;
width: 100px;
height: 300px;
background: #ccc;
margin-left: auto;
}
由此得知居中效果就可以这么玩~:
div{
width: 300px;
height: 300px;
background: red;
}
li{
list-style: none;
width: 100px;
height: 300px;
background: #ccc;
margin-left: auto;
margin-right: auto;
}
设置左右边距为auto,刚好计算为左右各100px
十.你未听闻的border
大家要知道border-width是不支持百分之宽度的,其次有些值大家可能也没见到过:
border-width:thin //薄薄的,等同于1px
border-width:medium //(默认值)薄厚均匀,等同于3px
border-width:thin //厚厚的,等同于4px
大家此时就有疑问了,为什么默认值不是thin呢,应该是这个1px最常用啊,为什么呢?因为 border-style:double至少3px才有效果!