css框架

Swiper滑动组件功能很强大也广泛应用于移动端打造滑动、触屏等功能，官网： https://www.swiper.com.cn/ ，说下在Vue中使用Swiper。 1.下载安装 用npm的方式：npm install swiper 2.组件中引入 import Swiper from ‘swiper’; import ‘swiper/dist/css/swiper.min.css’; 3.使用 <template> <div class="demo"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for= "(item,index) in swiperList"> <div class="box-c">{{item}}</div> </div> </div> </div> </div> </template> <script> import Swiper from "swiper"; import "swiper/dist/css/swiper.min.css"; export default { name: "HelloWorld", data() { return { swiperList: [] }; }, mounted() { this

目录 CSS简介 CSS语法 内联和块元素 选择器 元素选择器&id选择器&类选择器 并集选择器&交集选择器&通配选择器 元素间的关系 后代元素选择器&子元素选择器 伪类选择器 伪元素 属性选择器 子元素的伪类选择器&兄弟元素选择器 否定伪类选择器 样式的继承&选择器的优先级&伪类的顺序 CSS Diner 选择器练习 文本格式化 长度单位 RGB值 字体 行高 文本样式 盒子模型 盒子模型的简介 边框 内边距 外边距 内联元素的盒子模型 display、visibility、overflow 文档流 浮动 高度塌陷 定义 解决方法(一) 解决方法(二、三) 高度塌陷问题的总结 定位 定位的含义 相对定位 绝对定位 固定定位 层级 opacity 背景 背景图片的设置 图片闪烁问题 简写属性 表格 表格的简介 表格的样式 长表格 表格的布局 完善 clearfix 表单 表单简介 表单项 框架集 IE6_png的修复 Hack 条件Hack 属性级Hack 选择符级Hack @(目录) CSS简介 CSS语法 内联和块元素 选择器 元素选择器&id选择器&类选择器 并集选择器&交集选择器&通配选择器 元素间的关系 后代元素选择器&子元素选择器 伪类选择器 伪元素 属性选择器 子元素的伪类选择器&兄弟元素选择器 否定伪类选择器 样式的继承&选择器的优先级&伪类的顺序 CSS

关于 微信公众号：前端呼啦圈（Love-FED） 我的博客： 劳卜的博客 知乎专栏： 前端呼啦圈 前言 随着 React 的盛行，其移动开发框架 React Native 也收到了广大开发者的青睐，以下简称 RN。通过 RN 我们能够使用 JavaScript 语言来实现跨平台移动应用的开发，打开了前端工程师通往移动平台的大门。用 RN 官方的介绍来概括它的特点就是： Learn once, write anywhere 。 如果你了解 React，那么学习 RN 的话应该会非常轻松。因为 RN 和 React 使用了相同的开发语言 JavaScript 和相同的设计理念 React，在 React 的基础上添加了原生平台的底层支持。这样，不同平台的适配就交由 RN 去处理，而开发者只需要关注 RN 平台应用开发本身。 本文将从 RN 混合开发（与 iOS、Android 平台交互）的原理和实现进行介绍，结合流程图的方式让大家进一步的了解 RN 开发的思想和底层逻辑。 原理与实现 1. 从 Hello world 开始 先来看一个使用 RN 实现的简单的 Hello world 展示： 上方我们不难看到一些很熟悉的 React 语法，但除此之外我们还能看到其引入了 react-native 库中的 AppRegistry API 和 Text (文本)组件，这便是 RN

1. HTML对象获取问题 FireFox：document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法： 统一使用document.getElementById("idName"); 2. const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var关键字来定义常量. 解决方法： 统一使用var关键字来定义常量. 3. event.x与event.y问题 说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 解决方法： 使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX. 4. window.location.href问题 说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href; Firefox1.5.x下,只能使用window.location. 解决方法： 使用window.location来代替window

