CSS常用技术
1、处理图片底部 5px 间距
<style>
body {background: #2d97db;}
.imgBox {
background: #fff;
font-size: 0; /* 方式一 */
line-height: 5px; /* 方式二 */
}
img {
width: 100%;
display: block; /* 方式三 */
vertical-align: bottom; /* 方式四 */
}
</style>
<div class="imgBox">
<img src="http://dsdximg.dsdxo2o.com/goods/201907031643333142607.jpg"/>
</div>
2、元素高度跟随窗口
块级元素宽度是随窗口100%适应的,高度则是随内容而变。
如果希望元素高度和窗口一致,如果用百分比设置,那html、body等元素也要跟着设置height:100%;
<style>
* {
padding: 0;margin: 0;
box-sizing: border-box;
}
/*
方式 1:
html {height: 100%;}
body {height: 100%;}
.eleBox {
height: 100%;
background: #2d97db;
}
*/
/* 方式 2 */
.eleBox {
height: 100vh;
background: #3FB2FF;
}
</style>
<div class="eleBox"></div>
3、:not()
所有元素都设置某些样式了,唯独最后一个不需要,这时候使用 not 选择器会特别方便。
li:not(:last-child) { border-bottom: none }
4、caret-color
使得光标颜色和 input 框样式更协调。
input { caret-color: #333}
5、移除 type="number" 尾部的箭头
input::-webkit-inner-spin-button { -webkit-appearance: none; }
6、移除 input 框选中时默认的状态线
input { outline: none; }
7、IOS 滚动条卡顿
html,body,div {-webkit-overflow-scrolling: touch;}
8、画三角形
<style>
.parent { display: flex }
.child {
margin-right: 10px;
border: 20px solid rgba(0,0,0,0);
}
.top { border-top: 20px solid #2d97db }
.right { border-right: 20px solid #2d97db }
.bottom { border-bottom: 20px solid #2d97db }
.left { border-left: 20px solid #2d97db }
</style>
<div class="parent">
<div class="child top"></div>
<div class="child right"></div>
<div class="child bottom"></div>
<div class="child left"></div>
</div>
9、箭头
<style>
.triangle {
position: relative;
display: inline-block;
margin-right: 10px;
width: 0;
height: 0;
border: 16px solid;
border-color: transparent #2d97db transparent transparent;
} /* 利用伪元素盖在上面 */
.triangle::after {
position: absolute;
content: '';
right: -16px;
top: -16px;
border: 16px solid;
border-color: transparent #fff transparent transparent;
} .top { transform: rotate(90deg) }
.right { transform: rotate(180deg) }
.bottom { transform: rotate(270deg) }
.left { transform: rotate(0deg) } </style>
<div class="box">
<div class="box-inner">
<div class="triangle top"></div>
<div class="triangle right"></div>
<div class="triangle bottom"></div>
<div class="triangle left"></div>
</div>
</div>
10、隐藏滚动条(chrome | Safari)
.scrollEle::-webkit-scrollbar { display: none }
11、自定义选中文本样式
p::selection { background-color: #f00 }
12、禁止选择文本
p { usr-select: none }
13、clear: left | right | both
用在被浮动元素影响的元素身上。
<style>
.d1, .d2 {
width: 100px;height: 100px;
border: 1px solid;
}
.d1 {float: right;}
.d2 {clear: both;}
</style>
<div class="d1">111</div>
<div class="d2"></div>
CSS常用技术的更多相关文章
- CSS常用技术总结!~~
//放大屏幕,背景图不变 background: url(x.png) no-repeat 0 0; background-image: -webkit-image-set(url(logo_db.p ...
- div,css常用技术
1,<div></div>一张图作为背景的用法: 必须指定width,height,background属性 .smallCircle{ margin-top: 25px; ...
- Web前端技术研究:Css hack技术---令人沮丧的技术
我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- [转] Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
- Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 必知干货:Web前端应用十种常用技术你全都知道吗?
Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
随机推荐
- java-与文件相关
java.nio.file 表示non-blocking 非阻塞io(输入和输出) 一个 Path 对象表示一个文件或者目录的路径,是一个跨操作系统(OS)和文件系统的抽象 java.nio.file ...
- web workers是什么,为什么我们需要web workers?
请看下面的for循环代码,它将运行超过百万次. function SomeHeavyFunction() { for (i = 0; i < 10000000000000; i++) { x = ...
- CollectionUtils工具类之并集union(arr1,arr2)和差集subtract(arr1,arr2)
一.CollectionUtils工具类之并集union(arr1,arr2)和差集subtract(arr1,arr2) 采用的类: import org.apache.commons.collec ...
- 数据库学习之"清理表内所有数据"
今天在写定时任务的时候表内的数据都出现了问题,所以用了 1 truncate table 表名 来清空表内的数据
- 《每周一点canvas动画》——圆周运动
接<每周一点canvas动画>--波形运动 圆周运动可以分为两种基本的形式:正圆运动和椭圆运动.在讲解圆周运动之前,必不可少的数学公式即将袭来.so,各位骚年们,请护好自己的膝盖.听不懂没 ...
- React 可视化开发工具 Shadow Widget 非正经入门(之六:markdown)
本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点.本篇讲解 Markdown 在 Shadow Widget 中的应用. Markdown 在 Shadow Widget 中 ...
- python爬虫---表情包批量采集
代码: import requests from pyquery import PyQuery as pq # 比xpath还要灵活的html解析工具 # 定义请求 headers = { " ...
- 从零开始的 Hexo 生活(一)入门安装篇
目录 前言 一.Hexo 是什么 1.什么是静态网站 2.为什么选择静态网站 3.为什么选择 Hexo 二.Markdown 是什么 1.为什么要学 Markdown 2.怎么学 Markdown 三 ...
- 蓝桥杯 贪吃蛇长度java实现
小明在爷爷的私人收藏馆里找到一台老式电脑.居然没有图形界面,只能用控制台编程. 如上图,是游戏时画面截图. 其中,H表示蛇头,T表示蛇尾.#表示蛇的身体,@表示身体交叉重叠的地方. 你能说出现在的贪吃 ...
- python---冒泡排序的实现
冒泡排序 思想 列表中有n个数, 每两个相邻的数, 如果前边的数比后边的数大, 就交换. 关键点: 趟: 总共执行 n-1趟 无序区: 第 i 趟时, 索引 0~ n-1-i 为无序区 ...