《css入门经典》第6章
1.每个HTML元素对应于一个显示盒子,但不是所有的元素都显示在屏幕上。
2.HTML元素显示为CSS显示盒子的真正方法称为“可视格式化方式”。可视格式化方式告诉浏览器应该如何在屏幕上显示HTML内容。
3.元素类型:
(1)块元素(block):以新行开始和结束。
等。
(2)内联元素(inline):没有独占一行,而是包含于文本流之中。,,,等。
4.display属性
通过设置display属性值可以改变元素的类型
display:none;不显示
display:block;设置为块元素
display:inline;设置为内联元素
5.匿名盒
当标签包含混合内容,比如文本和一些HTML标签时,会产生没有HTML标签的盒子,称为匿名盒。匿名盒的样式设置与其包含盒相同。
eg.
Hello World!
由图可知:文本Hello为匿名盒。6.在HTML中,标签的定义为display:none;。所以我们在页面中看不到标签的内容。
7.盒子的显示属性
边距:margin
边框:border
填充:padding
(1)边距margin:即两个盒子之间的间距。边距总是透明的。
注意:重叠边距,即两个垂直方向的盒子,它们在垂直方向的间距使用两个元素间的最大值。边距只在块元素上重叠,并且是在垂直方向重叠,不是水平方向。
(2)边框border:
border属性设置:选择符{ border:大小 样式 颜色; }
border-width |
规定边框的宽度。 |
border-style |
规定边框的样式。 |
border-color |
规定边框的颜色。 |
inherit |
规定应该从父元素继承 border 属性的设置。 |
Width:
thin |
定义细的边框。 |
medium |
默认。定义中等的边框。 |
thick |
定义粗的边框。 |
length |
允许您自定义边框的宽度。 |
inherit |
规定应该从父元素继承边框宽度。 |
Style:
none |
定义无边框。 |
hidden |
与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted |
定义点状边框。在大多数浏览器中呈现为实线。 |
dashed |
定义虚线。在大多数浏览器中呈现为实线。 |
solid |
定义实线。 |
double |
定义双线。双线的宽度等于 border-width 的值。 |
groove |
定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge |
定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset |
定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset |
定义 3D outset 边框。其效果取决于 border-color 的值。 |
inherit |
规定应该从父元素继承边框样式。 |
描述
最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过,CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗,也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定,创作人员对这个决定没有任何影响。(W3School)
(3)填充padding:内容周围的空间。填充总是和内容本身的背景颜色相同。
注意:
(1)表格单元
(2)行长em:在CSS中,一行长定义为等于位置大小的量度,是一个正方形,高度和宽度等于字体的高度。
相关文章推荐
• html +CSS+div学习――第二课_html/css_WEB-ITnose• 引入外部CSS的两种方式及区别_html/css_WEB-ITnose• 浏览器得到地址栏的相关信息_html/css_WEB-ITnose• 规范化css 命名(常用整理)_html/css_WEB-ITnose• 糟糕的css用法 1_html/css_WEB-ITnose独孤九贱(3)_JavaScript视频教程
javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。没有它,你的前端生涯是不完整的。《php.cn独孤九贱(3)-JavaScript视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了javascript知识。
JavaScript教程140570次播放
独孤九贱(6)_jQuery视频教程
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等,是全球最流行的前端开发框架之一。PHP中文网根据最新版本,独家录制jQuery最新视频教程,回馈PHP中文网的新老用户。
jQuery教程115479次播放
jQuery与Ajax基础与实战
jQuery是最流行的JS函数库,封装了许多实用的功能,其中最引人入胜的就是Ajax。 jQuery中的Ajax操作,语法简单,操作方便,使Ajax从未如此轻松,前端人员从此不再为与服务器异步交互而发愁,本套课程,精选了最常用的几个方法,从基本的语法到每个参数,再到具体实例进行了全面的讲解。
AJAX教程15147次播放
Git教程(60分钟全程无废话版)
Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持
JavaScript教程13285次播放