页面布局 在前端开发中页面布局总是最开始的工作，就像盖楼时，先搭框架，然后再填砖，前端也是一样的，先做好页面的布局工作。 　　大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 　　div 元素是用于分组 HTML 元素的块级元素。 　　div默认就是垂直平铺（垂直排列）；水平的需要加style="float:left;"。 在学习了盒模型、块级元素和行内元素得到概念后，我们知道绝大多数的模具工作是由CSS+DIV来完成的，因为表格布局 复杂页面时需要频繁的嵌套，代码比较复杂、难以维护，而使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用，提高了开发效率，同时分离后美工和网站开发人员也可以协同合作，进一步提高了开发效率和整体网站的质量。 常规流式布局 元素按照自身的常规显示方式显示，有两个特点： 1.元素按照自身HTML元素定义的位置显示（怎么写的怎么显示） 2.元素按照自身的常规显示特性显示 比如块级元素垂直排列，行级元素水平排列。 以前没学布局时，其实是用的就是常规流布局。 布局步骤 一、总体布局 先布局出我们想要的页面的具体显示的框架。比如我们先把一个网页看成一个大的div。 二、使用DIV进行分割 拿例来说我们网页整体分为上中下三部分

前言 本文是在GitHub上看到一个大牛总结的前端常见面试题，很多问题问的都很好，很经典、很有代表性。上面没有答案，我就整理了一下，从网上找了一些相关问题的答案。里面有一部分问题的答案我也没有进行考证，不少答案都来源于网络，或许会有疏漏之处，仅供大家参考哦！(还有一部分问题答案还未整理，大家也可以自己搜索一下答案) 1.你能描述一下渐进增强和优雅降级之间的不同吗? 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效. 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。 2.线程与进程的区别 一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中

我们在使用vue框架的时候，都会有需要引用css的时候，但是在vue中引用css文件我们需要配置两个loader，一个是style-loader，一个是css-loader。 首先我们要通过脚手架下载这两个loader，命令行为 cnpm installl style-loader css-loader -D 下载完成之后，我们需要在webpack.config.js中配置两个loader。 配置方法如图： 我们必须先配置style-loader，在配置css-loader，但是在前几天搭建项目的时候遇到了一个错误，如图： 一开始我一直以为是我配置的不对，后来才发现，原来最近发生了变化，就是在使用style-loader和css-loader的时候，已经不需要再在webpack.config.js文件中配置loader就可以使用了。 来源： CSDN 作者： MrSunOcean 链接： https://blog.csdn.net/MrSunOcean/article/details/80299731

iframe里有一个srcdoc属性，很有用！ window.location.href=document.referrer//可以实现返回上一级页面并刷新 HTML5权威指南 © ® ，比较老的书了，有些知识过时了！！！ HTML5高级程序设计 也是比较老的书了。 0.0一些网站： http://caniuse.com/　　查询浏览器支持情况 https://www.w3.org/html/ 【w3c的html首页】 https://www.w3.org/TR/2016/WD-html51-20160310/changes.html#changes 　　【html5.1官方文档 table of contents】 https://www.w3.org/html/ig/zh/wiki/HTML5 　　【html5中文版文档，不过貌似不是最新的html版本】 https://www.w3.org/Style/CSS/ 【w3c的css首页】 https://www.w3.org/TR/css-2017/ 【css最新版本手册】 0.1，一些资源库： 　　<!--[if IE]><script>alert('This is IE');</script><![endif]--> 　　morderizr 一个js库，检测浏览器是否支持某些HTML5和CSS3特性的JS库　　http:/

一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。 二、基本概念 学习 Grid 布局之前，需要了解一些基本概念。 2.1 容器和项目 采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。 <div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> </div> 上面代码中，最外层的 <div> 元素就是容器，内层的三个 <div> 元素就是项目。 注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的 <p> 元素就不是项目。Grid 布局只对项目生效。 2.2 行和列 容器里面的水平区域称为"行"（row）

一、概念 DOMContentLoaded 　　当初始的 HTML 文档被完全加载和解析完成之后 ，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 load 　　load 仅用于检测一个完全加载的页面， 页面的html、css、js、图片等资源都已经加载完 之后才会触发 load 事件。 二、浏览器的一些基本概念 下载/加载 　　浏览器将资源下载到本地的过程。 解析 　　解析的意思是将一个元素通过一定的方式转换成另一种形式。 　　比如 html 的解析。首先要明确，html 下载到浏览器的表现形式就是包含字符串的文件。浏览器将 html 文件里面的字符串读取到内存中，按照 html 规则，对字符串进行取词编译，将字符串转化成另一种易于表达的数据结构。 　　比如下面的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>只有css</title> <link rel="stylesheet" href="