文章库ARTICLE COLUMN

  • CSS进阶篇--fontAwesome代替网页icon小图标

    CSS进阶篇--fontAwesome代替网页icon小图标

    摘要:网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋。直接看代码链接链接链接链接得出的结果就是其他应用还有其他更加复杂一点的应用,包括固定宽度浮动反转旋转叠加图标等。 引言 奥森图标(Font Awesome)提供...

    paney129paney129 评论0 收藏0
  • 玩儿前端——CSS垂直的那些事儿

    玩儿前端——CSS垂直的那些事儿

    摘要:替换元素或任何其他类型的非文本元素会忽略这个值。要对齐的元素的行内框底端再与父元素的底端对齐。往往将元素的垂直中点与父元素基线上方处的一个点对齐。 说说自己对行高和垂直对齐的理解 行高 line-height属性是指文本行基线之间的最小距离,而不...

    tigerZHtigerZH 评论0 收藏0
  • CSS > CSS3 中的层叠上下文初探

    CSS > CSS3 中的层叠上下文初探

    摘要:但该盒不建立新的层叠上下文,除非是根元素。以上是基于的层叠上下文介绍。同级情况下,按照二者在源代码中的顺序,居后的又重新占领高地了。现在我们看以下源代码这个时候,以视口为包含块进行定位和大小计算,将会铺满整个屏幕。 前言:关于层叠上下...

    pcChaopcChao 评论0 收藏0
  • 理解 BFC (Block Formatting Model)

    理解 BFC (Block Formatting Model)

    摘要:是指块级元素,就是会强制换行的元素,比如。将元素推向左侧。请根据不同的实际情况,选择最合适的方式。再次重申一下,是为子元素创建定位环境。,由于浮动元素占据了一定的宽度,新创建的会因此而变窄。这里只是为了更好地去理解而做一个例子。 什么...

    TonnyTonny 评论0 收藏0
  • CSS 尺寸

    CSS 尺寸

    摘要:概览尺寸属性允许你控制元素的高度和宽度。使用等单位定义高度。该属性值会对元素的高度设置一个最低限制。不允许指定负值。可选的值使用等单位定义元素的最小宽度值,默认值取决于浏览器。尺寸与盒模型有部分关联,稍后会补充盒模型的相关笔记。 概览...

    Forest10Forest10 评论0 收藏0
  • CSS 盒模型

    CSS 盒模型

    摘要:概览盒模型也叫框模型,规定了元素框处理元素内容内边距边框和外边距的方式。不幸的是,和在使用自己的非标准模型。当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。如果缺少右外边距的值,则使用上外边距的...

    heartFollowerheartFollower 评论0 收藏0
  • 认识一下 Material Design Lite 布局组件

    认识一下 Material Design Lite 布局组件

    摘要:布局组件需要按特定的结构进行声明需要指出的是,在一个布局声明中,等子元素不一定全部使用,比如你可以不要侧栏菜单布局组件简化了创建可伸缩页面的过程。 一、布局/Layout MDL的布局/Layout组件用来作为整个页面其他元素的容器,可以自动适应不同的...

    wanglu1209wanglu1209 评论0 收藏0
  • 「CSS」Margin Collapsing - 外边距合并

    「CSS」Margin Collapsing - 外边距合并

    摘要:外边距合并都是基于以下三种基本的外边距合并。空元素它自己的上外边距和下外边距合并了。阻止外边距合并第二种情况不合并设置不为都可。 外边距合并在排版上带来非常大的便利,但是人们对其不甚了解,导致使用外边距的时候总是出现繁多问题,今日写下...

    cheukyincheukyin 评论0 收藏0
  • 块级元素和行内元素的区别

    块级元素和行内元素的区别

    摘要:我是行内元素标签我是行内元素标签注块级元素各占一行。行内元素不可以控制宽和高。除非你想将它转变成为块级元素。 区别: 注:行内元素会在一条直线上,是在同一行的。 //我是行内元素SPAN标签//我是行内元素strong标签// 注:块级元素各占一行。是...

    王军王军 评论0 收藏0
  • CSS的隐藏方式

    CSS的隐藏方式

    display:none和visibility:hidden的区别 // 1、空间占据 display:none;// 隐藏的元素不占文档流 visibility:hidden;// 隐藏的元素空间存在(占茅坑、不拉屎) // 2、回流和重绘(reflow/repaint) display:none;// 引发回流和重绘 visibility:hidden;// 无回流...

    URLOSURLOS 评论0 收藏0
  • CSS:选择器与优先级

    CSS:选择器与优先级

    摘要:样式优先级原则总的原则规定拥有更高确定度的选择器优先级更高如果样式中包含冲突的规则,且它们具有相同的确定度。 样式优先级原则 总的原则1.CSS规定拥有更高确定度的选择器优先级更高2.如果样式中包含冲突的规则,且它们具有相同的确定度。那么,后...

    linkFlylinkFly 评论0 收藏0
  • 前端之Sass/Scss实战笔记

    前端之Sass/Scss实战笔记

    摘要:有两种语法规则目前新的语法规则从开始被称为时髦的它是语法的的拓展级,就是说每一个语法正确的文件也是合法的文件,文件使用作为拓展名。备注注意源文件和目标文件之间是冒号,与编译命令中为空格不同。 Introduction Sass 有两种语法规则(syntaxes)...

    SikeSike 评论0 收藏0
  • CSS基础篇--CSS中table tr:nth-child(even)改变tr背景颜色: IE7,

    CSS基础篇--CSS中table tr:nth-child(even)改变tr背景颜色: IE7,

    摘要:方法一例如无效,无法识别。换一种方法给需要变色的加上方法三实现在网上看了看还有第四种方法但是实践的时候发现第四种完全没有反应,如果你实践了有效果,请说说其中的原因吧。第四种方法参考地址如果您觉得本文对您的学习有所帮助,请多支持与鼓励。...

    ermaoLermaoL 评论0 收藏0
  • CSS基础篇--你知道的display的值有多少?用了多少?

    CSS基础篇--你知道的display的值有多少?用了多少?

    摘要:与属性的值不同,其不为被隐藏的对象保留其物理空间指定对象为内联元素。指定对象作为块元素级的表格。类同于标签指定对象作为表格行组。伸缩盒过渡版本将对象作为弹性伸缩盒显示。伸缩盒最新版本新增属性可能存在描述错误及变更,仅供参考。 它的语法...

    wangdaiwangdai 评论0 收藏0
  • CSS进阶篇--div中的内容垂直居中的五种方法

    CSS进阶篇--div中的内容垂直居中的五种方法

    摘要:二内边距法另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用将内容垂直居中,比如这段代码的效果和法差不多。 一、行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器...

    fjcgreatfjcgreat 评论0 收藏0
  • CSS进阶篇--CSS让浮动元素水平居中

    CSS进阶篇--CSS让浮动元素水平居中

    摘要:对于定宽的非浮动元素我们可以用进行水平居中。对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。 对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题...

    fevinfevin 评论0 收藏0
  • CSS基础篇--css reset重置样式有那么重要吗?

    CSS基础篇--css reset重置样式有那么重要吗?

    摘要:在以前写代码的时候,一般都会在里添加重置样式,其内容如下但是最近在网上看了看网络文章,也感觉有些重置是没有用的。当然重置的优点,缺点都不说了,估计心里都非常有数的,还是要根据实际项目来。后来主管给我推荐了一款替代重置的替代方案,那就是...

    rockswangrockswang 评论0 收藏0
  • CSS进阶篇--Normalize.css的使用(重置表)

    CSS进阶篇--Normalize.css的使用(重置表)

    摘要:相比于传统的,是一种现代的为准备的优质替代方案。保护了有价值的默认值通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。这就意味着你不用再为所有公共的排版元素重新设置样式。任何人都能够提交问题报告或者提交补丁。 本文译自No...

    dackdack 评论0 收藏0
  • CSS基础篇--如何解决inline-block元素的空白间距

    CSS基础篇--如何解决inline-block元素的空白间距

    摘要:先看结构代码在的元素之间存在的空白如图第一种就是改变结构结构一这种方法接近标签换行格式的写法,也更趋近阅读。当然有些文章介绍使用来解决,这也是跟元素的字号有极大的关系。如果元素是一个,则查找文档内容。如果节点是元素节点,则属性将返回。...

    JowayYoungJowayYoung 评论0 收藏0
  • CSS进阶篇--CSS select样式优化 含jquery代码

    CSS进阶篇--CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的:showImg("https://segmentfault.com/img/bVpTBZ"); html结构如下: 请选择您所在的城市 请选择您所在的城市 中山市 太原市 ...

    A  LoityA Loity 评论0 收藏0
  • css-负margin总结

    css-负margin总结

    摘要:为负时,属性是元素本身的右下边为参考线水平向右下位移。总结盒子最后的显示大小等于盒子的正,而负不会影响其大小。 这篇文章是从原博客转载过来的,是2013年写的,有些不对的地方请指出。 原文地址 博客地址 , 欢迎订阅 这是一篇我自己关于负mar...

    leap_frogleap_frog 评论0 收藏0
  • Web前端开发规范文档

    Web前端开发规范文档

    摘要:前端开发规范文档规范目的使开发流程更加规范化。中的非注释类中文字符须转换成编码使用,以避免编码错误时乱码显示。文件规范文件名用英文单词,多个单词用驼峰命名法。书写规范命名规范。图片规范命名应用小写英文数字组合,便于团队其他成员理解。 ...

    付伦付伦 评论0 收藏0
  • 玩转CSS选择器(二) 之 浏览器支持,常见Bug,性能优化

    玩转CSS选择器(二) 之 浏览器支持,常见Bug,性能优化

    摘要:本节内容会跟着上一节的内容继续完善,首先会补充选择器的浏览器支持情况主要是说,比如我们最常用的群组选择器在时才被支持,并且还支持了很多我们没有想到的选择器,如子元素选择器,属性选择器,了解后你会发现还是挺了不起的。 前言 上一篇系列文...

    y1chuany1chuan 评论0 收藏0
  • CSS实例篇--CSS3实现模拟select 以及其中的三角形

    CSS实例篇--CSS3实现模拟select 以及其中的三角形

    摘要:如图实现这样的效果代码如下高级客户经理中级客户经理样式代码需要猛点该文字,百度云盘下载 如图实现这样的效果:showImg("https://segmentfault.com/img/bVoR95");html代码如下: 高级客户经理 中级客户...

    AlphaWatchAlphaWatch 评论0 收藏0
  • 「CSS3 」动画详解

    「CSS3 」动画详解

    摘要:规定动画的名称。规定动画是否在下一周期逆向地播放。定义动画各个阶段的状态的代码段。动画的周期时间。动画的循环次数。动画完成后,元素保持动画最后的状态。重要提示请不要忘记推荐和收藏搜索动画详解 CSS3 提供给了我们非常多的转换函数: 2D: t...

    weijweij 评论0 收藏0

热门文章

<