1.position 取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个极少人了解的 sticky .其实,除此之外, CSS 属性通常还可以设置下面几个值: initial inherit unset revert 题目1.下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签是一个 div: 1 <div></div> 定义如下通用CSS: 1 2 3 4 5 6 div{     position:rela…

1.input 初始化 input { -webkit-tap-highlight-color: rgba(0,0,0,0); border: none; } input:focus { outline: none; } ::-webkit-input-placeholder { color: #C0C0C0; } :-moz-placeholder { /* Firefox 18- */ color: #C0C0C0; } ::-moz-placeholder { /* Firefox 19+…

1. 图片底部3像素的问题解决方案        display: inline-block;       vertical-align: bottom;…

CSS 积累总结 1. ::Selection 选择器 使被选中的文本成为灰色: ::selection { color:#CCC; background:red; --- 选中背景颜色变成红色 } ::-moz-selection { color:#CCC ; }…

  在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像的设置在后续介绍到各种图绘制时介绍). 这里所说的文本是指在使用matplotlib作图过程中通过代码的方式往图中添加的各种文字,包括figure标题.axes标题.坐标轴标签.坐标轴刻度标签.注释.普通文本等.轴设置指的是对与坐标轴相关的的元素的设置,例如显示范围.刻度.刻度标签等. In [1]…

公司不是专门做网站的,偶尔会接到客户让修改前端,有时候和让头疼,自己浏览器兼容问题处理不好. 慢慢积累吧. 先贴出来一些前端代码吧,如下: <div class="test"> <form id="Form1" runat="server"> <span>请输入内容:</span> <asp:TextBox ID="txtCode" runat="server&q…

06-CSS开发积累 #让flex盒子中的子元素们,居中 flex布局常用的三行代码: display: flex; justify-content: center; // 子元素在横轴的对齐方式 (左右居中) align-items: center; // 子元素在竖轴的对齐方式(上下居中)   #让文字只显示一行,超出显示省略号 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;   #让文字最多只显示两行,超出后显…

1.透明度设置 90%透明:filter:alpha(opacity=90);-moz-opacity:0.90;-khtml-opacity: 0.90;opacity: 0.90; 80%透明:filter:alpha(opacity=80);-moz-opacity:0.80;-khtml-opacity: 0.80;opacity: 0.80; 70%透明:filter:alpha(opacity=70);-moz-opacity:0.70;-khtml-opacity: 0.70;op…

关于样式的优先级问题: !important > style > [ id > class > tag ];  z-index 的属性用法: z-index属性是用来设置元素的堆叠顺序,z-index的属性值可为负数.0 或 正数,属性值越大,元素越接近用户,越显示于前面,如下图所示: 新手使用CSS中的这个属性时,经常会忘记在前面要先声明定位元素,即z-index属性只适用于绝对定位容器,例如代码:position: absolute;   z-index: 1; role :…

<tr onmouseover=" this.style.backgroundColor= '#E0FFFF' "  onmouseout="this.style.backgroundColor=''"> visibility属性设置标签的可见性 背景图的位置及其平铺: background:#313131 url(../images/header-bg.jpg) repeat-x top left; background-image: url(../g…

① 现代浏览器中,<img>元素默认情况下底部会有空白,那么这个空白到底是从哪里来的? 解惑: method-one:猛戳 来自知乎的解答 method-two: 延伸阅读 what is vertical align? ② 在chrome浏览器中,对于鼠标移入input.textarea,浏览器会给它们加上默认的边框,怎么去掉呢 :hover { outline: none; } ③ css控制不溢出.不换行.溢出部分用省略号表示 white-space: nowrap; text-over…

1.圆角:     border-radius:16px 16px 16px 16px;     2透明度:             filter: alpha(opacity=80);             opacity: 0.8;   3. div内文本自动换行:     <style type="text/css">   <!--       /* 自动换行 */       .atuo_break_line {           white-space:…

11.17 CSS英文命名在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#menubg {-}.还有一些其他的比如搜索框之类的应该怎么命名呢?下面有一些可以算得上是标准的命名吧.如果有错误或者遗漏请朋友们帮忙补上,谢谢! CODE:页头:header登录条:loginbar标志:logo侧栏:sidebar广告:banner导航:nav子导航:subnav菜单:menu子菜单…

[layout] clear:该属性的值指出了不允许有浮动对象的边. 默认值:none none: 允许两边都可以有浮动对象 both: 不允许有浮动对象 left: 不允许左边有浮动对象 right: 不允许右边有浮动对象 -------------------------------------------------------------------------------------------------------- display:设置或检索对象是否及如何显示. 如果displa…

1. letter-spacing:6px;    //属性增加或减少字符间的空白(字符间距) 2. cursor                       // 鼠标移上去的鼠标状态 属性值有: (可以将鼠标移上以下属性值看看效果) auto   crosshair   default   pointer   move   e-resize   ne-resize   nw-resize   n-resize   se-resize   sw-resize   s-resize   w-re…

1.filter:alpha(opacity=70);-moz-opacity:0.7;-webkit-opacity: 0.7;-o-opacity: 0.7;-ms-opacity: 0.7;opacity: 0.7; 2.<!--dafasfd-->注释在bootstrap里在文档流中时,要注意,在它前后的标签要与它紧贴,否则会被认为有空格占据文档流空间影响布局. 3.通过改变父元素的宽高做到滑动切换效果.…

一.关于定位 1.相对定位下,不需要设定块级元素的宽度,只需要设定高度,即可以使该块级元素自适应,如果内有固定高度子元素,可以不设高度.而且可以进行top left定位. 2.相对定位下,如果两个兄弟块级元素,其中一者设置了left,而另一个只要设置的left数值和兄弟不同,left小的那个就不会占满整个横向屏幕,但是二者的自适应宽度一样. 3.绝对定位下,必须要为该元素定义宽高,除非内部包含设定宽高子元素,否则不可见. 4.浮动情况下,该元素的margin会失效,同时需要为该元素设定宽高,除非…

悬浮效果: ul li a{text-decoration: none;color: black}  ul li a:hover{color: blue}   鼠标变小手 span:hover{cursor:pointer;color:red}…

人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义.BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目. 重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagh…

前言 一.开发工具 - 前端四大利器 1. WebStorm 1). 岂今为止,业界公认的前端开发利器.优点: 2). 缺点 3). 相关资源 4). 后续展望 2. Photoshop 1).基本信息: 2). 提高切图效率思路之扩展: 3). 切图的几个办法: 3. Firefox 4. Chrome 二.文件目录 三.Html.CSS结构 四.Reset.css 五.如何调试代码 1. Firefox 2. Chrome 3. IE 4. IEtester 5. 虚拟机 六.如何检查代码…

