![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 78
姜皓
胸藏文墨怀若谷 腹有诗书气自华
展开
-
CSS 清除浮动方法小结
清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错)方法小结:1.1)添加额外标签这是在学校老师就告诉我们的 一种方法,通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,其他标签br等亦可。12345<div class="main left">.ma...原创 2018-05-04 10:43:10 · 136 阅读 · 0 评论 -
Angular Vue React 框架中的 CSS
框架中的 CSSAngular Vue React 三大框架Angular Vue 内置样式集成React 一些业界实践Angular Angular . js (1.x):没有样式集成能力Angular (2+):提供了样式封装能力 2.与组件深度集成ShadowDOM(谈一谈神奇的ShadowDOM):1.逻辑上一个DOM 2.结构上存在子集结构Scoped CSS (Scoped CSS...原创 2018-05-24 11:44:01 · 195 阅读 · 0 评论 -
CSS 工程化 小结
CSS 工程化 组成:1.组织 (代码目录)2.优化(那种实现方式更好) 3.构建(代码完成后需要经过哪些处理步骤) 4.维护常见问题1.如何解决 CSS 模块化问题 1.Less Sass 等CSS 预处理器2.PostCSS 插件 (postcss-import / precss 等)3.webpack 处理 CSS (css-loader + style-loader)2.PostCSS 可...原创 2018-05-23 23:24:33 · 370 阅读 · 0 评论 -
CSS 预处理器框架
CSS 预处理器框架参考博客:为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus可以按照需求来使用别人的代码1.sass (compass)2.less (lesshat/EST)3.提供现成的 mixin4.类似 JS 类库 ,封装常用功能 css 预处理器常见问题(详细讲解见上篇博客)1.常见的 css 预处理器1.Less(Node.js) 2.Sass (...原创 2018-05-23 23:23:44 · 673 阅读 · 0 评论 -
Bootstrap 小结
Bootstrap 小结Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本 Bootstrap组成:1.基础样式 2.常用组件 3.JS插件常见问题:1.Bootstrap 的优缺点优点:CSS 代码结构合理 ,现成的样式可以直接用缺点:定制较为繁琐,体积大2.Bootstrap 如何实现响应式布局原理:...原创 2018-05-23 20:28:28 · 251 阅读 · 0 评论 -
CSS预处理器(less 和 sass)
CSS预处理器1.基于CSS的另一种语言2.通过工具编译成CSS3.添加了很多CSS不具备的特性4.能提升CSS文件的组织提供功能:1.嵌套 反映层级和约束 2.变量和计算,减少重复戴拿 3.Extend 和 Mixin 代码片段4.循环 适用于复杂有规律的样式 5.import CSS 文件模块化知识点:1.less(嵌套)body{ padding:0; margin:0;}...原创 2018-05-23 18:49:02 · 858 阅读 · 0 评论 -
CSS(非布局样式总结)
CSS(非布局样式)问题1.CSS样式(选择器)的优先级1.计算权重2.!important3.内联样式比外嵌样式高4.后写的优先级高问题2.雪碧图的作用1.减少 HTTP 请求数,提高加载性能2.有一些情况下可以减小图片大小问题3.base64 的使用1.用于减少 HTTP 请求2.适用于小图片3.base64 的体积约为原图 4/3问题4.伪类和伪元素的区别1.伪类表状态(链接状态--link...原创 2018-05-15 22:21:08 · 369 阅读 · 0 评论 -
CSS 样式小结
1.背景<head> <meta charset="UTF-8"> <title>背景</title> <style> /* 设置背景为图片,并设置大小、是否重复 */ body { background-image: url("imgs/background.原创 2018-05-25 22:36:31 · 103 阅读 · 0 评论 -
CSS动画小结
CSS动画原理:1.画面之间变化 2.视觉暂留作用常见问题1.CSS 动画的实现方式有几种1.transition 2. keyframes(animation)2.过渡动画和关键帧动画的区别1.过渡动画需要状态变化 2.关键帧动画不需要状态变化 3.关键帧动画能控制更精细3.如何使用逐帧动画1.使用关键帧动画 2.去掉补间动画(steps)4.CSS动画性能1.和 JS 动画很难比较出谁更...原创 2018-05-21 17:38:34 · 190 阅读 · 0 评论 -
CSS效果常见问题
详细解答参见上篇博客问题1.如何用 div 画一个 xxxbox-shadow 无限投影 (堆叠成复杂图案)::before::after问题2.如何产生不占空间的边框1.box-shadow2.outline问题3.如何实现圆形元素(头像)border-radius:50%问题4.如何实现ios图标的圆角1.将设计图形导入矢量设计软件导成 svg2.用 clip-path:(svg)制作圆角图标...原创 2018-05-21 09:30:22 · 127 阅读 · 0 评论 -
CSS效果小结
效果属性1.box-shadow(盒子阴影)示例加上 box-shadow内阴影复杂例子阴影的形状跟原来的形状是一样的 结果:box-shadow 作用:1.营造层次感(立体感)2.充当没有宽度的边框(没有大小,不会占据位置)3.特殊效果 2.text-shadow(文本阴影)作用:1.立体感 2.印刷品质感(边缘有模糊效果)比较:3.border-radius圆角矩形圆形半圆/扇形只有左上角,...原创 2018-05-21 09:29:44 · 358 阅读 · 0 评论 -
CSS布局相关问题
详细信息参见上篇博客1.实现两栏(三栏)布局的方法1.表格布局2.float + margin 布局3.inline-block布局4.flexbox 布局2.position:absolute/fixed 有什么区别position:absolute 相对最近的 absolute / realtiveposition:fixed 相对屏幕(viewport)3.display:inline-bl...原创 2018-05-19 23:53:10 · 134 阅读 · 0 评论 -
CSS 布局小结
常见布局方式布局基础:1.盒子模型2.display:确定元素显示类型(block、inline、inline-block)3.position:确定元素位置(static/静态(按文档流挨着布局)、relative/相对(以元素本身做参考点,不改变其占据的空间)、absolute/绝对(脱离文档流,不会对其他元素布局产生影响,相对于最近的absolute或relative属性的元素)、fixed...原创 2018-05-19 23:35:26 · 207 阅读 · 0 评论 -
HTML 知识点总结
HTML 常见元素1.<meta charset = "utf-8'>表示页面使用的那种字符集(编码字符),一般为 utf-8,囊括所有英文和中文(放在第1行)2.<meta name ="viewport" content="width=decive-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">...原创 2018-05-11 13:28:47 · 959 阅读 · 0 评论 -
HTML 常见问题
问题1.Doctype 的意义是什么1.让浏览器以标准模式渲染2.让浏览器知道元素的合法性问题2. HTML XHTML HTML5的关系1.HTML 属于 SGML2.XHTML属于XML,是 HTML 进行 XML 严格化的结果3.HTML5 不属于 SGML 或 XML, 比 XHTML宽松问题3.HTML5 有什么变化1.新的语义化元素2.表单增强3.新的API(离线、音视频、图形、实时...原创 2018-05-11 13:26:52 · 1016 阅读 · 0 评论 -
CSS 居中方法小结
1.文字垂直居中1234.header_nav-item{ height:38px; line-height:38px; } 即文字所在模块的高度和行高设置成一样的!2.块元素垂直居中与父元素 .header_wrap{ height:80px; position:realitive;} .header_logo{ hei...原创 2018-05-04 10:44:36 · 148 阅读 · 0 评论 -
CSS 布局 position 详解
CSS 布局 position 详解1.position 之 static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。实例:!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...原创 2018-06-01 11:39:23 · 6708 阅读 · 0 评论