牛腩之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布局。
牛腩之CSS核心内容相关推荐
- CSS核心内容整理 - (中)
2019独角兽企业重金招聘Python工程师标准>>> 本文是CSS核心内容整理的第二篇,承接上一篇的内容继续对CSS的一些重要内容进行整理,推荐先看完这个系列的上一篇. 四. 页 ...
- CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面 一.基础 在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
- CSS核心内容：标准流、盒子模型、浮动、定位
目录 一.标准流 块级元素 行内元素 与HTML元素之间的区别 二.盒子模型 三.浮动(Float) 四.定位(Position) 一.标准流 标准流指的是元素排版布局过程中,元素会默认自动从左往右, ...
- 前端CSS核心内容浮动
浮动(float) 浮动的特点 浮动是挤在一起的 . 清除浮动 清除浮动方式 其他的清除浮动方法 方式一: 方式二: 方式三: .clearfix:after { content: "&qu ...
- 前端CSS核心内容定位
定位有哪些 需要留意子绝父相,就是子盒子用绝对定位,父级用相对定位 注意下面的少了一个粘性定位: 相对定位和固定定位混合,就是一个盒子在向下拖拽的时候是相对定位,一直拖拽,当到了一个临界点就变成固定定 ...
- ES6/ES2015核心内容-转载
传送门:http://www.cnblogs.com/doit8791/p/5184238.html ECMAScript定义了: JS语言语法 – 语法解析规则.关键字.语句.声明.运算符等. 类型 ...
- canvas核心内容
文章目录 canvas核心内容 1.概念 提示: 2.绘制直线 案例: 3.绘制矩形 案例:绘制柱状图 4.绘制曲线 案例一:时钟 案例二:饼状图 5.绘制文本信息 案例: 6.绘制图片 案例: 7. ...
- 重磅丨英伟达刚刚发布全球最大GPU：GTC2018黄仁勋演讲核心内容整理
文章来源:机器之心 在刚刚结束的 Keynote 演讲中,英伟达创始人兼首席执行官黄仁勋宣布了该公司在芯片.AI 平台.自动驾驶上的一系列新动作. 正如黄仁勋所说的,今天的发布会有关于:「Amazin ...
- Python编程核心内容 ---- Function（函数）
什么"大事"呢?下面将要介绍Python编程的核心内容之一--函数. 对于Python编程,函数的重要性不言而喻.重要的事情讲三遍:函数实在是太重要,太关键了. 引入函数 之前,我 ...
最新文章
- Could not get unknown property ‘compileSdkVersion‘ for project
- qt与mysql的增删改查_Qt数据库与QTableWidget结合的增删改查
- Expandable Input Toolbar
- 图片本地化 php,php抓取远程图片本地化函数,很好用的.喜欢的拿去
- vue 过滤器 格式时间秒数，js 时间日期格式化
- 手动快捷创建用户和密码
- QT学习：基于UDP的网络广播程序
- Vue -- 项目报错整理(1)：RangeError: Maximum call stack size exceeded
- python无效的类字符串_Python不规范的日期字符串处理类
- 【Java学习】JDBC可以再深一点理解
- 爬虫下载百度贴吧图片
- 从华为“流程与IT管理部”看IT部门定位
- MVC路由 路由的三种扩展 替换MVC内置的Handler
- python-excel写入代码
- 腾达无线路由器如何开启无线中继功能
- Python打地鼠小游戏源代码
- 华为顶级黑客整理的399本编程电子书，整整16个G，你想学的都有
- 【计算机组成原理】寄存器的本质——锁存器
- VALSE2022内容总结
- python进阶练习题:第一步，成为百万富翁 - 汇率卡塔【难度：2级】--景越Python编程实例训练营,不同难度Python习题，适合自学Python的新手进阶