flex布局

我的CSS3学习笔记

阅读更多关于我的CSS3学习笔记

1. 元字符使用： []: 全部可选项 ||：并列 |：多选一 ?: 0个或者一个 *：0个或者多个 {}: 范围 2.CSS3属性选择器： E[attr]：存在 attr属性即可； E[attr=val]：属性值完全等于val E[attr*=val]：属性值里包含 val字符并且在“任意”位置 E[attr^=val]：属性值里包含 val字符并且在“开始”位置 E[attr$=val]：属性值里包含 val字符并且在“结束”位置 3.CSS3伪类选择器： P:first-child：P元素的父元素的第 1个子元素（第一个元素必须是p标签，否则无效） P:last-child：其父元素的最后 1个子元素 P:nth-child(n): 其父元素的第 n个子元素（n遵循线性变化，其取值0、1、2、3、4...） P:nth-last-child(n): 其父元素的第 n个子元素（倒着数） 4.伪类： E:empty ：空伪类；选中没有任何子节点的 E元素；（使用不是非常广泛） E:target ：目标伪类；结合锚点进行使用，处于当前锚点的元素会被选中； E:not(selector) ：排除伪类；除 selector（任意选择器）外的元素会被选中； 5.伪元素： 1、E::first-letter文本的第一个单词或字（如中文、日文、韩文等） 2、E::first

CSS3总结

阅读更多关于 CSS3总结

CSS3总结 1. 简介 1.1 现状浏览器的支持程度差，需要添加私有前缀移动端支持优先于pc端不断改进中应用相对广泛 1.2 如何对待坚持渐进增强考虑用户群体遵照产品的方案听boss的！ 2. 基础知识 2.1 选择器属性选择器 1. [attr] : 表示存在attr属性即可(属性没有赋值都没有关系) 2. [attr=val] : 表示属性值完全等于val 3. [attr^=val] : 表示属性值以val开头 4. [attr*=val] : 表示属性值在任意位置含有val字符 5. [attr$=val] : 表示属性值以val结尾伪类选择器: :link, :active, :visited, :hover 以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类 E:first-child E的父元素的所有子元素中的第一个子元素为E的元素被选中 E:last-child E的父元素的所有子元素中最后一个子元素为E的元素被选中 E:nth-child(n) 第n个子元素: n的取值为从0开始计算,但子元素的序号是从1开始计算(索引<=0时,选取无效) E:nth-last-child(n) 倒数第n个元素 E:empty 选中没有任何子节点的E元素目标伪类 : E:target 结合锚点使用,处于当前锚点的元素会被选中排除伪类 : .test

弹性布局flex

阅读更多关于弹性布局flex

flex有12个属性布局　　 Flex 是它可以简单、完整、响应式的实现各种网页布局，目前已经得到了大多数主流浏览器的支持，有关于它的兼容性可以在 CanIuse 中的查询到任何一个容器都可以指定为Flex布局文章中的内容主要借鉴自 Flex布局教程 by阮一峰学习地址为： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 基本概念： flex container ：采用 Flex 布局的元素，即父元素，称为 Flex容器，简称容器。 flex item ：父元素内包含的子元素，称为 Flex项目，简称项目。 Flex是没有方向之分的，在Flex容器中默认存在两根轴，水平的轴为主轴main axis ，垂直的轴为侧轴cross axis 。（如果改变 flex-direction ，主轴和侧轴也将会改变）主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end 。侧轴的开始位置叫做 cross start ，结束位置叫做 cross end 。项目默认沿主轴方向排列，单个项目占据的主轴空间叫做 main size ，侧轴空间叫做 cross size 。以上概念用图表示，如下：注意：设为Flex布局后，子元素的 float 、 clear 、

flex布局应用

阅读更多关于 flex布局应用

flex介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 了解了flex布局之后,发现其功能非常强大. 当指定一个div display: flex之后,里面的子元素会按flex布局.常用的册格,各种经典网页布局,如上左右下,还有一些难搞的CSS,如内容不占满整页时,footer会上移,而不是在页面底部等等. 这些情况下使用flex可以轻松简洁的实现.节约大量css篇幅册格 <div class="grids"> <div class="grid-4"></div> <div class="grid-4"></div> <div class="grid-4"></div> </div> 实现册格以前如下 .grids{ box-sizing: border-box; font-size: 0; } .grid{ display: inline-block; box-sizing: border-box; } .grid-4{ width: 33.33333333%; } 用flex后 .grids { box-sizing: border-box; display: flex; } .grid { box-sizing: border-box; flex: 1 1 0; } grids为父元素,指定flex布局

Flex 项目属性：flex 布局示例

阅读更多关于 Flex 项目属性：flex 布局示例

