美文网首页
css 实战快速开发杂记

css 实战快速开发杂记

作者: squidbrother | 来源:发表于2020-08-18 11:06 被阅读0次

    1. 页面不被点击
      pointer-events
      属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target

    2. 使元素看起来像什么，如：表单元素变化为普通元素
      appearance

    3. 隐藏滚动条
      ::-webkit-scrollbar { display: none; }
      *::-webkit-scrollbar { display: none; }

    4. 比例与固定值的样式风格
      如：宽度 为100%减去95像素
      width: calc(100% - 95px);

    5. 改变外观

    div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}

    浏览器支持
    所有主流浏览器都不支持 appearance 属性。
    Firefox 支持替代的 -moz-appearance 属性。
    Safari 和 Chrome 支持替代的 -webkit-appearance 属性

    1. 图片CSS3裁切方式 object-fit
      object-fit的可能值有：fill, contain, cover, none, scale-down
    img { object-fit:cover; object-position:50% 50%; }

    <picture>
    <source srcset="large.jpg" media="(min-width: 800px)" />
    <source srcset="medium.jpg" media="(min-width: 500px)" />
    <img src="small.jpg" />
</picture>
    1. 横向布局
      描边嵌套拼接，且支持外边距溢出，支持折行，兼容 IE+
      代码：
    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>列表</title>
        <style type="text/css">
            html,body{font:Microsoft YaHei,"微软雅黑",Arial,Helvetica,sans-serif 12px/1.5em}
            body,ul,li,p{margin:0;padding:0}
            li{list-style:none}
            a{text-decoration:none}
            #warp{width:960px;padding:0 10px 10px;background:#f1f1f1;margin:10px auto 0}
            #warp .list1{width:100%;overflow:hidden}
            #warp .list1 ul{width:980px;overflow:hidden}
            #warp .list1 li{float:left;width:231px;margin:10px 10px 0 0;border-width:1px 0 0 1px;border-style:solid;border-color:#ccc}
            #warp .list1 li .box {border-width:0 1px 1px 0;border-style:solid;border-color:#ccc;min-height:200px;padding:70px
            0;background:#FFF;font-size:20px;color:#333;text-align:center}
            .p1{text-align:center;margin-top:10px}
        </style>
    </head>
    <body><div id="warp"><!--list1--><div class="list1"><ul><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li></ul></div></div><p class="p1">下一个模块</p></body>
</html>
    1. flex兼容布局
      flexBox -- flexBox，flexXC -- 横向居中，flexYC -- 垂直居中，flex_between -- 两侧抵近平铺，flex_wrap -- 折行
    .flexBox { display:-webkit-flex; display:-moz-flex;  display:-ms-flexbox; display:-webkit-box;  display:-moz-box; display:flex;  }
.flexXC { -webkit-box-pack:center; -ms-flex-pack:center;
-webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; -o-justify-content:center; justify-content:center;}
.flexYC { -webkit-box-align:center; -ms-flex-align:center;
-webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; -o-align-items:center; align-items:center;
}
.flex_between {-webkit-box-pack:justify; -ms-flex-pack:justify;
-webkit-justify-content:space-between;  -moz-justify-content:space-between; -ms-justify-content:space-between; -o-justify-content:space-between;  justify-content:space-between;}
.flex_wrap { -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; -o-flex-wrap:wrap; flex-wrap:wrap;}

    8-1. flex布局

    display:-webkit-flex; display:-moz-flex;  display:-ms-flexbox; display:-webkit-box;  display:-moz-box; display:flex;

    8-2. 水平居中、垂直居中

    -webkit-box-pack:center; -ms-flex-pack:center;
-webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; -o-justify-content:center; justify-content:center;

-webkit-box-align:center; -ms-flex-align:center;
-webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; -o-align-items:center; align-items:center;

    8-3. 两侧均分排版

    -webkit-box-pack:justify; -ms-flex-pack:justify;
