BFC 规范1. 概念BFC (Block Formatting Context,块级格式上下文) 是页面上的一个隔离的独立容器。容器里的子元素不会影响到外面的元素反之亦然示例一个盒子不设置 height,当内容子元素都浮动时,无法撑起自身。原因: 这个盒子没有形成 BFC。2. 创建 BFC2.1 创建 BFC 的方法方法说明备注float 的值不是 nonefloat: left 或 r...
BFC 规范1. 概念BFC (Block Formatting Context,块级格式上下文) 是页面上的一个隔离的独立容器。容器里的子元素不会影响到外面的元素反之亦然示例一个盒子不设置 height,当内容子元素都浮动时,无法撑起自身。原因: 这个盒子没有形成 BFC。2. 创建 BFC2.1 创建 BFC 的方法方法说明备注float 的值不是 nonefloat: left 或 r...
浮动布局基础1. 概念网页布局的本质是:用 CSS 来摆放盒子,把盒子摆放到页面对应的位置。在 CSS 中提供了以下几种不同的布局策略来实现页面的布局:正常布局流浮动布局定位布局表格布局 (display: table)响应式设计弹性布局网格布局多列布局以上每种布局方式,都有自己的用途,也有各自的优缺点,相互辅助。2. 正常布局流(Normal Flow)2.1 概念正常布局流(normal...
CSS 函数详解一、calc() 函数calc() 函数用于动态计算长度值。基本语法 width: calc(100px + 200px); width: calc(100px - 50px * -1); width: ...
不透明度 (opacity)一、opacity 概述opacity 属性指定了一个元素的不透明度。属性值属性值描述0元素完全透明(即元素不可见)0.0 - 1.0元素半透明(元素后面的背景可见),值越大,元素透明度越低1元素完全不透明(即元素后面的背景不可见)二、基本用法案例演示<style> .item { width: 100px; height: 100...
文本溢出显示省略号单行文本和多行文本溢出隐藏并显示省略号 ... 在实际项目开发中经常使用。一、单行文本溢出显示省略号必要属性 white-space: nowrap; text-overflow: ellipsis; overflow: hidden;案例演示<style> p { widt...