css 知识拾遗

css 清除浮动
在同一个父元素内一个元素是浮动一个不是浮动，此时不会出现内容覆盖哦，而是出现未浮动元素适配浮动元素的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            float: left;
            clear: right;
        }
  
   
    </style>
</head>
<body>
    <div class="div--clear">
        <div class="div1">div111111111111111</div>
        <div class="div2">div2</div>
       
    </div>


</body>
</html>

为了减少这种浮动对我们的文档流的影响

为了是保证防止父元素的塌陷问题。---浮动元素的父元素的高度为0.
css clear 属性有两种方式：
- 单独创建一个块级元素增加clear属性不推荐。
- 使用after元素但是需要考虑在不同的浏览器的兼容问题。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            float: left;
            clear: right;
        }
        .div2 {
            clear: both;
        }
   
    </style>
</head>
<body>
    <div class="div--clear">
        <div class="div1">div111111111111111</div>
        <div class="div1">div111111111111111</div>
        <div class="div2">div2</div>
       
    </div>


</body>

父级元素高度撑开

第二方式（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            float: left;
            clear: right;
        }
        .div--clear::after {
            content: '';
             display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        /* 兼容IE6 和7 */
        .div--clear{
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="div--clear">
        <div class="div1">div111111111111111</div>
        <div class="div1">div111111111111111</div>
    </div>
    <div class="div2">div2</div>

</body>
</html>

二、选择器

相邻选择器：+ 表示h1元素相邻的p元素，必须处于同一个父元素

 body > .content h1+p {
            font-weight: 700;
         } 
<div class="content">
        <h1>欢迎来北京</h1>
        <p>来北京玩吧 ，很好玩</p>
        <p>adadadadadadda</p>
    </div>

属性选择器： [ 属性值] css3 可以使用通配符进行属性选择

 [title] {
             color: red;
         }
         [title="baidu"] {
             color: aqua;
         }
         [title][href^="https"] { //^表示以什么开头
             color: brown;
         }
         [title="谷歌"][href$="/"] { //$表示以什么结尾。
             color: chartreuse;
         }

[href*='com'] { //表示所有href包含子串com

rgb(255, 220, 239);

}

<div class="content">
        <h1 title="welcome">欢迎来北京</h1>
        <p>来北京玩吧 ，很好玩</p>
        <p>adadadadadadda</p>
        <a  title="baidu" >前往百度</a>
        <a   href="https://www.baidu.com" >前往百度</a>
        <a  title="谷歌"  href="https://www.google.cn/" >前往谷歌</a>
    </div>

三、对于字体的使用

我们在定义字体的时候，最后会加上一个“sans-serif”，这个属于通用字体，使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。所以sans-serif作为通用字体，以保证浏览器显示出来我们的内容。

四、字体IE 和其他浏览器兼容问题

@font-face

浏览器支持

Firefox、Chrome、Safari 以及du Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型zhi的字体。dao

Internet Explorer 9+ 支持新的 @font-face 规则，但zhuan是仅支持 .eot 类型的字体 (Embedded OpenType)。

  @font-face {
            font-family: 'webfont';
            font-display: swap;
            src: url('./webfont_ao0vblp6lbr/webfont.eot'); /* IE9 */
            src: url('./webfont_ao0vblp6lbr/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('./webfont_ao0vblp6lbr/webfont.woff2') format('woff2'),
            url('./webfont_ao0vblp6lbr/webfont.woff') format('woff'), /* chrome、firefox */
            url('./webfont_ao0vblp6lbr/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('./webfont_ao0vblp6lbr/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }

　五、对于css 一些webkit浏览器支持的样式 -webkit-box-reflect 图片或者文件倒影效果，-webkit-text-stroke 字体描边效果，可以通过text-shadow来实现效果。

常见webkit内核的浏览器：

　　Google Chrome

　　Safari

　　遨游浏览器 3.x

　　搜狗浏览器

　　阿里云浏览器

　　QQ浏览器

　　360浏览器

详细的内核介绍：https://www.jianshu.com/p/f4bf35898719

posted @ 2021-02-07 18:02 evil_liu 阅读(103) 评论(0) 编辑收藏举报

刷新页面返回顶部

evil_liu

css 知识拾遗

公告