前端基础知识学习记录（三）一、CSS选择器的使用：（一）：:before和:after选择器简介：:before选择器被选中插入content在元素的内容之前，使用content属性指定要插入的内容。:after选择器是在被选元素的内容之后插入内容，也是使用content属性指定要插入的内容。(2)::before和:after选择器的用法:p:before{content:"Hello";}p:after{content:"World!";}(3):浏览器支持:before和:after选择器范围:所有主流浏览器都支持:before和:after选择器。对于IE8及更早版本的:before和:after选择器，需要声明。(4):before与:after选择器使用实例（单选按键的优化）:.write_help_msg{position:absolute;顶部：55px；左：-265px；z-指数：100；填充：2px10px；框大小：边框框；宽度：740px；背景色：#FFFFFF；border:1pxsolid#cccccc;}.write_help_msg:before{width:0px;高度：0px；位置：绝对；顶部：-12px；右：117px；填充：0；border-bottom:6pxsolid#FFFFFF;border-top:6pxsolidtransparent;border-left:6pxsolidtransparent;border-right:6pxsolidtransparent;显示：块；内容：””;z-index:12;}.write_help_msg:after{width:0px;高度：0px；位置：绝对；顶部：-14px；右：116px；填充：0；border-bottom:7pxsolid#cccccc;border-top:7pxsolidtransparent;border-left:7pxsolidtransparent;border-right:7pxsolidtransparent;显示：块；内容：””;z-index:10;}2.CSSIE8background-size包含：.background_size_ie8{background:url(background_size_ie8.png)no-repeatbackground-size:cover;-webkit-背景大小：覆盖；-moz-背景大小：封面；-o-背景尺寸：覆盖；过滤器：progid：DXImageTransform。Microsoft.AlphaImageLoader(src='background_size_ie8.png',sizingMethod='scale');-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background_size_ie8.png',sizingMethod='scale');}3.CSS3box-sizing属性：(1)定义和使用：box-sizing属性允许定义以特定方式匹配特定区域的特定元素。例如，如果你想并排放置两个带边框的盒子，你可以设置box-sizing为“border-box”，这样浏览器就渲染出一个指定宽高的盒子，并将border和padding放入盒子。(2)语法：box-sizing:content-box;//宽度和高度分别应用于元素的内容框，元素的内边距和边框绘制在宽度和高度之外。box-sizing:border-box;//为元素设置的宽高决定了元素的边框框，即为元素指定的任何padding和borders都会在设置的宽高范围内绘制。也可以这样理解，内容的宽和高可以分别用设置的宽和高减去border和padding得到。box-sizing:inherit;//指定box-sizing属性的值应该从父元素继承。(3)好处：css设置的宽度一般是内容区域的宽度。一旦设置了padding或border值，规划的框可能会错位或变形。在这种情况下，需要提前计算减去padding和borderwidth。值，使用box-sizing属性来避免这个麻烦。(4)浏览器兼容性：IE8及以上版本支持该属性；Firefox需要加上前缀-moz-；对于低版本的IOS和Android浏览器，需要添加前缀-webkit-；4.IE浏览器判断js代码实现：(1)不判断IE11:functionisIE(){returnwindow.ActiveXObject?true:false;}(2)判断IE11:functionisIE(){if(!!window.ActiveXObject||"ActiveXObject"inwindow)returntrue;否则返回假；}
