CSS
文章平均质量分 59
香柠檬YU
这个作者很懒,什么都没留下…
展开
-
CSS中的position的属性
CSS position属性有4种不同类型的定位:【1】static:这是默认的定位类型,元素框正常生成,但是使用这个属性的时候,top,right,bottom,left都不能进行使用。一般来说,如果我们使用border的属性的话,就可以显示出一个长方形的框,它作为文档流的一部分。[文档流实际上指的就是文档中可显示对象在排列时候所占用的位置,也就是说一开始我们没有给它赋任何属性的时候,它原创 2016-12-14 16:39:43 · 338 阅读 · 0 评论 -
两种方式实现父布局中两列布局的自适应
这篇文章是用来介绍如果我们想要实现左侧宽度固定,右侧自适应的布局的话,可能会用到如下的方法。原创 2017-05-05 20:53:28 · 438 阅读 · 0 评论 -
width与max-width的区别
之前一直也都不太明白他们之间的应用,感觉他们之间的算是没有区别的(怎么可能!!!总不会无端端多一个属性吧),看了几次的概念也不知道他们的应用究竟在哪里,今天终于知道他们的区别了,动手试试看!!!width:表示的是元素的宽度,宽度已经被限定住了,就像是被框住了max-width:表示的是最大的元素的宽度,也就是说元素可以在0-max-width之间,可以有弹性的。接下来我们举个例子:原原创 2017-05-08 21:27:47 · 3219 阅读 · 1 评论 -
利用css将文字和图片水平垂直居中显示
无标题文档.text{ text-align:center; border:1px solid black; line-height:100px; height:100px; width:800px; margin-bottom:10px; } .img_wrap{ width: 800px; height: 300px; border: 1p原创 2017-05-05 20:23:00 · 396 阅读 · 0 评论 -
网页字体缩放样式:-webkit-text-size-adjust的用法
在Normalize.css看到了-webkit-text-size-adjust,以前也没有见过这个属性,所以我就在网上找了一点资料来记录一下,以防忘记! 中文版的chrome浏览器中的当将字体设置为小于12px的时候,chrome浏览器往往不会显示比12px还要小的字,因为该浏览器中默认的字体最小是12px,所以当你想设置为10px的时候,该浏览器页面中还是会显示的是原创 2017-04-13 19:39:12 · 2256 阅读 · 0 评论 -
display与visibility的区别
很多时候我们都会接触到这两个属性(display,visibility),特别是当我们想要隐藏一个元素或者显示一个函数的话,我们就会使用到上面提及到的属性。那当我们用来使用这两个属性来隐藏的时候,他们都能达到隐藏的效果,但是他们之间有什么不同呢?首先,如果我们要实现隐藏的目的的话,display属性应该设置为none:意思是没有该属性。visibility属性应该设置为hidden。我们先来看原创 2017-04-09 16:03:35 · 465 阅读 · 0 评论 -
css-------box-sizing
一般来说,我们说元素的总宽度是不包括它的边距(margin)的,而box-sizing这个属性就是设置了元素计算宽度的时候应该从哪个位置开始算起,它的默认值为content-box,也就是说对元素所设定的宽度会应用带钙元素的内容上,而填充和边框值会照常添加上去。如果把值设置为border-box,则设定的width值是内容,填充和边框的总宽度。首先,我们先来看看,以下这段代码产生出来的原创 2017-03-14 14:04:14 · 344 阅读 · 0 评论 -
css --关于背景图片显示不出来的情况
关于背景图片,有些时候它可以正常地显示出来,但是有时候它却不可以,那究竟是什么原因呢?今天我就是碰到了这个问题。解决这个问题之前我们首先应该知道块级元素和行内元素,块级元素一般来说是可以设置宽和高的以及其他的属性等等,但是行内元素是不可以设置宽高等属性的。块级元素和行内元素师取决于元素的类型,每一个元素都有自己的默认的类型。接下来我们给出代码:看这里原创 2017-03-23 13:06:47 · 18736 阅读 · 0 评论 -
浅谈display:flex
display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢?一、页面行排列布局像此图左右两个div一排显示可以用浮动的布局方式html部分css部分这种布局有两个缺点1.需要一个空div来清除浮动,当然也可以选用其他清除浮动的方法,但此处需要清除浮动才能不影响下面的布局。2.当.left,.right 的宽度是固定的,浏转载 2017-03-29 21:56:34 · 290 阅读 · 0 评论 -
渐进增强与优雅降级
渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上转载 2017-03-11 21:45:33 · 397 阅读 · 0 评论 -
css sprites(CSS 精灵):如何获取一张集成拼合图片上的其他图片
今天去国美网站访问的时候发现了很多张图片合成了一张图片,我就在想那我们怎么能获得每一个细小图标的引用呢?后来我看到了css sprite。根据百度资料上说:CSS sprites很多国内的人都叫css精灵的,是一种网页图片应用处理方式,它是允许你将一个页面设计到的所有零星的图片都包含在一张大的图中去,这样一来,当访问该页面的时候,载入的图片就不会像以前一幅一幅地慢慢地显示出来了。而且对于当前的原创 2017-03-20 20:48:05 · 4355 阅读 · 0 评论 -
CSS-position
我们先来看看position这个属性1.static(静态定位)它是position 的默认值,任意的position:static的元素是不会被特殊定位的。它表示的是出现的正常的流中(忽略了top,left,right,bottom或者是z-index的声明,如果使用了position:static的话,以上说的属性就是不会起作用的。)2.relative(相对定位):relative表原创 2017-03-19 12:38:28 · 289 阅读 · 0 评论 -
关于float浮动的注意事项
关于float属性,我们是用来定义元素在哪个方向浮动的,之前这个属性是用来应用于图像的,使文本可以围绕图像周围,不过在现在的css中,任何的元素都可以进行浮动的。浮动的元素都是生成一个块级而无论之前这个元素是什么元素。这个块级框实际上就是可以设置高度,宽度等属性的意思。如果是标签,如果我们应用了浮动的话,本来标签就是行内的元素是不可以设置大小的,它的宽度一般就是它的内容的宽度,高度也是内容的高度,原创 2017-03-19 20:30:48 · 2479 阅读 · 0 评论 -
伪类与伪元素
首先,阅读 w3c 对两者的定义:CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。伪类种类伪元素种类区别这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。转载 2017-03-17 21:42:57 · 217 阅读 · 0 评论 -
水平滑动的图片浏览器
以下是较为简单的水平滑动的图片浏览器,主要用CSS来实现的无标题文档.leng{width:500px;overflow:scroll;//如果图片满溢的话,就用滚动条来显示其他的内容。margin:auto;}.images{width:790px; /*关键在这里,因为将宽度设置为能够容纳所有图片的大小,滚动条才会实现水平滚动条*/m原创 2017-03-02 19:27:04 · 399 阅读 · 0 评论 -
CSS中外部样式与导入外部CSS样式文件的区别
1)外部样式是CSS样式中较为理想的一种形式。将CSS样式代码单独地放在一个独立的文件中,由页面进行调用,多个网页可以调用一个外部样式文件,因此可以实现代码的最大化使用及网站文件的最优化配置。一般是采用在上面的代码中,在标签中使用标签,可以将link指定为stylesheet样式,用href指明外部样式的文件的路径,我们平时只需要将所需的样式的编写在这个文件中就可以了。而且我们使用这种方式的原创 2017-01-25 22:08:53 · 7389 阅读 · 0 评论 -
如何使用CSS
CSS样式是由许多CSS规则组成的文件,规则是最小的CSS单位,规则定义一种或者多种样式的效果。每个规则标识它选择网页中的哪些部分,以及它对页面的该部分应用什么属性。网页链接到该CSS样式,就意味着浏览器需要下载该样式,并且当前显示网页时应用这些CSS样式规则。CSS文件可以与任意数量的网页文档链接,因此,CSS样式可以控制整个站点或它的一部分网页的外观。而且CSS可以和几种不同的标记语言进行原创 2017-01-23 22:19:53 · 912 阅读 · 0 评论 -
三栏布局——左右固定,中间自适应
之前有写过关于固定父布局,然后父布局内有是两列自适应。现在我们来看看三栏布局,当左右固定,中间的布适应是如何实现的。这里将介绍两种方法,一种是使用margin值,另一种是使用position绝对定位。首先我们来看第一种方法,下面是实现的代码:无标题文档body{ margin:0; padding:0; }.left{ width:200px; backgr原创 2017-07-12 20:20:10 · 426 阅读 · 0 评论