CSS
关注
分享
扫一扫
绵羊万
每天多一点点！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS常用伪类使用详解
首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after1.用于链接的几个伪类元素:lin...原创 2018-08-10 17:20:12 · 12556 阅读 · 1 评论 -
background属性详解
background属性详解background属性主要由以下5个属性组成，background-color:：规定要使用的背景颜色background-image：规定要使用的背景图像background-repeat：规定背景图像的平铺方式（取值可为no-repeat, repeat-x, repeat-y, 默认值是沿xy方向均平铺）background-position...原创 2018-08-07 20:51:42 · 2331 阅读 · 0 评论 -
CSS的flex布局看完这篇你就懂了
我们之前已经学过一些布局模型，比如说浮动，绝对定位等等，但是这些布局方式一是不够简洁，而是使用的范围确实是太窄了。flex模型拥有比较多的属性，来设置多样的布局方式，接下来我们就详细介绍各种属性对布局的改变，最后再对属性做一个汇总先看一下flex的基本模型，如下图所示：container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布...原创 2018-08-12 15:00:22 · 48358 阅读 · 8 评论 -
【CSS3】transition和animation动画
CSS3的动画属性是我们一定要掌握的属性，能大大增加我们页面表现力。有很多同学可能会说我掌握了canvas就可以了撒！事实上，有很多地方，我们可以用transition和animation来实现动画效果，这样会简单很多，如加载页面的各种不同的样式，轮盘转动（就是网易云音乐那样的样式），所以让我们来了解一下把！！原创 2018-08-12 19:08:37 · 6077 阅读 · 0 评论 -
retina 显示屏详细理解
关键词如果我们去苹果的官网查看 iPhone 7的介绍，可以看到其显示屏介绍如下：我们以 7 plus 为例抽取如下几个关键词（这些关键词跟我们今天要说的内容都息息相关）：Retina HD 显示屏 5.5 英寸 1920 x 1080 像素分辨率 401 ppi下面我们再来一一详细谈论这些关键词。我们先从第二个说起，因为第一个的解释需要用到下面的一些关键词。5.5 英...转载 2018-08-12 20:39:57 · 8550 阅读 · 0 评论 -
响应式布局详解
响应式布局的目的：为移动设备提供更好的体验，用技术使网页适应从小到大不同分辨率的屏幕有一句话对响应式布局的形容非常贴切：content like water。1.viewpointviewpoint：屏幕上用于显示网页的一块区域（可能比浏览器的视区要宽，也可能要窄）viewpoint理论移动设备上的viewpoint可分为：1）layout viewpoint （如显示器的宽度...原创 2018-08-12 20:42:52 · 1076 阅读 · 0 评论 -
CSS居中方案
1.水平居中1.1 行内元素或类行内元素的水平居中在文本，链接，图像，等display为inline， inline-block， inline-table， inline-flex的父类元素中直接使用text-align:center;即可如下图所示：<html><head><style type="text/css">h1 {tex...原创 2018-08-13 11:14:31 · 366 阅读 · 0 评论 -
<i>元素创建图标的三种方法
1.简单粗暴型直接设置<i>元素为inline-block，然后为行内级框设置大小，接着直接把图像放在这个框里面，然后调整位置和图片大小即可。<!DOCTYPE html><html><head><style>.icon{display:inline-block;width:50px;height:50px;ba...原创 2018-08-08 17:51:56 · 14671 阅读 · 0 评论 -
CSS容器按比例缩放
常见的容器的宽高比例是16：9或者是4：3，比如说一张图片，我们只设置宽和高中的任意一个值，另外一个值就会根据原来图片的比例自动进行缩放，使得调整后的图片仍然保持与原图片相同的比例。上面的方式都是在知道宽或者高的情况下，如果宽和高都不知道的情况下，如何保证容器按比例缩放呢？方法如下所示：.container{ height: 0; padding-bottom: 56...原创 2018-08-13 14:53:44 · 3355 阅读 · 0 评论 -
设置半透明遮罩背景
半透明遮罩背景常用于弹窗的背景如下所示：代码如下所示：.overlay { top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: 4000; position:fixed;}小结（非常重要）：首先是fixed固定定位...原创 2018-08-13 15:40:21 · 1721 阅读 · 0 评论 -
CSS中1px分割线处理
1. 1px 边框变粗问题截图如下（iPhone 6截图）：如果我们把上图与我们手机系统上的 1px 边框进行对比，如下图：我们会发现，上面两个上下线条，下线条的粗细才是正确的，上线条就显得有点粗了。但是上线条我们是用纯正的 1px border生成的，而下线条我们实际是采用transform压缩了1px高度的一半模拟实现的，也就相当于 0.5px 的高度了。为什么会这样...转载 2018-08-13 15:52:52 · 4899 阅读 · 0 评论 -
用::before或者::after来生成箭头
1.用::before或者::after来生成箭头原理如图所示：我们可以利用::before和::after生成一个正方形框（用边框即可），接着将框旋转45度就是箭头的形状了！具体代码如下所示：.icon-share { ..... /*这里的点点点代表具体情况，具体属性*/ position: relative;}.icon-ba...原创 2018-08-13 16:16:02 · 6865 阅读 · 0 评论 -
图标水平排列（间隙相同）的实现
问题描述：思路：我们可以用flex布局，对justify-content:space-between;稍作改进，即可实现上图所示的效果！！代码如下所示：<ul class="share-list"> <li class="share-item"></li> <li class="share-item"&原创 2018-08-13 16:42:09 · 1004 阅读 · 0 评论 -
教你来使用雪碧图（CSS sprite）
什么是雪碧图？雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的...原创 2018-08-07 17:12:29 · 66617 阅读 · 7 评论 -
完全理解line-height
1.行内级元素的高度行盒的高度由其内容最高的一个决定。如果是都是纯 inline 元素，则其高度由最高的 line-height 计算值决定；而如果包括了 inline-block，则 inline-block 的 margin（上下），border（上下），padding（上下），height 都会影响整体行盒的高度。 转载于imweb：具体地址为：行盒高度...转载 2018-08-07 16:59:35 · 564 阅读 · 0 评论 -
看完绝对懂的IFC
1.IFC是啥？IFC（inline formatting context）：行内格式化上下文。与块级元素形成对比，当元素的 CSS 属性 display 的计算值为 inline，inline-block，inline-table，inline-flex 或 inline-grid 时，它是行内级元素。视觉上它将内容与其它行内级元素排列为一行，直到该行被占满然后换行。典型的如段落内容，文...原创 2018-08-07 16:55:04 · 9228 阅读 · 0 评论 -
CSS常用伪元素使用详解
首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after1.::first-letter选...原创 2018-08-10 20:30:19 · 1383 阅读 · 0 评论 -
元素的隐藏和显示
1.display:none<!DOCTYPE html><html><head><style>.aaa,.bbb,.ccc{background-color:red;}</style></head><body><div class="aaa"&g原创 2018-08-10 21:01:31 · 461 阅读 · 0 评论 -
CSS计数器的使用
很多时候，我们在使用有序列表的时候，自带的序号并不是我们想要的。这是我们可能像自己构造一些有顺序的序号出来，就可以用到counter计数器了！！我们以下图这样一个列表为例：<html><head><style type="text/css">body {counter-reset:section;}h1 {counter-reset:subse...原创 2018-08-10 22:10:19 · 705 阅读 · 0 评论 -
解决行内元素因回车换行产生的空白符（水平间隙）的两种方法
由于产生的空白符，水平间隙是由于空格和换行造成的（元素节点有文本节点，在缩进代码时会占据宽度）！如下图所示：1.代码不换行根据产生间隙的原理，代码不换行即可解决问题，但是这会导致代码的可读性大大降低，这是十分不推荐的（毕竟代码是给人看的）！！2.设置font-size1）在父类元素中设置font-size为0，这样就是使父类元素中文本就不会占据宽度！！2）重置父类元素的...原创 2018-08-10 22:33:35 · 2354 阅读 · 0 评论 -
CSS双飞翼布局和圣杯布局margin-left:-100%;等内容理解
网上搜索双飞翼布局和圣杯布局都会有许多不错的文章，在这里给大家推荐一篇博客双飞翼布局和圣杯布局解析！！看完之后，我来补充一点细节的东西！！！如何理解margin-left:-100%及margin-left:300px；看完这个图解，上面的问题就应该没问题了！！具体的双飞翼布局方法请参考上面的文章！！ 本博客由博主原创，如需转载需说明出处！谢谢支持！...原创 2018-08-11 15:00:42 · 2829 阅读 · 0 评论 -
clearfix清除浮动中display:table;的理解
清除浮动除了常用的clear:both;之外，还有一种就是利用重置样式表中的clearfix具体如下：.clearfix::after{content:"";diaplay:table;clear:both;}这里解析一下display:table;设置为display:table; 没有内容也会自成一行设置为display:block;没有内容不会自成一行...原创 2018-08-11 15:35:02 · 5768 阅读 · 0 评论 -
position的一些不一样的理解
position的取值有4个，分别为：static, relative, absolute, fixed;默认为static，这个没什么问题！！relative：相对自己的位置偏移absolute:相对于最近的非static的父类元素进行定位fixed:相对于浏览器视窗定位 绝对定位元素：如果position不是static或者relative，那就是绝对定位元素 ...原创 2018-08-11 15:50:34 · 335 阅读 · 0 评论 -
CSS样式问题
1.样式表的优先级在用CSS样式去修饰HTML元素时，大致有以下三种方法可供我们使用！！行内样式：如<p class="para" style="color: red;">测试</p>嵌入样式： 在<head>...</head>间引入元素<style>...<style>，如下所示，截取片原创 2018-08-07 09:31:34 · 431 阅读 · 0 评论 -
盒模型的box-sizing
1.box-sizing属性 box-sizing属性有两个取值：下面逐一探讨：（1）box-sizing:border-box;当取值为border-box时，该元素的宽高如下图所示：1）为元素设定的宽度和高度决定了元素的边框盒。2）就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。3）通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽...原创 2018-08-07 10:04:37 · 465 阅读 · 0 评论 -
盒模型的box-shadow属性
1.box-shadow属性在开发过程中，我们经常会对一些边框进行一些处理，而box-shadow是边框经常会用到的一个样式！box-shadow的属性可以简写为：box-shadow: h-shadow v-shadow blur spread color inset ;h-shadow:水平阴影位置；v-shadow:垂直阴影位置；blur：模糊距离；sp...原创 2018-08-07 10:47:25 · 1002 阅读 · 0 评论 -
vertical-align超级详细简单易懂
行内级元素垂直对齐方式必知的概念中线、基线、顶线、底线中线（middle）、基线（baseline）、顶线（text-top、底线（text-bottom））是文本的几个基本线，其对应位置如下图：基线（base line）：小写英文字母`x`的下端沿。 中线（middle line）：小写英文字母`x`的中间。 顶线（text-top）：父元素 font-size 大小所组...转载 2018-08-07 11:15:15 · 692 阅读 · 0 评论 -
看完绝对懂的BFC
1.BFC的相关概念 BFC（block formatting context）：块级格式化上下文！一个独立的布局环境，一种布局规则！其中的元素布局不受外界的影响！在一个BFC中，块盒和行盒都会垂直的沿着父元素的边框排列！即子元素的margin-left会贴着父元素的border-left排列。事实上，<html>标签就创建了一个BFC，对于块元素来说，在正常的流中，就是垂直的沿着...原创 2018-08-07 16:45:01 · 402 阅读 · 0 评论 -
说说background-size:cover;与background-size:contain的区别
1.background-size:cover官方background-size:cover;的解释是这个样子的，截图如下所示：解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。 2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。下面举一个栗子来说明这种情况：首先原始的背景图片是这样的。而设置b...原创 2018-09-04 21:09:08 · 32976 阅读 · 3 评论