css
love-study-lele
和我一起学前端吧
展开
-
display: inline-block 什么时候不会显示间隙
移除空格 使用margin负值 使用font-size:0 letter-spacing word-spacing原创 2021-01-05 20:23:09 · 541 阅读 · 0 评论 -
垂直居中
如果是单行文本,父元素的line-height和height设置成同一个值 使用flex布局,设置为align-item:center 绝对定位中设置bottom:0,top:0,并设置margin:auto 绝对定位中固定高度时设置top:50%,margin-top值为高度一半的负值...原创 2021-01-04 20:29:01 · 61 阅读 · 0 评论 -
水平居中的方法
如果是行内元素,设置父元素text-align:center 如果是块元素,如果宽度固定,可以设置margin: 0 auto 适合一个块元素居中 如果是多个块元素,父元素text-align:center font-size:0 子元素:display:inline-block 添加font-size 绝对定位和移动:absolute + transform 使用flex-box布局,指定justify-content属性为center...原创 2021-01-04 19:45:16 · 109 阅读 · 0 评论 -
总结了一些实用的css方法欢迎关注star
https://github.com/lelele6666/css-原创 2019-09-11 17:26:19 · 111 阅读 · 0 评论 -
css的div绘制各种图形值得收藏
https://css-tricks.com/the-shapes-of-css/转载 2019-09-11 16:10:23 · 1161 阅读 · 1 评论 -
BFC
什么是BFC所谓的BFC就是css布局的一个概念,是一块区域,是一个环境。关于BFC的定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与(在下面有解释), 它规定了内部的 Block-level Box 如何布局,并且与这个区域外部毫不相干。通俗的说BFC 可以简单的理解为某个元素的一个...原创 2019-05-07 20:24:50 · 129 阅读 · 0 评论 -
清除浮动
清除浮动的3种方法 1. 第一种解决方法 给父元素设置高度2. .clearfix::after { visibility: hidden; clear: both; display: block; content: "."; height: 0; }3.添加空元素,并且指定clear:both原创 2017-10-16 18:17:30 · 118 阅读 · 0 评论 -
position
position定位:通过对元素进行相对偏移或绝对偏移,来对元素位置进行摆放relative:相对于自己原来的位置进行偏移,属于标准流;absolute:只要祖先元素中有任何一个设置过relative,position其中的一个值该元素绝对定位时,相对于最近设置过定位的元素,属于非标准流 fixed,脱离标准流,不占页面位置子绝父相父元素不要移动位置,r原创 2017-10-16 16:42:40 · 191 阅读 · 0 评论 -
display
display display:用于改变行元素,块元素的特点 行元素:默认display的值为 inline,普通行元素是不可以设置宽高的,设置无效。 input, img属于行元素的个例,可以设置宽高。 如果需要对行元素设置宽高,可以把display:inline-block 或者 block; 块元素:默认display的值为原创 2017-10-16 16:24:24 · 3095 阅读 · 1 评论 -
overflow
overflow 的3个重要属性 1.超出隐藏:hidden; 2.scroll 3.auto 根据内容判断是否有滚动条原创 2017-10-16 16:17:52 · 288 阅读 · 0 评论 -
padding实现居中
* { margin: 0; padding: 0; } .f { width: 650px; height: 400px; background: yellow; /* 如何保持盒子整体大小不变,那么增加padding时,width,height对应减小 */ padd原创 2017-10-16 16:04:08 · 14378 阅读 · 0 评论 -
flex+margin实现居中
*{ padding:0; margin:0; } .f{ width:500px; height:500px; background:red; displa原创 2017-10-16 15:20:39 · 833 阅读 · 0 评论 -
translate+position实现居中
*{ padding:0; margin:0; } .f{ width:500px; height:300px; background:red; margin原创 2017-10-16 11:51:54 · 572 阅读 · 0 评论 -
position实现居中
*{ padding:0; margin:0; } .f{ width:500px; height:500px; background:red; positi原创 2017-10-16 11:50:20 · 403 阅读 · 0 评论 -
input上传文件的样式修改
* { margin: 0; padding: 0; } .upload { display: inline-block; width: 120px; height: 60px; line-height: 60px; background: #009ad6;原创 2017-10-22 10:48:09 · 2904 阅读 · 0 评论 -
z-index
z-indexz-index一定要和除了static之外的定位一起使用,否则将会没有用,如果父元素设置过z-index那么子元素与父元素的z-index是一样的!!! *{ padding:0; margin:0; } ul li{原创 2017-10-17 19:50:41 · 555 阅读 · 0 评论 -
伪类before和after
伪类before和after .one { font-size: 50px; color: red; } .one::before { /*content必须填写,有没有值无所谓*/ content: ""; color: green; } .one::after原创 2017-10-17 19:06:41 · 218 阅读 · 0 评论