【css布局笔记（二）Flex】的更多相关文章

只需5分钟！一文读懂CSS布局（二） -- flex布局

目录 简介 基本概念 容器属性 1. flex-direction 测试代码 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6. align-content 项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex属性(重点) flex: auto flex: none flex: 1 flex: 100px 6. align-self 在我们上一篇CS…

CSS学习笔记：flex布局

目录 一.Flex布局简介 1. Flex布局的主要作用 2. Flex布局应用场景 二.Flex布局的使用 1. Flex布局的两种相关元素 2. 父项属性 2.1 flex- direction 2.2 justify-content 2.3 flex-wrap 2.4 align-items 2.5 align-content 2.6 flex-flow 3. 子项属性 3.1 flex 3.2 align-self 3.3 order 参考资料:https://www.bilibili.…

“学习CSS布局” 笔记

学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和static表现一样.额外属性包括:top, right, bottom, left. 一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置.和 relative 一样, top . right . bottom 和 left 属…

css布局笔记（二）Flex

flex Flex是"Flexible Box"的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可指定为Flex布局. .box{display:flex;} 行内元素也可以使用flex布局. .box{display:inline-flex;} webkit内核的浏览器,必须加上-webkit前缀 .box{display:-webkit-flex; display:flex;} 注意:设为flex布局以后,子元素的float,clear…

css学习笔记二

下面来总结一下盒子模型,流式布局,浮动布局,层布局(定位布局). 1.盒子模型 有二种:IE盒子模型 和 标准w3c盒子模型 1)IE的盒子模型的content包含了padding和border 2)标准的w3c盒子模型有四部分组成:内容(content),填充(padding),边框(border),边界(margin) 提示:盒子模型的3d结构有五层,第一层是border,第二层是content+padding,第三层background-image,第四层是background-color…

CSS布局（二）

本节内容:position.float.clear.浮动布局例子.百分比宽度 position CSS中的position属性设置元素的位置.属性值:static.relative.fixed.absolute. static static属性是默认值.任意的position:static:的元素不会被特殊的定位.一个static元素表示它不会定位,一个position属性被设置为其他值的元素表示它会被定位. relative…

css布局笔记（三）圣杯布局，双飞翼布局

圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> <html> <head> <style> .con { padding-left: 150px; padding-right: 190px; } .left{ background: #E79F6D; width:150px; float:left; margin-left:…

CSS学习笔记二：css 画立体图形

继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: rotate:rotateX() rotateY()  rotateZ()   :这个属性能够实现翻转效果 translate:translateX translateY() translateZ() :这个属性是实现移动效果 origin: 是设立为中心 perspective: 是影响3D的视觉…

css布局笔记（一）

布局方式 一列布局 通常固定宽高,用margin:0 auto:居中显示 两列布局 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.设置左左浮动,或设置左右浮动(这是需要确定父级元素的宽度).如何父级元素没有设置高度,则需要设置overflow:hidden来清除浮动产生的影响 .对于自己相邻元素清除浮动产生的影响用:clear:both;. 三列布局 两列定宽中间自适应:首先设置父级元素的宽度,可以左左右设置浮动.然后…

css学习笔记二之inline-block

1.inline-block是CSS2.1中新增的盒类型,在div中将display属性设定为"inline-block",则div显示效果与设置display属性为"inline"是一样的效果. inline-block具有inline属性的列属性,内部又具有block属性的块属性,可以使用width,height,margin,padding,border等元素. 2.使用inline-block可以在某些情况下替代float浮动元素,PS:要做一个横向导航条…