![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 84
晴空万里 彩虹再现
星辰大海!!!
展开
-
css居中的总结
text-align行内元素或行内块元素的居中<style> .parent{ width: 200px; height: 200px; text-align: center; background: red; } .children{ /* 行内块也具有行内元素的特性 因此使用text-align也有效果 */ display: inline-block; width: 100px; height: 1原创 2022-03-13 22:17:39 · 64 阅读 · 0 评论 -
html中什么是数据链接?
数据链接(data url)将目标文件的数据(二进制)直接写到路径位置。如何书写默认情况下是写保存着图片数据的文件夹路径,然后浏览器根据路径找到这个保存图片数据的文件夹,然后把文件夹里面的数据读取出来,然后解析数据显示成图片。语法:data:MIME类型,数据 这样就表示这里使用数据而不是路径<img src="./img/a.jpg"/><!--实际上是把直接图片数据读取出来,然后根据数据渲染成图片显示到页面上dataurl的意思是我不写数据的路径,而是直接将数据写在sr原创 2022-03-06 22:44:56 · 484 阅读 · 0 评论 -
css的auto值是什么意思
auto值的介绍auto表表示自适应,由浏览器去自动计算auto值,auto在不同的环境下表示不同的意思。在文档流模型中的auto值:块级元素的auto:可用设置auto值的属性: width、height、margin。当以上这些属性设置水平方向上的值为auto时,表示计算包含块的剩余可用空间,它会自动计算计算包含块的剩余空间。当以上这些属性设置垂直方向上的值为auto时,height会自适应内容,margin上下会计算为0,原因是块级元素在垂直方向上并不要求占满一行,原理可以看我这篇博客:原创 2022-03-05 13:09:26 · 2368 阅读 · 0 评论 -
移动端布局(三) rem布局及原理
什么是rem首先来了解一下什么是em:作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小。s1、s2、s5、s6的font-size和line-height分别是多少px?<div class="p1"> <div class="s1">1</div> <div class="s2">1</div></div><div class="p2">转载 2022-02-17 21:56:45 · 9745 阅读 · 0 评论 -
A 文档流布局以及margin:auto的原理
常规流布局也叫常规流、文档流、普通文档流、常规文档流,浏览器默认的排列方式。将窗体自上而下分成一行行,按照源代码的顺序排列将块级元素从上到下、行内元素在每行中从左至右的依次排放元素,并占据文档一定的空间。常规流快盒的水平布局规则:每个块盒的总宽度(margin border padding content加起来),必须刚好等于包含块的宽度,因为要独占一行。盒模型属性中只有这三个值可以设置auto的值:width、margin-left、margin-right宽度(width)的默认值:aut原创 2022-02-10 11:28:06 · 870 阅读 · 0 评论 -
css布局方法的总结
双inline-block方案方法是通过calc(100% - 140px)动态计算右侧盒子的宽度缺点:需要知道左侧盒子的宽度,两个盒子的距离,还要设置各个元素的box-sizing需要消除空格字符的影响需要设置vertical-align: top满足顶端对齐。.warpper-inline-block{ box-sizing: border-box; font-size: 0;}.warpper-inline-block .left,.warpper-inline-bloc转载 2022-01-09 18:33:06 · 92 阅读 · 0 评论 -
移动端布局(二)关于视口
简单来说<meta name="viewport" content="width=device-width,initial-scale=1.0">的解释content属性值:width:可视区域的宽度,值可为数字或关键词device-widthheight:同widthintial-scale: 页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,maximum-转载 2021-12-31 23:10:09 · 1246 阅读 · 0 评论 -
移动端布局(一)dp、dip、PPI、dpr、图片模糊
高清屏即高清屏,把更多的像素压缩至一块屏幕里,从而达到更高分辨率显示的细腻程度,使人眼无法分辨出单个的像素。物理像素物理像素,设备的硬件像素,生产出来就已经设定好了的真实像素,不能被改变。是计算机屏幕渲染画面(图像)的最小单位,整个图像是由像素单位组成的,这个单位的形状通常都是会发光的正方形方格,在相同尺寸屏幕中,像素点越多,像素点就越小就越清晰(因为你在该屏幕内容纳更多的像素像素点自然会缩小),像素点越少,像素点就越大,图像就不清晰,因为你都能看到像素点的锯齿状。分辨率指的就是水平垂直方向上像素转载 2021-12-24 22:59:11 · 1968 阅读 · 0 评论 -
什么是替换元素
替换元素和非替换元素的区别原创 2021-12-12 23:19:58 · 563 阅读 · 0 评论 -
css 定位是什么
定位通过定位可以将元素摆放到页面的任意位置,通过positio属性可设置定位类型。脱离文档流:CSS中脱离文档流,就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在position属性值:默认值:static,元素是静止的(不定位,该浮动的浮动该是常规流的是常规流)relative:相对定位absolute:绝对定位fixed:固定定位sticky:粘滞定位一个元素,只要position的取值不是static,认为该元素是一个定位元素.定位元素会原创 2021-12-01 23:11:46 · 402 阅读 · 0 评论 -
浮动是什么
浮动规定元素向左或向右移动,浮动元素会脱离文档流,其它常规流元素会填补它的空间,并且文字等行内元素会环绕在浮动元素的周围。文档流浏览器默认的排列元素的方式,按照源码的书写顺序依次将行内元素从左到右水平排列,块级元素从上到下垂直排列,并占据文档一定的空间。例子: .a{ border: 1px solid #000; } .b{ border: 1px solid yellow; } .c{原创 2021-11-02 23:32:18 · 186 阅读 · 0 评论 -
堆叠上下文
堆叠上下文(stack content)它是一块区域(跟bfc一样也是一块区域,可以影响在这快区域的元素),这块区域由某个元素创建,它规定了该区域中内容在z(平面垂直)轴上排列(覆盖)的先后顺序创建堆叠上下文的元素:1.html元素(根元素)2.设置了z-index(非auto值)数值的定位元素3.position 值为 fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支持);4.flex (flexbox) 容器的子元素,且 z-原创 2021-07-04 21:58:27 · 119 阅读 · 0 评论 -
块级格式化上下文规则(常规流BFC IFC)
格式化上下文(就是盒子排列渲染的规则)是页面上的一个隔离独立的渲染区域,规定盒子怎么布局。在普通流中,所有的盒子(不管是内联盒子(内联元素等)还是块级盒子(块级元素等)都要属于一个格式化上下文,不是属于块级格式化上下文就是属于内联格式化上下文,但是不能同时属于两者,块级元素布局遵循块级格式化上下文的规则,内联元素布局遵循内联格式化上下文的规则来进行布局.就是这两个规则使得页面的所有元素有序的布局,才呈现出我们所看到的web页面。注:视觉格式化模型中包含了常规流,而常规流包含了块格式化上下文和行格式化上原创 2021-06-30 23:24:42 · 300 阅读 · 0 评论 -
视觉格式化模型
视觉格式化模型规定页面中多个盒子的排列规则,盒子该怎么摆放、渲染成什么样子。盒模型也包含在这个规则里面。盒模型:规定单个盒子的规则(盒子有哪些部分组成?行盒是怎么样的,快盒是怎么样的)。视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子,每个盒子的布局由以下因素决定:盒子的尺寸:精确指定、由约束条件指定或没有指定盒子的类型:行内盒子(inline)、行内级盒子(inline-level)、原子行内级盒子(atomic inline-level)、块盒子(block)定位方案(p原创 2021-06-20 23:17:19 · 250 阅读 · 0 评论 -
盒模型是什么
盒模型盒模型的简介盒模型的组成盒模型的简介盒子:css将每个元素在文档中都生成一个在矩形区域并且占据一定的空间,这个矩形区域就相当于我们日常生活中盒子,比如买手机时,手机会用一个盒子包装。模型(model):模拟盒子(元素)的形态(跟装手机的盒子一样都由content padding boder margin组成)。盒模型的组成...原创 2021-06-13 18:57:41 · 1470 阅读 · 0 评论