摘要:前端基础知识学习记录三选择器的使用与选择器的简介选择器,即为在被选元素的内容前面插入内容,使用属性来指定要插入的内容。也可理解为通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
前端基础知识学习记录(三)
1.CSS 选择器的使用:
(1):before与:after选择器的简介:
:before选择器,即为在被选元素的内容前面插入内容,使用 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; top: 55px; left: -265px; z-index: 100; padding: 2px 10px; box-sizing: border-box; width: 740px; background-color: #FFFFFF; border: 1px solid #cccccc; } .write_help_msg:before{ width: 0px; height: 0px; position: absolute; top: -12px; right: 117px; padding: 0; border-bottom: 6px solid #FFFFFF; border-top: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; display: block; content: ""; z-index: 12; } .write_help_msg:after{ width: 0px; height: 0px; position: absolute; top: -14px; right: 116px; padding: 0; border-bottom: 7px solid #cccccc; border-top: 7px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; display: block; content: ""; z-index: 10; }
2.CSS IE8 background-size 兼容:
.background_size_ie8{ background: url(background_size_ie8.png) no-repeat background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; filter: 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.CSS3 box-sizing属性:
(1)定义和用法:
box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。
例如,假如要并排放置两个带边框的框,可通过将box-sizing设置为"border-box",这样浏览器就会呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
(2)语法:
box-sizing:content-box;//宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。
box-sizing:border-box;//为元素设定的宽度和高度决定了元素的边框盒,即为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。也可理解为通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
box-sizing:inherit;//规定应从父元素继承box-sizing属性的值。
(3)好处:
css设定的宽度一般是内容区的宽度,一旦设置padding或者border值时可能会导致规划好的盒子发生错位或变形,这样的话就需要提前计算好减去padding和border的宽度值,使用box-sizing这个属性即可免去此麻烦。
(4)浏览器兼容性:
IE8及以上版本均支持该属性;
Firefox需要加上前缀-moz-;
对于低版本的IOS和Android浏览器需要加上前缀-webkit-;
4.IE浏览器判断js代码实现:
(1)不判断IE11:
function isIE(){ return window.ActiveXObject ? true : false; }
(2)判断IE11:
function isIE(){ if (!!window.ActiveXObject || "ActiveXObject" inwindow) return true; else return false; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93362.html
摘要:前端基础知识学习记录三选择器的使用与选择器的简介选择器,即为在被选元素的内容前面插入内容,使用属性来指定要插入的内容。也可理解为通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 前端基础知识学习记录(三) 1.CSS 选择器的使用: (1):before与:after选择器的简介: :before选择器,即为在被选元素的内容前面插入内容,使用 content 属性...
摘要:彩票项目实战学习记录一完整走了一遍课程,觉得还不错。支持正版人人有责零基础教学解析彩票项目下面是项目课程的目录路线一个项目分为三部分业务逻辑,自动构建系统,模拟数据和真实数据接口处理。 彩票项目实战学习记录(一) 完整走了一遍课程,觉得还不错。 总结: es6的知识点说得还算清楚,主要是为了了解和使用,不是深究,所以浅尝即止即可,所以觉得还不错。 完整还原了项目开发的代码设计和开发过...
阅读 1164·2021-11-11 16:54
阅读 860·2021-10-19 11:44
阅读 1319·2021-09-22 15:18
阅读 2428·2019-08-29 16:26
阅读 2927·2019-08-29 13:57
阅读 3077·2019-08-26 13:32
阅读 1068·2019-08-26 11:58
阅读 2309·2019-08-26 10:37