随笔分类 - Html+Css
摘要:一、简介本文主要是对z-index属性进行详细的讲解,包括其使用场景、属性效果、适用范围等等。本博客的所有代码执行的浏览器环境,都是以Chrome浏览器为准。 1、属性作用 z-index属性是用来设置元素的堆叠顺序或者叫做元素层级,z-index的值越大,元素的层级越高。当元素发生重叠时,层级高的
阅读全文
摘要:文章目录前言一、定位(position) 介绍1、为什么使用定位2、定位组成二、 定位模式 (position)1、边偏移(方位名词)2、定位模式介绍1.1 静态定位(static) - 了解1.2 相对定位(relative) - 重要1.3 绝对定位(absolute) - 重要1.3.1 绝对
阅读全文
摘要:上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局
阅读全文
摘要:flex是flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效。伸缩布局弹性布局=伸缩盒布局=弹性盒布局=flex布局。 采用
阅读全文
摘要:Flex 是 Flexible Box 的缩写,意为“弹性布局”或者“弹性盒子”,是 CSS3 中的一种新的布局模式,可以简便、完整、响应式地实现各种页面布局,当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前,几乎所有的浏览器都支持 Flex 布局。 1. 基本概念 采用 Flex 布局的元
阅读全文
摘要:Flex布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局,行内元素也可以使用Flex布局。 /* 块级元素 */ display: flex; display: -webkit-flex;/* 需要兼容火狐Saf
阅读全文
摘要:justify-contentjustify-content是flex布局中的一个属性,用来调整container中的items布局 flex-start (default): 每个item从起点开始依次排布flex-end: 每个item从尾部开始依次向起点排布center: items沿中心排布
阅读全文
摘要:今天来为大家说一下最常用到的 position 定位属性 说定位之前先来看看什么是文档流: w3c里面的解释是:正常流中的框属于格式化上下文,它可以是块的或内联的,但不能同时出现。块级框参与块格式化上下文。内联级别的框参与内联格式上下文。 个人解释一下: 每个块自上而下分成一行一行,并在每行中按从左
阅读全文