css样式学习小知识
1. 使用百分比设置宽高
自适用宽高的,有分割的区域,可以适用百分比:30% 70%
如果有一部分是固定的宽度或者高度,可以使用:height: calc( 100% - 36px );
2. input进度条
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 属性的设置。 |
最新文章
- HDU3394:Railway
- Util应用程序框架公共操作类(十一):表达式生成器
- JavaEE中Web服务器、Web容器、Application服务器区别及联系
- getResourceAsStream和getResource的用法及Demo实例
- <;读书笔记>;软件调试之道 :问题的核心-修复后的反思
- sqlplus 配置方法及相关命令
- 【Unity 3D】学习笔记四十一:关节
- asp.net中listview下嵌套gridview
- 【前端】诸葛io收集前端js报错信息
- mpvue——引入echarts图表
- mongoDB 小练习
- mysql实现随机获取几条数据的方法
- Appium典型问题处理
- hacking a friend&#39;s Linux buzzer driver in OK335xS
- 管理oracle的一些知识
- JavaScript跨域总结与解决办法(转)
- 【原创】Self-Contained Container(自包含容器)
- 【spoj SUBLEX】 Lexicographical Substring Search
- 纯css实现进度条效果
- 【Java面试题】31 介绍Collection框架的结构
热门文章
- 【算法】关于图论中的最小生成树(Minimum Spanning Tree)详解
- 单据头->;实体服务规则中根据单据类型设置可见性或必录等
- Ubuntu16.04安装openBLAS
- Android 基于TCP多线程通信实现群聊天的功能
- 1017 A除以B (20 分)
- centos上安装theano和Lasagne
- Python 实现 ZoomEye API SDK
- python--交互器,编译器
- if __name__ == &#39;__main__&#39; 详解
- oracle 笔记---(五)__内存管理