![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
jiang_my
知其然,知其所以然~
展开
-
css hack-!important
今天开始,打算好好记录工作学习中的问题!important 在过去近两年的工作中很少用到,所有只保留在“听过”这个程度上首先 !important的优先权最高三种情况:第一种,测试Css中的!Important区别 .testClass{ color:blue !important;} 测试Css中的Important原创 2016-02-23 11:21:27 · 242 阅读 · 0 评论 -
css使用技巧相关
1)在css里面分别用样式控制h5{ font-size:18px;} h4{font-size:16px;} h3{font-size:14px;} h2{font-size:12px;} h1{font-size:25px;} 2)用Margin还是用Padding何时应当使用margin:需要在border外侧添加空白时。空白处不需要背景(色)时。上下...原创 2018-07-30 11:21:01 · 118 阅读 · 0 评论 -
css字体单位
了解:首先先了解四个字体单位:px em pt rempx:单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的,国内推荐;em:单位名称为相对长度单位。相对于当前对象内文本的字体尺寸,国外使用比较多;pt:全称为point,但中文不叫“点”,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。所以它是一个自然界标准的长度单位,也称为“绝对长度”。...原创 2018-07-30 11:02:56 · 749 阅读 · 0 评论 -
前端性能优化相关
前端优化1.减少http请求2.利用CDN技术 (服务器提供商的这项服务一把是要收费的)3.设置头文件过期或者静态缓存 (这项可以通过修改.htaccess文件来实现。)4.Gzip压缩5.把css放顶部6.把js放底部7.避免CSS Expressions8.将JS和CSS外链9.减少DNS查找10.减小JS和CSS的体积11.避免重定向1...原创 2018-07-30 11:01:18 · 118 阅读 · 0 评论 -
IE兼容问题
ie兼容问题1.块状元素浮动产生双倍bug问题(display:inline)2.最小高度 ie6下盒子的最低高度是20 小于20 overflow:hidden(见浏览器兼容最小高度)3.图片和背景半透明 (背景透明:filter:alpha(opacity=55);)4.img行内块元素下的留白(display:block)5.span换行问题 (1.交换位置 2.加左右浮...原创 2018-07-30 10:59:15 · 1065 阅读 · 0 评论 -
理解display:box 和 display:flex
参考学习:http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/ (box-flex属性和谐版 & 不和谐原创 2017-07-03 15:36:55 · 501 阅读 · 0 评论 -
学习其它网站的布局
三栏布局 第一种:.search-list .page-container>li .d .d-main{display:-webkit-box;margin-top:-1px;height:20px;overflow:hidden;}.search-list .page-container>li .d .d-main p{font-size:12px;overflow:hidd原创 2017-07-03 17:27:35 · 195 阅读 · 0 评论 -
div 中img 居中
原理:行内元素包裹在一个display为block的父级元素中,父级元素text-align:center即可实现行内元素居中div {text-align: center;}或者img.alignleft {display: inline;float: left;}img.alignright {display: inline;float: right;}img.aligncenter ...原创 2017-06-14 15:46:00 · 384 阅读 · 0 评论 -
pc和移动端默认样式重置
首先说一下,为何要用重置样式除了省心之外,还有两个好处1.方便设计师/程序员发挥白纸的感觉确实好。各种margin,padding,border的为0。。。2.便于发现前端代码的遗漏用了reset后,如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”,会非常扎眼(任何人都看得出来),开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没reset,浏览器会提...转载 2017-07-14 16:59:16 · 2904 阅读 · 0 评论 -
css 布局总结
先贴两篇文章:http://snailsky.me/2014/08/21/css%E5%B8%83%E5%B1%80%E6%80%BB%E7%BB%93%E4%B8%8E%E5%AE%9E%E8%B7%B5/http://zh.learnlayout.com/flexbox.html其中关于垂直居中的两种不同写法:第一种:.vertical-container {原创 2017-07-03 16:41:47 · 168 阅读 · 0 评论 -
两栏布局(左定宽&左不定宽)
第一种:左定宽,右自适应布局1.浮动布局<div id="left">Left sidebar</div><div id="content">Main Content</div>* { margin: 0; padding: 0; } #left { float: left; width: 200px; ...原创 2017-07-03 16:58:57 · 293 阅读 · 0 评论 -
垂直外边距合并问题
别被上面这个名词给吓倒了,简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3Shool CSS外边距合并了解这个基本知识。实际工作中,垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距,而且只在标准浏览器下(FirfFox、Chrome、Opera、Sa...原创 2018-07-30 11:36:34 · 783 阅读 · 0 评论