随笔分类 -  CSS

vw、vh、vmin、vmax 的含义
摘要:像 px、em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。 一、基本说明 1,vw、vh、vmin、vmax 的含义 (1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不 阅读全文
posted @ 2019-02-11 16:30 哓番茄 阅读(1662) 评论(0) 推荐(0) 编辑
深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
摘要:1、px:绝对单位,页面按精确像素展示 2、em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写 阅读全文
posted @ 2019-01-17 10:38 哓番茄 阅读(314) 评论(0) 推荐(0) 编辑
CSS3伪类与伪元素的区别及注意事项
摘要:CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特殊的效果添加到某些选择器 讲道理,可能我语文不好,我觉得这两句话是等价的 :-) 根本不能看出有什么 阅读全文
posted @ 2018-07-26 18:19 哓番茄 阅读(366) 评论(0) 推荐(0) 编辑
cs3动画
摘要:css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 banner图 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了。 这个例子只是简单的纯css3 3d 关于y轴旋转 下面是代码: body{ perspective: 800px; 阅读全文
posted @ 2018-07-24 15:38 哓番茄 阅读(339) 评论(0) 推荐(0) 编辑
css设置字体单行,多行超出省略号显示
摘要:单行: 阅读全文
posted @ 2018-05-21 10:24 哓番茄 阅读(208) 评论(0) 推荐(0) 编辑
原生js实现图片的3d效果
摘要:<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywo 阅读全文
posted @ 2018-05-10 10:37 哓番茄 阅读(340) 评论(0) 推荐(0) 编辑
input框改变默认样式
摘要:input[type="radio"] { width: 2rem; height: 2rem; -webkit-appearance: none; /*清除复选框默认样式*/ background: url("../../assets/address/addressManagement-noche 阅读全文
posted @ 2018-04-16 14:34 哓番茄 阅读(247) 评论(0) 推荐(0) 编辑
JQuery------制作div模态框
摘要:html(使用opacity的话content无法变为不透明,所有这里使用了background:rgba(0,0,0,0.3))属性来设置透明; .moto{ position:absolute; top:0%; left:0%; background:rgba(0,0,0,0.3); width 阅读全文
posted @ 2018-03-27 11:00 哓番茄 阅读(161) 评论(0) 推荐(0) 编辑
学会使用box-sizing布局
摘要:盒子模型 关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性,例如: padding + border + width= 盒子的宽度 pa 阅读全文
posted @ 2018-03-23 16:20 哓番茄 阅读(140) 评论(0) 推荐(0) 编辑
HTML 全局属性 = HTML5 中添加的属性。
摘要:属性描述 accesskey 规定激活元素的快捷键。 class 规定元素的一个或多个类名(引用样式表中的类)。 contenteditable 规定元素内容是否可编辑。 contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 data-* 用于存储页面或应用程序的私有定制数 阅读全文
posted @ 2018-03-14 14:21 哓番茄 阅读(124) 评论(0) 推荐(0) 编辑
table固定头部,tbody内容滚动
摘要:直觉的感受是修改thead与tbody,尝试了以下几种方法,但均告失败。 1. 将tbody设置为块状元素,然后设置表格的高度与溢出; 1. 将thead设置为绝对定位,然后设置表格的高度与溢出; 1. 将表格转换为块状元素,然后把有td都设置为浮动,从而控制高度与溢出; 正确的方法应该将 thea 阅读全文
posted @ 2018-02-06 16:46 哓番茄 阅读(365) 评论(0) 推荐(0) 编辑
移动端 去掉滚动栏
摘要:直接在css中加入 ::-webkit-scrollbar { width: 0; height: 0; background-color: rgba(240,240,240,0)} 前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处 阅读全文
posted @ 2018-01-22 17:57 哓番茄 阅读(295) 评论(0) 推荐(0) 编辑
利用css 画各种三角形
摘要:#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;} #trian 阅读全文
posted @ 2018-01-19 14:12 哓番茄 阅读(199) 评论(0) 推荐(0) 编辑

 
点击右上角即可分享
微信分享提示