Css
关注
分享
扫一扫
飞扬_柳絮
如果，你正在埋怨命运不眷顾，那请记住：命，是失败者的借口；运，是成功者的谦词!
展开
-
BFC：块级格式化上下文
BFC(Block formatting context)的定义：块级格式化上下文 BFC是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC(Block formatting context)的触发条件==满足下列条件之一就可触发BFC==【1】根元素，即HTML元素【2】float的值不为none【3】overflow的值不为visible【4】display的值为inline-blo..原创 2021-03-12 10:34:05 · 94 阅读 · 0 评论 -
设备像素比 devicePixelRatio
设备像素比 window.devicePixelRatio = 设备物理像素 / 设备独立像素(dpi)常见设备Dpr查询：http://screensiz.es/phone设备物理像素: 设备设备分辨率，eg： iPhone 6 750*1334设备独立像素: 与设备无关的逻辑像素(在没有缩放的情况下，1个css像素等同于一个设备独立像素)Retina高清屏造成图像模糊的原因： ...原创 2018-09-26 22:37:56 · 1229 阅读 · 0 评论 -
iconfont 图标字体的使用
iconfont 网址：https://www.iconfont.cn/ (可以用github账号登录)1、可以在【图标管理】--> 【我的项目】内分类管理自己的图标字体2、将 svg图标制作成图标字体 2.1 上传svg图标，点击【保留颜色并提交】按钮 2.2 选择【Font class】，然后点击【批量操作】按钮 ，全选或选择多个图标 --> 点击 【批量加入...原创 2019-02-12 14:03:21 · 1396 阅读 · 0 评论 -
flex 弹性布局
参考资料: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex-examples.html1、传统的布局方案：基于盒状模型，依赖 display 属性 + position属性 + float属性2、弹性布局：(设...原创 2019-04-10 20:09:36 · 184 阅读 · 0 评论 -
缩略图如何不挤压拉伸图片
前端在显示图片缩略图时，如果不清楚图片的尺寸，然后使用固定高宽比的img来显示图片，这样会导致高宽比不一致的图片会被挤压拉伸。 处理方式，话不多说，直接上代码(图片请自找)：<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta http-equi...原创 2019-04-16 17:15:29 · 324 阅读 · 0 评论 -
iOS下的 Fixed + Input BUG现象
示例代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <meta name="format-detect原创 2017-04-20 19:09:11 · 2210 阅读 · 0 评论 -
自定义 radio + checkout 样式
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> &...原创 2019-05-28 19:48:56 · 1569 阅读 · 0 评论 -
行内元素在div中水平垂直居中
第1种：flex布局(推荐)<div class="method1"> <span class="expFont">flex布局</span> <img class="expImg" src="expImg.png"/></div>.method1{ width: 100%; display: f...原创 2019-05-29 14:55:04 · 12274 阅读 · 1 评论 -
Css 记事
标准盒子模型块级元素、行内元素比较块级元素： a. 默认横向充满其父元素的内容区域，而且在其左右两边没有其他元素 b. 浮动元素是块级元素，可以设置宽高,但是其旁边可以有其他元素行内元素： a. 设置width和height无效,竖直方向的margin、padding无效 b. display：inline-block 可以让元素具有块级元素和行...原创 2018-08-27 17:54:03 · 192 阅读 · 0 评论 -
Css3动画
transform、transition、animation的区别 1.transform 是静态的,一般辅助transition、animation 2.触发条件不同： transition通常由事件触发和hover等事件配合使用，与js的交互更紧密 animation则和gif动态图差不多，立即播放(或延迟一段时间播放) 3.精确性： tranisti...原创 2017-03-31 10:33:25 · 525 阅读 · 0 评论 -
网页自定义字体使用 @font-face
参考地址： https://segmentfault.com/a/1190000004179303转载 2017-05-08 15:09:28 · 341 阅读 · 0 评论 -
伪元素 & 伪类
伪元素: 在HTML文档指定的内容外，创建文档的额外信息 格式： 选择符：伪元素{属性：属性值} 常见伪元素： :before 在元素内容的最前面添加新内容 :after 在元素内容的最后面添加新内容 :first-letter 对指定对象内第一个字符起作用(仅对块元素起作用) :first-line 对指定对象内第一行内容起作用(仅对块元素起作用) eg:原创 2017-06-02 15:49:44 · 278 阅读 · 0 评论 -
两列自适应布局
要求： 1、两个盒子在同一行 2、右边的盒子需要占满剩下的空间 3、两个盒子不能重叠方式一： 左侧栏宽度不固定<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=U原创 2017-08-30 14:52:20 · 600 阅读 · 0 评论 -
三列布局--双飞翼布局
双飞翼布局: 两边的盒子宽度固定，中间盒子自适应（三列布局）<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>双飞翼原创 2017-09-07 10:42:12 · 351 阅读 · 0 评论 -
多行文本最后行末尾省略号显示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>xdlines-demo</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style ty原创 2017-09-18 10:38:06 · 1230 阅读 · 0 评论 -
弹框水平垂直居中
在内容大于一屏时，弹框在屏幕上保持水平垂直居中<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="vi原创 2017-09-28 14:10:57 · 1029 阅读 · 0 评论 -
Sticky footer布局
实际需求： 页面内容不足满屏时 footer在底部，超过满屏时footer在内容末尾<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />原创 2017-08-21 11:31:04 · 514 阅读 · 0 评论