摘要: 固定布局 为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。 这种布局具有很强的稳定性与可控性,也没有兼容性问题,但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条,如果大于这个宽度则会留下空白。 流式布局(Liquid Layout) 为网页 阅读全文
posted @ 2019-03-06 11:18 sugar_coffee 阅读(12565) 评论(0) 推荐(1) 编辑
摘要: 在项目开发的过程中,我们会经常用到一些图标。但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢。所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失真,也大大减少了请求数量,解决了图片占用资源的问题,非常好用。 IcoMoon 的使用: 1. 直接 阅读全文
posted @ 2019-03-05 10:17 sugar_coffee 阅读(626) 评论(0) 推荐(0) 编辑
摘要: 元素水平居中: 1. 行内元素(如文本、图片等 display 为 inline 或 inline-block) 给其父元素设置 text-align: center 2. 块元素(width 为定值) 通过设置 margin: auto; (此方法对浮动元素或绝对定位元素无效) 3. 块元素做绝对 阅读全文
posted @ 2019-02-28 14:36 sugar_coffee 阅读(509) 评论(0) 推荐(0) 编辑
摘要: 在 web 页面布局中,有三种控制元素版式布局的模型: 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局。 浮动流(Float) 在浮动布局中,元素首先按照普通流的位置呈现,然后根据浮动的方向向左边或右边偏移。 定位流(Position) 在绝对定位布局中,元素会整体 阅读全文
posted @ 2019-02-26 21:38 sugar_coffee 阅读(166) 评论(0) 推荐(0) 编辑
摘要: 我们都知道,行内元素不能够定义宽度和高度,但 img,input,button等标签作为行内元素却可以定义宽高,为什么呢?这就牵扯到了置换元素和非置换元素。 置换元素: w3c官方解释:“An element that is outside the scope of the CSS formatte 阅读全文
posted @ 2019-02-26 10:47 sugar_coffee 阅读(1948) 评论(0) 推荐(0) 编辑
摘要: 在 HTML 中,提供给我们的默认字体有很多,但因为在电脑上安装的字体有限,所以很多时候不能呈现出和设计稿上一样的效果,这时候我们就需要使用 css3 提供的 @font-face 来实现个性化字体了。 css 样式定义: font-family 为自定义的字体名称,必须; src 字体文件的引入路 阅读全文
posted @ 2019-02-25 16:12 sugar_coffee 阅读(4103) 评论(0) 推荐(0) 编辑
摘要: CSS Sprite 也叫CSS精灵,该方法是将多个小图标等图片集成到一张大图上,然后利用 background-image 和background-position 两个属性进行背景定位来控制需要显示的部分。 比如在有很多小图片、小图标的网页上,每个小图标都单独用一张图片, 页面加载的时候,每张图 阅读全文
posted @ 2019-02-24 21:47 sugar_coffee 阅读(310) 评论(0) 推荐(0) 编辑
摘要: 在网页布局中引入图片,最常用的两个就是 img 标签和 background 属性了。但何时使用 img 标签,何时使用 backround 背景图像呢? <img> 标签定义 HTML 页面中的图像。从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是 阅读全文
posted @ 2019-02-22 09:17 sugar_coffee 阅读(3615) 评论(0) 推荐(1) 编辑
摘要: 话不多说,直接上代码: 注意: 1、WebKit, Blink, Edge 浏览器等需要带上 -webkit- 前缀,且是双冒号,写的时候还要带上input 2、针对火狐浏览器则有两种写法,一种是针对低版本的,一种是针对高版本的,二者都需要带上-moz-前缀。要点1:火狐低版本的使用冒号(:),而高 阅读全文
posted @ 2019-02-21 21:53 sugar_coffee 阅读(2572) 评论(0) 推荐(0) 编辑
摘要: 单行文本溢出显示省略号的实现方法: 多行显示省略号的实现方法: css 限制显示文本的行数,超出不显示 因为使用了 webkit 的 css 扩展属性,只有-webkit内核才有作用,移动端浏览器绝大部分是 WebKit 内核的,所以该方法也适用于移动端。 利用绝对定位和 padding 首先在包含 阅读全文
posted @ 2019-02-19 14:09 sugar_coffee 阅读(249) 评论(0) 推荐(0) 编辑