牛腩新闻发布系统(三):CSS盒子模型及其基本内容
2015-03-14 14:17
183 查看
导读:
这些天一直在做牛腩的网页,比如什么首页、出错页、新闻内容页等。在学习的不断推进中,一些刚开始理解的不是很好的东西,也逐渐的深刻了起来。下面,就对这一段时间的学习,做一个总结。主要总结内容有:盒子模型,CSS选择器优先级,标准流和浮动。一、概念把握
【1】盒子模型:
下图就是一个盒子模型的图例(将就着看吧,我也是尽力了!)。别的就不多说,相信这张图,大家都能看懂。主要说一下自己在学习后,对这些概念的理解。TOP:
margin(边界、留边):现在看到它,我就想起以前老师讲on和over的区别。当margin-top为0 时,就等于on。也就是说边界为零,紧贴,就像把两个盒子紧紧的贴在一起一样。当margin-top不为0 时,就相当于over了,也就是两个盒子中间有一定得间隔或缝隙。
优点:紧贴在一起的东西当然没有有空隙的东西易于取放,所以,设计好margin-top的值,会易于盒子的取放。
border(边、边框):就是盒子本身的大小了。如果border值为100px,那么就代表着盒子长100个像素。
padding(衬料、填充):这个最好理解了,尤其是网淘过瓶瓶罐罐的女性。通常,为了防止盒子里的东西被摔坏,会给垫上一层泡沫或是报纸什么的。而那个被垫上去的东西的长度大小,就是padding的大小。
content(内容):这是实际物品的大小。比如说包裹中,那个瓶子的大小。
注:1,在实际生活中,一个盒子只能装固定大小的东西,可是,在CSS中,盒子的大小,可以随着content的大小,自动扩充。呃,姑且当压缩袋理解吧!
2,left、right、bottom同理top。
【2】选择器:
1,ID选择器:允许以一种独立于文档元素的方式来指定样式。2,类选择器:在 CSS 中,类选择器以一个点号显示。
3,HTML选择器:用于来定义一类可以在同一个页面内重复利用的样式,或者自己定义的用于新闻列表的样式,详细的写好链接、列表、边框以及背景等属性,有些人还会习惯把一些常用的属性作为一个类。
【3】标准流
理解:标准流就像是VB过程中的顺序语句一样,写在前面的排在前面显示,写在后面的在后面显示。例外:加上了浮动等!
注:优先级为:ID>类>HTML。
二、实践学习
1,块级元素<div>;ID选择器和类选择器
样式表设置:
2,行内元素<span>
注:这是通过改块级元素为行内元素实现,也可以通过浮动实现。(前面的同块级元素,只更改样式表)
3,盒子模型
三、学习感受
刚开始看见这个的时候,一点都不知道是啥。用多了吧,老是在写那几个东东,也就大概的知道了点。再一具体总结,就基本明白了。学习,要不断的重复、总结!我真的是借助网淘玻璃易碎品的经验理解的盒子模型,呃,不管怎么着吧,我觉得还是蛮形象的。
相关文章推荐
- 牛腩新闻发布系统(三):CSS盒子模型及其基本内容
- 【牛腩新闻发布系统】改变表格的内容
- 【牛腩新闻发布系统】-HTTP错误 403.14 –Forbidden Web服务器被配置为不列出此目录的内容
- 牛腩新闻发布系统拦路虎——“HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容”
- 牛腩新闻发布系统总结
- 牛腩新闻发布系统概况
- 牛腩新闻发布系统总结
- 牛腩新闻发布系统笔记5:防止SQL注入以及实体类的使用
- 牛腩新闻发布系统笔记8:新闻评论操作类的实现
- 牛腩新闻发布系统——触发器使用
- 牛腩新闻发布系统---总体概况
- 牛腩新闻发布系统"小插曲"------"项目文件""已被重命名或已不在解决方案中"
- 牛腩新闻发布系统笔记11:存储过程的编写
- 对牛腩新闻发布系统视频的总结
- 牛腩新闻发布系统——触发器使用
- 牛腩新闻发布系统总结
- 学习牛腩新闻发布系统
- 牛腩新闻发布系统综合笔记(三)
- 牛腩新闻发布系统笔记7:类别表操作类的实现
- 1月份看牛腩的视频写的新闻发布系统,在此谢谢牛腩老师