CSS
文章平均质量分 64
Cacra
编程路上在探索。
展开
-
CSS中linear-gradient()
linear-gradient() 函数用于创建一个线性渐变的 “图像”。为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。//语法background-image: linear-gradient(direction, color-stop1, color-stop2, ...);示例://不指定方向(以下实例演示了从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色:)#grad { background-image: linear-g原创 2020-07-09 01:18:48 · 853 阅读 · 0 评论 -
利用pading-bottom实现宽高比例自适应
可以参考:https://juejin.im/post/5b0784566fb9a07abd0e14ae#heading-0还可以参考:https://blog.csdn.net/TCF_JingFeng/article/details/80838903https://blog.csdn.net/weixin_44151357/article/details/102501571https://blog.csdn.net/weixin_30752377/article/details/9739833原创 2020-07-08 10:37:29 · 323 阅读 · 0 评论 -
box-sizing概述
box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度盒子的四个组成区域相对应,每个盒子有四个边界:内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。标准盒模型 box-sizing: content-boxcontent-box:width = content width;height = content heightIE盒模型 box-sizing: border-boxborde原创 2020-06-21 02:47:10 · 1282 阅读 · 0 评论 -
stylus中的&:before和&:after
表示当前层级下的元素的的伪元素&就是当前层级的引用,比如当前层级是.border-bottom,那么下面&:before中的&符号指的就是.border-bottomhttps://coding.imooc.com/learn/questiondetail/112968.htmlhttps://coding.imooc.com/learn/questiondetail/165426.htmlhttps://coding.imooc.com/learn/questiondet原创 2020-06-21 02:26:11 · 1865 阅读 · 0 评论 -
float和overflow
我们经常看到下面代码:.list overflow:hidden float:left原因是:由于浮动元素脱离了文档流,不占据父元素空间,所以父元素没有被撑开,因此可能造成元素塌陷,所以利用overflow:hidden的BFC属性清除浮动,撑开元素。详细了解bfc参考文章:https://coding.imooc.com/learn/questiondetail/162211.htmlhttps://www.imooc.com/article/12448这属于css的一个高级知识点B原创 2020-06-21 02:19:16 · 979 阅读 · 0 评论 -
CSS中2D、3D和动画(transition补间动画、keyframe关键帧动画和逐帧动画)简介
1原创 2020-06-11 20:38:40 · 1308 阅读 · 0 评论 -
谈谈css伪类与伪元素
可以参考:https://www.cnblogs.com/slly/p/10239055.html转载 2020-06-10 11:01:20 · 195 阅读 · 0 评论 -
CSS像素(px)、物理像素(pt)、rem、em、rpx
1.原创 2019-07-24 13:06:31 · 30906 阅读 · 6 评论 -
了解Flex布局
了解Flex布局。http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlhttps://segmentfault.com/a/1190000008823763https://zhuanlan.zhihu.com/p/25303493https://juejin.im/post/58e3a5a0a0bb9f0069fc16bbh...原创 2018-09-17 19:27:59 · 597 阅读 · 0 评论 -
@import和link引入样式的区别
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:XML/HTML代码 <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" ...原创 2019-08-08 09:27:57 · 422 阅读 · 0 评论 -
box-sizing属性的用法
box-sizing属性用来设置或检索对象的盒模型组成模式起因是因为盒子模型分为标准盒子模型和IE盒子模型。这意味着,如果我们设置一个宽度为200px,而实际呈现的盒子的宽度可能会大于200px(除非没有左右边框和左右补白)。这可能看起来比较怪,CSS设置的宽度仅仅是内容区的宽度,而非盒子的宽度。这导致的直接结果是当我们希望页面呈现的盒子的宽度是200px的时候,我们需要减去它的左右边框和...原创 2019-08-10 13:30:07 · 554 阅读 · 1 评论 -
BFC和IFC
想要理解BFC与IFC,首先要理解另外两个概念:Box 和 FC(即 formatting context)。1.Box一个页面是由很多个 Box 组成的,元素的类型和 display 属性决定了这个 Box 的类型。不同类型的 Box,会参与不同的 Formatting Context。box分block-level,inline-level和匿名的。匿名box: <div&...原创 2019-08-10 14:21:58 · 198 阅读 · 0 评论 -
CSS常用布局
1.页面中常用定位(position)static:可以认为静态的,默认元素都是静态的定位,对象遵循常规流。此时4个定位偏移属性不会被应用,也就是使用left,right,bottom,top将不会生效。relative:相对定位,对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。absolu...原创 2019-08-10 17:06:42 · 353 阅读 · 0 评论 -
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh)
参考文章:https://github.com/forthealllight/blog/issues/13响应式布局常用解决方案:1.px和视口2.媒体查询3.百分比4.自适应场景下的rem解决方案5.通过vw/vh来实现自适应1.px和视口2.媒体查询3.百分比4.自适应场景下的rem解决方案5.通过vw/vh来实现自适应通过上面的链接可进一步了解...原创 2019-08-11 13:54:35 · 422 阅读 · 0 评论 -
HTML5和CSS3中一些新技术名词解释
1.canvasHTML5<canvas>元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas>标签只是图形容器,您必须使用脚本来绘制图形。2.SVGSVG(Scalable Vector Graphics),指可伸缩矢量图形,用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图...原创 2019-08-11 14:12:06 · 480 阅读 · 0 评论 -
慕课网CSS工作应用+面试(5)CSS动画
1.动画介绍动画的原理:视觉暂留作用、画面逐渐变化动画的作用:愉悦感、引起注意、操作的反馈、掩饰加载过程CSS中动画类型:1.transition补间动画(有开始有结尾,中间补出来)2.keyframe关键帧动画(也是补间动画,但是可以有多个关键帧,也就是中间多了些帧)3.逐帧动画区分几个概念:animation(动画) ~关键帧,往复性。transition(过渡)~ 属性,触...原创 2019-03-24 09:10:49 · 216 阅读 · 0 评论 -
慕课网CSS工作应用+面试(4)CSS效果
1.box-shadowbox-shadow(阴影)text-shadow(文字阴影)border-radius(圆角边框)clip-path(可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。)box-shadow:box-shadow: h-shadow v-shadow blur spread color inset;box-shadow: 10...原创 2019-03-23 15:50:45 · 203 阅读 · 0 评论 -
CSS设置height:100%
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?根据W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以,如果你把一个div的高度设定为height:50%;,而它的父元素的高度是100px,那么,这个div的高度应该是50px。那为什么 hei转载 2017-07-22 10:41:02 · 733 阅读 · 0 评论 -
CSS中的blcok、inline和inline-block的概念和区别
我们首先讲起可以/不可以修改宽高的元素。1.哪些元素默认可以修改宽高?1.块级元素(display:block)都可以设置 div p h1 ul ol li dl dt dd2.存在width、height属性的html元素(img、table、input)1.图片(display:inline-block)非块级但可以修改宽高:<img src="..." width="300px"原创 2017-11-03 14:00:46 · 695 阅读 · 0 评论 -
rpx到自适应方案,及常用的尺寸数据单位
第一篇文章是讲rpx和常用的自适应方案,第二篇文章是常用的尺寸单位。https://segmentfault.com/a/1190000007220703https://www.jianshu.com/p/e8b66de2b7b5原创 2018-09-17 19:46:11 · 1392 阅读 · 0 评论 -
Button自动刷新页面
1.问题&lt;button&gt; 登陆 &lt;/button&gt;页面上有这样一个按钮,每次点击这个按钮的时候,执行完button的click事件后,会自动的重新刷新当前的页面。2.原因&lt;button&gt;、&lt;input tpye="button"&gt;按钮在IE和W3C浏览器的区别:1.当在IE浏原创 2018-10-12 18:22:19 · 558 阅读 · 0 评论 -
Data URL 图片内联 简介
参考文章:https://www.cnblogs.com/yzhihao/p/6400680.htmlData URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。本文中,我将介绍如何巧妙的使用Data URL优化网站...原创 2018-11-05 15:15:05 · 971 阅读 · 0 评论 -
慕课网CSS工作应用+面试(1)
1.介绍HTML和CSS基础知识:HTML元素的分类和特性、HTML元素默认样式和定制化、CSS选择器全解析、CSS常见属性逐一讲解CSS实战:布局属性和组合解析、常见布局方案介绍、三栏布局案例、国内大站布局方案拆解动画和效果专题讲解:多背景多投影特效、3D特效编写实践、过渡动画和关键帧动画实践、动画细节和原理深入解析框架集成和CSS工程化:预处理器作用和原理、Less和Sass代码实践、...原创 2019-03-02 09:48:26 · 407 阅读 · 0 评论 -
慕课网CSS工作应用+面试(2)
3.CSS基础全面讲解CSS基础知识,包括层叠样式表的基本规则和含义、选择器(分类、特性、权重、性能)、非布局样式属性、CSS hack以及一些案例分析(checkbox等)。3.1选择器CSS(Cascading Style Sheet)层叠样式表3.2非布局样式3.3hack和案例3.4面试题...原创 2019-03-23 09:53:43 · 261 阅读 · 0 评论 -
CSS中BFC(还有margin-top和top)
1.前置知识介绍HTML中常用布局方式:1.标准流2.浮动布局3.定位布局4.弹性布局块级元素:div、H1-H5、p、table、ol/ul/li内联元素(可置换/不可置换):a、span、img、inputmargin-top和top附注:top/right/bottom/left和margin-top/margin-right/margin-bottom/margin-le...原创 2019-03-19 23:08:37 · 400 阅读 · 0 评论 -
CSS中外边距合并及BFC解决方案
参考文章:https://juejin.im/post/5965c46ef265da6c2518f5ec1.外边距合并块的顶部外边距和底部外边距有时候会被折叠为单个外边距,其大小为两值中的最大值,这种行为就被称为外边距合并。一般发生外边距合并主要有以下三种情况:1.相邻兄弟姐妹元素2.父元素和子元素3.空元素相邻兄弟姐妹元素两个兄弟元素之间的外边距,会取两个元素外边距的最大值。&...原创 2019-03-20 00:16:47 · 625 阅读 · 0 评论 -
CSS视觉格式化模型
CSS 视觉格式化模型CSS 视觉格式化模型是用来处理在视觉媒体上显示文档时使用的计算规则。视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子,每个盒子的布局由以下因素决定:1.盒子的尺寸:精确指定、由约束条件指定或没有指定2.盒子的类型:行内盒子(inline)、行内级盒子(inline-level)、原子行内级盒子(atomic inline-level)、块盒子(blo...原创 2019-03-20 10:04:16 · 410 阅读 · 0 评论 -
CSS中居中
参考文章:https://juejin.im/post/5a7a9a545188257a892998efhttps://www.w3cplus.com/css/centering-css-complete-guide.htmlhttps://segmentfault.com/a/1190000013966650?utm_source=weekly&utm_medium=email&a...原创 2019-03-21 13:58:27 · 858 阅读 · 1 评论 -
慕课网CSS工作应用+面试(6)预处理器
1.介绍基于CSS的另一种语言通过工具编译成CSS添加了很多CSS不具备的特性能提升CSS文件的组织CSS预处理器:Less(基于Node写的)、Sass(基于Ruby写的)CSS预处理器功能:1.嵌套 反映层级和约束2.变量和计算 减少重复代码3.Extend和Mixin 代码片段4.循环 适用于复杂有规律的样式5.import CSS文件模块化编译Less和Sass可以...原创 2019-03-24 13:09:04 · 403 阅读 · 0 评论 -
慕课网CSS工作应用+面试(8)CSS工程化PostCSS
1.PostCSS介绍CSS工程化:组织、优化、构建、维护PostCSS:PostCSS本身只有解析能力各种神奇的特性全靠插件PostCSS插件:1.import 模块合并2.autoprefixer 自动加前缀3.cssnano 压缩代码4.cssnext 使用CSS新特性5.precess 变量、mixin、循环等PostCSS优势主要体现在以下几个方面:1.拥有极...原创 2019-03-26 10:50:49 · 264 阅读 · 0 评论 -
慕课网CSS工作应用+面试(9)三大框架中的CSS
1.Angular中的CSSAngular Vue内置样式集成React一些业界实践Angular(2+)提供了样式封装能力、与组件深度集成能力Angular中ShadowDOM:逻辑上一个DOM、结构上存在子集结构Angular中Scoped CSS:限定了范围的CSS、无法影响外部元素、外部样式一般不影响内部、可以通过/deep或>>>穿透2.Vue中的CSSV...原创 2019-03-26 13:39:31 · 186 阅读 · 0 评论 -
慕课网CSS工作应用+面试(3)布局
1.布局简介早期以table为主(简单)后来以技巧性布局为主(难)现在有flexbox/grid(偏简单)响应式布局是必备知识常用布局方法:table布局、float浮动+margin、inline-block布局、flexbox布局2.table布局table{ width:800px; height:200px; border-collapse: coll...原创 2019-03-23 10:52:52 · 237 阅读 · 0 评论 -
CSS定位实践
1.三列布局,两边定宽,中间自动居中:<div id="d1">左边宽度200px</div><div id="d2">中间自动居中</div><div id="d3">右边宽度200px</div>给id=“d2”添加若干文字。CSS样式如下:#d1{ width: 200px; height: 500px; backgr原创 2017-04-26 14:22:52 · 429 阅读 · 0 评论