AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！
CSS @supports解析
@supports（）会检测括号中的声明，在浏览器支持该声明的情况下执行花括号中的代码。基本属性检测@supports(display:flex){ div{display:flex;}}not关键字@supportsnot(display:flex){ div{float:left;}}组合条件检测@supports(display:flex)and(
Flex布局
一、简介   Flex(FlexibleBox)，意为"弹性布局"，用来为盒状模型提供最大的灵活性。  容器指定flex布局：display:flex;//行内元素的flex布局display:inline-flex;//webkit内核的浏览器flex布局display:-webkit-flex;display:flex; 二、基本概念 
前端学习笔记2.1-2.5
1.初步完成H5列表页，学习了flex布局，将absolute布局转变为flex布局，修改了页面单位rem      1.1学习felx布局：        原因：由于absolute布局在页面放大缩小时可能会导致页面排版出错，所以学习flex        学习：学习了flex的主轴和交叉轴，常用的属性有   
移动web开发重点2：实现盒子水平垂直居中(flex布局和定位的两种方法)
实现盒子水平垂直居中1:用flex布局这里只写一种情况，就是设置主轴是x，侧轴是y，然后设置主轴上的子元素的排列顺序居中，也就是justify-content:center；再设置侧轴行的子元素的排列顺序，这是考虑的是单行的，也就是align-items:center<!DOCTYPEhtml><htmllang="en"><head>
卡片悬停效果制作
源码：<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="w
flex布局整理
Flex布局，也就是Flexbox的俗称，是CSS提供的用于布局的一套新属性。这一套标准是由W3C于2009年提出并制定的。    Flex相比其他传统的布局，能更简便、更完整，并且是响应式地实现各种布局(框架不能算里面，例如bootstrap，它可以响应式，并且可以自适应)，这里稍微扩充一下：      
Flex 布局
任何一个容器都可以指定为Flex布局。.box{display:flex;}行内元素也可以使用Flex布局。块状元素​块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。块状元素特征：(1)能够识别宽高
flex布局详解
一、认识flex布局使用display:flex；开启flexcontainer布局二、flex布局模型下面是官方给出的flex布局，注意主轴和交叉轴。三、flex相关属性（一）、flex-container几个CSS属性介绍1、flex-direction：决定主轴的方向2、justify-content:决定flexitems主轴的对齐方式3
mpvue微信小程序自定义导航栏NavBar组件封装
mpvue微信小程序自定义导航栏形态有4种如图：形态使用如下//第一种<nav-bartitle="司机首页"/>//第二种<nav-bartitle="自助排队":isGoBack="true":isGoBackEvent="true"/>//第三种<nav-bartitle="我的任务":showSearch="true&qu
弹性盒模型flexbox
弹性盒模型用到的一些属性1、写在父元素上的属性1)开启弹性布局（元素默认水平排列）display:flex;2)设置子元素的排列方式(即弹性盒的方向)flex-direction:;row默认值，子元素从左往右排列row-reverse子元素从右往左排列column子元素从上往下排列column-reverse子元素从
Flex 布局教程
Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display:flex;}基本概念：采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（fl
CSS flex自适应两栏布局 自动填充剩余空间
前言相较于定位，浮动来说，Flex和Grid才是真正为了浏览器布局而开发的CSS布局系统。两列布局是我们经常使用的一种布局什么？？你不会Flex莫要着急，如果你对Flex布局不了解，可以看看Steven在哔站的FlexBox讲解演示1-经典两列布局效果如图查看完整内容，请查看原文查
如何让一个 div 水平垂直居中
<divclass="parent"><divclass="child"></div></div>1.使用flex布局.parent{display:flex;justify-content:center;align-items:center;}2.使用绝对定位.parent{position:relative;}.child{
float、table、flex解决等分布局出现的问题及解决方案
float、table、flex解决等分布局出现的问题及解决方案解决出现的问题解决float出现的问题问题一：如果给子块加上间距的话则会导致一行不够分而导致有的块被挤掉问题二用盒子模型做出来了边距后出现了第一个模块的左边距有空隙解决table出现的问题问题margin-left:-10px
flex布局项目知识点
1.order属性定义项目的排列顺序，数值越小，排列越靠前，默认为0.item{ order:1;}  2.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。如果所有项目的flex-grow属性为1，他们将等分剩余空间，如果一个flex-grow属性为2，其他项目为1，则前者占用的空间是其他的
C3
变量在根部通过–定义全局变量，定义的全局变量可以在本地Style标签和外联样式文件中使用。/*html*/<head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>wtt<itle>&l