前端基础知识学习记录（三）

shixinzhang 发布于2019-08-30 14:08 / 2204人阅读

摘要：前端基础知识学习记录三选择器的使用与选择器的简介选择器，即为在被选元素的内容前面插入内容，使用属性来指定要插入的内容。也可理解为通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

前端基础知识学习记录（三）

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/115797.html

前端基础知识学习记录（三）

摘要：前端基础知识学习记录三选择器的使用与选择器的简介选择器，即为在被选元素的内容前面插入内容，使用属性来指定要插入的内容。也可理解为通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。前端基础知识学习记录（三） 1.CSS 选择器的使用： (1):before与:after选择器的简介： :before选择器，即为在被选元素的内容前面插入内容，使用 content 属性...

NickZhou 2019-08-22 15:19 评论0 收藏0
微信 - 收藏集 - 掘金

摘要：基础学习微信小程序视图容器一掘金本文为菜鸟窝编辑吴佳林的连载。如果碰巧遇到关闭情况，可加群全家桶与微信开发前端掘金此项目本身有一个了，为了方便将和微信端数据打通，需要用户微信和用户绑定。微信扫一扫登录内部实现原理 - Android - 掘金与XMPP相关试题一与XMPP相关试题二与性能优化相关试题一与性能优化相关试题二与性能优化相... [利用 [微信公众号通知] 给你的网...

jasperyang 2019-08-28 17:46 评论0 收藏0
深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0
ES6零基础教学_解析彩票项目-学习笔记（一）

摘要：彩票项目实战学习记录一完整走了一遍课程，觉得还不错。支持正版人人有责零基础教学解析彩票项目下面是项目课程的目录路线一个项目分为三部分业务逻辑，自动构建系统，模拟数据和真实数据接口处理。彩票项目实战学习记录（一）完整走了一遍课程，觉得还不错。总结: es6的知识点说得还算清楚，主要是为了了解和使用，不是深究，所以浅尝即止即可，所以觉得还不错。完整还原了项目开发的代码设计和开发过...

blastz 2019-08-22 13:52 评论0 收藏0
前端知识归纳

摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。技能考察：一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和...

sixleaves 2019-08-02 16:13 评论0 收藏0