Isabella

Isabella 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

越努力越幸运

个人动态

Isabella 发布了文章 · 3月25日

css伪元素

1、定义和特性

定义:

伪元素,顾名思义,就是虚假的元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。

特性:
1、可以减少dom元素;
2、必须配合content属性一起使用,否则不会生效,且伪元素默认是inline,但可以用display属性来调整;
3、结构无法审查,不方便调试;
4、js无法操作,增加、删除等。

2、分不清:还是::?

在 CSS2 和 CSS1 中,伪类和伪元素都使用了单冒号语法。
在 CSS3 中,双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类伪元素的尝试。
为了向后兼容,CSS2 和 CSS1 伪元素可接受单冒号语法。

3、CSS 伪元素

选择器例子例子描述
::afterp::after在每个
元素之后插入内容。
::beforep::before在每个
元素之前插入内容。
::first-letterp::first-letter选择每个
元素的首字母。
::first-linep::first-line选择每个
元素的首行。
::selectionp::selection选择用户选择的元素部分。

3、使用场景

1、content:'',如果没有内容也要写空串。
示例:清除浮动

<div class="box">
    <div class="son1"></div>
    <div class="son2"></div>
</div>
.box:after{
    content: '';
    display: block;
    clear: both;
    *zoom: 1;/* IE6-7不支持:after需触发hasLayout */
}

2、content:attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联,及其内容为主元素的某指定属性的值
示例:词汇提示工具

<p>
    我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
            <span data-descr="small popups which also hide again">提示</span>。<br />
            把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
</p>
span[data-descr] {
    position: relative;
    text-decoration: underline;
    color: #00F;
    cursor: help;
}

span[data-descr]:hover::after {
    content: attr(data-descr);
    position: absolute;
    left: 0;
    top: 24px;
    min-width: 200px;
    border: 1px #aaaaaa solid;
    border-radius: 10px;
    background-color: #ffffcc;
    padding: 12px;
    color: #000000;
    font-size: 14px;
    z-index: 1;
}

3、content:url()/uri(), 插入一个外部资源文件,可以是图像,音频,视频文件或浏览器所支持的其他任何资源。

<div class="insert">12</div>
.insert {
   line-height: 20px;
}
.insert::before {
    content: url(../images/headset.png);
    width: 24px;
    height: 20px;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

效果:
image

4、content:counter(name)调用计数器,可以不使用列表元素实现序号功能
先来了解一下counter-reset、counter-increment和counter属性。

counter-reset:计数器名称 初始值;创建或重置一个或多个计数器,初始值默认为0。
counter-increment:计数器名称 增量值;设置某个选取器每次出现的计数器增量。增量值默认为1。
counter(计数器名称,style);必须和content一起使用,给元素插入计数器的值。
style参数是用来定义计数器的风格,默认为数字,还可以是lower-roman、lower-alpha、lower-greek罗马、英文、希腊等字符。
<div class="container">
    <h2>part</h2>
    <h2>part</h2>
</div>
.container {counter-reset:section;}
h2:before { 
    counter-increment: section; 
    content: "Chapter"  counter(section) ".";
} 
</style>

效果:
image

4、兼容性

image
image
总体来说大部分浏览器的支持性还是很好的,所以放心大胆的用吧~

5、和伪类的区别

1、写法不同,伪类只能用单冒号,而伪元素单冒号跟双冒号都可;
2、一个本质上是元素,另一个本质上是类;
2、伪类是用于向某些选择器添加特殊的效果,首先这个元素得是存在的,而伪元素是添加一个新的dom元素,顺便带着一些样式。

参考文档
https://www.cnblogs.com/wonyu...
https://blog.csdn.net/csdn372...
https://www.zhangxinxu.com/wo...

查看原文

赞 2 收藏 1 评论 0

Isabella 发布了文章 · 3月17日

css清除浮动的原理和方法

1、清除原理

1.1、什么是浮动

官方说法是浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。 详情请看官网
最初人们使用浮动是为了实现图文环绕的效果,但后来在为了实现某种布局的时候也会用到浮动,但是以此又会产生典型的问题,那就是影响兄弟元素的位置以及父元素高度塌陷

1.2 浮动效果

如果兄弟元素是块级元素,则会被浮动元素遮挡,如果是内联元素,则会尽可能围绕浮动元素。

1.2.1 图文环绕:
<div class="box">
    <img class="picture" data-original="bg.jpg">
    <p>环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字</p>
</div>
.box {
    width: 400px;
    border: 1px solid #333;
}
.picture {
    width: 50px;
    height: 50px;
    float: left;
}

image

1.2.2 兄弟元素被覆盖
<div class="box">
    <img class="picture" data-original="bg.jpg">
    <div class="sibling">兄弟1</div>
    <div class="sibling">兄弟2</div>
    <div class="sibling">兄弟3</div>
</div>
.sibling {
    background: red;            
    width: 170px;
    height: 50px;
}

image
兄弟1被浮动的图片遮挡住了,但是文字还是环绕效果,强不强?

1.2.3 父元素高度塌陷
<div class="box">
    <img class="picture" data-original="bg.jpg">
    <div class="son"></div>
</div>
.picture {
    width: 50px;
    height: 50px;
    float: left;
}
.son {
    background: red;            
    width: 50px;
    height: 50px;
    float: right;
}

image
很明显后两种效果不是我们想要的,所以我们就要想办法解决掉~

2、如何清除

2.1 原理

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

1)清除浮动:也就是我们常说的clear属性,对应CSS中的属性是 clear:left | right | both | none;
2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。
现在清除了浮动,但是,这只是清除了浮动对于兄弟元素的影响,而高度塌陷的问题还没有解决,因此,我们需要更高级的清除浮动——闭合浮动

