css框架

一、react样式 1、内联样式 在以前写 html+css 的时候，引入css的时候有一种方法就是内联，而在 react 中又有些不一样，样式是用变量的形式，如下 const styleComponentHeader ={ header: { backgroundColor:'#333333', color:'#ffffff', 'padding-top':'15px', paddingBottom:'15px', fontSize:'15px' } //还可以定义其他样式 } <h1 style={styleComponentHeader.header}>yondu is a good father</h1> 我们用参照 json 的方式定义了一个样式， 这个只能定义在 render 里面 ，然后直接使用它，当然 header 后面还可以继续定义其他样式，而且和 css 写法不同的是，名字要用 驼峰命名法 ，或者你就用引号把名字包起来，而后面的值则必须要用引号包起来。这种方式最后呈现的状态是把样式直接写入了标签里面，这样定义的东西不会影响全局，只对自己负责不会污染其他的。 另一种方法是我们直接创立一个 css 文件，这种就直接像以前那种写法了,只不过你在标签里面加类名的时候，要用 className ，例如 <h1 className="smallFontSize">yondu

HTML 1、一套规则，浏览器认识的规则。 2、开发者： 学习Html规则 开发后台程序： - 写Html文件（充当模板的作用） ****** - 数据库获取数据，然后替换到html文件的指定位置（Web框架） 3、本地测试 - 找到文件路径，直接浏览器打开 - pycharm打开测试 4、编写Html文件 - doctype对应关系 - html标签，标签内部可以写属性 ====> 只能有一个 - 注释： <!-- 注释的内容 --> 5、标签分类 - 自闭合标签 < meta charset = " UTF-8 " > - 主动闭合标签 title>老男孩 </ title > 6、 head标签中 - < meta - > 编码，跳转，刷新，关键字，描述，IE兼容 < meta http-equiv = " X-UA-Compatible " content = " IE=IE9;IE=IE8; " /> - title标签 - < link /> 搞图标，欠 - < style /> 欠 - < script > 欠 7、body标签 - 图标，   > < - p标签，段落 - br，换行 ======== 小总结 ===== 所有标签分为： 块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距） 行内标签： span（白板） 标签之间可以嵌套

知识点汇总 1.HTML HTML5新特性，语义化 浏览器的标准模式和怪异模式 xhtml和html的区别 使用data-的好处 meta标签 canvas HTML废弃的标签 IE6 bug，和一些定位写法 css js放置位置和原因 什么是渐进式渲染 html模板语言 meta viewport原理- 2.CSS 盒模型，box-sizing CSS3新特性，伪类，伪元素，锚伪类 CSS实现隐藏页面的方式 如何实现水平居中和垂直居中。 说说position，display 请解释*{box-sizing:border-box;}的作用，并说明使用它的好处 浮动元素引起的问题和解决办法？绝对定位和相对定位，元素浮动后的display值 link和@import引入css的区别 解释一下css3的flexbox，以及适用场景 inline和inline-block的区别 哪些是块级元素那些是行级元素，各有什么特点 grid布局 table布局的作用 实现两栏布局有哪些方法？ css dpi 你知道attribute和property的区别么 css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？ 流式布局如何实现，响应式布局如何实现 移动端布局方案 实现三栏布局（圣杯布局，双飞翼布局，flex布局） 清除浮动的原理 overflow:hidden有什么缺点？

HTML相关 1、 标签的定义与用法 http://www.xinran001.com/bbs/thread-72998-1-1.html 2、 块级元素和行内元素 http://www.w3cwhy.com/css-html/html-hkmarka.html 3、 你真的了解HTML吗？ 雅虎面试题 http://club.topsage.com/thread-2738399-1-1.html 幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”。年前确实不是招人的好时候，所以我们前端团队经过了超负荷的运转，终于坚持过了春节。春节以后就开始招人啦，这套题考察的目标就是基础基础再基础，嘿嘿。 事先声明： ◆ 这些题目的来源：面试曾经被问过;工作被别人问过或者遇见过;网上看见过... ◆ 答案真心不给提供，真的是许多问题都需要个人的理解和沉淀，所以还请各位自己动手...前端可以试试自己差不多能回答多少题，哈哈。 ◆ 其实很多题我也没有好答案，面试的时候如果遇到牛人我也可以顺便交流交流，反正我也只是一面，不丢人也不怕丢人。 ◆ 如果朋友们有好的面试题欢迎提建议，我会其实补充更新的，先谢谢各位了。 HTML相关 1. 标签的定义与用法。 2. 块级元素和行内元素都有哪些? 3. 你真的了解HTML吗? 雅虎面试题　 　把前面黄底那段拿去搜索下就知道了

一、你能描述一下渐进增强和优雅降级之间的不同吗? 如果提到了特性检测，可以加分。 检测浏览器，渐进增强就是让牛b的浏览器的效果更好，优雅降级就是让2b的浏览器在功能ok的情况下效果一般。 二、线程与进程的区别 一个程序至少有一个进程,一个进程至少有一个线程. 线程的划分尺度小于进程，使得多线程程序的并发性高。 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。 三、请解释一下什么是“语义化的 HTML”。 语义化的好处：1：去掉或样式丢失的时候能让页面呈现清晰的结构： html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式

一、你能描述一下渐进增强和优雅降级之间的不同吗? 如果提到了特性检测，可以加分。 检测浏览器，渐进增强就是让牛b的浏览器的效果更好，优雅降级就是让2b的浏览器在功能ok的情况下效果一般。 二、线程与进程的区别 一个程序至少有一个进程,一个进程至少有一个线程. 线程的划分尺度小于进程，使得多线程程序的并发性高。 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。 三、请解释一下什么是“语义化的 HTML”。 语义化的好处：1：去掉或样式丢失的时候能让页面呈现清晰的结构： html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式

一、简介 介绍： Bootstrap，来自 Twitter ，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言 Less 写成 为何使用bootstrap： 响应式设计 ：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计 。 移动设备优先 ：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持 ：所有的主流浏览器都支持 Bootstrap。 容易上手 ：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。 它为开发人员创建接口提供了一个简洁统一的解决方案。 它包含了功能强大的内置组件，易于定制。 它还提供了基于 Web 的定制。 它是开源的。 二、开始使用bootstrap 1、下载： https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip 2

Bootstrap的介绍: 凡是使用过Bootstrap的开发者,多不在乎做这么两件事:复制,粘贴.Bootstrap使用非常简单,但是在复制粘贴之前,需要先对Bootstrap的用法熟悉. Bootstrap,来自Twitter,是目前最受欢迎的前端框架.Bootstrap是基于html,css,javascript的,它简洁灵活,是的web开发更加快捷. 它用于开发响应式布局,移动设备优先的WEB项目 Bootstrap的下载 使用Bootstrap第一步,先将生成环境的Bootstrap下载下来.然后将下载,引入到自己建好的当前目录中 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="https://cdn

前面的话 　　Bootstrap是简单、灵活的用于搭建WEB页面的HTML、CSS、Javascript的工具集。Bootstrap基于HTML5和CSS3，具有漂亮的设计、友好的学习曲线、卓越的兼容性，还有12列响应式栅格结构，丰富的组件等等。按照官网的宣传来说，Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。本文将介绍Bootstrap概述 引入 　　在传统前端开发过程中，常常出现重复、复杂、无意义地命名，结构冗余、胡乱嵌套，页面错乱等问题 　　2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁，要素排版利落大方 　　Bootstrap最新版本是Bootstrap4，稳定版本是Bootstrap3，兼容低版本IE的版本是Bootstrap2　 　

Github: https://github.com/nzbin/snack Docs: https://nzbin.github.io/snack 前言 这篇文章我已经酝酿了半年之久，或者说拖沓了这么久吧。想说的东西很多，却又无从说起。如今轻量级框架如雨后春笋，层出不穷。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。在之前的文章中，我提到了面向对象的 CSS（比如 BEM、OOCSS、SMACSS ，详见 http://vanseodesign.com/css/dry-principles/ ）。这是一种思想，并不涉及具体的 CSS 问题，主要是类命名的策略！现在仍然有很多人对于前端框架的认识还停留在表面，认为 Bootstrap 是后端人员专用，前端没必要等等。我不知道这种说法从何而来，我最开始也不喜欢使用框架，或许和很多人的想法一样，畏惧新知识、害怕难以驾驭、遇到问题的时候无法解决等等。最关键的一点是很多人认为框架的样式是固定的，修改起来太麻烦，还不如自己根据设计图写起来方便。 为什么使用框架 为什么使用框架？答案显而易见，效率。除此之外，使用框架或者研究框架的意义还有很多，比如面向对象思想的具体实现。在上一家公司工作的时候，开始的几个项目我也是用最原始的方法书写 CSS 。项目之中最让我头疼的就是类的命名。我想大多数人都是根据功能去命名