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; }
![](https://images2015.cnblogs.com/blog/449809/201707/449809-20170721135729490-389422617.png)
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
1 @font-face { 2 font-family: 'Green Sans Web'; 3 src: 4 local('Green Web'), 5 local('GreenWeb-Regular'), 6 url('GraublauWeb.ttf'); 7 }
8.背景图片固定显示
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
相关文章
- Coursera台大机器学习课程笔记6 -- The VC Dimension
- 前端学习 -- Html&Css -- 框架集
- 前端学习 -- Css -- 浮动
- 前端学习 -- Css -- 字体
- 前端学习 -- Css -- 定义列表
- 前端学习 -- Css -- 选择器的优先级
- Python的dict字典结构操作方法学习笔记
- 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
- 前端学习 -- Css -- 字体
- 前端学习 -- Css -- 有序列表和无序列表
- 前端学习 -- Css -- 伪类
- CSS学习(四)
- Atitit 学习的本质 团队管理与培训的本质 attilax总结 v2
- 2021-10-28 SAP Spartacus SSR 性能方面的一些学习笔记
- Andrew NG机器学习课程笔记系列之——机器学习之逻辑回归(Logistic Regression)
- 如何从零开始学习DIV+CSS
- 【文献学习】Analysis of Deep Complex-Valued Convolutional Neural Networks for MRI Reconstruction
- Qt学习-----------7之lambda表达式
- 【CSS】css概述、语法规范、基础选择器_01
- 【深度学习与计算机视觉】2、线性 SVM 与 Softmax 分类器