为什么叫闭合浮动?因为浮动的元素脱离了普通流,因此对于它的父元素,它并没有闭合,这时候就需要闭合浮动了。

3.2 方法

方法一:使用空div,这个大家都知道,会产生没有意义的标签;
方法二:给父元素加overflow:hidden,应用的是bfc原理,缺点是对于需要超出父元素的部分会被截取,所以这种方法要视情况而定;
方法三:使用after伪元素,不生成实际的dom还能满足需求,多好~。

<div class="box">
    <img class="picture" data-original="bg.jpg">
    <p>环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字</p>
</div>
.box:after{
    content: '';
    display: block;
    clear: both;
    *zoom: 1;/* IE6-7不支持:after需触发hasLayout */             
}

参考资料:
http://www.iyunlu.com/view/cs...
https://blog.csdn.net/wangjia...

查看原文

赞 3 收藏 2 评论 0

Isabella 发布了文章 · 3月2日

纯css实现三角形原理

在实现之前先来熟悉一下css盒模型
image
然后创建一个普通的应用

<div class="triangle"></div>
.triangle {
    width: 100px;
    height: 100px;
    border-top: 10px solid #000;
    border-right: 10px solid #ff0000;
    border-left: 10px solid #00ff00;
    border-bottom: 10px solid #0000ff;
}

效果:
image
此时需要注意四条边框交接的地方,后面会用到。然后再将内容物的宽高都去掉,为了方便观察,将四个边框都设置大一些,效果如下:

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid #000;
    border-right: 100px solid #ff0000;
    border-left: 100px solid #00ff00;
    border-bottom: 100px solid #0000ff;
}

image
现在是不是觉得三角形有点雏形了,四个方向的都有,想要哪个把其他方向的颜色设置成透明不就行了,先试一个向下的三角形:

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid #000;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

image
看来是这个方法,当然底边框目前用不到,还会使总高度变高,可以直接去掉。是不是可以这样理解,底边在哪就留哪边的颜色?
接下来还有一个问题,那就是这个三角形的宽高,仔细看这个三角形的宽正好是左右边框的总和,也就是200px,而它的高当然就是上边框的宽度了,也就是100px。
以此类推,如果设计稿给的是一个长50px高60px的一个向上的三角形,那么就应该这样写:

.triangle {
    width: 0;
    height: 0;
    border-top: 60px solid #000;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
}

image
还可以实现一个直角三角形:

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid #000; 
    border-left: 100px solid transparent;
}

image

还有其他各种角度的直角三角形,宽高可自定义,例如制作一个长50 高60的向右直角三角形:

.triangle {
    width: 0;
    height: 0;
    border-top: 60px solid #000;
    border-right: 50px solid transparent;
}

image
底边为上,所以border-top设置颜色,它的宽度即为高,所以宽度设置为60,底边的长度需要右边框来撑开(因为左边是直角,代表没有其他边框跟它重合),所以设置右边框,且宽度为三角形的长,即50。

总结:

普通三角形:底边是哪个方向,就设置哪个方向有颜色值,其相对的边直接去掉,然后其左右(上下)两边的宽度和为该三角形的底边长,其自身的宽度为该三角形的高。
直角三角形:只需要两条边框,可以先把它填成一个方行,然后留底边为有颜色值,补充的三角形在哪边,就留哪边。

如有问题,欢迎指正~

查看原文

赞 1 收藏 0 评论 0

Isabella 关注了标签 · 2月25日

vue.js

Reactive Components for Modern Web Interfaces.

Vue.js 是一个用于创建 web 交互界面的。其特点是

  • 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动 自动追踪依赖的模板表达式和计算属性。
  • 组件化 用解耦、可复用的组件来构造界面。
  • 轻量 ~24kb min+gzip,无依赖。
  • 快速 精确有效的异步批量 DOM 更新。
  • 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

官网:https://vuejs.org
GitHub:https://github.com/vuejs/vue

关注 137985

Isabella 关注了标签 · 2月25日

