css-总结

最新推荐文章于 2024-02-20 17:28:00 发布

嵌入式园姐

最新推荐文章于 2024-02-20 17:28:00 发布

阅读量329

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/amyliyanice/article/details/54926410

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

##处理图片缩放的方法

img { width: auto; max-width: 100%; vertical-align:bottom;}
//vertical-align:bottom;  解决图片元素底部一像素空白问题
或者
<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">
CSS控制：
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

来源：http://caibaojian.com/356.html

##font-family的设置

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

##移动端的meta设置
*如果不设置可能导致rem后的元素非常大

<meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width" name="viewport">

##背景全屏
使用background-size：100%时，可能背景图片与上面的元素有一定的间距，消除间距的办法是 background-size：100% 100%；
##字体溢出
p元素和h3元素如果只设置height和font-size相同，则字体会溢出，如果想让文字顶部对其显示，直接设置line-height和font-size相同即可。

##替换图片的做法
修改logo图片时，可以修改新图片的名称替换原来的logo，也可以在css中使用新图片的名称来定义logo的路径，但是最好使用新图片名称定义路径，因为客户端可能存在图片缓存问题。

最好是不管css文件其他什么文件，你再代码里带上版本号。比如xxx.css?v=20170101这样子

##flexible.js
移动端使用flexible.js来进行各平台的适配，美工给的图片时750px的，因此在iphone6平台下测试，iphone6 使用flexible.js，html的默认font-size为37.5px,

##多行文字溢出时省略样式
一行使用

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

多行使用

 overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

表格内td多出的部分显示省略号

在table元素上加
style="table-layout:fixed;"

然后设置td:
style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"

##移动端去除滑动条

html{
	overflow:hidden;
}

body{
	overflow:auto;
}

##通过js改变背景后，让背景有个渐变的过程

transition: background 1.5s linear;

##STYLE元素的scoped属性局部CSS选择器
取自：https://www.web-tinker.com/article/20568.html

一直以来，文档上的STYLE元素通常都是作用域全局的，选择器按照全局的CSS优先规则来设置的。要实现局部的选择需要先选到容器元素，再用后代选择器来实现。scoped属性可以让STYLE元素不再作用于全局，而从当前STYLE元素所在的容器开始选择后代。

<div>
  <style scoped>
    span {color:red;}
  </style>
  <span>我是第1个DIV内的SPAN</span>
</div>
<div>
  <style scoped>
    span {color:green;}
  </style>
  <span>我是第2个DIV内的SPAN</span>
</div>
<div>
  <span>我是第3个DIV内的SPAN</span>
</div>

这里写图片描述

##手机端select去除边框

select{
	 -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none;
    background:none;
    background:url(/index/images/arrow-down-icon.png) center right no-repeat;
    outline: none;
    border-color:transparent;
    padding-right:15px;//苹果手机要添加这个边距没不然三角箭头不会出现}
    
//ie下去除三角箭头
select::-ms-expand {
    display: none;}

##去除手机端input高亮边框

input,input:focus, input:hover, input:active {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only;
    outline:0;}

##子元素margin-top，影响父元素

解决办法：

1. 父级或子元素使用浮动或者绝对定位absolute

浮动或绝对定位不参与margin的折叠

2. 父级overflow:hidden;

3. 父级设置padding（破坏非空白的折叠条件）

4. 父级设置border

##使用png图片作为网站icon

<link rel="icon" href="https://www.qifeiye.com/qfy-content/uploads/2015/02/0fc92860801c7d70b470ebd24aec4634.png" type="image/png"/>

判断是手机端还是电脑端，做跳转

(function browserRedirect(){
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
            var bIsIphone = sUserAgent.match(/iphone os/i) == 'iphone os';
            var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
            var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
            var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
            var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
            var bIsAndroid = sUserAgent.match(/android/i) == 'android';

            if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
                window.location=getUrlPath()+"/h5special/index.html";
            }
        })();

fixed元素在非body内，设置width：100%，会将body撑大17px

因为模板的原因，只能在div元素内写fixed元素，设置了width:100%,然后不想让下面的元素滚动，设置了body{overflow:hidden;},之前body是{overflow-y:auto;}的，因为页面会超出一屏，但是会发现当fixed元素出现时，页面body的宽度变大了17px,元素整体向右平移了一定的距离

原因：滚动条的宽度没有计算在内，也就是当body{overflow:auto;}的时候是有滚动条的，$(window).width()是不讲滚动条计算在内的，但是当将body设置为{overflow:hidden;}的时候滚动条没有了，滚动条的17px宽度变成了body宽度的一部分，所以body的宽度就增加了，我们也就看到了body变大了。

window.innerWidth - document.body.clientWidth //火狐下17px IE11下17px