![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
zc自由飞~
这个作者很懒,什么都没留下…
展开
-
百分比布局,右边顶部出现间隙
这个问题主要是: div的inline-block一个对齐问题解决方法:给右边div加一个属性vertical-align: top;上边布局左右用的百分比,左右两边元素用的display:inline-block;所以需要设置对齐方式。也可以左右采用flex布局的方式,采用flex就不用设置vertical-align,因为flex内置的对齐方式会更规范一点,自己用width布局需要多设置一些属性。...原创 2021-08-02 17:17:03 · 103 阅读 · 0 评论 -
div折行的原因
div按照百分比计算的,总百分比没有超出100%,但是div会掉下来原因:盒子模型,改变盒子类型,因为width计算是没有包括padding计算的。解决:给每一小块div设置box-sizingbox-sizing: border-box;即可解决问题...原创 2021-08-02 17:09:46 · 190 阅读 · 0 评论 -
for循环出来的四个div高度不一致
如上情况原因:div垂直对齐的问题解决方法: 给每一个循环出来的div加上vertical-align: bottom;即可解决问题原创 2021-08-02 17:05:12 · 526 阅读 · 0 评论 -
echarts不会随着flex布局自适应伸缩
echarts在调用resize时会重绘,如果你的子div没有设置宽度,只是设置了flex:1;那么会有如下场景发生:触发图表resize后,子元素宽度全为0,父元素宽度也为0,会导致第一个重绘完成的图表所在的子div宽度不明确,可能会使得第一个绘制完成的图表宽度在resize后还是默认的宽度...原创 2021-06-17 17:46:24 · 2436 阅读 · 4 评论 -
三行布局(头尾定高主栏自适应)
<div class="layout"> <section class="demo1"> <header class="h50 orange">方法一:calc</header> <main><div class="blue h400">main</div></main> <footer class="h50 black">footer</footer>...转载 2021-04-19 16:55:21 · 163 阅读 · 0 评论 -
多列等高布局
<div class="layout"> <h4>padding + 负margin</h4> <main> <section class="padmar green"> <p>111</p> </section> <section class="padmar orange"> <p>222</p> &...转载 2021-04-19 16:48:50 · 59 阅读 · 0 评论 -
三栏布局(两侧边栏定宽,主栏自适应)
<div class="layout"> <h4>方法一:圣杯布局</h4> <section class="grail clearfix"> <main class="green">main</main> <aside class="w150 left orange">aside</aside> <aside class="w150 right orange"...转载 2021-04-19 15:44:25 · 159 阅读 · 0 评论 -
最近学习flex布局的小收获
<template> <div class="group-main"> <div class="box-left"> <div class="box-left-top"> 1 </el-card> </div> <div class="box-left-bottom"> 2 </div> <.原创 2021-04-13 19:59:28 · 99 阅读 · 0 评论 -
rem和em的区别
em和rem的主要区别是:浏览器根据谁来转化成px。当使用rem的时候,他们转化为像素的大小取决于页根元素的字体大小,即html元素的字体大小。例如:根元素的字体大小为16px,10rem将等于160px,即10*16=160。当使用em的时候,em转为像素的大小取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。例如,父级元素字体大小为13px,10em将等同于130px,即13x10 = 130px...原创 2021-02-26 09:45:03 · 3852 阅读 · 0 评论 -
flex布局中flex:1和flex:auto的区别
在flex:1 时在尺寸不足时会优先最小化尺寸,flex:auto在尺寸不足时优先最大化内容尺寸。效果如下所示:flex:1 的尺寸是较长的尺寸优先牺牲自己的尺寸,而flex:auto 中是较长的尺寸优先扩展自己的尺寸。所以,flex:1 更适合在等比例列表时使用,flex:auto适用于元素充分利用剩余空间,比如头部导航文字多少不一致时使用...原创 2021-02-26 09:44:12 · 9765 阅读 · 0 评论 -
层叠上下文
什么是层叠上下文?层叠上下文即元素的z轴,层级越高越接近阅读者什么是层叠水平?决定同一层叠上下文中元素在z轴的显示顺序。普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。需要注意的是,诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错,某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的孩子元素;而层叠水平所有的元素都存在。什么是层叠顺序?表示元素发生层叠时有着特定的垂直显示顺序,,注原创 2021-02-26 09:43:34 · 935 阅读 · 0 评论 -
双飞翼/圣杯布局
双飞翼/圣杯布局通常来说就是左右两栏固定宽度,中间部分自适应的三栏布局。圣杯布局首先把left、middle、right都放出来 给它们三个设置上float: left, 脱离文档流; 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档 left、right设置上各自的宽度 middle设置width: 100%;接下来比较重要了:给left、middle、right设置position: relative; left设置 left: -转载 2021-02-25 15:12:29 · 126 阅读 · 0 评论 -
flex
主要概念:使用flex布局的时候,首先要注意两根轴线-主轴和交叉轴。主轴由flex-direction定义,另一个垂直于主轴为交叉轴。主轴:flex-direction:row/row-reverse/column/column-reserve;如果flex-direction选择了row/row-reverse,主轴就会沿水平方向延伸。如果flex-direction选择了column/column-reserve,主轴就会沿垂直方向延伸。交叉轴:交叉轴垂直于主轴,所以如果原创 2021-02-25 14:45:01 · 228 阅读 · 0 评论 -
css3实现0.5px的细线
<div class="line"></div><style>.line{ position:relative;}.line:after{ content:""; position:absolute; left:0; top:0; wiath:100%; height:1px; background-color:#000000; -webkit-transform:scaleY(.5); transform:scaleY(.原创 2021-02-25 11:20:13 · 739 阅读 · 0 评论 -
纯css创建一个三角形
第一步:先写一个border应用:.box{ width:100px; height:100px; border:3px solid; border-color:#1b93fb #1bfb24 #efad48 #ef4848;}第二步:将border值增大,此时border渲染的不是正方形而是梯形.box{ width:100px; height:100px; border:50px solid; border-color:#1b93fb #1bfb24 #原创 2021-02-25 11:14:29 · 274 阅读 · 0 评论 -
div居中
水平居中:行内元素:text-align:center;已知定宽元素:margin:0 auto;使用absolute+transform:{ position:absolute; top:50%; transform:translateX(-50%);}未知宽高:使用display+justify-content{ display:flex; justify-content:center;}垂直居中:行内元素:line-height:height;原创 2021-02-25 11:10:45 · 64 阅读 · 0 评论 -
css清除浮动的方法以及优缺点
1.创建父级BFC可以防止父级高度塌陷(代码少简单,但是不能配合position使用,因为超出尺寸会被隐藏)<divclass="divcss5"><divclass="divcss5-left">left浮动</div><divclass="divcss5-right">right浮动</div></div>.divcss5{ width:400px; border:1pxsolid#...原创 2021-02-25 11:06:17 · 123 阅读 · 0 评论 -
css优先级
常见的选择器权重优先级:!important>行内样式>id>class>tag>*>继承>默认;!important可以提升样式优先级,但不建议使用。如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如:background: blue !important;如果两条样式都使用!important,则权重值高的优先级更高在css样式表中,同一个CSS样式你写了两次,后面的会覆盖前原创 2021-02-25 09:33:55 · 1370 阅读 · 0 评论 -
BFC
BFC定义:块级格式化上下文,是一个独立的渲染区域,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会互相影响。IE下为layout,可用过zoom:1触发在平常的css编写过程中,zoom;1能够比较神奇的解决ie下比较奇葩的bug。譬如:外边距(margin的重叠)、清除浮动、触发ie的haslayout属性等。.clearfix{zoom:1};/*触发haslayout*/BFC原理:BFC内部的盒子,会在垂直方向,一个接一个的放置,垂直方向上也会发生边距原创 2021-02-24 21:54:26 · 92 阅读 · 0 评论 -
css盒模型
css有两种盒模型:w3c标准盒模型、IE盒模型在W3C标准盒模型中内容大小指的是content的内容大小;在IE盒模型中内容大小指的是content+padding+border内容的大小如何设置两种盒模型:box-sizing:content-box;(w3c标准盒模型)box-sizing:border-box;(IE盒模型)...原创 2021-02-24 21:37:30 · 66 阅读 · 0 评论