Class与ID区别 margin和padding区别 CSS学习笔记

由于现在百分之99.99%的CMS都是用div+css来构建网页模板的，被逼无奈，一大把年纪了还要学习CSS，说实话没觉得用div来布局比table好在什么地方！但迫于行势，先硬着头皮看吧，能学多少是多少。
根据数据与结构分离的原则，CSS最好要独立于网页文件，用


代码如下:

<link rel="stylesheet" type="text/css" href="../xxx/web.css" />

语句将CSS文件调入网页文件，不推荐直接在网页文件中写CSS代码。这么做的优点一是修改方便，二是对搜索引擎友好，那些搜索引擎爬虫爬起来也畅快。
margin和padding属性
margin和padding属性可简单理解为元素的外边距和内边距：margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left
Class与ID区别
简单来说一个ID名在一个页面中只能出现一次而CLASS可以出现多次，当然如果一个ID名在一个页面中出现了两次，对面页的外观不过造成什么影响，只是不符合W3规范。单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素，用class定义。

赞 (0)

相关推荐

  • CSS学习笔记Padding 属性中参数的定义与使用

    一直都对CSS中Padding 属性中参数个数的定义颇为困惑,例如: body { padding: 32px;} body { padding: 32px 24px; } body { padding: 32px 24px 18px; } body { padding: 32px 24px 18px 12px; } 今天baidu查看了CSS的标准文档,其中是这样规定的: 如果只提供一个,将用于全部的四条边: 如果提供两个,第一个用于上-下,第二个用于左-右: 如果提供三个,第一个用于上,第二

  • css下margin、padding、border、background和font缩写示例

    下面用一些比较常用的属性来做示例. margin margin-top:1px;  margin-right:1px;  margin-bottom:1px;  margin-left:1px;  代码简化为:margin:1px margin-top:1px;  margin-right:2px;  margin-bottom:1px;  margin-left:2px;  代码简化为:margin:1px 2px margin-top:1px;  margin-right:2px;  mar

  • CSS百分比padding制作图片自适应布局

    CSS百分比padding制作图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di

  • Class与ID区别 margin和padding区别 CSS学习笔记

    由于现在百分之99.99%的CMS都是用div+css来构建网页模板的,被逼无奈,一大把年纪了还要学习CSS,说实话没觉得用div来布局比table好在什么地方!但迫于行势,先硬着头皮看吧,能学多少是多少.根据数据与结构分离的原则,CSS最好要独立于网页文件,用 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="../xxx/web.css" /> 语句将CSS文件调入网页

  • Android package属性、package name和Application ID三者的联系及区别

    Android package属性.package name和Application ID三者的联系及区别 package属性:在AndroidManifest.xml文件中. package name:应用程序的包名. Application ID:模块defaultConfig块下的applicationId属性. 设置Application ID 每个Android应用程序都有唯一一个类似Java包名的Application ID,比如com.example.myapp.在Android设

  • Mysql中count(*)、count(1)、count(主键id)与count(字段)的区别

    目录 count()函数 count(*).count(1) .count(主键id) 和 count(字段) 区别 count(主键id) 与 count(1) count(字段) count(非空字段) count(可空字段) count(*) 执行效率 执行效果上: 执行效率上: 实例分析 count()函数 count() 是一个聚合函数,对于返回的结果集,一行行地判断,如果 count 函数的参数不是 NULL,累计值就加 1,否则不加.最后返回累计值. count(*).count(

  • vue学习笔记之vue1.0和vue2.0的区别介绍

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> VUE2.0:必须有根元素,包裹住所有的代码 <template id="aaa"> <div> <h3>我是组件</h3> <

  • Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

    Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

    ExtJS中的renderTo和applyTo的差别 对applyTo和renderTo的理解和思考 个人认为这两篇文章写的不够通俗.写一个简单的例子来看看最终生成了什么代码, 复制代码 代码如下: <head> <title>RenderTo and ApplyTo</title> <link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/c

  • Mybatis中#{}和${}传参的区别及#和$的区别小结

    最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, 比如说用#{},和 ${}传参的区别, 使用#传入参数是,sql语句解析是会加上"",比如 select * from table where name = #{name} ,传入的name为小李,那么最后打印出来的就是 select * from table where name = '小李',就是会当成字符串来解析,这样相比于$的好处是比较明显对的吧,#{}传参能防止sql注入,如果

  • 前端学习笔记style，currentStyle，getComputedStyle的用法与区别

    前端学习笔记style，currentStyle，getComputedStyle的用法与区别

    style.currentStyle.getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styl

  • vue学习笔记之v-if和v-show的区别

    vue学习笔记之v-if和v-show的区别

    v-if vs v-show v-if 是"真正的"条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--直到条件第一次变为真时,才会开始渲染条件块. 相比之下, v-show 就简单得多--不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换. 一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销.因此,如果需要非常频繁地切换,则使用 v-sh

随机推荐