关于宽高大小的自适应、高度塌陷以及伪类选择器的解释~

关于宽高大小自适应

       今天的内容大纲解释了：宽度自适应的问题

                                            高度塌陷的问题

                                            兼容的问题

关于宽度自适应width

       -在页面的布局中如果是“块级元素”设置宽度为100%或者不设置的情况下，宽度默认自适应到整个屏幕，（达到通栏的效果）

       -块级子元素不设置宽度的时候，和父级等宽度

       -重点：如果当前元素脱离了文档流，元素的宽度由内容决定=>如果元素设置了浮动或者定位之后，一定要给元素添加宽高大小，不然就会造成高度塌陷的效果

关于高度自适应height

       -当元素不设置高度的时候，没有内容则在浏览器中不显示

       -当元素不设置高度或者设置为auto自动的时候，高度可以做到自适应（也就是随着内容的高度将会撑高元素，从而决定高度的）

       -子级元素自适应父级元素 height：100%

              -常见的用法：html，body{ height100% } 浏览器对象宽度设置为百分百 子级元素自适应到浏览器。

              -比如：img{width：100%；height：100%} 设置图片的高度宽度跟随父级元素的高度宽度而显示（但是img图片将会拉伸变形显示）

关于最小高度：min-height：

       -在当前元素没有设置高度的时候，设置一个最小的高度。可以保持一个最小的高度显示出来（在没有内容的时候也会显示设置的最小高度），在当前元素内容如果有内容的时候，元素的高度将会做到自适应。

       注：这个属性只能在高版本的浏览器使用，浏览器版本较低无法显示。

              -关于如何实现在低端版本中最小高度的使用？

                     -height属性在低版本浏览器中默认和最下高度的作用一样（默认为最小高度）

              -设置下划线过滤器_属性：属性值 即：_height:属性值(注：只能识别低版本的浏览器)

              -!important 拓展：关于最高的权重

属性:属性值 !important

权重的设置方式，演示（color：red ！important）设置这个最高权重之后，其他的选择器或者内、外部样式设置了其他属性，浏览器将会加载你设置这个的最高权重的这个属性的样式

关于最大最小宽度的拓展：

       最大宽度max-width 在工作中标准的设计图，宽度为1920px（一般的版心宽度为1200px）

       最小宽度min-width 设置最小宽度，当用户的浏览器过小、或者拖动变小的时候，防止盒子布局的错乱。

       -主要的用法 在移动端，一些媒体查询上

       -320px-375px iphone6 的宽度

关于图片的bug

       -设置img进线加载的时候，默认的大小将会往下撑开3~6px的间距

       -有两种方式的解决办法

给图片设置display：block（转换成块元素，独占一行显示）

或者添加：vertical-align: top

              img{

            /* display: block */

            vertical-align: top

        }

拓展：关于表单控件中input

              - value的样式设置跟普通文本属性设置即可 （如果想要给占位符value设置字体的颜色大小，像文本属性设置即可）

        - placeholder color（但是要给placeholder不占为符设置样式，就需要给样式中添加选择器：input::-webkit-input-placeholder 选中之后才能设置 注：-webkit-是谷歌浏览器的前缀）

关于高度塌陷的解释：

       高度塌陷/高度坍塌

              造成的原因：父级元素没有了高度，子级元素含有浮动的属性

                     -父级元素没有高度，或者是高度自适应

                     -子级元素含有浮动属性

解决的方法有四种

       第一种:给父级元素设置高度

        - 优点:从根本解决问题

        - 缺点:无法做到自适应

       第二种：给父级添加overflow:hidden属性

原理:设置了文本溢出属性触发了BFC(块级格式化上下文) - 规则:浮动元素也参与高度计算

        - 优点:简单

        - 缺点:如果子级元素有超出父级容器的部分会被隐藏 破坏了正常的网页布局

       第三种：在最后一个子级元素添加一个任意标签(div),给这个标签设置clear:both

        - 属性的解释 clear:left\right\none\both

        - 原理:清除上方预留出来的空间

        - 优点:解决高度塌陷 并且自适应

        - 缺点:会生成多余结构代码 代码冗余 结构错乱 并且样式容易冲突

                     注：/* 前端不成文的规定:clear-fix 清除浮动的时候所使用的标签 */

       第四种：第四种: 万能清除法(难理解 要求会用就可以)

        原理:清除上方预留出来的空间

        方法:在父级元素上添加clear-fix

            - clear-fix::after{

                content:"";

                width:100%;

                height:0;

                display:block;

                clear:both;

                overflow:hidden;

                visibility:hidden;}

            把代码放进需要解决的问题父级元素的样式里 从而解决高度塌陷的问题

伪对象/伪元素

        - 选择器::after{content:""}    表示在某个元素之后添加一个伪元素）

在xx之后（content里面可以添加文字，也可以插入url图片路径，但是徐娅萍把双引号删除使用）

        - 选择器::before{content:""}   在xx之前：（表示在某个元素之前添加一个伪元素）

        - 选择器::first-letter 选中第一个文本

        - 选择器::first-line   选中第一行

    常见面试问题: 伪对象和伪类之间的区别是什么？

    1.写法上的区别

        - 伪类只有一个冒号

        - 伪对象在css2中只有一个冒号,后来区分伪类和伪对象 在css3中规定伪对象有两个冒号

    2.作用上的区别

        - 伪类只能改变元素的样式

        - 伪对象可以个元素添加新的结构(虚拟的结构 不会占据位置)