CSS
sdKdqweas
这个作者很懒,什么都没留下…
展开
-
水平垂直居中方式
flex布局,flex布局首先要把原来的元素的样式给他转换过来,所有的元素都变成了flex的容器(item或项目)。项目默认是按照主轴排列的(这个也可以设置的),每个容器的大小也是可以设置的,这个是比较特殊的使用方式。绝对定位+transform(支持翻转,缩小,平移)绝对定位脱离文档流,但是增加了top,left这类可以可以进行用于移动的属性。text-align设置一个块元素的行内元素的对齐方式。align-item(设置在交叉轴的布局方式),交叉轴的布局方式可以设置在垂直方向的布局效果。...原创 2022-07-31 20:40:19 · 76 阅读 · 0 评论 -
CSS层叠上下文
在学习z-index属性的时候,限制了能够使用z-index属性的元素。那么为什么有的元素能够使用z-index?因为他创建了一个层叠上下文,对于这个词的理解首先要理解上下文。上下文这个名词的出现有很多地方,块级格式上下文,执行上下文,在不同地方都有着不同的解释但都可以理解它代表一种环境,一块区域。层叠上下文由于在CSS世界中,元素是三维的,但是我们看到的是一个二位平面,多个二维平面堆叠就形成了三维平面,这就是层叠上下文的含义以上条件就可以创建一个层叠上下文在了解了层叠上下文之后,假设我们在原创 2022-04-01 14:43:19 · 108 阅读 · 0 评论 -
元素堆叠顺序问题
前言在学习css浮动脱离元素文档流,还有z-index,背景图,背景颜色出现颜色覆盖问题时,我总会产生一种疑惑,疑惑这几项谁覆盖谁,谁的优先级更高?堆叠顺序堆叠顺序有两种,第一种是基于z-index,第二种是没有z-index情况下。由于页面中的元素是一个三维图形,如下我们的视野看到的就是z-x这个平面,产生堆叠是在y轴上假设y轴离源点越远,那么他的优先级就越高堆叠顺序如下:根元素的背景和边界优先级最低没有position和postion:static的优先级比1要高一级优先级最高的是原创 2022-04-01 10:20:24 · 482 阅读 · 0 评论 -
CSS之设置外边距使元素居中
前言首先我们得知道块级元素要满足流的特性,块级元素是占据一行中显示如果看过CSS世界这本书,里面讲述关于width:auto时的4种特性,我现在想要讲的是第一种特性如果不给width设置高度,那么他默认在水平方向是占据一行的,元素的宽度默认是充满这一行。这时候给这个元素设置水平方向的外边距,内边距和边框,浏览器会自动帮我们调整width大小,基于的前提仍然是想要充满这一行如果我们设置margin:0 auto;这时候是不起作用的什么时候margin:0 auto;起作用?当主动给width设置原创 2022-03-30 22:11:25 · 1069 阅读 · 0 评论 -
css世界第二章
长度单位css里面有值的概念,值可以为整数,数值,颜色值(十六进制),百分比同时css还有一个常用的内容,叫描述长度的概念。有时候我们使用px有时候使用%,vh这类单位。值是一个包含了长度单位的集合,但在我看来百分比还有vh这类并不是长度单位,他们是一群基于了绝对长度单位又进行了一次定义(或者说是计算)绝对长度单位:px,css作者说就这个实用性强,同时我们就把他当做描述所有相对长度单位的基础相对长度单位:挑出几个常用的值:em,相对于font-size的值,计算方式font-sizex原创 2022-03-27 20:17:45 · 272 阅读 · 0 评论 -
CSS优先级
什么是优先级当有多个css选择器的样式声明在同一个html元素上时,我们要进行挑选,选择哪个作为元素的样式MDN的另外一种描述是,判断css声明与html元素最相关如何进行判断判断条件,是以数值进行判断的,设定四个位,个十百千这里说以类选择器,类选择器可以看做是属性选择器的子集,他可以以[class=‘xxx’]的形式作等效替换同时向数值的大小也有一种描述,将一个元素描述的越具体越详细,他的优先级就越高**注意:**优先级没有进位,也就是当你个位超过了10,他的十位也不会进1!impor原创 2022-03-27 20:16:41 · 300 阅读 · 0 评论 -
CSS包含块与其涉及的属性
前沿有时候给width和height赋值的会采用百分比的形式。这个百分比相对的就是包含块,包含块的定义在场景下是不同。包含块先讲述初始包含块,初始包含块就是 <html>占据的空间。在浏览器器中的表现就是可视化区域。包含块变动依赖的是position属性1.当position为static,relative。它的包含块由 最近的祖先块元素的内容区域组成2.当position为absolute,包含块就是由它的最近的 position 的值不是 static (也就是值为fixed,原创 2022-03-27 14:43:38 · 314 阅读 · 0 评论 -
css世界阅读第一章
前沿学习一本书,学会的是与作者对话,是一种来自超越了空间层面的对话。由你提出疑问,作者帮你解惑,然后作者承接问题抛出更多的问题。所以尝试着让这一次对话过程变得生动起来。CSS世界观假设css是一个魔法的世界,标签和标签的属性看做是被施法的对象(魔法石),魔法师是css属性,法器就是我们的选择器,魔法技能就是css属性值。一个完整的施法过程是,魔法师选择法器,对着魔法石施展魔法。这个施法过程对应你如何在一个html文档中使用css。一个css的世界观就建立起来了,很是奇妙CSS流流是什么?在我原创 2022-03-26 21:01:45 · 133 阅读 · 0 评论