css
Mozzie晓风残月
i am code
展开
-
flex弹性盒模型及flex-grow与flex-shrink的计算
一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */原创 2020-07-07 21:17:00 · 336 阅读 · 0 评论 -
伪类元素的使用
<dl class="hot-search"> <dt class="hot-search-menu"> <span>热门搜索</span> </dt> <dd class="hot">opencv</dd> <dd class="hot">eclipse<...原创 2020-04-13 20:08:28 · 233 阅读 · 0 评论 -
移动web端-rem布局
该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置),此方案仅适用于移动端web <script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,load...转载 2019-10-16 10:22:26 · 124 阅读 · 0 评论 -
图片上下排列3px间隔的消除方法
消除方法: 1、给居上的img图片添加样式 vertical-align:top; 2、给居上的img图片添加样式 第二种:display:block;将其转为块级元素 3、设置font-size:0;原创 2019-02-21 10:55:32 · 440 阅读 · 0 评论 -
ie6双倍边距
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline {float:left;margin-left:10px;width:300px;height:200px;border:1px solid red;display:inline}原创 2019-02-21 11:08:45 · 156 阅读 · 0 评论 -
css中margin边界叠加问题及解决方案
当两个垂直边界相遇时,它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。 1、水平边距永远不会重合。 2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下: a、全部都为正值,取最大者; b、不全是正值,则都取绝对值,然后用正值减去最大值; c、没有正值,则都取绝对值,然后用0减去最大值。 解决办法: 1.外...原创 2019-02-21 11:35:03 · 757 阅读 · 0 评论 -
css水平居中
一 水平居中 1 行内元素 行内元素只需要在父元素设置水平居中 .container{ text-align:center; } 2 块级元素 .center{ margin: 0 auto; } 3 多个块级元素水平居中 <div class="container"> <div class="item"></div> <...原创 2019-02-21 12:05:30 · 258 阅读 · 0 评论 -
js自定义radio和checkbox的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-08-11 09:50:09 · 785 阅读 · 0 评论