
CSS
文章平均质量分 70
Airfald
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
深入border
border深入原创 2017-02-27 22:30:54 · 379 阅读 · 0 评论 -
absolute
深入理解absolute文章转自:http://www.jianshu.com/p/a3da5e27d22b之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float,对理解绝对定位absolute会大有帮助。先说absolute和float的相似处:包裹性 和 高度欺骗包裹性所谓一图胜千转载 2017-03-19 17:53:20 · 1599 阅读 · 1 评论 -
深入Padding
padding的尺寸问题 设置padding会增大容器的大小,但是并非一直是这样的。 比如当width不设置大小的时候!总结 inline元素 百分比以上的图片均来自:http://www.imooc.com/learn/710原创 2017-02-27 22:18:05 · 569 阅读 · 0 评论 -
HTML的总结
HTML的总结1.注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”这样同一组的单选按钮才可以起到单选的作用。2.label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,di就会触发此控件。点击文字就可以选中按钮。注意:标签的原创 2017-03-06 20:20:42 · 549 阅读 · 0 评论 -
overflow深入
overflow深入理解原创 2017-03-20 11:15:51 · 616 阅读 · 0 评论 -
解决浮动问题的几种方法
额外标签法使用:after 伪元素给父元素定高利用overflow:hidden;属性父元素浮动父元素处于绝对定位在开发网页的时候经常需要用到各种浮动,此时便需要及时的清除浮动,否则将会导致布局出现问题引出问题:html lang="en">head> meta charset="UTF-8"> title>tit转载 2017-03-20 12:59:49 · 1120 阅读 · 0 评论 -
class,id的命名
关于团队合作的css命名规范常用的css命名规则:头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:转载 2017-03-20 17:21:09 · 654 阅读 · 0 评论 -
致自己
文案什么是我自己想做的事情?为什么我想做事情别人都不支持呢?别人不支持的话我该不该放弃呢?坚持了就一定是胜利吗?我心里隐约知道自己能干点事虽然又真不知道会是什么虽然今天的我肯定不是我来北京时候想要成为的那个可也就是这12年间的每一个选择和决定让我活成今天的样子我只是坚持 坚持给自己暗示不放弃 在最无趣无力的日子原创 2017-03-07 14:36:52 · 686 阅读 · 0 评论 -
元素居中的方法
我想先问一下你们能想到的实现垂直居中的方法有哪些?1、line-height方式2、Table布局3、Inline-block方式4、绝对定位之automargin5、绝对定位之负margin6、transform7、额外div8、Flex居中我把他们分为了两类,文本的垂直居中和块级垂直居中文本垂直居中:line-height方式、table布局块级垂直转载 2017-03-16 17:52:56 · 676 阅读 · 0 评论 -
HTML规范
HTML规范 写代码该开始学的时候,只要把功能实现就可以了,当达到一定的程度的时候,就要对代码有一定的要求,比如:对代码优化,对代码的书写规范化,就好像多个人协作写一个产品要让别人看起来就好像是一个人写的一样!还记得有个老师说过写代码不一定要多厉害,其实你别人的差距就在于别人的代码写的符合规范化!代码写的规范化可以避免一些不必要的bug以及代码让人看起来更好!就算有bug也可以在原创 2017-03-06 13:05:37 · 1052 阅读 · 0 评论 -
非浮动元素的margin对浮动元素无效
Document .container{ overflow: hidden; } .box{ width: 70%; height: 200px; background-color: red; /*margin-botto原创 2017-03-18 22:22:28 · 1448 阅读 · 0 评论 -
inline,inline-block,block的区别
总体概念block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。大体来说HTML元素各有其自身的布局级别(block元素还是inlin转载 2017-03-05 20:39:34 · 415 阅读 · 0 评论 -
关于float
关于float由于浮动空格或者是换行围绕button导致最后空格在最后原创 2017-02-28 13:13:46 · 322 阅读 · 0 评论 -
关于三栏式布局的几种方式
一、前言在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提。目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法,margin负值法以及自身浮动法。这些方法简洁实用,且无兼容性问题。如果您想在您的页面上使用转载 2017-02-28 18:09:50 · 1715 阅读 · 0 评论 -
定位详解
当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人的更牛。例如,浮动可以让页面元素并排显示,而且还可以制作一个干净的布局。然而,有时候需要一些严格的定位,这时需要使用其他的技术,包括“relative”和“absolute”定位。在这节课中,我们先来介绍一下浮动的使用,接下来详细介绍定位的技巧,包括如何准确的给元素在X轴、Y轴和Z轴定位转载 2017-02-28 21:48:16 · 367 阅读 · 0 评论 -
垂直居中
1.方法一.parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:300px; he原创 2017-02-28 22:30:32 · 399 阅读 · 0 评论 -
父元素无宽高度(或框高度不够),子元素浮动
网页前端工作者经常会遇到子元素设置float浮动后导致父容器高度不能自适应,也就是俗称的外部容器不能被“撑大”,常见表现为背景或边框异常,这时我们就需要来清除“闭合浮动”,方法主要有以下4种:比如父元素不设宽高度,而子元素浮动,则子元素无视父元素进行浮动贴在一起1. 额外标签法这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这转载 2017-02-23 14:37:53 · 1195 阅读 · 0 评论 -
vertical-align的使用方法
vertical-align的使用方法vertical-align的定义W3C上对vertical-align的定义:vertical-align属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。文本通常根据不可见的基转载 2017-02-23 20:56:12 · 1515 阅读 · 0 评论 -
前端的phtoshop
前端必备技能--------切图在窗口上选择有用的工具:1.图层2.历史记录3.信息4.字符信息:选项设置中改为像素,选中文档大小编辑--首选项--改为像素步骤:1.视图/显示/智能参考线以及视图/字符,这两个都要选上;2.窗口/信息;窗口/字符,两个打开,其他的多余的可不需要,将前面的勾取消;3.点击信息面板那一个小三角,打开面板选项/标尺单位:像素;原创 2017-03-03 23:43:12 · 384 阅读 · 0 评论 -
phtoshop切图的几种方式
phtoshop切图的几种方式 作为一个前端开发者,想必多多少少要掌握一定的切图技巧,通过几天的摸索,从了解psd是什么文件到安装ps并对其简单的工具进行一点的了解继而到最后怎么样切图并将设计稿变成一个实实在在的网页!在此处总结了关于切图的几种方式!1.传统的切图(手动切图):工具栏中的“剪切工具”,其实剪切工具里边一共为我们提供了四个工具。分别为“裁剪工原创 2017-03-05 11:00:58 · 2227 阅读 · 0 评论 -
关于HTML的几个技巧
模拟绝对定位在浏览器中为了实现绝对定位诸多方法,今天就解决兼容性的问题,来模拟决定定位。相对于html的绝对定位原理:当不给绝对定位设置父元素定位时,那么默认的相对于父级定位, 也就是想对于html定位。 html:100%;及可视区域的大小 将超过可视区域的面积设置截取,则html永远的高度就是可视区域高度,不会被撑开;代码如下: html{ height:10原创 2017-06-03 22:51:09 · 580 阅读 · 0 评论