AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！
我的前端自学之路2020/12/30移动端
移动WEB开发目前国内的移动端浏览器基本是根据webkit修改来的内核，所以兼容移动端的主流浏览器，处理webkit内核即可。常见移动端屏幕尺寸以及dpr视口viewport就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。理想视口：ideaviewport为了使网
Java学习86
CSSalign-content属性CSS参考手册CSS参考手册  实例对齐弹性盒的<div>元素的各项： div{  display:flex;  flex-flow:rowwrap;  align-content:space-around;} 尝试一下»浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。
flex布局与grid布局
最近有玩两个挺有意思的css小游戏，从中分别学习了flex布局和grid布局的，前一个叫FLEXBOXFROGGY，后者叫GridGarden，游戏是通过在线补齐css属性来通过关卡。 一、flex布局 首先通过display:flex来声明flex布局。 justify-content属性设置水平对齐样式；flex-start:
简易loading动画的制作
实现效果<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>简易加载动画<itle&gt
flex弹性布局详解
一、什么是弹性布局弹性布局(flexcontainer)，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴:默认水平显示的主轴和始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。与传统布局的
vue四十四：Vue美团项目之商家详情-导航栏和header布局
 定义商家详情页<template><divclass="">商家详情</div><emplate><scripttype="text/ecmascript-6">exportdefault{name:"",data(){return{}},components:{}};</script><style
CSS3 Flexbox布局
Flexbox布局Flexbox布局（也叫Flex布局或弹性盒子布局）模块旨在提供一个更有效的布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化的情况下仍能分配好子元素之间的空间。Flex布局的主要思想是使父容器能够调节子元素的宽度/高度和排列顺序，从而能够最好的填充可用空间。
我对Flexbox布局模式的理解
Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。首先举一个栗子，之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后通过margin偏移的方式来实现。<style>.container{width:600px
css问题总结
flex问题：问题描述在移动端经常会用到flex布局。最近在开发的过程中遇到flex:1;的元素中的内容过多会出现超出父元素的宽度，出现横向滚动条。这种情况只有在iOS上出现。解决方案给父级元素宽度100%，flex:1的元素width:0%;grid问题：问题描述grid布局是一种比较新的布局
弹性盒子和预处理
弹性盒子和预处理弹性盒子弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。displayflexinline-flex设置flex布局后，子元素的float、clear和vertical-align属性将失效
css 实现数字0-9
参考阮一峰老师的cssflex布局http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html效果： 代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>骰子<itle></head><body&gt
JSON.parse(JSON.stringify()) 的利用 动态style封装
利用JSON的特性可以对undefined等排除，拿到干净的数据例子//根据用户的样式转换成动态stylefunctionoutSideStyle(){//定义样式letdefineStyle='width:60%;display:flex;flex-wrap:wrap;'//最后返回的样式对象letstyleObj={}//
Flexbox弹性盒子布局
一.弹性盒子是什么？1.弹性盒子是CSS的一种新布局模式2.代替浮动使布局更加简便3.对齐方式包含了水平和垂直方向4.弹性项目可以通过CSS重新排序二.基本概念1.创建容器–在元素身上创建一个display的声明，里面的所有子元素我们称为flex项目。如下图所示。三.弹性布局的
flex布局：常用的子元素属性设置及使用方式
flex属性：flex属性定义子项目分配剩余的空间，用flex来表示占多少份数。语法：flex：1；表示在剩余空间中，占1份。flex：2；表示在剩余空间中，占2份。占的份数越大，元素的大小就越大。.fatherspan:nth-child(2){/*在剩余空间中占2份*/flex:2;background-color:tomato;}.
flex 介紹
詞法分析:(lexicalanalysis或scanning)語法分析:(syntaxanalysis或parsing)詞法分析：把一行字轉化成有意義的詞塊，稱為記號（token)語法分析：確定記號根記號之間如何關聯詞法分析通常所做的事就是在輸入的文字間尋找字符的模式（pattern)正則表達式：（regularexpression或reg
react native ScrollView之Swiper使用
安装Swiper，在WebStorm的Terminal中运行命令yarnaddreact-native-swiper@nighty安装成功后在package.json中可以查看到react-native-swiper的安装信息"dependencies":{"react":"16.13.1","react-native":"0.63.4",&qu