对于CSS新人的几个坑

之前对CSS的了解也不多,自己平时写东西时也基本依赖bootstrap,基本没有自己去设计过UI,在这次的项目经历中,踩到了一些大坑,当然,至对于新手才有这些困惑,在这里记录下来,方便自己之后查阅,也分享给更多进坑的新人们。

当然,开始前还是要吐槽一下前端最大的坑——IE!

清除格式

当你在写CSS之前,如果你的页面中并没有引入其他的样式,一定要先级的去“清除样式”,这里的清除样式,主要指的是清除浏览器的两个默认样式(padding和margin),不然,你的额昂也背景会出现白边的异常状况。

* {
  margin: 0px;
  padding: 0px;
}

背景位置

当你去设置背景的时候,一定要注意背景的作用范围,background-clip 属性规定背景的绘制区域,background-origin 属性规定 background-position 属性相对于什么位置来定位。

background-clip: border-box | padding-box | content-box;
background-origin: padding-box | border-box | content-box;

对于CSS新人的几个坑

时间: 2024-08-03 05:52:35

对于CSS新人的几个坑的相关文章

CSS的一些案例和坑

display: inline-block的坑 (一) 先看了个例子 <style type="text/css"> ul{ width: 300px; height: 50px; } li{ width: 50px; height: 50px; background: blue; display: inline-block; } </style> <body> <ul> <li></li> <li>&

ReactJS webpack实现JS模块化使用的坑

从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack使之识别各种语法:JAX,HTML,CSS等 以下是一些坑: 1.ReactJS框架并不能实现JS的模块化 纯ReactJS其实和JqueryTemplate差不多,可以把HTML写成一个模板,然后以插入到某个DIV里的方式来实现HTML的模板化. 但是单纯靠ReactJS这个框架,其实这并没有实现JS的模块

【js】再谈移动端的模态框实现

移动端模态框的机制因为与PC的模态框机制一直有所区别,一直是许多新人很容易踩坑的地方,最近笔者作为一条老咸鱼也踩进了一个新坑中,真是平日里代码读得太粗略,故而写上几笔,以儆效尤. 故事的起因是这样的,兄弟团的童鞋的页面出现了模块框内需要滚动元素的需求,但是实际情况是他调试了很久,却没有找到确定的解决问题,这也引起了笔者的注意,虽然有现成的组件,但是因为相关代码是有一些历史的了,并没有迁移,于是笔者就和他以前联调了一番. 我们知道常见的pc端模块框阻止滚动的方式是在html或者body标签上添加o

博客园博客小优化

博客园博客小优化 Fork me on Github 页首Html 代码部分增加以下代码: <a href="https://github.com/WeihanLi" target="_blank"> <img style="position: fixed; top: 0; right: 0; border: 0;z-index:233" src="https://github-camo.global.ssl.fast

深入理解行内元素的布局

前言 总括: 本文通过实例讲解CSS中最大的难点之一,行内元素的布局,主要是挖掘line-height和vertical-align两个属性在布局方面的使用. 原文博客地址:深入理解行内元素的布局 知乎专栏&&简书专题:前端进击者(知乎)&&前端进击者(简书) 博主博客地址:Damonare的个人博客 白茶清欢无别事,我在等风,也在等你.? 正文 讲道理line-height和vertical-align 这对基是十分低调的,日常开发中碰到的很多莫名其妙的bug很大一部分都

css 填坑常用代码分享

以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all; 2. 两端对齐 text-align:justify;text-justify:inter-ideogra 3. 去掉Webkit(chrome)浏览器中input(文本框)或texta

css 填坑常用代码分享[居家实用型]

原文地址 http://www.cnblogs.com/jikey/p/4233003.html 以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all; 2. 两端对齐 text-align:j

深入CSS,让网页开发少点“坑”

通常我们在学习CSS的时候,感觉很容易掌握,却常常在实际应用中碰到各式各样难以填补的"坑",为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Stacking Context等诸多高级特性.让你更加深入的了解CSS. CSS 优先级 优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的.优先级仅由选择器组成的匹配规则决定的.如果给一个P标签增加一个类(Class),运行后Class 中的部分属性并未发生改变,及CSS选择器存在优先级问题. 选择符优先级 常

【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&amp;游戏结束

引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为文件太大,下载耗时,耗费流量. 一.模态对话框的组成 2个Div,一个铺满整屛,一个显示内容 坑:如何让Div铺满整屛?解决:2个办法 宽  高 100%    →    position:absolute:  →   top=0;left=0; 四个方向  margin-top/left/righ