CSS
huyao_road
20多岁,有30年Web开发经验。
展开
-
CSS样式引入
我们已经学习了行内、内嵌和外链三种方式来引入我们的 CSS 样式,这里我们再深入探讨下。行内方式通过给元素添加 style 属性来添加样式,如下:<div style="color: red;">颜色为红色</div><div style="color: red;">颜色为红色</div>它有一个很明显的缺点:只能改变当前标签的样式,如果想要多个...转载 2018-04-16 16:29:59 · 350 阅读 · 0 评论 -
使用stylus选择元素列表的中后n个并为他们单独设定样式
在开发这种类似表格的页面时我遇到一个需求,那就是表格中每一个元素要有边框,但是最底下那一排元素不需要底部边框,但是表格每行个数不定,可能是3个可能是4个,我便用stylus写了一个函数。具体实现是这样的:对于每一个 li 即城市名,它有一个右边框,一个下边框。随意这会让最右边多一排右边框,但是用了border.css(解决1像素边框问题的css文件)后右边那个是看不出来的,我们就主要解...原创 2018-09-25 14:09:17 · 4081 阅读 · 0 评论 -
浮动与清除浮动
使用方法: 只需要在需要清楚浮动的div上添加类名 class="clearfix"即可例子:<div class="someclass clearfix"> <!-- 一些内容 --></div>CSS.clearfix::after { content: ""; display: block; heigh..转载 2018-08-15 19:29:04 · 293 阅读 · 0 评论 -
js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?
1. css加载不会阻塞DOM树的解析 2. css加载会阻塞DOM树的渲染 3. css加载会阻塞后面js语句的执行因此,为了避免让用户看到长时间的白屏时间,我们应该尽可能的提高css加载速度,比如可以使用以下几种方法: 1.使用CDN(因为CDN会根据你的网络状况,替你挑选最近的一个具有缓存内容的节点为你提供资源,因此可以减少加载时间) 2.对css进行压缩(可以用很多打...转载 2018-07-30 10:36:13 · 1052 阅读 · 0 评论 -
让图片和文字在一行中垂直居中对齐的方法
如果一个盒子有2列或者3列排列,有图片,有文字,怎么实现文字始终对齐图片的中间位置呢?方法就是使用vertical-align:middle;也就是给一列都使用这个属性,需要注意的是:这个属性只对行内元素起作用,如果不是行内元素要加上diaplay:inline-block;...原创 2018-07-23 19:10:41 · 6769 阅读 · 0 评论 -
css鼠标点击的五种状态
1、dom:link{color:#fff} 未访问时的状态(鼠标点击前显示的状态) 2、dom:hover{color:#fff} 鼠标悬停时的状态 3、dom:visited{color:#fff} 已访问过的状态(鼠标点击后的状态) 4、dom:active{color:#fff} 鼠标点击时的状态 5、a:focus{color:#fff} 点击后鼠标移开保持...原创 2018-07-23 11:28:05 · 4225 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号 …
单行文本的溢出显示省略号overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果图:多行文本溢出display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;效果如图:适用范围:因使用了WebKit的CSS...转载 2018-05-24 23:44:33 · 21959 阅读 · 1 评论 -
如何在一个div中使其子div居中的5种方式
demo地址-codepen 第一种基于绝对定位,要求有固定的宽高main{ position: absolute; top: 50%; left: 50%; margin-top: -5em; margin-left: -9em; width: 18em; height: 10em;}使用calc方法对第一种进行简化main{...原创 2018-05-28 11:03:21 · 36943 阅读 · 3 评论 -
页面顶部元素与body共享margin导致出现滚动条
body里面有个div,html和body高度都是100%,margin和padding都是0,内部div设置了一个margin-top,body就出现了滚动条。<!DOCTYPE html><html><head> <title></title> <style type="text/css"> html,bo原创 2018-04-25 22:56:34 · 4806 阅读 · 0 评论 -
CSS值的计算
元素的样式可能来自三个部分:继承自父级元素的样式元素的浏览器默认样式元素自己声明的样式而最终应用的样式就是这三个部分通过一套复杂的计算体系得到的。应用值我们把最终应用的样式称之为应用值(used value)。如果元素本身声明了样式,那么我们的应用值将采用元素声明的样式,这点我们没有什么问题了。但是如果元素没有声明该样式呢,它究竟用什么值来当做最终的应用值?这就得回到我们的 CSS 属性定义了。每...转载 2018-04-18 23:01:24 · 724 阅读 · 0 评论 -
CSS 颜色
颜色从哪来?一般来说,你要装修房子的话,得先找装修公司设计个最终效果图,然后交给装修师傅,让他按照这个图来实现效果。同样你做网页的时候,设计师也会给你一个最终的效果图,这个效果图可以是图片,也可以是 psd 的原稿,甚至是 sketch 原稿。那么我们的文字或背景色就来自这个效果图。这样我们就得需要一个取色工具来帮助我们从效果图上吸取所需取色。这里推荐几个(这种工具一搜一大把):马...转载 2018-04-18 23:01:37 · 275 阅读 · 0 评论 -
CSS单位
CSS 中的单位有很多,这里主要介绍目前常用的及未来必备的几个单位。pxpx 是 pixels(像素)的缩写,是一种绝对单位,用于屏幕显示器上,传统上一个像素对应于计算机屏幕上的一个点,而对于高清屏则对应更多。任何现代显示屏,不管是手机,平板,笔记本还是电视都是由成千上万的像素组成的,所以我们可以使用这些像素来定义长度。另外 CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1p...转载 2018-04-16 16:41:59 · 392 阅读 · 0 评论 -
选择器指南
选择器是 CSS 中一个非常重要的知识块。总得来说,大体分为五大类:基本选择器,关系选择器,伪类选择器,伪元素选择器,属性选择器。这里先补充下属性选择器。属性选择器前面我们讲元素的时候已经说过,可以用一些属性来表示元素的一些特征。现在我们就可以利用这些特征来选中该元素,如类选择器及id选择器,其实都是利用属性 class 和 id 的值构造起来的选择器,这可以视作 class 和 id 属性的一种...转载 2018-04-16 16:39:18 · 107 阅读 · 0 评论 -
display: inline-block与float:left
转载自:http://blog.sina.com.cn/s/blog_5f39af320101qckt.html 什么时候使用inline-block,什么时候使用float什么时候使用,取决于你的设计稿跟解决方法。如果你需要文字环绕容器,那浮动是不二选择。如果你需要居中对齐元素,inline-block是个好选择。最终,这可以归结为float跟inline-block的两种属性作...转载 2018-09-25 16:05:16 · 597 阅读 · 0 评论