![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
H_x
这个作者很懒,什么都没留下…
展开
-
bem-css命名规范
语法 中划线-表示块,例如一个想把一个容器命名为x-box, 这就是块,即-用来连接有多个单词的块的名字 下划线_表示块的后代元素,例如x-box_header,x-box_center, x-box_button 双中划线--表示状态或者版本,例如成功,失败等,x-box_button--success, x-box_button--danger 实例 <form class="site-search site-search--full"> <input type="tex原创 2020-08-11 18:01:13 · 108 阅读 · 0 评论 -
flex属性:flex-grow/flex-basis/flex-shrink
flex属性:flex-grow/flex-basis/flex-shrink flex的“可伸缩”主要体现在flex-grow/flex-basis/flex-shrink这三个属性上 flex-basis 未应用flex-grow和flex-shrink之前,flexbox中的项的初始大小,默认取值是auto <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <原创 2020-05-17 21:37:12 · 218 阅读 · 0 评论 -
BFC的作用
0.BFC内部的特点 (1)上下两个盒子的margin折叠 (2)能够管理float元素(可计算float元素的宽高) (3)BFC内的元素不会对BFC外的元素定位造成影响 (4)盒子的左边紧挨着BFC的左边 1.右边自适应的两栏布局 使用BFC前: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> &l原创 2020-05-15 21:55:21 · 107 阅读 · 0 评论 -
div嵌套img时多出空白的原因及解决办法
div嵌套img时多出的空白的原因及解决办法 产生空白的原因 img标签的display属性默认是inline,而对应的vertical-align属性的默认值是baseline。所以就会出现图片底部出现一片空白区域的现象。关于vertical-align:baseline 解决办法 1、div{ font-size: 0} 2、img{ display: block} 3、img{ vertic...原创 2020-03-10 22:43:58 · 783 阅读 · 0 评论