css - 随笔分类 - 京鸿一瞥

CSS 文字溢出 text-overflow，word-break，word-wrap，white-space

摘要：1. 单词断行 1.1 什么是单词（word）英文的单词我们都知道，空格分开的都是一个个单词，中文的单词在浏览器中指的一个字。下面是一个浏览器判定单词的例子：中文 //2 个单词 Hello world //2 个单词 Helloworld //1 个单词 1.2 默认断行效果当父容器无法在阅读全文

posted @ 2022-05-24 17:59 京鸿一瞥阅读(179) 评论(0) 推荐(0)

水平垂直居中

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2022-04-06 09:57 京鸿一瞥阅读(25) 评论(0) 推荐(0)

十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）

摘要：设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时设置方位情况相邻兄弟选择器之常用场景 outline属性的妙用技巧隐藏滚动条或更改滚动条样式纯CSS绘制三角形虚线框绘制技巧卡券效果制作隐藏文本的常用两种方法表格边框合并设置input 阅读全文

posted @ 2021-10-19 11:38 京鸿一瞥阅读(312) 评论(0) 推荐(0)

css 样式选择器

摘要：1.1 #id 1.2 .class 1.3 element 1.4 * 1.5 element.class <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1.case { color: red; } </style> < 阅读全文

posted @ 2021-07-26 14:35 京鸿一瞥阅读(142) 评论(0) 推荐(0)

css3 transform

摘要：Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。语法 none rotate(deg) 默认绕z轴旋转, 还有 rotateX 、rotateY、rotateZ scale(num) 缩放 scaleX scaleY skew(deg) 斜切 ske 阅读全文

posted @ 2021-01-06 11:12 京鸿一瞥阅读(50) 评论(0) 推荐(0)

CSS3 filter(滤镜)

摘要：filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。语法 none blur(px) 高斯模糊 brightness(%)明暗度，默认100% contrast(%)对比度 drop-shadow(h-shadow v-shadow blur spread color 阅读全文

posted @ 2021-01-06 10:38 京鸿一瞥阅读(120) 评论(0) 推荐(0)

object-fit 和 background-size了解一下

摘要：最近自己遇到了的问题，就是图片或背景在一个区块中的对其方式的设置。 background-size，只对背景图片有用设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。单张图片的背景大小可以使用以下三种方法中的一种来规定：使用关阅读全文

posted @ 2020-12-20 16:24 京鸿一瞥阅读(430) 评论(0) 推荐(0)

flex和display: inline-flex区别

摘要：flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示 flex .main{ background-color: #0f0; display: flex;/*父div设置该属性*/ } .main>div{ width: 50px; height: 50px; 阅读全文

posted @ 2020-12-16 16:21 京鸿一瞥阅读(1179) 评论(0) 推荐(0)

CSS3 calc()

摘要：CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 calc（）函数是CSS中少有bai的可du以实现动态计算功能zhi的方法，通常这类计dao算都需要zhuanJavaScript语言脚本来实现。shu而阅读全文

posted @ 2020-12-15 14:07 京鸿一瞥阅读(122) 评论(0) 推荐(0)

CSS 中的 BFC

摘要：BFC (Block formatting context) “块级格式化上下文” Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。触发：满足下列条件之一就可触发B 阅读全文

posted @ 2020-11-27 15:11 京鸿一瞥阅读(134) 评论(0) 推荐(0)

随笔分类 - css