《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站。虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦。正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识。
CSS的显示
CSS的元素分为两类:块级元素和行内元素。
- 一个块级元素会新开始一行并且尽可能撑满容器。常见的块级元素包括
div
、p
、form
,以及HTML5中新加入的header
、footer
、section
等。 - 行内元素可以显示在段落内而不打乱段落的布局。常见的行内元素包括
span
和a
等。
display
属性就是控制元素的表现形式,它的值包括inline
、block
和none
等。
none
通常用于在不删除元素的情况下隐藏元素,但使用none
不会保留元素本该显示的空间。
inline-block
用于将块级元素显示在行内。
控制元素显示的属性还有外边距、内边距、边框、上下左右的边等。于是就讲到了元素的盒模型。
盒模型
上面的这些属性使得元素的显示就像一个盒子一样。
但是我们指定了它的长和宽却并不一定是它最终展示出来的样子。因为元素的边框和内边距会撑开元素。
通常的做法是在设置长和宽是提前减去内边距和边框的宽度。另一种做法是使用box-sizing
这个属性,此时内边距和边框不再会增加元素的宽度。
.box-sizing {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box
}
position
为了实现更复杂的布局,需要对元素进行定位。position
这个元素有以下几个属性:
static
:默认值。不会进行特殊的定位。relative
:相对定位。对其设置top
、bottom
、left
、right
等属性可以使其偏离其正常位置。fixed
:固定定位。相对于浏览器的视窗而言。通常用于摆放不随页面滚动的元素。如固定的页首和页脚、固定的导航栏等。absolute
:绝对定位。相对于元素的父元素(或者如果没有父元素,就相对于文档的body
元素)进行定位。
浮动与清除浮动
使用上面的position
属性已经可以设计出复杂的布局了。但是对于并排显示或者环绕的效果,实现起来还是不够简洁。
使用浮动float
可以比较简便的实现以上布局。
使用了浮动属性的元素会脱离标准流(标准流就是块级元素独占一行,从上往下依次排布),但其他的元素仍处于标准流中,这时可能浮动的元素覆盖了其他一些元素。
解决方法是使用清除浮动clear
。注意clear
作用的对象是自身而不是其它浮动的元素。
如,clear: left
表示,不允许左边有浮动元素,所以此元素就会下移,避免被浮动元素遮挡。
浮动的元素还可能出现的问题是溢出。我们可以使用overflow:auto
使得父元素自动调整大小。
overflow
包括以下的值:
visible
:默认值。内容不会被修剪,会呈现在元素框之外。hidden
:内容会被修剪,并且其余内容是不可见的。scroll
:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。auto
:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inline-block
有了float
可以更方便的实现并排显示多个块级元素,不过还有更方便的一种方法。
前面提到的display
中的inline-block
可以将块级元素显示在行内。不过,你需要指定每一列的宽度。如:
.box {display: inline-block;width: 200px;height: 100px;margin: 1em;
}
媒体查询
为了实现响应式布局,可以使用媒体查询,针对不同的浏览器和设备“响应”不同的显示效果。如:
@media screen and (min-width:600px) {nav {float: left;width: 25%;}section {margin-left: 25%;}
}
@media screen and (max-width:599px) {nav li {display: inline;}
}
转载于:https://www.cnblogs.com/CodeCabin/p/4092803.html
《学习CSS布局》学习笔记相关推荐
- 第二行代码学习笔记——第六章:数据储存全方案——详解持久化技术
本章要点 任何一个应用程序,总是不停的和数据打交道. 瞬时数据:指储存在内存当中,有可能因为程序关闭或其他原因导致内存被回收而丢失的数据. 数据持久化技术,为了解决关键性数据的丢失. 6.1 持久化技 ...
- 第一行代码学习笔记第二章——探究活动
知识点目录 2.1 活动是什么 2.2 活动的基本用法 2.2.1 手动创建活动 2.2.2 创建和加载布局 2.2.3 在AndroidManifest文件中注册 2.2.4 在活动中使用Toast ...
- 第一行代码学习笔记第八章——运用手机多媒体
知识点目录 8.1 将程序运行到手机上 8.2 使用通知 * 8.2.1 通知的基本使用 * 8.2.2 通知的进阶技巧 * 8.2.3 通知的高级功能 8.3 调用摄像头和相册 * 8.3.1 调用 ...
- 第一行代码学习笔记第六章——详解持久化技术
知识点目录 6.1 持久化技术简介 6.2 文件存储 * 6.2.1 将数据存储到文件中 * 6.2.2 从文件中读取数据 6.3 SharedPreferences存储 * 6.3.1 将数据存储到 ...
- 第一行代码学习笔记第三章——UI开发的点点滴滴
知识点目录 3.1 如何编写程序界面 3.2 常用控件的使用方法 * 3.2.1 TextView * 3.2.2 Button * 3.2.3 EditText * 3.2.4 ImageView ...
- 第一行代码学习笔记第十章——探究服务
知识点目录 10.1 服务是什么 10.2 Android多线程编程 * 10.2.1 线程的基本用法 * 10.2.2 在子线程中更新UI * 10.2.3 解析异步消息处理机制 * 10.2.4 ...
- 第一行代码学习笔记第七章——探究内容提供器
知识点目录 7.1 内容提供器简介 7.2 运行权限 * 7.2.1 Android权限机制详解 * 7.2.2 在程序运行时申请权限 7.3 访问其他程序中的数据 * 7.3.1 ContentRe ...
- 第一行代码学习笔记第五章——详解广播机制
知识点目录 5.1 广播机制 5.2 接收系统广播 * 5.2.1 动态注册监听网络变化 * 5.2.2 静态注册实现开机广播 5.3 发送自定义广播 * 5.3.1 发送标准广播 * 5.3.2 发 ...
- 第一行代码学习笔记第九章——使用网络技术
知识点目录 9.1 WebView的用法 9.2 使用HTTP协议访问网络 * 9.2.1 使用HttpURLConnection * 9.2.2 使用OkHttp 9.3 解析XML格式数据 * 9 ...
- 安卓教程----第一行代码学习笔记
安卓概述 系统架构 Linux内核层,还包括各种底层驱动,如相机驱动.电源驱动等 系统运行库层,包含一些c/c++的库,如浏览器内核webkit.SQLlite.3D绘图openGL.用于java运行 ...
最新文章
- 每个人都应该了解的“机器学习”
- 深入探究系统中的输入输出管理
- 机器学习和大数据——提高信用卡安全性
- 《微服务设计》读书笔记
- 2周年福利 | 20万字《网易智企技术合辑》重磅发布!
- Java -- 内部类(一)
- 用java智能锁远程,从生产者-消费者模型了解线程、同步、锁(java)
- 为什么 Dapper 的批量插入比我预期的要慢很多?
- python读取postgresql数据库并发送相关提醒邮件
- 域服务器2008系统密码忘记了,如何在Server 2008 R2上重置您忘记的域管理员密码 | MOS86...
- 08-06 性能测试--测试报告与数据
- ftp服务器app配置文件,Ubuntu FTP服务器配置与应用
- 京沪广深同日发布网约车新规细则草案 滴滴回应称或将导致车辆供给骤减
- 电脑系统重装win7的教程,win7系统一键安装
- 华三交换机ping不通用户但用户_华三交换机ping不通路由器
- 1/1917钓鱼思维导图
- Android Studio使用技巧
- 微信小程序选择地址填写详细地址定位地点
- Dreamweaver 无法粘贴的解决方法
- c语言程序表达语句,《C语言程序设计》讲稿.doc
热门文章
- 推荐几篇近期必看的视觉综述,含GAN、Transformer、人脸超分辨、遥感等
- CVPR 2020 算法竞赛大盘点
- 谷歌大脑推出机器人强化学习平台,硬件代码全开源,花最少的钱,训超6的机器人...
- 新年快乐!我爱计算机视觉干货集锦与新年展望
- HTML MySQL实现登录注册_servlet+html+mysql实现登录注册功能
- 0基础学Python,要报班吗?
- 他回国后对学生说,玩会这12个游戏就能掌握python基础,其实不难
- Python 之父再度发声:我们能为中国的“996”程序员做什么?
- 白嫖GPU!Kaggle大神带你打比赛!
- Could not find module ‘D:\codna\Library\bin\geos_c.dll‘