html
文章平均质量分 59
Ailsa-show
努力不一定会成功,但不努力一定不会成功
展开
-
相邻元素的 margin-top重叠问题
margin重叠现象就是相邻的两个普通元素,上下边距不是普通的相加而是取其中较大的边距值(注意是普通元素)同时,父子元素也会发生margin重叠现象,具体情况如下1、两个div,父元素和子元素2、分别定义其margin-top属性值,父元素为100px子元素为20px3、结果如下,取了较大的父元素的margin-top值100px解决方案:因为 火狐下marg原创 2016-09-20 13:49:12 · 929 阅读 · 0 评论 -
html与css中局部技巧
很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些地方总结的不好,欢迎大家指正。言归正传,现在就来揭开各种布局的面纱。单列布局div class="parent"> div class="child">div>div>1原创 2017-04-15 14:11:09 · 1620 阅读 · 0 评论 -
浮动解决方案,块级元素与行级元素的区别
原创 2016-10-20 11:42:38 · 529 阅读 · 0 评论 -
如何成为一名优秀的web前端工程师?
我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西。 我从没有听到有人问:如何做一名优秀、甚至卓越的WEB前端工程师。 何为:前端工程师? 前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的行业。 Web前端开发技术主要包括三个要素:HTML、CSS和JavaSc原创 2016-09-27 16:10:58 · 738 阅读 · 0 评论 -
如何在实际项目中使用before/after伪类的
一、诉说前言before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪类的意识,要使用顶多也就是跟风的“清除浮动”应用。我想,这可能受兼容性思维影响——IE6/7浏览器并不支持,还是等什么原创 2016-10-12 19:15:50 · 2353 阅读 · 0 评论 -
CSS中height:100%和height:inherit的异同
一、胡聊海聊凑篇幅上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少:不过inherit确实是个好东西,不仅节约代码,尤其与background之流打交道;而且还利于维护。注意,如果想要继承background的图片,不能这样缩写,会显得很天真:background: #fff inherit left top;可以这样子:ba原创 2016-09-26 12:13:06 · 418 阅读 · 0 评论 -
块级元素和块元素,行内级元素和行内元素 ,置换元素与非置换元素 (img是行内元素,但是可以设置高度,因为他本身具有一定的高度和宽度,是置换元素,所以可以设置高度和宽度)
1. 什么是块级元素?块级元素是那些视觉上会被格式化成块状的元素,通俗一点来说就是那些会换新行的元素。display 属性的:block, list-item, table, flex, grid 值都可以将一个元素设置成块级元素。举个例子来说,li 是一个 块级元素,但也有人会说它是一个 块元素。嗯,li 确实是一个块级元素,但并不是一个块元素,为什么?2.原创 2016-09-08 10:59:16 · 643 阅读 · 0 评论 -
大小不固定的图片和多行文字的垂直水平居中
一、大小不固定,多行文字的垂直居中① 单行文字可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如:单行文字居中显示测试,css样式为:height:3em; line-height:3em;……② 多行文字但是对于外框高度固定,文字大小个数不固定的多行文字呢?文字可原创 2016-09-24 18:31:34 · 298 阅读 · 0 评论 -
CSS世界中的margin-box
一、前言聊聊技术吧,这个纯粹。本文内容偏理论,非实用技术,对于深入理解CSS的一些概念和设计很有帮助。本文有些概念如果你不知道说的是什么意思,比方说“盒尺寸”,你大可忽略之,并不影响对本文核心观点的理解。这些概念是需要很多积累,而且属于一个完整体系里面的,所谓体系,就是从前往后是连贯下来的,而盒尺寸这个概念处于体系的中间,直接讲盒尺寸就像看电影直接从中间部分看起,肯定会有些困惑,但原创 2016-09-24 18:22:38 · 800 阅读 · 0 评论 -
图片里面加文字, 且文字垂直居中解决方案
文字设置为div等高的line-height然后垂直居中图片文字居中.test {text-align: center;color: #0066CC; margin:5px auto; width:700px; height:120px; line-height:120px; border:1px solid #000000;background: url(原创 2016-09-24 18:08:00 · 510 阅读 · 0 评论 -
html,css网页兼容问题
css控制之bug的兼容问题 :有如下五种常见情况注:*margin-top:20px;这个(*)为了解决IE流量器的兼容问题。这个设置对火狐和chrome没有影响!原创 2016-09-08 17:20:33 · 550 阅读 · 0 评论 -
稳定、地道HTML书写原则
一、一般原则所有的代码应看似出自一人之手,即使奶妈有多人。严格执行约定的风格。若风格不定,使用现有、常用风格。二、空白你的整个源代码应该只存在一种风格。空白使用前后一致,使用空白提高可读性。到死也不要混用空格符(spaces)和制表符(tabs)实现缩进。柔和缩进(spaces)或真实制表二选一,关键要一站到底。(个人偏好:空格-spaces)如果使用空格,选定一个原创 2016-09-23 21:55:42 · 244 阅读 · 0 评论 -
css行高line-height的一些深入理解及应用
一、前言前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章。这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的,可以说是补充或是另外一个角度的思考。另外,将结合实际,展示line-height的一些特性和一些常见应用,帮助您对css行高line-height的理解。所讲述的并不原创 2016-09-22 15:14:39 · 2863 阅读 · 0 评论 -
表单验证
html lang="en">head>title>title>meta charset="UTF-8">link href="css/style.css"rel="stylesheet">head>script language="Javascript">function check(){if(form1.username.value=="" &&fo原创 2017-06-08 10:48:44 · 290 阅读 · 0 评论