CSS
文章平均质量分 66
安静的对折
这个作者很懒,什么都没留下…
展开
-
css中圣杯布局
圣杯布局就是左右两边的图片保持不变,中间的搜索框因浏览器的大小改变而改变,典型案例的如天猫页面搜索框,如图首先我们设置一个父盒子包含三个小盒子 并给父盒子设置样式,高度为100px,上下padding为0,左右padding为200px.box { padding: 0 200px; height: 100px;原创 2016-08-31 22:25:38 · 634 阅读 · 0 评论 -
CSS三大特性之优先级
优先级的顺序:行内样式>id选择器>类选择器>标签选择器>*通配符选择器>继承有点晕,先看代码,例如有如下代码,运行后的字体颜色为红色,可以从行内样式依次进行屏蔽,就可以发现样式的优先级如上所述 * { /*通配符选择器*/ color: pink; } b原创 2016-08-30 21:51:57 · 772 阅读 · 0 评论 -
CSS中行高的继承和单位之间的关系
我们知道行高是可以继承的并且行高的单位有四种情况。1具体像素值 如:line-height: 16px;2 emem是指当前标签设置的字体大小,比如当前标签字体大小是16px,那么2em = 32px;3 %%与em一样都是以当前标签设置的字体大小为基准,比如当前标签字体大小是16px,那么line-height: 200%; 则字体大小为32px原创 2016-08-31 21:40:33 · 2821 阅读 · 0 评论 -
CSS中清除浮动的几种方式
前面我们说了浮动后的元素会影响后面的元素,在进行页面布局的时我们使用了浮动后,会给我们带来很大的困扰,那么现在来说说清除浮动的几种的方法1、使用额外的标签法,这也是W3C上面使用的方法在浮动的盒子之下再放一个div标签,使用clear:both来清除浮动, * { margin: 0;原创 2016-08-31 21:52:57 · 1908 阅读 · 0 评论 -
CSS三大特性之继承性
CSS有三大特性,分别是继承性,层叠性,优先级,这里讲解继承性继承性是指子元素可以继承父元素的属性,例如下面的代码,div中包含2个p标签,1一个span标签,当给div设置字体颜色为红色时,他的子标签会继承父元素的属性,因而会显示红色。 div { color: red; }原创 2016-08-25 23:50:17 · 24581 阅读 · 3 评论 -
CSS三大特性之层叠性
CSS三大特性之二层叠性,什么是层叠行,层叠性就是浏览器处理冲突的一个特性,如果一个属性通过多个选择器设置到同一个元素上面,那么这个时候就会只有一个选择器起作用,而其他的选择器都将背层叠掉,前提是选择器的权重一样,也就是说这些选择器的优先级相同,后面的博客会讲优先级,这里先考虑优先级相同。 有如下代码,先给body设置颜色为红色,然后再给div设置为绿色,最后给h2设置蓝原创 2016-08-28 21:57:08 · 1743 阅读 · 1 评论 -
CSS中padding的特殊性
通常我们都知道设置padding值会改变盒子的大小,现在就来说说,在什么情况下,设置padding不会改变盒子的大小。 当一个大盒子包含一个小盒子,并且大小盒子都是块级元素,而且小盒子的宽度是继承大盒子的话,那么设置小盒子的padding-left不会改变小盒子的大小。 .one { width:原创 2016-08-30 23:24:21 · 506 阅读 · 0 评论 -
CSS中margin的两种现象
margin设置两个标签边框之间的距离,但是会有两种现象:1、margin外边距的合并现象 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后取值较大的那个 .one { width: 2原创 2016-08-31 21:28:13 · 546 阅读 · 0 评论 -
CSS中浮动的特点
我们在给标签设置浮动后,会有一下几个特点1浮动会脱离标准流 如果一个元素按照正常的标准流来显示,会在html中所属的位置上占位,后面的元素会紧跟着它,但是浮动脱离了标准流,以后我们在看到浮动的元素之后,不能以正常的标准流里进行判断2浮动的元素会影响下面的元素,不会影响上面的元素 * {原创 2016-08-31 21:49:02 · 5584 阅读 · 0 评论 -
CSS中position定位
在我们布局的时候,我们会经常使用到position属性,它规定了元素定位的类型,元素的位置通过 "left", "top", "right" 以及 "bottom"属性进行确定。下面说一下它常用的三种定位机制 1、 absolute 绝对定位 下面代码有三个盒子,每个盒子的宽高都是100px,给第三个盒子设置绝对定位,并距离body左边框20px,body顶部边框20px,原创 2016-08-31 22:00:23 · 428 阅读 · 0 评论 -
CSS中元素隐藏的几种方式
说一说CSS中关于元素隐藏的几个小例子1、overflow:hidden将超出部分隐藏 .one { width: 300px; height: 150px; background: pink; } 第一最好不相见,如此便原创 2016-08-31 22:07:12 · 2446 阅读 · 0 评论 -
CSS中子绝父相布局
如果我们要将hot图片放到下图的位置,我们该怎么实现?首先我们来进行布局,用一个div包括一个a标签和img标签,并给a标签设置样式,如下代码: Document * { margin: 0; padding: 0; } .hot a {原创 2016-08-31 22:12:01 · 49223 阅读 · 8 评论 -
CSS中易迅网三角形的制作
购物网站上的三角形非常常见,那么我们该如何实现呢,比如我们要实现易迅网上那种倒三角,如下图首先如果一个盒子我们把它的宽高都设置为0,边框分别设置10个像素不同的颜色,我们看看会出现什么情况? div { width: 0; height: 0; border-t原创 2016-08-31 22:18:15 · 528 阅读 · 0 评论 -
css中淘宝网的更多三角制作
前面说了易迅三角的实现方法,现在来说说另外一个三角-淘宝三角,如下图所示淘宝三角形该怎么实现呢?肯定是需要两个三角形来层叠在一起的,只要进行如下图的层叠这个淘宝三角就出来了。代码如下:同样需要使用子绝父相的方法来进行定位,好让两个三角形层叠在一起 Document .one { positi原创 2016-08-31 22:22:03 · 908 阅读 · 0 评论 -
css样式,中间文字,两边横线
在项目中遇到过中间文字,两边横线的布局,如下图:两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制。html 产品清单 css .order { height: 60px; line-height: 60px; text-align: center;} .or原创 2017-04-10 18:30:23 · 38314 阅读 · 0 评论