CSS
文章平均质量分 63
筱葭
这个作者很懒,什么都没留下…
展开
-
浅谈CSS等比例分割父级容器
以三等分为例: 方法一:浮动布局+百分比.parent{ width:600px; height:600px;} .child{ width:33.3%; height:100%; float:left;} 方法二:父元素display:table+ 子元素display:table原创 2017-03-15 17:18:59 · 1282 阅读 · 0 评论 -
浅谈CSS中line-height:200% | 2.0em | 2.0 的区别
父元素子元素① 父元素的行高为150%时,会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:150%时,子元素的行高等于16px * 150% = 24px。② 父元素的行高为1.5em时,会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:1.5em时,子元素的行高等于16px * 1.5em = 24px。③原创 2017-03-13 19:01:29 · 1685 阅读 · 0 评论 -
浅谈实现两个div并列的多种方法
方法一:float#div1{ width:50%; height:300px; background:blue; float:left;}#div2{ width:50%; height:300px; background:green; float:left;}方法二:display:table-cell#parent{ width:100%; di原创 2017-03-16 11:10:26 · 23296 阅读 · 1 评论 -
浅谈CSS单位px、pt、em和rem
1、emem实质是一个相对值,而非具体的数值,因此需要一个参考点,一般都是以的font-size为基准,也即body元素的任何子元素的em值都等于font-size设置的大小。由于em是相对于父元素计算的,因此多层嵌套情况下,每层都会从父元素继承em值,需要进行多次计算。HTML: CSS:body { font-size: 14px;原创 2017-04-13 21:56:20 · 1310 阅读 · 0 评论 -
浅谈CSS中的<li>之间的空白间隔问题
问题:有时候,我们需要将横向排列,而又为了能设置其宽度和高度,为其设置display:inline-block,相邻之间会出现8px的空白间隔,不是margin也不是padding。 demo * { margin:0; padding:0; } li { width:100px; height:100px; display:inli原创 2017-03-01 11:05:35 · 28665 阅读 · 2 评论 -
浅谈CSS的display属性
display可能的属性值:值描述none缺省值。像行内元素类型一样显示block 块类型。默认宽度为父元素宽度,可设置宽高,换行显示inline行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示inline-block默认宽度为内容宽度,可以设置宽高,同行显示原创 2017-02-28 20:15:23 · 609 阅读 · 0 评论 -
浅谈CSS伪类和伪元素及CSS3新增伪类
p:first-of-type 选择属于其父元素的首个元素的每个元素。p:last-of-type 选择属于其父元素的最后元素的每个元素。p:only-of-type 选择属于其父元素唯一的元素的每个元素。p:only-child 选择属于其父元素唯一的子元素的每个元素。p:nth-child(n) 选择属于其父元素的第n个子元素的每个元素。原创 2017-02-28 17:09:04 · 8726 阅读 · 0 评论 -
浅谈CSS自定义下拉列表的样式
HTML代码:请选择北京上海广州CSS代码:#container{ background:grey; width:300px; height:200px; padding:20px;}form div,form input{ width:236px; height:34px;}form div{ b原创 2016-12-18 21:00:50 · 20979 阅读 · 0 评论 -
浅谈CSS实现单、多行文本溢出时显示省略号
1、单行文本溢出:同时设置以下属性:width:*px;overflow: hidden;text-overflow:ellipsis; whitewhite-space: nowrap; 2、多行文本溢出:同时设置以下属性:width:*px;display:-webkit-box;overflow:hidden;-webkit-box-or原创 2016-12-18 21:51:32 · 720 阅读 · 0 评论 -
浅谈:nth-child和:nth-of-type
1、:nth-child(n)匹配属于其父元素的第n个子元素,不论元素的类型。n可以是数字、关键词或公式。1) n为数字时,n为大于0的整数;2) n为关键字时,odd表示偶数,等价于2n;even表示奇数,等价于2n + 1;3) n为公式 时,如:n + 4表示大于等于4,-n + 5表示小于等于5,3n表示3的倍数,3n + 1表示隔二取一等。 2、:nth-of原创 2017-04-13 20:01:18 · 416 阅读 · 0 评论 -
浅谈CSS3的box-sizing属性
box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。假如需要并排放置两个带边框的框,可通过将box-sizing设为"border-box",令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。 box-sizing:content-box | border-box默认值:content-box适用于:所有接受width和height的元素原创 2017-03-09 17:18:17 · 1973 阅读 · 0 评论 -
浅谈三种方法实现一个圆形的可点击区域
方法一:+ 方法二:border-radius#circle{ background:red; width:100px; height:100px; border-radius:50%;}方法三:纯JavaScriptdocument.onclick = function(e) { var r = 50; var x1 = 100原创 2017-02-28 16:10:05 · 3814 阅读 · 0 评论 -
浅谈CSS BFC及其应用
Block Formatting Context,即块级格式上下文。创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。1、BFC的特性(1)内部的Box会在垂直方向,从顶部开始一个接一个地放置。(2)B原创 2017-03-06 11:57:53 · 805 阅读 · 0 评论 -
浅谈CSS包含块Containing Block
CSS包含块(Containing Block)是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。包含块是定位参考框或定位坐标参考系,元素一旦定义了position定位(absolute或relative或fixed),它所包含的定位元素都将以该包含块为坐标系进原创 2017-03-02 11:21:26 · 779 阅读 · 0 评论 -
浅谈CSS清除浮动
1、为什么会出现浮动?浮动的产生的最根本的原因是为了实现文字环绕效果。2、什么时候需要清除浮动?清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使页面后面的布局不能正常显示,如背景色不能显示等。清除浮动前:清除浮动后:3、清除浮动的方法:(1)使用clear属性使用空标签清除浮动:在需要清除浮动的父级元素原创 2017-03-02 15:47:04 · 2493 阅读 · 0 评论 -
浅谈CSS优先级的计算方法
权重的规则:标签的权重为1,class的权重为10,id的权重为100。eg:div{} /*权重为1*/.class1{} /*权重为10*/#id1{} /*权重为100*/#id1 div{} /*权重为100+1=101*/.class1 div{} /*权重为10+1=11*/.class1 .class2 div{} /*权重为10+10+1=21*/原创 2017-02-28 16:53:59 · 753 阅读 · 0 评论 -
浅谈translate属性与相对定位、绝对定位的区别
水平垂直居中的实现方式有多种,请见:http://blog.csdn.net/zhouziyu2011/article/details/53514416在支持 CSS3 属性的现代浏览器当中,可以利用CSS3的translate属性实现水平垂直居中。尤其是当子元素的width和height未知时,无法通过设置margin-left:-width/2和margin-top:-heig原创 2017-05-08 22:03:56 · 11341 阅读 · 0 评论 -
浅谈CSS重绘与回流/重排
任何对渲染树的修改都有可能会导致下面两种操作:1、回流/重排渲染树的一部分必须要更新且节点的尺寸发生了变化,会触发重排操作。每个页面至少在初始化的时候会有一次重排操作。2、重绘部分节点需要更新,但没有改变其形状,会触发重绘操作。 会触发重绘或回流/重排的操作1、添加、删除元素(回流+重绘)2、隐藏元素,display:none(回流+重绘),visibility:h原创 2017-04-24 21:50:31 · 5584 阅读 · 0 评论 -
浅谈CSS水平居中&垂直居中
1、水平居中:(1)行内元素设置父元素:text-align:center #out{ width:200px; height:100px; background-color:red; text-align:center; } CSS (2)非行内元素a、设置子元素:widthmargin:auto原创 2016-12-08 11:08:46 · 984 阅读 · 0 评论 -
浅谈CSS响应式布局——media query(媒介查询)
① 使用 @media 查询可以针对不同的媒体类型定义不同的样式。② @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果需要设置设计响应式的页面。③ 重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。1、media query的语法:@media 媒介类型and|not|only (媒介特征) { ... } 媒介类型:原创 2017-03-13 14:30:56 · 13863 阅读 · 0 评论 -
浅谈CSS定义超链接<a>正确顺序L-V-H-A
a:link 超链接的默认样式 a:visited 已经访问过的链接的样式 a:hover 处于鼠标悬停状态的链接的样式 a:active 被激活(鼠标左键按下的一瞬间)的链接的样式CSS定义超链接需要注意先后顺序,否则,在某些浏览器里可能会出现某个样式不起作用的bug,不能正确显示想要的效果。 正确的排列顺序是:L-V-H-A,L-V-H-A是link、visited、hov原创 2017-04-22 20:17:40 · 2339 阅读 · 0 评论 -
浅谈纯CSS绘制圆形、椭圆形、菱形、三角形
利用border属性:以下三角为例,把左、右、下边框设置为透明色或与背景色相同的颜色,推荐透明色,这样拓展性更好。 #triangle { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: yellow green red pin原创 2017-03-01 17:30:24 · 9619 阅读 · 0 评论 -
浅谈为什么border-radius设置成50%~100%都能画圆
CSS绘制一个圆,我们很容易想到把border-radius设置成50%,但是,事实上,把border-radius设置成50%~100%都能画圆。W3C对于重合曲线有这样的规范:如果两个相邻的角的半径和超过了对应的盒子的边的长度,那么浏览器要重新计算保证它们不会重合。如果border-radius设置成为80%,则两个相邻圆角合起来将是160%;如果border-radius设置成为10原创 2017-05-12 17:17:20 · 4630 阅读 · 0 评论 -
浅谈纯CSS实现自适应浏览器宽度的正方形
1、方案一:CSS3 vw 单位CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin是相对当前视口宽高中较小的一个的百分比单位,同理 vmax是相对当前视口宽高中较大的一个的百分比单原创 2017-04-13 16:23:43 · 11396 阅读 · 1 评论 -
浅谈CSS两栏、三栏自适应布局
1、右侧固定宽度,左侧自适应方法一:左侧设置margin-right为右侧的宽度,右侧设置float:right #left{ height:300px; margin-right:300px; background:#DDD; } #right{ width:500px; height:300px; float:ri原创 2016-12-15 15:43:09 · 761 阅读 · 0 评论 -
浅谈CSS hack
CSS hack是对付IE的利器。不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,可能会导致生成的页面效果不一致。有了CSS hack,就可以针对不同的浏览器来写不同的CSS。 常用的CSS hack的三种方式:1) CSS 内部hack(最常用) IE6IE7IE8IE9IE10原创 2017-04-07 18:52:11 · 482 阅读 · 0 评论 -
浅谈使用CSS遮罩与CSS线性渐变实现图片的斜线拼接
css mask的原理:只会把遮罩图里透明像素所对应的原图部分进行隐藏。#mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("images/img2.jpg"); background-size: cover;原创 2017-01-14 11:20:33 · 2213 阅读 · 0 评论 -
浅谈CSS3新特性——文字阴影text-shadow、阴影box-shadow和倒影box-reflect
利用border属性:以下三角为例,把左、右、下边框设置为toumse #triangle { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: yellow green red pink; }原创 2017-03-01 12:00:38 · 3504 阅读 · 0 评论 -
浅谈CSS文字环绕图片——自定义图片位置
常规的文字环绕图片,只需给图片一个浮动就可以了,但是图片往往在文字的左上角或者右上角。下面将介绍两种方法,实现图片在文字左/右侧的任意位置,如右下角、右中间等等。方法一:原理:在图片所在的div前面增加一个宽度为1px的空div,使空div和图片所在的div都向左/右浮动,再清除图片所在的div受左/右浮动的影响。这样,空div 会把图片挤下去。修改空div的高度,可以调整图片的位原创 2016-12-17 10:58:17 · 13614 阅读 · 0 评论 -
浅谈CSS自定义下划线
问题描述:使用:first-letter将首字母的font-size增大后,下划线text-underline也会变粗。eg: .text{ text-decoration:underline; font-family:Times New Roman; font-size:24px; } .text:first-letter{原创 2016-12-17 18:56:45 · 14811 阅读 · 0 评论 -
浅谈CSS首字放大下沉及段首缩进2字符
对首字进行放大,需用到css的伪元素:first-letter。 .text{ font-family:Microsoft YaHei; font-size:16px; color:#676767; float:left; clear:left; width:600px; text-align:justify;原创 2016-12-18 09:54:25 · 8976 阅读 · 2 评论 -
浅谈CSS+jQuery实现标签页
预期效果:CSS代码:#tabs{ width:600px; height:250px; background:white; margin:10px;}#tabs ul{ float:left; margin:20px 0 0 20px; padding:0; }#tabs li{ width:80px; height:40px;原创 2016-12-20 21:07:36 · 424 阅读 · 0 评论 -
浅谈CSS3新特性——动画animation
animation-timing-function:linear指定动画从头到尾的速度相同animation-fill-mode:forwards在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。1、创建动画:@keyframes规则——指定一个CSS样式,动画将逐步更改样式。可以改变任意多的样式任意多的次数。用百分比或用关键词"原创 2016-12-23 19:28:07 · 1096 阅读 · 0 评论 -
浅谈CSS3新特性——线性渐变linear-gradient
渐变:两种或多种颜色之间的平滑过渡。线性渐变是多种颜色沿渐变线过渡。渐变的实现由两部分组成:渐变线和色标。渐变线用来控制发生渐变的方向;色标包含一个颜色值和一个位置,用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变,通过确定多个色标可以制作多色渐变效果。原创 2017-01-14 10:25:14 · 1349 阅读 · 0 评论 -
浅谈CSS等高布局
典型网页结构:两列结构,左列用来导航,右列用来显示内容,左右两列的高度都不固定。需求:两列的高度保持一致,避免出现“断层”的效果。padding补偿法:实现CSS等高布局的方法有几种,其中浏览器兼容最好的方法是padding补偿法。(1)把列的padding-bottom设为一个足够大的值;(2)把列的margin-bottom设为一个与padding-bottom的正值相抵消原创 2017-03-01 10:23:14 · 567 阅读 · 0 评论 -
浅谈CSS3新特性——multi-column layout跨列
CSS3新增了一个多列布局模块(Multi-column Layout Module),主要应用在文本的多列布局方面。Multi-column可分为:① 列数和列宽:column-count、column-width、columnscolumn-count:值为正整数,不带单位,表示Multi-column分列的列数,默认为auto(列数根据column-width等其他参数来原创 2017-03-02 13:59:06 · 1584 阅读 · 0 评论 -
浅谈CSS中position、display、overflow、float、margin合并等几种特性的叠加关系
1、如果元素的display: none,那么position,float不起作用;2、如果元素拥有position: absolute或position: fixed属性,那么float不起作用;3、如果元素的float属性值不是none,元素会脱离文档流,根据float属性值来显示;4、设置了float、position: absolute、display: inline-bloc原创 2017-03-02 14:19:13 · 1915 阅读 · 0 评论 -
浅谈CSS+jQuery实现折叠菜单
折叠菜单 body{ background:grey; font-family:Microsoft Yahei; color:white; } .types a{ text-decoration:none; color:white; } .types ul{ display:none; } .files ul{ displ原创 2016-12-20 09:29:00 · 1863 阅读 · 0 评论 -
浅谈MDN CSS
CSS:Cascading Style Sheets层叠样式表CSS是一门指定文档该如何呈现给用户的语言。---为什么使用CSS?1) 避免重复2) 更容易维护3) 为不同的目的,使用不同的样式而内容相同---浏览器展现一个文档必须要把文档内容和相应的样式信息结合起来展示,分为以下两个阶段:1) 浏览器先将HTML和CSS转换成DOM结构。2) 浏览器再把原创 2017-01-15 20:15:25 · 1277 阅读 · 0 评论 -
浅谈CSS的几种定位
1、绝对定位(absolute)将被赋予绝对定位的元素从文档流中拖出,使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位,如果元素的父级没有设置定位属性,则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在上面,可以有负值。绝对定位的定位原创 2016-12-08 11:45:37 · 2118 阅读 · 0 评论