css基础--流、元素与基本尺寸二

css基础笔记

1、min-width/max-width和min-height/max-height权重超越Iimportant；超越最大
.container { min-width: 1400px; max-width: 1200px; } 最小宽度居然比最大宽度设置得还大，遵循“超越最大”规则（注意不是“后来居上”规则），min-width活下来，max-width被忽略，于是，.container元素表现为至少1400像素宽。
2、固有尺寸，html尺寸，css尺寸，替换元素
内容可以更改的都叫替换元素如img，更改src可更改内容，video,input等
以<img src="1.jpg" width="128" height="96">为例，当没有属性width时，图片显示宽高就是图片原本宽高即固有尺寸，假设是256192；当有width\height等属性就显示12896即html尺寸；如果在有img{width:200px;height:100px},则显示200*100即css尺寸。
假设img的css只设置了width属性200，但图片这种替换元素的资源本身具有特定的宽高比例，因此，height也会等比例计算。所以，最终图片所呈现的宽高就是200像素×150像素（150 = 200 ×192 / 256)。
如果上面的条件都不符合，则最终宽度表现为300像素，高度为150像素，宽高比2:1。例如：在所有现代浏览器下的尺寸表现都是300像素×150像素。
内联替换元素和块级替换元素使用上面同一套尺寸计算规则。例如：img { display: block; }<img src="1.jpg">虽然图片此时变成了块级，但是尺寸规则还是和内联状态下一致，因此，图片呈现的宽高还是256像素×192像素。 这也是为何图片以及其他表单类替换元素设置display:block宽度却没有100%容器的原因。
如果单看规则，似乎面面俱到，无懈可击。但是，实际上，意外还是发生了，这个意外就是最常用的元素。如果任何尺寸都没有，则元素应该是300像素×150像素，这条规则、和这些元素都符合，唯独图片例外。在chrome,ie，firefox浏览器下图片元素都显示宽高不一致。
Web开发的时候，为了提高加载性能以及节约带宽费用，首屏以下的图片就会通过滚屏加载的方式异步加载，然后，这个即将被异步加载的图片为了布局稳健、体验良好，往往会使用一张透明的图片占位。例如： 实际上，这个透明的占位图片也是多余的资源，我们直接： 然后配合下面的CSS可以实现一样的效果：img { visibility: hidden; } img[src] { visibility: visible; } 注意，这里的直接没有src属性，再强调一遍，是直接没有，不是src=""，src=""在很多浏览器下依然会有请求，而且请求的是当前页面数据。当图片的src属性缺省的时候，图片不会有任何请求，是最高效的实现方式
对于Firefox浏览器，src缺省的不是替换元素，而是一个普通的内联元素，所以使用的就不是替换元素的尺寸规则，而是类似的内联元素尺寸规则，宽高会无效。因此：img { width: 200px; height: 150px; } 在IE和Chrome浏览器下都按照预期图片尺寸200像素×150像素，但是，Firefox浏览器却纹丝不动，依然是默认图片尺寸，这就比较尴尬了，好在要修复此兼容性问题很简单，只需直接设置：img { display: inline-block; }
CSS世界中的替换元素的固有尺寸有一个很重要的特性，那就是“我们是无法改变这个替换元素内容的固有尺寸的”
div:before { content: url(1.jpg); display: block; width: 200px; height: 200px; } 此时::before伪元素呈现的图片的宽高是多少？很多人会按照经验认为是200像素×200像素，非也！实际上，这里的图片尺寸是1.jpg这张图片的原始尺寸大小256像素×192像素，width和height属性都被直接无视了。这就是我上面所说的，在CSS世界中，图片资源的固有尺寸是无法改变的！并不是CSS设定的200像素×200像素，200像素仅仅是设定了content box尺寸，对content生成图片资源并没有任何影响。我们再回到元素，既然图片的固定尺寸不受CSS宽高控制，那为何我们设定width？那是因为图片中的content替换内容默认的适配方式是填充（fill），也就是外部设定的尺寸多大，我就填满、跟着一样大。换句话说，尺寸变化的本质并不是改变固有尺寸，而是采用了填充作为适配HTML尺寸和CSS尺寸的方式，且在CSS3之前，此适配方式是不能修改的。在CSS3新世界中，和其他一些替换元素的替换内容的适配方式可以通过object-fit属性修改了。例如，元素的默认声明是object-fit:fill，如果我们设置object-fit:none，则我们图片的尺寸就完全不受控制，表现会和非替换元素::before生成的图片尺寸类似；如果我们设置object-fit:contain，则图片会以保持比例图片，尽可能利用HTML尺寸但又不会超出的方式显示，有些类似于background-size:contain的呈现原理
2.1观点1：替换元素和非替换元素之间只隔了一个src属性！由于我们平时使用图片肯定都会使用src属性，所以难免会思维定式，认为等同于图片，实际上完全不是的。如果我们把src属性去掉，其实就是一个和类似的普通的内联标签，也就是成了一个非替换元素
img { display: block; outline: 1px solid; } 按照替换元素的尺寸规则，宽度应该是0，但实际上，在Firefox浏览器下，最终的宽度是100%自适应父容器的可用宽度的。其表现和普通的类似，已经完全不是替换元素了。大家应该都知道，标签设置width和height是无效的，所以大家应该明白为何Firefox浏览器下设置width和height不起作用了吧
::before和：：after伪类在替换元素上有些限制
（1）不能有src属性（证明观点的关键所在）；
（2）不能使用content属性生成图片（针对Chrome）；
（3）需要有alt属性并有值（针对Chrome）；
（4）Firefox下::before伪元素的content值会被无视，::after无此问题，应该与Firefox自己占用了::before伪元素的content属性有关
此时，图片src没有，因此，::before和::after可以生效，我们就可以把alt属性值通过content属性呈现出来，核心CSS代码如下：

