css样式学习小知识

1. 使用百分比设置宽高

自适用宽高的，有分割的区域，可以适用百分比：30% 70%

如果有一部分是固定的宽度或者高度，可以使用：height: calc( 100% - 36px );

2. input进度条

    <input type="range"  value=0 style="">  进度条，可以随意拖拽，定位。

这两个样式设置拖拽后颜色，background-size: 0% 100%;

  background-color: #ccc;

 

3. 多行文字设置溢出

-webkit-line-clamp下多行文字溢出点点点...

.box {
    width: 400px; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

4. <img> 标签的 longdesc

HTML <img> 标签的 longdesc 属性：

使用 longdesc 属性，指向一个包含图像描述信息的页面

 

5.  css实现高度height随宽度width变化保持比例不变

如何通过CSS实现高度 height 随宽度 width 变化而变化，保持长宽比例不变，宽度是根据父元素宽度变化的？

在保持元素宽高比恒定的情况下，要使得元素可以和父元素同比缩放。此时会用到 padding。

需要知道的是：一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。

使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果，将 padding-bottom 设置为想要实现的 height 的值。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。

此时CSS代码如下：

div {
float: left;
margin: 10px 5%;
padding-bottom: 20%;
width: 20%;
height: 0;
}

这里宽高比是1比1，实现的是正方形，并且实现同比缩放。

http://www.jianshu.com/p/83a84445d967

6. 子元素使用了float之后，父元素为何高度没了

 

我知道的一共有三种办法

1.直接给父元素一个值（蠢办法）
3.在父元素上加 overflow:hidden
3.在父级元素内加入 clearfix class

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

具体是因为：子元素浮动后，脱离了文档流

 

7. font-face字定义Web字体

 

font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中

http://www.runoob.com/cssref/css3-pr-font-face-rule.html

如果用户已经安装这个字体，设置使用本机字体的话，使用local

@font-face {
font-family: 'Green Sans Web';
src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GraublauWeb.ttf');
}

 8.背景图片固定显示

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。