标签 “ CSS ” 下的文章
css技巧:如何处理ul li边框重合
前端笔记

css技巧:如何处理ul li边框重合

下面就是一个很好的实践,就让我们来谈谈用ul li如何实现边框重合: 效果图: *{ margin:0; padding:0;} .box{ width:350px; height:500px; background:#999; padding-top:60px; padding-left:60px;} .box l...

-- 阅读全文 --
30 分钟学会 Flex 布局
前端笔记

30 分钟学会 Flex 布局

为什么我要写这一篇关于 Flex 布局的教程? 因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。然而学习 Flex 布...

-- 阅读全文 --
Css新属性flow-root介绍
前端笔记

Css新属性flow-root介绍

BFC 在学习flow-root之前,咱们要先了解CSS中一个非常重要的概念,那就是BFC(Block Formatting Context)的概念。那什么是BFC呢? 在W3C规范中的BFC是这样定义的: 浮动元素和绝对定位元素,非块级盒子的块级容...

-- 阅读全文 --
《CSS 揭秘》字体排印(5)
前端笔记

《CSS 揭秘》字体排印(5)

连字符断行 设计师迷恋两端对齐效果,不过在网页中两端对齐很少使用,从css1就开始有 text-align:justify; 效果如图,显然很糟糕: 解决办法: css3引入了新的属性:hyphens:\[none, manual, auto\] 使用hyph...

-- 阅读全文 --
使用CSS3中的Calc计算器时需要注意的事情
前端笔记

使用CSS3中的Calc计算器时需要注意的事情

CSS3的到来引入了一个非常有用的功能,就是 calc() 函数。有了它,在指定元素高度或宽度时,你可以基于计算进行设定,而不是简单的使用固定数值。这种功能在自适应网页布局设计中格外有用——针对不同尺寸的设备(电...

-- 阅读全文 --
使用CSS3自己制作Tooltip提示效果
前端笔记

使用CSS3自己制作Tooltip提示效果

Tooltips也被叫做屏幕提示,它是一种在鼠标悬停在超链接、图标、图片和其它一些元素上的时候显示一些提示信息的有效方法。创建Tooltips有许多种方法,网上也有许多已经制作好的tooltip插件。 tooltips起源于一些...

-- 阅读全文 --
CSS布局奇技淫巧:多列等高
前端笔记

CSS布局奇技淫巧:多列等高

什么是等高布局? 先来看一个案例: 上图中的页面的主体内容是两列结构,左列是用来导航的,右列是用来显示内容的。我们看到它们有一个共同的边框,中间还有一条分隔线,左右两列的高度都是不固定的。这种情况下...

-- 阅读全文 --
了解并使用CSS中的 rem 单位
前端笔记

了解并使用CSS中的 rem 单位

在 SitePoint 上有几篇是以 CSS 单位为主题的文章(比如:CSS 长度单位一览, CSS 3 中新的文字大小单位, and CSS 中 em 单位的作用) 今天我们深度了解一下 rem 单位,这个单位目前已经得到了优秀浏览器的支持,...

-- 阅读全文 --
CSS单词换行and断词,你真的完全了解吗
前端笔记

CSS单词换行and断词,你真的完全了解吗

背景 某天老板在群里反馈,英文单词为什么被截断了? 很显然,这是我们前端的锅,自行背锅。这个问题太简单了,css里加两行属性,分分钟搞定。 word-break: keep-all; word-wrap: break-word; 开心的提交...

-- 阅读全文 --
css3 media媒体查询器用法总结
前端笔记

css3 media媒体查询器用法总结

准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: <name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal...

-- 阅读全文 --
顶部 底部