文章库ARTICLE COLUMN

  • CSS进阶篇--设置滚动条样式

    CSS进阶篇--设置滚动条样式

    摘要:用于所有滚动条轨道,指示滚动条圆角是否显示。用于所有的滚动条轨道,指示应用滚动条的某个页面容器元素是否当前被激活。 因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决。 比如网易邮箱的滚动条...

    elvaelva 评论0 收藏0
  • CSS基础篇--强制性换行word-break与word-wrap的使用

    CSS基础篇--强制性换行word-break与word-wrap的使用

    摘要:,例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。代码结果如图所示这样就一目了然了。如果您觉得本文对您的学习有所帮助,请多支持与鼓励。 一般情...

    happyfishhappyfish 评论0 收藏0
  • CSS基础篇-- :before && :after的用法,伪类和伪元素的区别

    CSS基础篇-- :before && :after的用法,伪类和伪元素的区别

    摘要:一的用法如同对伪元素的名称一样,是用来给指定的元素的内容前面插入新的内容。二伪类和伪元素的区别伪类种类伪元素种类伪类作用对象是整个元素例如尽管这些条件不是基于的,但结果每一个都是作用于一个完整的元素,比如整个链接,段落,等等。 一::b...

    X_AirDuX_AirDu 评论0 收藏0
  • 纯CSS+HTML自定义checkbox效果

    纯CSS+HTML自定义checkbox效果

    摘要:应该是一个比较常用的功能了,不过浏览器自带的往往样式不怎么好看,而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求,的自定义就被提出来了。个人建议用的和伪元素和是一个东西。 checkbox应该是一个比较常用的html功能了,不过浏览器自带...

    sevi_stuosevi_stuo 评论0 收藏0
  • CSS规范 > 9 视觉格式化模型 Visual Formatting Model

    CSS规范 > 9 视觉格式化模型 Visual Formatting Model

    摘要:盒的类型会影响其在视觉格式化模型中的表现。浮动元素绝对定位元素根元素都被称为脱离文档流其他元素被称为文档流内。 视觉格式化模型 Visual Formatting Model URL:http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug,...

    魏宪会魏宪会 评论0 收藏0
  • 盒模型一二三(一):盒世界,知几何

    盒模型一二三(一):盒世界,知几何

    摘要:比如表示上下左右都是像素块元素居中的样式,表示上下表示左右而表示上,左右,下。浏览器对块元素的默认样式问题如下块元素的盒模型样式复合属性写法如果我们想给添加样式,可以这样写为了精简代码,也可以采用如下的复合属性写法 学习 HTML 和 CSS ...

    tuantuantuantuan 评论0 收藏0
  • [译]如何成为一个优秀的前端工程师

    [译]如何成为一个优秀的前端工程师

    摘要:但是,在这篇文章中,我要说的是如何从一个不错的工程师成为一个优秀的工程师。大部分我认为的这个领域中优秀的工程师都是这些优秀的第三方库的维护者。 来自Google的前端工程师-Philip Walton 分享了自己关于如何成为优秀的工程师的一些观点。个人感...

    missoncemissonce 评论0 收藏0
  • CSS规范 > 8 盒模型 Box Model

    CSS规范 > 8 盒模型 Box Model

    摘要:当两个及以上外边距折叠,合并后的外边距宽度是发生折叠的外边距中的最大宽度。如果该元素的外边距同其父元素的上外边距折叠,则该盒的上边框边缘同其父元盒的上边框边缘相同。 2017-07-20: 关于外边距折叠, 推荐问题: https://segmentfault.com/q/10....

    suemisuemi 评论0 收藏0
  • 用 CSS 实现三角形与平行四边形

    用 CSS 实现三角形与平行四边形

    摘要:所以我们需要加一个内层元素,并对内层元素做一次逆向的歪曲,从而得到我们想要的效果实现代码如下,另附示例上海总结第一种方法使用属性出三角形,并通过对三个元素进行拼接最终实现了平行四边形而第二种方法则通过来得到平行四边形。 本文最初发布于...

    Martin91Martin91 评论0 收藏0
  • 探究:绝对定位没有设置 top, right, bottom, left 的世界是怎样的?

    探究:绝对定位没有设置 top, right, bottom, left 的世界是怎样的?

    摘要:一个元素如果设置了但没有设置此元素的位置在哪在涉及到绝对定位元素的位置问题时一个重要的概念是想要了解元素的位置还得找到此元素的才行如下是我进行的一系列测试以及对测试结果的试探性解释文中的英文术语都不翻译方便直接查或者其他技术文档请持有...

    kbyyd24kbyyd24 评论0 收藏0
  • CSS实现元素水平居中

    CSS实现元素水平居中

    摘要:实现元素水平居中元素主要分为块级元素和行内元素,所以对元素进行水平居中也分这两种情况来讨论,另外块级元素的实现比较复杂,将分情况讨论。 CSS实现元素水平居中 元素主要分为块级元素和行内元素,所以对元素进行水平居中也分这两种情况来讨论,另...

    figofuturefigofuture 评论0 收藏0
  • CSS实现元素垂直居中

    CSS实现元素垂直居中

    摘要:实现元素垂直居中对元素的垂直居中针对于单行元素和多行元素将分情况讨论。三父元素高度确定的多行文本多行文本,图片,块级元素皆属于这种情况,对此的垂直居中主要有两种方法。插入对要垂直居中的元素外插入包括标签,同时设置。 CSS实现元素垂直居...

    RobinTangRobinTang 评论0 收藏0
  • CSS页面布局笔记

    CSS页面布局笔记

    摘要:居中布局水平居中父元素和子元素的宽度都未知优点兼容性好缺点子元素文本继承了属性,子元素要额外加优点只需要设置子元素的样式优点居中子元素不会对其他元素产生影响缺点是的属性,存在兼容性问题优点只需要设置父元素的样式缺点兼容性问 居中布局 ...

    CoderDockCoderDock 评论0 收藏0
  • [ 好文分享 ] CSS布局终极方案之--圣杯布局(兼容IE6+,现代浏览器)

    [ 好文分享 ] CSS布局终极方案之--圣杯布局(兼容IE6+,现代浏览器)

    摘要:圣杯布局很好很巧妙的布局方式,每次都要翻看一下,干脆转过来转自最终效果左侧栏固定宽度,右侧自适应主内容栏自适应宽度侧边栏固定宽度右侧栏固定宽度,左侧自适应主内容栏自适应宽度侧边栏固定宽度左中右三栏 圣杯布局--很好很巧妙的布局方式,每次...

    qujianqujian 评论0 收藏0
  • CSS 模块

    CSS 模块

    摘要:通过使用或者从中导入文件使得模块被编译成为可能。模块一次只运行一个文件,这样可以避免全局上下文的污染。下面让我们用重构这些这些代码这是一个进化版,但是我们仅仅只达到了一部分目标。 原文:http://glenmaddern.com/articl...译者:@公子 如...

    elarityelarity 评论0 收藏0
  • CSS常见样式(一):background

    CSS常见样式(一):background

    摘要:最兼容将使用图片和绘制结合在一起。缩写形式,注意的使用也有层级关系。文字属于里的内容,主要设计的是样式。小结随着的发展,如今这个小并不是解决类似样式的最佳方式了,但是里面蕴含着滑动门的原理前几年非常流行的一种方法,参考传智播客的导航栏...

    lemonlemon 评论0 收藏0
  • 垂直居中方法检测

    垂直居中方法检测

    摘要:使用和属性注意兼容到并且需要给一个高度。优点中的内容不用固定。方法方法三方法四单行文本垂直居中 1、使用table和tabel-cell属性html hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh hdaishisdhidshidshidshsidhsdihdsihsdih...

    WinerWiner 评论0 收藏0
  • 实习笔记整理 html+css 篇

    实习笔记整理 html+css 篇

    摘要:总结主要是前端的基础不准吐槽我把总结写在前面特别感谢超级好用的编辑器碰到的所有坑都放在前面。 总结: 主要是前端HTML+CSS的基础 (╯‵□′)╯︵┻━┻不准吐槽我把总结写在前面 特别感谢超级好用的MarkDown编辑器(づ ̄ 3 ̄)づStackEdit 1. 碰到...

    mingzhongmingzhong 评论0 收藏0
  • CSS:关于元素高度与宽度的讨论 系列文章(二)

    CSS:关于元素高度与宽度的讨论 系列文章(二)

    前言:在上一篇文章中讨论了关于块级非置换元素宽度与高度在不同情况下的表现,在这篇文章中将详细的阐述来自w3c定义的视觉化格式模型中对于各种元素的定义,以及行内级非置换元素与行内级置换元素宽度与高度的讨论 元素的各种定义 块级元素与块元素 块级元...

    曹金海曹金海 评论0 收藏0
  • css3 attr 简单介绍和实例

    css3 attr 简单介绍和实例

    摘要:表达式的计算值和属性的值与指定名称的元素有关根据下面的规则在的表达总是返回一个字符串。在没有命名空间这将只是一个标识符。 本文不是w3c翻译 保留原文的基础上 做出自己的理解为主 参考 http://www.w3.org/TR/2015/CR-css-values-3-2015...

    GeekGhcGeekGhc 评论0 收藏0
  • 纯CSS实现页签切换效果

    纯CSS实现页签切换效果

    摘要:主要运用了的选择器,代码结构跟使用差不多,只是多了几个,不知道性能上是快还是快呢地址 主要运用了 CSS3 的 :checked 选择器, 代码结构跟使用js差不多,只是多了几个radio, 不知道性能上是js快还是css快呢? codepen地址:http://codepen.io/Yua...

    stefanstefan 评论0 收藏0
  • [学习笔记]  css中的line-height

    [学习笔记] css中的line-height

    摘要:基本概念行高行距行高是指文本行基线间的垂直距离。行框行框是指本行的一个虚拟的矩形框,由该行中行内框组成。行框也是浏览器渲染模式中的一个概念,无法显示出来。行框高度等于本行中所有行内框高度的最大值。设置合理的行间距。设置固定的行间距。 ...

    frolcfrolc 评论0 收藏0
  • 前端碎语(1)

    前端碎语(1)

    摘要:因为基线的不同,这就会导致内联元素在默认使用定位时,会出现同一行元素的错位问题。那么有没有和基线一样的确定准则呢当然有,一个业界公认的标准就是同一行内联元素中,中线穿过的是小写的中点。 暑假前因为种种原因没有把百度IFE的先期课程学完,...

    sushengsusheng 评论0 收藏0
  • css基础组件库(兼容低版本)

    css基础组件库(兼容低版本)

    摘要:图标跟文字混排分享截图注意父容器的值与图标的高度相等,另保持设置图标的的值为。上下垂直居中,需要兼容低版本的浏览器时用比用要好很多。 1、图标跟文字混排 html 分享 css .link{ width: 92px; border: 1px solid #0f0; ...

    SalamanderSalamander 评论0 收藏0
  • CSS 行内布局实践小结

    CSS 行内布局实践小结

    摘要:相关内联格式上下文主要影响内布局的行盒模型,这是一个显示区域,根据块状容器内,每一行的多个内联元素都会共同生成一个行盒模型。 前言 通常情况下,要使元素排列在一行内,通常做法就是使用float,然后再清浮动。 如下:showImg("https://segment...

    TasteTaste 评论0 收藏0

热门文章

<