css零碎合集

alt和title

我们都用过img标签，相信也都知道有title和alt这两个属性，笔试时有时会考到，在这里简单记录一下，主要是怕混淆。

alt：是当图片不能正确加载出来，进而显示的文字（图2）

title：是当鼠标悬停在图片上，出现的提示文字。（图1）

<img src="img/12.png" alt="图片未能加载出来" title="这是一张图片"/>

图1

当我们把图片的路径换为错误的路径时。

图2 

text-transform:text-transform 属性控制文本的大小写。

write-space :white-space属性指定元素内的空白怎样处理。

讲一下pre属性值，一般情况下，

<p>
This is some text. This is some text. This is some text.    
    
    
    
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

   
    
This is some text. This is some text. This is some text.
</p>

在HTML渲染时，我们看到的应该是

并没有中间有很多空行，包括换行也只是因为容器装不下，而换行，并不是我们回车换行导致的，那么pre属性值就是用来实现这个的，就像pre标签查不到，

p
{
    white-space:pre;
}

这就是效果。OK

readOnly 和disabled

Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。

而且readonly时刻用tab获取焦点的，disabled不行。

btn.setAttribute("disabled",true);

btn.disabled=true;

以上两种方式都是可以上的。第一种不论值是什么都行  false  undefined

direction   规定文字的书写方向 

div
  {
  direction: rtl  
  }

从右往左

在给a标签里面的元素定义样式 如字体颜色 text-decoration属性是不能重父元素继承的。例：

<h2><a href="http://www.cnblogs.com/djlxs/p/5598120.html">文章链接</a></h2>

字体颜色和text-decoration直接设置在a标签上，设置在h2上没有效果

当使用flex布局时：子元素的float、clear和vertical-align属性将失效。