随笔分类 -  CSS

1 2 下一页
CSS - div中的文字不换行，超出宽度就用省略号表示
摘要：问题 过多的文字会把盒子撑开，造成布局错乱。 解决 效果 阅读全文
posted @ 2019-03-13 13:28 Rocin 阅读(1904) 评论(0) 推荐(0)
CSS - div居中在屏幕中(水平居中 + 垂直居中)
摘要：方法一代码 在新Tab打开 方法二代码 阅读全文
posted @ 2019-03-11 15:31 Rocin 阅读(5767) 评论(0) 推荐(0)
CSS - 伪类和伪元素
摘要：1. CSS3中 :Pseudo classes 伪类 ::Pseudo elements 伪元素 2. 为什么叫伪类和伪元素？ 伪类的效果可以通过添加 一个实际的类 来达到，而伪元素的效果则需要通过添加 一个实际的元素标签 才能达到，但它们并不是真正的类或标签。 3. 伪类和伪元素可以使用“子绝父 阅读全文
posted @ 2018-05-14 09:37 Rocin 阅读(117) 评论(0) 推荐(0)
CSS - icon图标(icon font)
摘要：1. 概念 这个小红点是图标， 图标在CSS中实际上是字体。 2. 为什么出现本质是字体的图标? 2.1 图片增加了总文件的大小。 2.2 图片增加了额外的http请求，大大降低网页的性能。 2.3 图片不能很多地进行缩放，因为图片放大和缩小会失真。 3. 字体图标的优点，结合图片和文字的特性 3. 阅读全文
posted @ 2018-05-12 12:57 Rocin 阅读(2838) 评论(0) 推荐(0)
CSS - 滑动门技术
摘要：1. 概念： 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。 1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 1.3 最常见于各种导航栏的滑动门。 2. 原理： 2.1 利用CSS精灵Sprite（主要是背景位置posi 阅读全文
posted @ 2018-05-12 09:16 Rocin 阅读(6415) 评论(1) 推荐(0)
CSS - 去除图片img底侧空白缝隙
摘要：1. 图片底部有空隙 2. 原理 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐(即默认vertical align: baseline)。这样会造成一个问题，就是图片底侧会有一个空白缝隙。 3. 解决方法 3.1 方法一：vertical align:top | bottom | mid 阅读全文
posted @ 2018-05-11 20:38 Rocin 阅读(4151) 评论(0) 推荐(0)
CSS - 定位(position)，难点
摘要：元素的定位属性主要包括定位模式和边偏移两部分。 1. 边偏移 | 边偏移属性 | 描述 | | | | | top | 顶端偏移量，定义元素相对于其父元素上边线的距离 | | bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 | | left | 左侧偏移量，定义元素相对于其父元素左 阅读全文
posted @ 2018-05-10 22:58 Rocin 阅读(473) 评论(0) 推荐(0)
CSS - 布局流程
摘要：一、为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下： “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 1、确定页面的版心（可视区）。例如mi.com的 .container 2 阅读全文
posted @ 2018-05-09 09:31 Rocin 阅读(571) 评论(0) 推荐(0)
CSS - 浮动
摘要：1. 使设置了float的元素脱离标准流（normal flow）的控制，不占位置，float后影响原本标准流的元素的位置。个人理解，标准流为flow 1，float后的流为flow 2，就像PS里面的图层1，图层2 2. 使多个div一行内显示 3. 最早用来控制图片，实现文字环绕图片的效果（如百 阅读全文
posted @ 2018-05-09 08:38 Rocin 阅读(199) 评论(0) 推荐(0)
CSS - 外边距合并
摘要：1. 外边距合并 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin bottom，下面的元素有上外边距margin top，则他们之间的垂直间距不是margin bottom与margin top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷) 阅读全文
posted @ 2018-05-08 23:22 Rocin 阅读(325) 评论(0) 推荐(0)
CSS - 样式初始化
摘要：``` /*======== 全局 ========*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0; padding:0; } body { font-size:12px; color:#666; f... 阅读全文
posted @ 2018-05-08 23:18 Rocin 阅读(192) 评论(0) 推荐(0)
CSS - 插入图片img和背景图片
摘要：1. img插入图片，用的最多，比如产品展示类 2. 背景图片一般用于小图标背景或者超大背景图片 阅读全文
posted @ 2018-05-08 23:17 Rocin 阅读(16981) 评论(0) 推荐(0)
CSS - 居中
摘要：1. 文字水平居中是 text align: center 2. 盒子水平居中 左右margin 改为 auto 2.1 必须是块级元素 2.2 盒子必须制定了width 3. 让定位position的盒子水平居中 原理和例子1看http://www.cnblogs.com/allen2333/p/ 阅读全文
posted @ 2018-05-08 23:08 Rocin 阅读(222) 评论(0) 推荐(0)
CSS - 文字垂直居中
摘要：利用line height（行高） 和height一致 阅读全文
posted @ 2018-05-07 22:29 Rocin 阅读(127) 评论(0) 推荐(0)
CSS - 表格细线边框
摘要：通过 1. border collapse: collapse 2. cellpadding="0", cellspacing= "0" 实现 阅读全文
posted @ 2018-05-07 19:51 Rocin 阅读(199) 评论(0) 推荐(0)
CSS - 背景半透明
摘要：就一句话 background: rgba(0, 0, 0, .2); 阅读全文
posted @ 2018-05-07 19:33 Rocin 阅读(2721) 评论(0) 推荐(0)
CSS - 精灵Sprite
摘要：1. CSS精灵是一种处理网页背景图像的方式。 2. 它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。 3. 有效地减少服务器接受和发送请求的次数，提高页面的加载速度。 "height 阅读全文
posted @ 2018-05-07 19:22 Rocin 阅读(201) 评论(0) 推荐(0)
CSS - 权重，样式优先级
摘要：关于CSS权重，一套计算公式来去计算，就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准。 遇到样式应用问题，计算一下权重就知道优先级。 具体规范入如下： specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左 阅读全文
posted @ 2018-05-07 16:37 Rocin 阅读(820) 评论(0) 推荐(0)
CSS - px、em、%
摘要：px（像素）、em、% 百分比 1. em 1.1 本元素给定字体的 font size 值，如果元素的 font size 为 14px ，那么 1em = 14px；如果 font size 为 18px，那么 1em = 18px。 实现段落首行缩进 24px（也就是两个字体大小的距离） 1. 阅读全文
posted @ 2018-04-16 20:49 Rocin 阅读(309) 评论(0) 推荐(0)
CSS - 布局模型
摘要：1. 布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 2. 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。 3. 布局模型是本质，CSS 布局模板是外在的表现形式。 在网页中，元素有三种布局模型： 1. 流动模型（Flow） 2. 浮动模型 阅读全文
posted @ 2018-04-16 18:06 Rocin 阅读(191) 评论(0) 推荐(0)

1 2 下一页