A PATH THROUGH THE GARDEN
CSS.
这里收录了 16 篇与「CSS」有关的文字。
CSS布局——BFC概念
BFC是CSS中的一个概念，全称区块格式化上下文（Block Formatting Context，BFC），用于确定元素如何在页面上布局及如何与其他元素相互作用，简单理解就是页面布局的容器之间不受相互作用，造成结果与预期不符。比如浮动元素高度塌陷、容器之间的边距重叠等现象。理解BFC有助于解...
CSS选择器中的:has()和:not()伪类
前言: 本文记录一下CSS3中逻辑选择器中的has和not, has相当于根据子代条件来选择父代, not类似过滤条件. 使用前先检查代码运行的浏览器环境是否符合如下截图条件.not对当前节点的过滤筛选 css
阻止固定定位下的DOM滚动
前言：对网站做移动端适配，点击左上角弹出抽屉布局，其实现为fixed绝对定位，对其进行鼠标的上下滚动会造成抽屉层下面的dom元素也随之滚动，本文目的旨在解决该滚动穿透问题。思路网上思路较多，鼠标滚动也好，手指滑动也好，都属于Event事件，而后抽屉弹出禁用底部dom的默认事件思路，该思路可行，...
CSS布局——水平居中和垂直居中总结
在 CSS 中，水平和垂直居中布局是一个非常常见的需求。根据不同的布局情况，可以使用不同的方法来实现元素的水平和垂直居中。以下是几种常见的实现方法：flexboxflexbox 是最简单和最推荐的方法，适用于未知宽高的元素。.container display: flex; jus...
CSS布局——CSS的媒体查询
媒体查询（CSS3）@media：注意@符号@media mediatype andnotonly (media feature) CSS-Code; mediatype 查询类型将不同的终端设备划分成不同的类型，称为媒体类型关键字关键字将媒体类型或多个媒体特性连接到一起做为...
CSS选择器总结
七、CSS3 属性选择器(上)什么是 CSS3在 CSS2 的基础上拓展、新增的样式CSS3 发展现状移动端支持优于 PC 端CSS3 目前还草案，在不断改进中CSS3 相对 H5，应用非常广泛属性选择器列表属性选择器代码演示button cursor: pointer; butt...
CSS中2D动画：transform（translate rotate scale）、animation（@keyframes animation）
translate2D 转换2D 转换是改变标签在二维平面上的位置和形状移动： translate旋转： rotate缩放： scaletranslate 语法x 就是 x 轴上水平移动y 就是 y 轴上水平移动transform: translate(x, y) transform: tra...
CSS中3D动画：translate3d、rotate3d、perspctive ···
一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值二、3D 转换3D 转换知识要点3D 位...
CSS布局——Flex
flex布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。flex布局又叫伸...
CSS布局——百分比布局
meta标签viewportnormalize.css移动端 CSS 初始化推荐使用 normalize.css/Normalize.css：保护了有价值的默认值Normalize.css：修复了浏览器的bugNormalize.css：是模块化的Normalize.css：拥有详细的文档官网...
CSS布局——响应式布局rem
remem相对单位em是父元素字体大小rem相对单位rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/ 根html 为 12px / html font-siz...
CSS布局——盒模型
borderborder综合属性作用border-width定义边框粗细，单位是pxborder-style边框的样式border-color边框颜色【1】border-stylenone：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(最为常用的)dashed：边框为虚线do...
CSS布局——定位
CSS 布局的三种机制网页布局的核心 —— 就是用 CSS 来摆放盒子位置。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位【1】普通流（标准流）可以让盒子上下排列或者左右排列的块级元素会独占一行，从上向下顺序排列；常用元素：div、hr、p、h1~h6、ul、ol、d...
CSS中的字体（font）和背景（background）
字体相关font-size作用：font-size属性用于设置字号p font-size:20px; 单位：可以使用相对长度单位，也可以使用绝对长度单位。相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。类型单位说明相对长度单位em相对于当前对象内文本的字体...
CSS布局——浮动
浮动详解为什么需要浮动多个盒子(div)水平排列成一行实现盒子的左右对齐行内块（inline-block）它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。行内块（inline-block）不能实现以上第二个问题，盒子左右对齐浮动特点概念：元素的浮动是指设置了浮动属性的...