img::after {    
/* 生成alt信息 */   
 content: attr(alt);    
 /* 尺寸和定位 */    
 position: absolute; 
 bottom: 0;    
 width: 100%;    
 background-color: rgba(0,0,0,.5);    
 transform: translateY(100%);    
 /* 来点过渡动画效果 */    
 transition: transform .2s; } 
 img:hover::after {    /* alt信息显示 */    transform: translateY(0); }

下面是此技术最有意思的部分。当我们点击按钮给图片添加一个src地址时，图片从普通元素变成替换元素，原本都还支持的::before和::after此时全部无效，此时再hover图片，是不会有任何信息出现的。于是就非常巧妙地增强了图片还没加载时的信息展示体验。
2.2观点2：替换元素和非替换元素之间只隔了一个CSS content属性！
前面已经证明了，没有src属性的是非替换元素，但是，如果我们此时使用content属性给它生成一张图片呢？img { content: url(1.jpg); } 结果和下面HTML的视觉效果一模一样： 眼见为实，。结果图片都正常显示了，且各种表现都符合替换元素，如尺寸规则，或者不支持::before/ ::after伪元素等。另外还有一点很有意思，如果图片原来是有src地址的，我们也是可以使用content属性把图片内容给置换掉的，于是，我们就能轻松实现hover图片变成另外一张图片的效果。例如：

<img src="laugh.png"> 
 img:hover {    content: url(laugh-tear.png); } 

然后，还有一点有必要说明一下，content属性改变的仅仅是视觉呈现，当我们以右键或其他形式保存这张图片的时候，所保存的还是原来src对应的图片
使用content属性，我们还可以让普通标签元素变成替换元素。举个例子，官网的标志往往都会使用

标签，里面会有网站名称和标志图片使用背景图，类似下面的代码：

<h1>《CSS世界》</h1> h1 {    width: 180px;     height: 36px;    background: url(logo.png);    /* 隐藏文字 */    text-indent: -999px; } 

下面展示一个创新的方法，大家可以在移动端试试。还是一样的HTML代码，但是CSS代码微调了一下：

h1 {     content: url(logo.png); } 

传统CSS代码的

是一个普通元素，因此需要设定尺寸隐藏文字；但是，后面使用content属性实现，

分分钟就变成了替换元素，文字自动被替换，同时尺寸规则就是替换元素的尺寸规则，完美适应原始图片大小。此外，虽然视觉上文字被替换了，但是屏幕阅读设备阅读的还是文字内容，搜索引擎SEO抓取的还是原始的文本信息，因此，对页面的可访问性等没有任何影响。看起来这是一个完美的文字换图显示方案，但还是有一些局限。前文也说到了，替换元素的固有尺寸是无法设置的，如今在移动端retina屏幕几乎是标配，为了图片显示细腻，往往真实图片尺寸是显示图片尺寸的两倍。于是问题就来了，使用content生成图片，我们是无法设置图片的尺寸的，只能迫不得已使用一倍图，然后导致图片看上去有点儿模糊。所以，要想在移动端使用该技术，建议使用SVG矢量图片。