flex布局

移动端的一些样式适配

阅读更多关于移动端的一些样式适配

1、ios端 margin-bottom不起作用描述：当内容高度大于其所有父容器的高度时，内容的该属性不起作用。解决；尽量少用html, body {height: 100%;}这种非常规代码。最快捷就是改成padding 2、使用flex布局实现底部固定要点：总容器高100%； display:flex; flex-direction:column; 中间区域 flex:1；overflow: auto；参见： https://www.cnblogs.com/diligenceday/p/5985903.html 注：采用fixed布局页面，尽量不要出现输入框，否则在ios 会出现 bug。 3、ios端键盘弹起引发问题 1、弹起后页面上移，未恢复；解决： input注册 blur事件，滚动到底部。 window.scrollTo(0, document.documentElement.clientHeight); 2、键盘弹起后遮盖输入框；解决： input 注册 focus 事件，滚动可视区域的1/3 window.scrollTo(0, document.documentElement.clientHeight/3); 4、安卓端，字体过小时，无法垂直居中，上移了。解决： 12px时，效果稍好，小于12 基本都会出现这个问题。

常见的布局方式实现

阅读更多关于常见的布局方式实现

单列布局 HTML： <div class="parent"> <div class="child"></div> </div> 一.水平居中（常见的，那些什么table，导致性能不好的就不说了）实现效果： 1.使用inline-block和text-align实现 <style> .parent{ text-align: center; border: 1px solid red; } .child{ width: 50px; height: 50px; border: 1px solid #667766; background-color: bisque; display: inline-block; } </style> 原理： ①.text-align是指定元素文本的水平对齐方式，可继承， ②.inline-block行内块级元素，就是还是行内元素的排列方式不换行，但是支持块级元素有的宽高和上下padding 多个inline-block子元素会怎样？多个inline-block的间隙解决办法：在父级元素中加入font-size:0; 优点：兼容性好，缺点：需要同时设置子元素和父元素 2.使用margin:0 auto实现 .child{ width: 50px; height: 50px; border: 1px solid #667766; background

阅读更多关于 Flex布局

一、Flex概念 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可使用Flex布局 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。三

flex布局学习

阅读更多关于 flex布局学习

flex布局也称弹性布局，其实主要为父级元素和子元素属性首先是为父级元素设置display 设置display: flex 虽然子元素真是长度，超过父元素宽度，但是设置flex后，子元素排列在一行，并且对他们宽度进行了均等分 1、先看下父元素属性：flex-direction 设置主轴的方向 2、justify-content设置子元素在主轴上的的排列方式（需要注意两个点一个是确定主轴，另外是指的是子元素） 3、felx-wrap 设置子元素是否换行回到最初父级500宽度但是子元素是150宽度最后排在一列上我们希望的子元素宽度不是被压缩的，这个时候需要用到这个属性 4、align-items 子元素设置侧轴的排列方式（单列） []( https://img2020.cnblogs.com/blog/1904903/202003/1904903-20200318213852695-1227943629.png 5、align-content子元素设置侧轴的排列方式（多列） 2.1 子元素属性 flex定义子元素分配剩余空间所占份数 2.2 order 子元素的排布书序 2.3 algin-self控制子元素自己在侧轴的排列方式虽然属性简单但是想要正在掌握需要不断勤加练习对属性有大概了解也可以想到flex 进行垂直居中代码如下：来源： https://www

弹性布局学习-详解 flex-direction【决定主轴的方向】(二)

阅读更多关于弹性布局学习-详解 flex-direction【决定主轴的方向】(二)

目录弹性布局学习-介绍(一) 弹性布局学习-详解 flex-direction【决定主轴的方向】(二) 弹性布局学习-详解 justify-content(三) 弹性布局学习-详解 align-items(四) 弹性布局学习-详解flex-wrap(五) flex-direction row section ul { display: flex; flex-direction: row; } section li { width: 200px; height: 200px; text-align: center; line-height: 200px; margin: 10px; background-color: pink; list-style:none; } column section ul { display: flex; flex-direction: column; } section li { width: 200px; height: 200px; text-align: center; line-height: 200px; margin: 10px; background-color: pink; list-style:none; } row-reverse section ul { display: flex; flex-direction: row

CSS HTML 基本知识盒子模型 Flex等

阅读更多关于 CSS HTML 基本知识盒子模型 Flex等

/* postion: absolute 不占用文档流空间，父元素没有position属性，相对于body定位元素位置 relative是占用文档流空间相对于文档流中原来的位置进行定位 fixed 不占用文档流空间相对于body定位*/ /* display: none; 在文档流中删除标签占的空间 * block 显示，会频繁创建DOM标签/ /* visibility: hidden;标签在文档流中占用空间，只是被隐藏。 visible 显示*/ /* clear:both清除后面元素的浮动效果 */ /* float: left right none 左浮动，右浮动不占用文档流空间 */ /* 布局标签元素举例：div 块结构 span 行内 p 段落 ul 有序 li 列表项 ol 无序 a 超链接 img 图片链接 i 斜体 b 粗体 */ /* CSS标签选择器： id选择器： #id 类选择器； .class 关系选择器： div>span>.class div,span选择所有div和span div p 选择div里面的所有p标签 div+p div标签后面的所有p标签伪类选择器： :hover 结构性选择器：div:after 在div标签里面的内容之后插入内容 div":before 在div标签内容之前插入内容* #div :nth-child(n)

flex布局实例--实现底部导航

阅读更多关于 flex布局实例--实现底部导航

vh 存在兼容性问题，不建议使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} body{background-color: pink;} ul{list-style: none;} a{text-decoration: none;color:#333;} .footer{width:100%;height:80px;position: fixed;background:lightblue;bottom:0;display: flex;} .footer li{flex:1;/*平分空间*/} .footer li a{height:100%;display: flex;flex-direction:column

移动端常见bug

阅读更多关于移动端常见bug

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" />  将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" />  viewport模板

HTML 中的 Flex 布局

阅读更多关于 HTML 中的 Flex 布局

一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 . box { display: flex ; } 内联元素也可以使用 Flex 布局。 . box { display: inline-flex ; } Webkit 内核的浏览器，必须加上-webkit前缀。 . box { display: -webkit-flex ; / * Safari * / display: flex ; } 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。三

前端学习日记（十）：css中伸缩盒布局的简单应用

阅读更多关于前端学习日记（十）：css中伸缩盒布局的简单应用

一、伸缩盒布局（ Flexbox ）【CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。】三列布局(一行中有3列) 【修饰后，三列在一行中显示，高度相等，宽度动态调整，当调整浏览器宽度的时候，每一列的宽度会动态调整。】例如：【flex设定在子元素上，用来设置在主轴上的大小占容器剩余空间的比例每个项目占一份，也就是每个项目占三分之一】 < style > /* 实现三列布局 */ . container { display : flex ; border : 1 px solid blue ; height : 200 px ; } . item { flex : 1 ; } . one { background - color : pink ; flex : 2 ; } . two { background - color : cyan ; } . three { background - color : coral ; } < / style > < / head > < body > < div class = "container" > < div class = "item one" > < / div > < div class = "item two" > < / div > < div class =

订阅 flex布局