![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
一身羊毛
天道酬勤
展开
-
css笔记三:float
1.float定义元素应沿其容器的左侧或右侧放置允许文本和内联元素环绕脱离文档流保持部分的流动性(与绝对定位相反)2.float的特点3.float常见使用布局4.float与其他的区别5.float的注意事项float和vertical-align共存时,vertical-align失效。是因为使用float后,元素从网页正常流动中移除,脱离文档流,触发BFC,元素的布局...转载 2019-05-20 15:25:51 · 175 阅读 · 0 评论 -
css笔记一: vertical-align规则
原文出处:https://www.cnblogs.com/shuiyi/p/5597187.html建议: 英文里面的图片要比上面链接中的全。1.vertical-algin是什么?本意是用来对齐内联级元素,后来发展成垂直对齐布局。2.什么情况下使用?对齐内联级元素。3.使用规则是什么?vertical-align和元素基线和行框有关。内联元素的基线是字符放置的位置线行...原创 2019-05-16 11:09:44 · 225 阅读 · 0 评论 -
css笔记二:position
position规定元素的定位类型:position: static | relative | absolute | fixed | sticky;static(没有定位)元素出现在正常的流中,top、bottom、right、left、z-index无效relative(相对定位)元素出现在正常流中。根据本身位置进行偏移。absolute(绝对定位)脱离文档流,相对最近的非stat...转载 2019-05-16 16:22:38 · 80 阅读 · 0 评论 -
transform:scale 和 minwidth的小技巧
前言文字缩小到一定地步就无法缩小,就是说fontsize无效,于是用scale。布局使用的flex,设置scale后不会导致重排,留了空白。用margin-right:-0.8rem;这样,会导致屏幕左右出现了滑动条。使用min-width:5rem;或者width:5rem;解决问题。但是还是不明白为什么min-width可以解决滑动条问题。留笔记于此。代码 disp...原创 2019-10-09 20:09:46 · 657 阅读 · 0 评论 -
align-items和align-content的区别
结论align-items: 对单行有效。align-content: 对多行有效。单行状态下:只有align-items有效。多行状态下,两者同时存在:只有align-content有效。多行状态下,两者存在一个:都生效。参数示例代码<!DOCTYPE html><html lang="en"><head> <meta cha...原创 2019-10-09 16:14:46 · 494 阅读 · 1 评论