-webkit-justify-content:space-between;  -moz-justify-content:space-between; -ms-justify-content:space-between; -o-justify-content:space-between;  justify-content:space-between;

    8-4. 两侧均分排版 (均分间距)

    -webkit-justify-content: space-around;  -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around;  justify-content: space-around;
    1. 颜色渐变
    background-image: -webkit-linear-gradient(to right, #5597f5, #5580e9);
background-image: -moz-linear-gradient(to right, #5597f5, #5580e9);
background-image: -ms-linear-gradient(to right, #5597f5, #5580e9);
background-image: -o-linear-gradient(to right, #5597f5, #5580e9);
background-image: linear-gradient(to right, #5597f5, #5580e9);
background-image: -webkit-gradient(linear,left,right,from(#5597f5),to(#5580e9));
background-color: #5597f5;
    1. 清明节 网站CSS
      如果网站不生效，可以使用标准协议:
      XHTML 1.0 Transitional
      该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。
      不允许框架集（Framesets）。
      必须以格式正确的 XML 来编写标记。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    或者使用HTML5协议

    <!DOCTYPE html>
    • css
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:gray
    1. css3 半弧，1/4圆弧
      css
    div { margin:10px;}
/*开口_半个圆弧*/
.box1 { display:block; width:100%; overflow:hidden;}
.box1 .floatL { float:left;}

.halfCircleBase { border:10px solid #F60; }
    /*左*/
.halfCircle_left { width:100px; height:200px; border-radius:100% 0 0 100%/50%; border-right:none; }
.halfCircle_left_close {  width:100px; height:200px; border-radius:100% 0 0 100%/50%; }
    /*右*/
.halfCircle_right { width:100px; height:200px; border-radius:0 100% 100% 0/50%; border-left:none; }
.halfCircle_right_close {  width:100px; height:200px; border-radius:0 100% 100% 0/50%; }
    /*上*/
.halfCircle_top { width:200px; height:100px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom:none; }
.halfCircle_top_close { width:200px; height:100px; border-radius: 50% 50% 0 0/100% 100% 0 0; }
    /*下*/
.halfCircle_btm { width:200px; height:100px; border-radius:0 0 50% 50%/0 0 100% 100%; border-top:none; }
.halfCircle_btm_close { width:200px; height:100px; border-radius:0 0 50% 50%/0 0 100% 100%; }

/*四分之一圆弧*/
.circleBase { width:100px; height:100px; background:#F60; }
.circleBase:after { display:block;  width:100%; height:100%; content:''; background-color:#FFF; }
    /*左上*/
.circleBase_lt { padding:10px 0 0 10px; border-radius:100% 0 0 0; }
.circleBase_lt:after {  border-radius:100% 0 0 0; }
    /*右上*/
.circleBase_rt { padding:10px 10px 0 0; border-radius:0 100% 0 0; }
.circleBase_rt:after {  border-radius:0 100% 0 0; }
    /*右下*/
.circleBase_rb { padding:0 10px 10px 0; border-radius:0 0 100% 0; }
.circleBase_rb:after {  border-radius:0 0 100% 0; }
    /*左下*/
.circleBase_lb { padding:0 0 10px 10px; border-radius:0 0 0 100%; }
.circleBase_lb:after {  border-radius:0 0 0 100%; }

    html

    <div class="box1">
    <div class="floatL halfCircleBase halfCircle_left"></div>
    <div class="floatL halfCircleBase halfCircle_left_close"></div>
    <div class="floatL halfCircleBase halfCircle_right"></div>
    <div class="floatL halfCircleBase halfCircle_right_close"></div>
    <div class="floatL halfCircleBase halfCircle_top"></div>
    <div class="floatL halfCircleBase halfCircle_top_close"></div>
    <div class="floatL halfCircleBase halfCircle_btm"></div>
    <div class="floatL halfCircleBase halfCircle_btm_close"></div>
</div>
<div class="box1">
    <div class="floatL circleBase circleBase_lt"></div>
    <div class="floatL circleBase circleBase_rt"></div>
    <div class="floatL circleBase circleBase_rb"></div>
    <div class="floatL circleBase circleBase_lb"></div>
</div>

    效果图


    圆角

    .... 占坑

    相关文章

      网友评论

          本文标题：css 实战快速开发杂记

          本文链接：https://www.haomeiwen.com/subject/ioapcktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|css 实战快速开发杂记|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！