Flex入坑指南

弹性布局flex是一个几年前的CSS属性了,说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局,什么postion: absolute+margin,float+padding,各种都可以使用flex来取代之。 早两年在使用的时候,还是会担心有兼容性问题的,某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。 好在现在已经是
阅读本文

前端面试基础

HTML和css篇1、说下你常用的几种布局方式1.浮动布局float+margin的方式2.百分比布局宽度百分比自适应3.双飞翼布局(改进版).wrap{ padding: 0 200px; position: relative; } .left{ width:200px; height:400px; background:red; position
阅读本文

vue-cli 脚手架中 webpack 配置基础文件详解

一、前言vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮我们完善功能可以将文件打包压缩,图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要,接下来我将基于webpack3.6.0版本结合文档将文件各个击破,纯干料。二、主体结
阅读本文

2018-05-22 CSS如何居中

CSS Tricks 中关于居中的相关介绍。1、水平居中可以在一个块级别的父元素中水平地居中内联元素,只需:.center-children { text-align: center; }注:这种写法适用于inline, inline-block, inline-table, inline-flex等等。 代码示例: => html代码<header> This text is cente
阅读本文

IFE_part1(task4-6)

今日实践了以下文本相关的所有属性内容: text-indenttext-transformtext-decorationtext-alignword-spacingwhite-spacecolorline-heightfontfont-familyfont-sizefont-weightfont-face所写的HTML如下: <!-- 控制文本缩进 --> <p style=“text
阅读本文

导航栏效果

不可思议的CSS 导航栏 光标下划线跟随 PURE CSS Coco ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate(-50%, -50%);}li { position: relative; padd
阅读本文

前端跳槽面试技巧(慕课网)笔记二:页面布局

通信:跨域通信;前后端通信安全:xss; 页面布局:写出3种及格,目的是写出更多的解决方法出题意图:考察css 方案:1.浮动2.绝对定位3.flexbox4.table cell5.网格布局 grid 提高及延伸:1.这几种方案的优缺点浮动:优点:兼容性好缺点:脱离文档流,需要处理好和周边元素的关系绝对定位:优点:快捷缺点:布局脱离文档流,导致可使用性太差flex布局:优点:比较完美,为解决上述
阅读本文

webrtc fec

WebRTC::FEC[TOC]Tags: WebRTC FEC WebRTC中的 FEC 实现分为 UlpFEC 和 FlexFECulpfec:rfc 5109FlexFEC还在实现中, 相关标准也还是 RFC草案.详见:FlexFex WebRTC对FEC进行恢复处理的动作对RTCP的统计是透明的. WebRTC对FEC的冗余度计算是动态的, 会根据丢包情况和网络带宽估计(BWE)的结
阅读本文

媒体查询以及flexbox,响应式图片

媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width.height和color都是可用于媒体查询的特性。使用媒体查询,可以不必修改内容本身,而让网页适应不同的设备。   媒体查询的使用方式:在css文件输入@media screen。在Link标签中使用媒体查询。。组合媒体查询:可以将多个媒体查询串在一起。  使用Css中的@import会增加HTTP请求(进而影响加载速度),因此
阅读本文

CSS:flex实现骰子的6个面

用flex实现骰子的六个面,实现效果如下:实现代码如下:<html> <head> <style> body { background-color: #000000; display: flex; justify-content: center;
阅读本文

实用资源库和工具,极大缩减开发时间

或许,一些朋友已经对文中的一些工具有所了解,但如果你发现了一些对你有帮助的新工具,那么,我将倍感欣慰。由于这个列表中包含了不同类别的资源,为了便于大家查看,我已将其进行了重新的分类,来 Enjoy 吧!JavaScript 库 Particles.js  - 一个用于在网页上创建漂亮的浮动粒子的 JS 库; 地址:http://vincentgarreau.com/particles.js/ Th
阅读本文

盒尺寸

盒尺寸(Box dimensions)的4个盒子盒尺寸由4个盒子组成,分别是content box, padding box, border box, margin box。这个和盒模型中的几个盒子其实是对应的。这是他们在规范中的称呼,当规范落地到CSS语言层的时候,每个盒子都起了一个对应的名字,如下:content box写做content-box;padding box写做padding-bo
阅读本文

postcss gulp 安装使用

备注:   测试使用的是gulp 进行的编译1. 项目初始化npm init mkdir src touch app.css body{ display: flex; }2. 安装(gulp 、gulp-postcss 以及几个依赖)npm install -g gulp-cli npm install gulp-postcss --save-dev npm install gulp
阅读本文

手写无缝轮播图

轮播图几乎在每个项目中都会有,今天写了一个无逢轮播图一、实现的功能:1. 进入页面,轮播图自动向右切换2. 鼠标悬停在轮播图部分时,轮播图停止切换,鼠标离开继续自动切换3. 鼠标悬停在下方的小圆点上时,自动切换到对应的图片4. 鼠标点击向左或向右按钮时,图片会向左或向右切换 先来看一下效果图吧!http://sandbox.runjs.cn/show/9b78sdiy  二、无逢轮播图实现原理:所
阅读本文

React Native(十三)——ios键盘挡住textInput

渐入佳境        用React Native重构的项目也快接近尾声,剩下的就是适配ios的功能了。慢慢地也从中琢磨出了一点门道,于是就遇见了键盘遮挡textInput问题斑斑;        正常页面:        区别在这        页面简单介绍(部分代码):        原以为ScrollView在android以及ios中均可以显示右边的滚动条,亲身实践后意外的才发现只有and
阅读本文

指令

v-textv-html预期:string 详细: 更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局
阅读本文

构建单页Web应用——简单概述

一、开发框架  ExtJS可以称为第一代单页应用框架的典型,它封装了各种UI组件,用户主要使用JavaScript来完成整个前端部分,甚至包括布局。随着功能逐渐增加,ExtJS的体积也逐渐增大,即使用于内部系统的开发,有时候也显得笨重了,更不用说开发以上这类运行在互联网上的系统。  jQuery由于偏重DOM操作,它的插件体系又比较松散,所以比ExtJS这个体系更适合开发在公网运行的单页系统,整
阅读本文