
CSS3
文章平均质量分 51
Amyuan的笔记
本人所有博客仅供本人学习使用,文章里写的很多摘取自别人的智慧结晶,能注明来源的皆注明了,如有侵权行为,望告知。
致力于成为一名优秀的前端程序员。
本人微信号:Amyuan23。非诚勿扰。
展开
-
border-radius深入理解
参考:张鑫旭大值特性 当值很大的时候,只会使用能够渲染的圆角大小渲染单值 border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小; 斜杠前的是水平方向,斜杠后面的是垂直方向。等比例特性 设定的水平半径和垂直半径的比例...原创 2018-03-03 22:51:57 · 409 阅读 · 0 评论 -
CSS遇到的知识点收集
<li> <img>标签之间空隙解决办法 空隙形成原因:<img>是内联元素,<img>与<li>之间有空格 解决:设置img为“display:block;”设置父对象的文字大小为0px设置图片的垂直对齐方式,图片的vertical-align属性为“top,text-top原创 2018-08-06 22:48:55 · 239 阅读 · 0 评论 -
我的reset.css
*{ box-sizing: border-box;}*::before{ box-sizing: border-box;}*::after{ box-sizing: border-box;}body,dl,dt,dd,ul,li,h1,h2,h3,h4,input,form,a,p,textarea,button{ margin: 0; pad...原创 2018-07-03 15:14:30 · 463 阅读 · 0 评论 -
手机端方案(viewport单位)
lib-flexible方案过时了。。 再聊移动端页面的适配 如何在Vue项目中使用vw实现移动端适配viewport单位得到众多浏览器的兼容。所以直接使用原生css就可以了。px到vw的转换插件 postcss-px-to-viewport...原创 2018-06-27 02:02:38 · 2071 阅读 · 0 评论 -
Sass入门(二)
sass在线编译—-学习用变量声明变量 默认变量 在默认变量之前重新声明下变量会覆盖默认变量。在进行组件化开发的时候会非常有用。$baseLineHeight:1.5 !default;局部变量和全局变量//SCSS$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量).block { co...原创 2018-06-22 19:05:14 · 215 阅读 · 0 评论 -
Sass入门(一)
Sass入门(慕课) 阮一峰CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”。例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性。Sass 和 SCSS 有什么区别?初步感觉,本质上没区别。 还是要说的话: 后缀不一样 书写方式不一样。SCSS带大括号,带分号。而Sass 是以严格的缩进式语法规则来书写,不带有大...原创 2018-06-22 14:38:30 · 182 阅读 · 0 评论 -
手机端方案一(REM)
思路rem:根元素的font-size。 (r表示root )。所有手机显示的界面都是一样的,只是大小不同。用JS把html的font-size与page-width关联起来。比如:让font-size是pageWidth的1/10。这样用rem定义元素宽度时,可随不同手机的宽度变化而变化注意,可以与其它单位混用,不要每个每个地方都要用rem。比如,只想border为1px,就1px...原创 2018-05-30 20:37:46 · 402 阅读 · 0 评论 -
CSS 布局 (Flex 布局)
原则要支持IE8用float布局,不必支持,flex布局不到万不得已,不要写死 width 和 height尽量用高级语法,如 calc、flex如果要满足 IE,就全部写死Float儿子全加 float 老子加 .clearfix .clearfix简单写法.clearfix:after{ content: ''; display: block;...原创 2018-05-30 16:15:59 · 653 阅读 · 0 评论 -
手机端页面
媒体查询@media (min-width: 700px) { ... }(min-width: 700px) and (orientation: landscape) { ... }详见:MDN CSS媒体查询直接引用手机版的css(后端去实现)<link rel="stylesheet" media="(max-width:768px)" hr原创 2018-05-29 23:26:43 · 453 阅读 · 0 评论 -
CSS icon全解
引入ICONimg 好处: 自适应宽高,只需设置宽度,高度自适应。background 图片和div大小不一样时,图片不会变形。(要看具体的代码)雪碧图css spritesglueiconfont (推荐)iconfont 使用说明CSS手写iconcssicon 跟着上面的网站做图标,锻炼css技术↖(^ω^)↗...原创 2018-05-29 21:25:32 · 874 阅读 · 0 评论 -
CSS 堆叠上下文
堆叠顺序backgroundborder块级浮动内联z-index: 0z-index: +如果是兄弟元素重叠,那么后面的盖在前面的身上。触发堆叠上下文根元素 (HTML),z-index 值不为 “auto”的 绝对/相对定位,一个 z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素 display: flex|i...原创 2018-05-29 20:55:19 · 334 阅读 · 0 评论 -
CSS 宽度与高度
高度与字体(内联元素)字体之间通过基线对齐当div包含一个内联元素,他的高度由字体的行高确定默认行高是设计师设计字体时的建议行高。空格(内联元素之间) &nbsp no break space 两个inline元素之间有任何回车,tab,换行或其他任意字符,都会变成空格。 因而导航栏li元素横排不要使用inline-block方法,用float+清除浮动。中文的对...原创 2018-05-29 20:09:53 · 217 阅读 · 0 评论 -
CSS里的各种单位
只列举一些我常用到的,后面有需要再补充 单位 含义 px 相对于屏幕分辨率大小 em 相对于父元素的字体大小 。浏览器的默认字体大小都是16px。 rem 相对于根元素字体大小 vw 相对于视窗的宽度:视窗宽度是100vw vh 相对于视窗的高度:视窗高度是100vh % 相对于父元素。 deg ...原创 2018-05-24 14:56:11 · 324 阅读 · 0 评论 -
BFC
block formatting context 块级格式化上下文MDN 对 BFC 的描述一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。一个块格式化上下文由以下之一创建:根元素或其它包含它的元素浮动元素 (元素的 float 不是 none)绝对定...原创 2018-05-28 21:35:03 · 553 阅读 · 0 评论 -
css变量
CSS 变量教程今天才知道css也有变量~首先认识一下:root:root 匹配文档树的根元素,对于 HTML 来说,与 html 选择器相同。在声明全局 CSS 变量时 :root 会很有用:root {//声明变量,变量名前面要加-- --main-color: hotpink; --pane-padding: 5px 42px;}读取变量时用var() 函数//...原创 2019-02-18 14:53:48 · 363 阅读 · 0 评论