react.js

React (sometimes styled React.js or ReactJS) is an open-source JavaScript library for creating user interfaces that aims to address challenges encountered in developing single-page applications. It is maintained by Facebook, Instagram and a community of individual developers and corporations.

关注 69933

Isabella 关注了标签 · 2月25日

docker

an open source project to pack, ship and run any application as a lightweight container ! By Lock !

关注 44497

Isabella 关注了标签 · 2月25日

typescript

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方。包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。

关注 35679

Isabella 关注了标签 · 2月25日

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 194983

Isabella 关注了标签 · 2月25日

python

Python(发音:英[ˈpaɪθən],美[ˈpaɪθɑ:n]),是一种面向对象、直译式电脑编程语言,也是一种功能强大的通用型语言,已经具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法非常简捷和清晰,与其它大多数程序设计语言不一样,它使用缩进来定义语句。

Python支持命令式程序设计、面向对象程序设计、函数式编程、面向切面编程、泛型编程多种编程范式。与Scheme、Ruby、Perl、Tcl等动态语言一样,Python具备垃圾回收功能,能够自动管理存储器使用。它经常被当作脚本语言用于处理系统管理任务和网络程序编写,然而它也非常适合完成各种高级任务。Python虚拟机本身几乎可以在所有的作业系统中运行。使用一些诸如py2exe、PyPy、PyInstaller之类的工具可以将Python源代码转换成可以脱离Python解释器运行的程序。

Python的主要参考实现是CPython,它是一个由社区驱动的自由软件。目前由Python软件基金会管理。基于这种语言的相关技术正在飞快的发展,用户数量快速扩大,相关的资源非常多。

关注 138204

Isabella 关注了标签 · 2月25日

java

Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的 Java 程序设计语言和 Java 平台(即 JavaSE, JavaEE, JavaME)的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

Java编程语言的风格十分接近 C++ 语言。继承了 C++ 语言面向对象技术的核心,Java舍弃了 C++ 语言中容易引起错误的指針,改以引用取代,同时卸载原 C++ 与原来运算符重载,也卸载多重继承特性,改用接口取代,增加垃圾回收器功能。在 Java SE 1.5 版本中引入了泛型编程、类型安全的枚举、不定长参数和自动装/拆箱特性。太阳微系统对 Java 语言的解释是:“Java编程语言是个简单、面向对象、分布式、解释性、健壮、安全与系统无关、可移植、高性能、多线程和动态的语言”。

版本历史

重要版本号版本代号发布日期
JDK 1.01996 年 1 月 23 日
JDK 1.11997 年 2 月 19 日
J2SE 1.2Playground1998 年 12 月 8 日
J2SE 1.3Kestrel2000 年 5 月 8 日
J2SE 1.4Merlin2002 年 2 月 6 日
J2SE 5.0 (1.5.0)Tiger2004 年 9 月 30 日
Java SE 6Mustang2006 年 11 月 11 日
Java SE 7Dolphin2011 年 7 月 28 日
Java SE 8JSR 3372014 年 3 月 18 日
最新发布的稳定版本:
Java Standard Edition 8 Update 11 (1.8.0_11) - (July 15, 2014)
Java Standard Edition 7 Update 65 (1.7.0_65) - (July 15, 2014)

更详细的版本更新查看 J2SE Code NamesJava version history 维基页面

新手帮助

不知道如何开始写你的第一个 Java 程序?查看 Oracle 的 Java 上手文档

在你遇到问题提问之前,可以先在站内搜索一下关键词,看是否已经存在你想提问的内容。

命名规范

Java 程序应遵循以下的 命名规则,以增加可读性,同时降低偶然误差的概率。遵循这些命名规范,可以让别人更容易理解你的代码。

  • 类型名(类,接口,枚举等)应以大写字母开始,同时大写化后续每个单词的首字母。例如:StringThreadLocaland NullPointerException。这就是著名的帕斯卡命名法。
  • 方法名 应该是驼峰式,即以小写字母开头,同时大写化后续每个单词的首字母。例如:indexOfprintStackTraceinterrupt
  • 字段名 同样是驼峰式,和方法名一样。
  • 常量表达式的名称static final 不可变对象)应该全大写,同时用下划线分隔每个单词。例如:YELLOWDO_NOTHING_ON_CLOSE。这个规范也适用于一个枚举类的值。然而,static final 引用的非不可变对象应该是驼峰式。

Hello World

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

编译并调用:

javac -d . HelloWorld.java
java -cp . HelloWorld

Java 的源代码会被编译成可被 Java 命令执行的中间形式(用于 Java 虚拟机的字节代码指令)。

可用的 IDE

学习资源

常见的问题

下面是一些 SegmentFault 上在 Java 方面经常被人问到的问题:

(待补充)

关注 142619

认证与成就

  • 获得 6 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-07-26
个人主页被 331 人浏览