css
依旧平凡
这个作者很懒,什么都没留下…
展开
-
css实现按钮点击效果
在html中设置class:<button class="button1">click</button>css中如下所示:.button1{ position: relative; /** 相对布局 **/}.button1:active{ top: 2px; /**向下偏移2px **/}...转载 2018-07-23 13:50:39 · 17599 阅读 · 0 评论 -
html最通用的清除浮动的方法
. clearfix { *zoom: 1;}.clearfix: after { content: ' '; display: table; clear: both; }原创 2019-06-26 13:54:16 · 192 阅读 · 0 评论 -
两栏自适应布局的通用写法
.cell { display: table-cell; width: 2000px; // IE8 + BFC特性 *display: inline-block; *width: auto; // IE7- 伪BFC特性}原创 2019-06-26 14:12:02 · 214 阅读 · 0 评论 -
页面布局的几种方式
/*一列布局*/<div class="top"></div><div class="main"></div><div class="footer"></div><style>*{margin: 0; padding: 0;} .top {height:100px;background:...原创 2019-06-24 11:30:19 · 356 阅读 · 0 评论 -
页面回到顶部效果
//方法一: 用锚链接。//方法二: js方法。// 回到顶部的按钮初始化时 css设置为 display: none. 隐藏按钮。window.onload = function() { var obtn = document.getElementById('btn'); //获取到页面可视区域的高度。 var clientHeight = documen...原创 2019-06-24 14:13:17 · 300 阅读 · 0 评论 -
ul 中 li 内容垂直居中和水平居中的方法
1、li内容垂直居中flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下:HTML部分: 1 2 ...转载 2019-08-09 11:10:37 · 20902 阅读 · 1 评论 -
深入理解 margin
1. margin可以改变容器尺寸。2. margin与百分比单位。(普通元素的百分比margin都是相对于父级的宽度计算的, 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算的。)例子: 宽高2:1自适应矩形.box { background-color: olive; overflow: hid...原创 2019-06-25 17:29:37 · 369 阅读 · 0 评论 -
position定位属性
1. relativediv {width: 100px;height: 100px;background: blue; position : relative;left: 50px;top: 50px;right: 70px;bottom: 70px;}// 设置了相对定位,设置了 left, top 的话 ,元素相对与网页的最左最上为原点,向右为...原创 2019-06-25 11:33:07 · 162 阅读 · 0 评论 -
vertical-align垂直居中( 消除html中图片下边缘留白 )
一、vertical-align支持4大类:1.线类: baseline(默认值), top, middle, bottom2.文本类:text-top, text-bottom3.上标下标类:sub, super4. 数值百分比类: 20px, 2em, 20%......./*********************************************...原创 2019-06-21 16:29:07 · 610 阅读 · 0 评论 -
深入 padding ( button按钮在各个浏览器中的兼容性问题与padding实现两栏自适应布局 )
div { padding: 50%; } 可以实现一个正方形(padding是根据宽度计算的。)字体通常是 12px---16px的话, padding-left: 22---25px ,是可以的。1. IE浏览器中 button表单按钮 paddingIE浏览器,button按钮文字越多,左右padding逐渐变大。解决方法: button { overflow: v...原创 2019-06-25 14:58:10 · 873 阅读 · 0 评论