目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS图片 10. CSS半透明 文章背景:这是一次内部交流会的PPT,通过文字的方式记录下来,分享给更多的同学,同时也由于个人能力水平还有很大的成长空间,也想借此机会再深化学习一下,所以这事利人利已,千秋万代.由于个人知识范围有限,难免有遗漏或不当之处,欢迎拍砖.此次交流会做了一些新的创新或尝试,我们尝…

以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 因为提交比较麻烦,后来转置github:https://github.com/jsfront/src/blob/master/css.md 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all;…

好几天没更新博客了,刚实战完一个HTML+CSS的简单项目.经过几天的摸索,发现收益良多.之前只是单纯得写demo,看知识点,没有亲自实战项目.但实战过后才会了解,如何才能更好地提升自己的技术.针对这次项目开发,我总结了以下内容: 一.技术总结 1.公共样式的设定 在开始项目之前,我们可以先大体了解一下项目中每个页面的内容,比如字体样式,段落结构,文字大小等.我们可以针对这些内容来设定一个固定的样式文件.在开发中    就可以直接引入此文件,而无需再重复敲CSS代码. /*基本样式*/ * {…

第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate stylesheet):type(text/css):media:(all(所有表现媒体, screen,print),title(配合候选使用). 3,@import url(sheet1.css) 需在style内使用,放在其他css规则之前. 4,向后可访问性:<style><!-- 样式 -->…

关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学习之路是比较好的.学习没有捷径,但学习是有技巧与方法.   一,css入门篇:   推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选择符,伪类,工作环境,盒模型,两列,三列自适应布局.文字样式,图片处理,列表,表单…

一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手的地方可以用firebug, chrome调试工具分析网站结构样式.如果技术熟练自信可以自己先写,写完之后在对比,以其来找寻自己的差距.结构是网站的骨架,如果写的不合理,将是bug产生的重要根源,所以学习分析大型网站的布局样式对初学者来说帮助是很大的.大多数初学者由于对技术的不自信,html结构往往…

越到最后啊 就越发现,真的很理解那句话 就是自己多学一点一点知识,就少一句问别人的东西 这是多么痛苦的领悟 今天需要压缩css跟js文件 然后不懂啊 就问别人啊 就问啊问啊 然后再上网了解啊了解啊 用gulp gulp是基于Node.js的前端构建工具 恩 确实是个好东西哦 那进入正题前先说说gulp是个啥东西吧,其实一开始我也不是很懂 百度呀 网上说是自动化工具 其实自动化工具说白了我也不是很懂 我感觉我看很抽象的概念的时候  加上自己没有那个具体的概念 就很难弄懂  有知道的小伙伴麻烦留言呀…

1.vertical-align这个属性用于块元素的垂直,居中,行元素用line-height. text-align比如li span时,text-align用于上一句的li的元素时,span才会居中. 2.z-index与abslute一起用的.可以把背景的图片z-index=-1这样子,就没有问题了. 3.img src 与background的区别是: Img中可以调整宽和高,但是background你就不能改变图片的宽高了,一个可以变形,另一个不可以变形. 4.line-height:…

前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好.12px大小的文字就是主流也是底线.然而12px的文字与单选框和复选框是不对齐的.例如下面这张雅虎中国首页在火狐浏览器下的截图: 雅虎中国首页单选框复选框与文字不对齐 这里,不是说,雅虎中…

何为学习瓶颈 学习到了一定的阶段,就很难继续提高水平的一种现象 这是很多人都正面对的,但同时自己并未意识到. 既然是瓶颈,那么一旦突破了,就是广阔天空! 你是否经常面对这样的情景: 遇到一个奇葩问题,着急地抓耳挠腮,苦逼地把觉得有可能的CSS属性一个个去试一下:你是否清楚自己还有很多东西要学.工作是很认真的,页面也是能写,前端书籍买了很多, 技术博客也会逛,然而自己并没有觉得有实质性的提高. 其实一些关键的突破性的知识点并不是你不能够搞明白,而是没有意识到要搞明白. 比如样式重置,我大概总结了前…