flex属性： flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。该属性有两个快捷值： auto ( 1 1 auto ) 和 none ( 0 0 auto )。下面来看看使用项目属性flex的两个示例：一、 CSS： 1 <style> 2 body{ margin: 0;padding: 0;font-size: 20px;font-weight: 600;text-align: center;line-height: 40px; } 3 #header,#footer{ height: 80px;background-color: #aaa; } 4 #content{ width: 100%;height: 600px;display: flex; } 5 #content div:first-of-type{ width: 300px;background-color: #bbb;flex: 0 0 auto; } 6 #content div:last-of-type{ background-color: #ccc;flex: 1; } 7 </style> HTML： 1 <body> 2 <div id="header">页眉</div> 3 <div id=

flex布局学习

阅读更多关于 flex布局学习

Flex布局 1. flex 布局的概念 flexible box: 弹性盒状布局容器控制内部元素的布局定位 CSS3引入的新布局模型伸缩元素，自由填充，自适应 2.flex布局的优势可在不同方向排列元素控制元素排列的方向控制元素的对齐方式控制元素之间的等距控制单个元素放大与缩放比例，占比，对齐方式 3.flex布局的常用术语 flex container：flex 容器 flex item：flex 项目（元素） flex direction：布局方向 4.flex-direction row 排列方向：从左到右 row-reverse 排列方向：从右到左 column 排列方向：从上到下 column-reverse 排列方向：从下到上 5.flex-wrap wrap：换行 nowarp：不换行 6.justify-content flex-start: (默认)左对齐或向上对齐 flex-end：右对齐或向下对齐 center：居中对齐 space-between：两端对齐，元素之间平均等分剩余空白间隙部分 space-around：元素两边平均等分剩余空白间隙部分，最左或最右和元素之间的距离是1:2 7.align-items(设置元素在纵轴上的对齐方式) flex-start：在纵轴上向起点位置（向上 / 向左）对齐 flex-end：在纵轴上向起点位置

移动web开发——flex布局

阅读更多关于移动web开发——flex布局

1.0传统布局和flex布局对比 1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局 1.2 flex布局操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex 要记住 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items：设置侧轴上的子元素排列方式（单行） flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap 2.0 flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"

flex布局笔记

阅读更多关于 flex布局笔记

一、简介： flex布局又叫弹性布局，只要将最外层的块级元素display设置为flex，就创建了flex布局。可以把他看成一个盒子，盒子里面有很多子项。设置了flex布局的最外层元素被称为flex container，作为容器存在，里面的子项被称为flex items。container和item分别有不同的属性可以设置。几个基础概念：（图片来自网络）主轴：main axis（从main-start到main-end）子元素默认排布交叉轴：cross axis(从cross-start到cross-end) main size：单个项目占据主轴长度大小 cross size：子元素在交叉轴方向上代销二、container的属性 2.1 flex-direction：绝对主轴方向，控制子项的整体布局方向 row：主轴从左到右 row-reverse：主轴从右到左 column：主轴从上到下 column-reverse：主轴从下到上 2.2 justify-content：主轴的对齐方式，控制子项的对齐方式 flex-start:与main start对齐(默认值) flex-end：与main end对齐 center：居中对齐 space-between：item之间距离相等，main start 和main end 两端对齐(两端靠边) space-evenly

阅读更多关于 flex布局

（一）认识flex布局 flex布局完全可以代替浮动，浮动比较麻烦而且会带来高度坍塌。如下外面的大框是flex-container,里面的小框是flex-item。以下分析（上面为代码，下面为代码的效果图） < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http - equiv = "X-UA-Compatible" content = "ie=edge" > < title > Document < / title > < style > . box { /* 开启flex布局有2个方法 display: flex;块级元素 display: inline-flex;行内元素 */ display : flex ; width : 5 oopx ; height : 300 px ; background - color : #f00 ; } < / style > < / head > < body > < div class = "box" > < div > < / div > < div > <

响应式布局

阅读更多关于响应式布局

所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同（例如屏幕宽度、横竖屏、移动端还是pc端等）选择的渲染方式也不同响应式布局常用的方法有媒体查询和bootstrap的栅格化系统(一套代码响应大中小不同屏幕的尺寸，当然界面的布局也有所变化) 媒体查询 body { margin : 0 ; padding : 0 ; } .contain { width : 100% ; } .head { width : 100% ; height : 50px ; background-color : cadetblue ; /* flex-direction: column; */ } .head-nav { width : 180px ; height : 50px ; justify-content : space-between ; display : flex ; line-height : 50px ; /* align-items: center; */ } a { text-decoration : none ; color : white ; font-size : 16px ; } .n1 { width : 50px ; height : 50px ; } .n2 { width : 50px ;

订阅 flex布局