牛腩之CSS核心内容

根据牛老师的讲解,CSS的核心内容大致为四个部分:标准流、盒子模型、浮动和定位。

在学习核心内容之前,先来了解两个基本概念:块级元素和行内元素。

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的display属性默认值为“block”,意思是该标签元素为块级元素,而对于span元素来讲,它的默认值为“inline”,即行内元素。

所谓块级元素,就是在显示的时候自动占据一定的矩形空间,可以通过设置其高度、宽度、内外边距等属性,来调整矩形的显示样子;而像span这类的行内元素,则没有自己的独立空间,它是依附于其他块级元素而存在的,因此对行内元素设置高度、宽度等属性,都是没有意义的。

标准流

所谓标准流,就是标签的排列方式。通俗来讲,网页元素的显示顺序就是你在html文件里标签的书写顺序,相当于代码的顺序执行,不加任何控制语句。举个小例子:

盒子模型

所谓盒子模型,就是在网页设计中经常用到的CSS技术所使用的一种思维模型,它的属性包括:content、padding、border和margin。你可以把这种模型在生活中实例化,我们日常生活中见到的各种各样的盒子都具有上面提到的四种属性,因此才叫做盒子模型。标准的盒子模型如下图所示:

那么盒子模型在代码中如何体现,请看下面的例子:

运行结果如下:

我们都知道使用表格来排版网页,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版之后,则通过由CSS定义的大小不一的盒子和盒子的嵌套来编排网页。这种方式代码简洁,便于更新修改,能兼容更多的浏览器,比如PDA设备也能正常浏览,其优势远不止这些,大家有兴趣可以去查找相关信息。

浮动

在CSS中,我们通过float属性实现元素的浮动。具体如何控制元素的浮动与否,请看下面的例子:

首先我们先定义浮动的类选择器

接下来我们来看一个简单的浮动应用:

定位

CSS中的定位分为相对定位和绝对定位。

相对定位就是让这个元素相对于它的起点进行移动。同样对上面例子中未加浮动的代码进行定位测试,我们对元素二进行相对定位,如下:

绝对定位就是让元素的位置与文档的标准流无关,因此不占据空间。绝对定位的元素位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含快。

同样我们对上面的例子进行改进,来说明绝对定位是什么样的。

以上就是CSS的核心内容了,也许你会觉得很简单,不过就是对一些属性进行设置而已。没错,的确很简单,但是要想做出很好设计,还需要你熟悉很多的东西,加上多多实践的经验,应该可以做出很好的CSS布局。

时间: 2024-10-05 21:51:39

牛腩之CSS核心内容的相关文章

ES6/ES2015核心内容-转载

传送门:http://www.cnblogs.com/doit8791/p/5184238.html ECMAScript定义了: JS语言语法 – 语法解析规则.关键字.语句.声明.运算符等. 类型 – 布尔型.数字.字符串.对象等. 原型和继承 内建对象和函数的标准库 – JSON.Math.数组方法.对象自省方法等. ECMAScript标准不定义HTML或CSS的相关功能,也不定义类似DOM(文档对象模型)的Web API,这些都在独立的标准中进行定义.ECMAScript涵盖了各种环境

30分钟掌握ES6核心内容

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前,我们得先了解下Babel. Babel Babel是一个广泛使用的ES6转码器,可以将

技术管理的核心内容 — 提高团队技能

最近与同事聊天,从软件质量保证的方法论谈论到了技术管理,那技术管理的内涵到底是什么?在此通过这篇文章做一个小小的总结和适当的外延. 技术管理给人的感觉更多是工作量评估.项目计划.项目进度跟踪等,但这只是技术管理的一部分.大体上,可以将技术管理分为两个纬度,如图1所示. 图1 纬度之一就是项目管理,其中包括项目计划.风险管理.预算管理等.对于基层技术管理者,更多涉及的内容是工作量评估.项目计划.项目进度管理等等.这一纬度的可见性很强,一项做不好就很容易让上级"紧张",因此每一项内容都有专

30分钟掌握ES6/ES2015核心内容

30分钟掌握ES6/ES2015核心内容 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前,我们得先了解下Babel.Babel Bab

struts2框架的核心内容

 Struts1和Struts2的区别和对比: Action 类: • Struts1要求Action类继承一个抽象基类.Struts1的一个普遍问题是使用抽象类编程而不是接口,而struts2的Action是接口. • Struts 2 Action类可以实现一个Action接口,也可实现其他接口,使可选和定制的服务成为可能.Struts2提供一个ActionSupport基类去 实现 常用的接口.Action接口不是必须的,任何有execute标识的POJO对象都可以用作Struts2的Ac

数理统计核心内容梳理

上研究生后,又再一次的学习了数理统计这门课程,以前参加数学建模比赛的的时候就体会到了数理统计是工科研究生必备的工具,最具实用价值的一门课程,再次学习,对其理解就多了一些,这里就对自己的体会做一个记录吧. 数理统计核心内容有两大部分:参数估计和假设检验. 参数估计本质是这样的,我们现有一个总体的一个样本观测值,并假设了该总体服从某种分布,有了分布,就有了模型,现在就是要确定模型的参数(数字特征,如均值,方差),用什么来确定呢?当然用样本值中所包含的参数信息来估计整体的参数. 参数估计有点估计.区间

深度学习系列之CNN核心内容

这里为什么CNN核心内容?原因很简答,CNN说白了就是一个更多层.更多节点的ANN,不同之处就是处理网络每一层的权值的方法不一样(CNN,当然是卷积使得权值共享,降低连接数量,同时兼顾二维特征).从算法层面上讲,CNN的核心还是同BP网络一样,计算整个CNN网络中的误差反向传播,来更新每一层的权值,只不过这个误差反向传播更复杂.理解了CNN误差反向传播的过程,就基本上了解CNN. DNN的背景 DNN,deep neural network,近几年机器学习算法中崛起的旗舰方法,作为分类精度最高.

技术管理的核心内容——提高团队技能

最近与同事聊天,从软件质量保证的方法论谈论到了技术管理.技术管理的内涵到底是什么?在此通过这篇文章做一个小小的总结和适当的外延. 技术管理给人的感觉更多是工作量评估.项目计划.项目进度跟踪等,但这只是技术管理工作的一部分.大体上,可以将技术管理分为两个纬度,如图1所示. 图1 纬度之一就是项目管理,其中包括项目计划.风险管理.预算管理等.对于基层技术管理者,更多涉及的内容是工作量评估.项目计划.项目进度管理等等.这一纬度的可见性很强,一项做不好就很容易让上级"紧张",因此每一项内容都有

css基础内容

css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 一.css的引入方式 1.直接在html标签元素内嵌入css样式 <div style="font-size:14px; color:#FF0000;">行内引入</div&g