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 属性的设置。 |
css样式学习小知识的更多相关文章
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- 【python学习小知识】求绝对值和numpy和tensor的相互转换
一.python求绝对值的三种方法 1.条件判断 2.内置函数abs() 3.内置模块 math.fabs 1.条件判段,判断大于0还是小于0,小于0则输出相反数即可 # 法1:使用条件判断求绝对值 ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- Boostrap入门级css样式学习
1. 自适应网页设计 首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" cont ...
- css样式学习笔记
视频参见php中文网玉女心经视频教程 讲解的相当的清楚和明白 第1章 :css快速入门 1.1 什么是css 改变html框架的样式. 1.2 css的三种引入形式 第一种形式 ...
- CSS样式表基础知识、样式表的分类及选择器
一.CSS基本概念: CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 二.样式表的分类 1.内联样式表(和html联合 ...
- CSS样式设置小技巧
1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...
- CSS——NO.2(CSS样式的基本知识)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- 2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)
CSS样式的添加方法 行内样式 e.x. 内嵌样式 e.x. 注意内嵌样式写在head标签内: 单独文件(外部式样式表文件) 也是在head标签内插入超链接,sublime+emmet可以用link: ...
随机推荐
- 跟我一起读postgresql源码(一)——psql命令
进公司以来做的都是postgresql相关的东西,每次都是测试.修改边边角角的东西,这样感觉只能留在表面,不能深入了解这个开源数据库的精髓,遂想着看看postgresql的源码,以加深对数据库的理解, ...
- selenium python 时间控件的输入问题
对于时间的选择问题,查到的大部分为两种情况: 1.存在readonly属性的 2.没有readonly属性的 可直接赋值send_keys() 测试用例中刚好是没有readonly属性的 且定位不到弹 ...
- pika教程
http://www.01happy.com/python-pika-rabbitmq-summary/
- C# 关于utf-8的研究
前提 如果一不小心把字符转成utf8的格式,但是却产生了乱码.这个时候要么就是寻找其他的转码方式,要么就不想要了,直接过滤吧. 这里说的是直接过滤的办法. 参考链接 https://netvignet ...
- UVA - 10817 状压DP
题意:大白P95 本题比较特别的是状压两个集合并且进行转移,因此要分别处理当前集合只有1个老师/2个老师的记录(然后可O(1)得出0个老师的集合) 记忆化过了但是迭代式不能记忆超过2的之前的状态是怎样 ...
- PIE SDK栅格RGB渲染
1. 功能简介 RGB色彩模式是一种颜色标准,是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红.绿.蓝三个通道的颜色,这个标准几乎包 ...
- ibatis配置文件中的XML解析错误The content of elements must consist of well-formed character data or markup.
在检查过所有的标签名都没有问题的情况下. xml中的小于号属于非法字符. SQL语句中则可能需要小于号,此时就需要用<![CDATA[ ]]>将小于号包裹,如此不会被xml解析器解析. ...
- 使用 PuTTY 时遇到错误:“expected key exchange group packet from server”
情况 使用 PuTTY 通过 SSH 访问 ProxySG 或 Advanced Secure Gateway (ASG) 时,您会看到如下错误:"expected key exchange ...
- Element UI 中国省市区级联数据
https://www.npmjs.com/package/element-china-area-data
- postgresql数据库primary key约束/not null约束/unique约束及default值的添加与删除、列的新增/删除/重命名/数据类型的更改
如果在建表时没有加primary key约束.not null约束.unique约束.default值,而是创建完表之后在某个字段添加的话 1.primary key约束的添加与删除 给red_pac ...