zoukankan      html  css  js  c++  java
  • css揭秘读书笔记

    currentColor属性让hr和段落相同的颜色:

    div {
    color: red;
    }
    hr {
    background: currentColor;
    /* 一定要设置高度*/
    height: 0.1rem;
    }
    <div>
    <p><hr>p里面的hr标签不变色<hr></p>
    <hr>
    </div>

    background-origin:padding-box是背景图片的默认原点,background-position:right 10px bottom 10px;可以让图片偏移,如果不支持这个属性,可以这样background:url() no-repeat right bottom;

    记忆border-image类似background,第一个属性是颜色可以是渐变,第二个是图像地址,第三个是切割位置 第四个是平铺方式 (默认stretch拉伸。repeat,round比较常用)

    想把一个矩形盒子变成椭圆,只需要设置border-radius:50%;如果是一个正方形就会变成圆

    关于border-radius圆角半角的详细理解:border-radius:50% / 100% 100% 0 0;就相当于border-radius:50% 50% 50% 50% / 100% 100% 0 0;左边是半径r1相当于x坐标,右边半径r2相当于y坐标,两个坐标确定一个圆心点,以这个点画出的圆角可能是四分之一圆(当r1,r2相等时),可能是四分之一的椭圆(r2是r1的二倍时),总结一下就是两点确定圆角区域,理解的时候可以想象把一个盒子放到了x坐标上。

    快速记忆半圆角规则:11确定单角,51确定二上,15确定二右

    图片应用半透明遮罩层:

    <div class="layer">
    <a href="#"><img src="demo.jpg"></a>
    </div>
    <style type="text/css">
    .layer {
    background-color:#000;
    }
    a {
    transtion:opacity .5s;
    }
    a:hover {
    opacity: .5;
    }
    </style>

    为某个字符指定特殊的字体样式:

    @font-face {
    font-family: Ampersand;
    src: local('Baskerville-Italic'),
    local('GoudyOldStyleT-Italic'),
    local('Garamond-Italic'),
    local('Palatino-Italic');
    <!-- 指定使用字体的Unicode码位,可以是区间 -->
    unicode-range: U+26;
    }
    h1 {
    font-family: Ampersand, Helvetica, sans-serif;
    }
    <!-- 标题中的&符号会应用Ampersand字体,其他文字会应用Helvetica字体 -->
    <h1>html &amp; css</h1>

    浮动元素的水平居中:

    .box {
    float: left;
    position: relative;
    left: 50%;
    }
    .box p {
    float: right;
    position: relative;
    right: 50%;
    }
    <div class="box">
    <p>我是浮动的</p>
    <p>浮动居中</p>
    </div>

    高级选择器的组合使用:
    这个选择器选中li为n的所有列表项
    li:first-child:nth-last-child(n),
    li:first-child:nth-last-child(n)~li{}
    这个选择器选中li大于4的所有列表项
    li:first-child:nth-last-child(n+4),
    li:first-child:nth-last-child(n+4)~li{}
    这个选择器选中li最大为4的所有列表项
    li:first-child:nth-last-child(-n+4),
    li:first-child:nth-last-child(-n+4)~li{}
    这个选择器选中li为2到6个的所有列表项
    li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
    li:first-child:nth-last-child(n+2):nth-last-child(-n+6)~li{}

    页脚固定到底部的解决方案

    <header>这是头部</header>
    <main>这是主要区域</main>
    <footer>这是页脚</footer>
    <style type="text/css">
    mian{
    min-height:calc(100vh - hh-fh);
    box-sizing:border-box;
    }
    <!-- 另外一种完美的方法 -->
    body{
    display:flex;
    min-height:100vh;
    flex-flow:column;
    }
    main {
    flex:1;
    }
    </style>

    头部和页脚宽屏布局:

    <footer>这是内容区域</footer>
    <style type="text/css">
    footer {
    padding:20px;<!--回退机制-->
    960px;
    padding:20px clac(50% - 960px);
    background:#ccc;
    }
    </style>

  • 相关阅读:
    Hihocoder 1275 扫地机器人 计算几何
    CodeForces 771C Bear and Tree Jumps 树形DP
    CodeForces 778D Parquet Re-laying 构造
    CodeForces 785E Anton and Permutation 分块
    CodeForces 785D Anton and School
    CodeForces 785C Anton and Fairy Tale 二分
    Hexo Next 接入 google AdSense 广告
    如何统计 Hexo 网站的访问地区和IP
    Design and Implementation of Global Path Planning System for Unmanned Surface Vehicle among Multiple Task Points
    通过ODBC接口访问人大金仓数据库
  • 原文地址:https://www.cnblogs.com/yesyes/p/6664535.html
Copyright © 2011-2022 走看看