前端知识之css

【前端知识之css】的更多相关文章

前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器

目录前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.css四个基本选择器(标签选择器.类选择器.id选择器.通用选择器) 5.css组合器(重点) 5.1.后代选择器(特征为空格)空格的意思就是后代 5.2.儿子选择器(特征>) 5.3.毗邻选择器(特征为+) 5.4.弟弟选择器(特征为~) 6.css属性选择器 6.1.查找属性名含有name的标签…

【前端知识体系-CSS相关】CSS工程化方案

1.如何解决CSS的模块化问题? 使用Less,Sass等CSS预处理器使用PostCSS插件(postcss-import/precss) 使用webpack处理CSS(css-loader + style-loader) 2.PostCSS是什么? PostCSS是一个平台,具体要取决于这个平台上面的插件可以做什么常用的插件如下 // 1. 可以添加属性前缀,适应所有的浏览器 const autoprefixer = require('autoprefixer'); // 2. 将所有的…

【前端知识体系-CSS相关】CSS预处理器

1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CSS更加简洁.适应性更强.可读性更佳,更易于代码的维护等诸多好处 Sass(Scss):2007,ruby编写 Less: 2009,js编译 1.1 使用流程? 基于CSS的另外一种语言通过工具编译成CSS 添加了很多CSS不具备的特性同时CSS文件的组织方式 1.2 预处理器的作用有哪些? 帮…

前端知识之css样式

前端之CSS样式 css介绍 css是为html标签设置样式的 css由选择器和声明组成声明包括属性和属性值声明之间用分号:隔开 css注释 /注释类容/ css的几种引入方式行内样式不推荐使用直接在html标签中style属性中设置样式,不推荐使用,不方便后续更改 <p style="color: red">Hello world.</p> 内部样式嵌入式是将css样式集中写在网页标签标签对中 <head> <meta chars…

【前端知识体系-CSS相关】Bootstrap相关知识

1.Bootstrap 的优缺点? 优点:CSS代码结构合理,现成的代码可以直接使用(响应式布局) 缺点:定制流程较为繁琐,体积大 2.如何实现响应式布局? 原理:通过media query设置不同分辨率的class 使用:为不同分辨率选择不同的class 3.如何定制自己的bootstrap样式? 使用CSS同名类覆盖(门槛低,见效快,可能会有bug) 修改源码重新构建(一次性彻底解决) [ bootstrap.scss是入口文件,修改这个文件内容之后,使用node-sass重新编译scss文…

【前端知识体系-CSS相关】CSS特效实现之Transition和Transform对比

CSS效果 1.使用div绘制图形(三角形)? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .triangle-top { width: 0; height: 0; border-width: 0 40px 40px; border-style:…

【前端知识体系-CSS相关】CSS布局知识强化

1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局(兼容性的问题) 1.1 基础布局 <style> * { margin: 0; padding: 0; } .layout { margin-top: 10px; } .layout div{ min-height: 100px; } </style> <body>  <section cl…

【前端知识体系-CSS相关】CSS基础知识强化

1.CSS样式(选择器)的优先级? 1.1 权重的计算规则第一优先级:无条件优先的属性只需要在属性后面使用!important.它会覆盖页面内任何位置定义的元素样式.(ie6支持上有些bug). 第一等:内联样式,如:style="color:red;",权值为1000.(该方法会造成css难以管理,所以不推荐使用) 第二等:ID选择器,如:#header,权值为0100. 第三等:类选择器.如:.bar, 权值为0010. 第四等:类型(标签)选择器和伪元素选择器,如:div ::…

css的几种引入方式行内样式行内式是在标记的style属性中设定css样式,不推荐大规模使用 <p style='color:red'>hello world</p> 内部样式嵌入式将css样式集中写在网页的<head></head>标签对中 <head> <meta charset='utf-8'> <title>title</title> <style> p{ background-col…

前端知识总结--css用div画环形圆

如何用最少的div画最多的环形?如下图所示最少需要多少个div? 暂时想到的利用div的边框.内外阴影及befor和after的伪元素实现以下代码可以实现上图效果: <style> div{ height: 100px; width: 100px; border-radius: 100px; position: absolute; top: 40%; left: 40%; border: solid 10px purple; box-shadow: 0px 0px 0px 10px red,…