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;
}
<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
