HTML-HTML5+CSS3权威指南阅读(三、CSS3)

1.display 中 block, inline, inline-block 的区别

  1).默认情况下, block 宽度占满整个浏览器, inline 宽度等于其内容的宽度

  2).每行只容纳一个 block 元素, 但可以并列容纳多个 inline 元素

  3).block 元素宽、高、行高等可以更改, inline 元素宽、高、行高等不可更改

  4).应用 inline-block 的元素呈现为内联对象, 周围元素保持在同一行, 但可以设置宽度和高度地块元素的属性(这样可以使用 li + inline-block 制作导航, 而无需 float)

  5).若想将 table 改为 inline 可以是使用 inline-table

2.text-shadow, box-shadow

  text-shadow: 对文字加上阴影效果

  box-shadow: 对容器加上阴影效果

3.box-sizing

  content-box: 只是内容的宽高

  border-box: 内容和边框及补白的总宽高

4.

时间: 2024-11-05 16:30:44

HTML-HTML5+CSS3权威指南阅读(三、CSS3)的相关文章

html5+css3 权威指南阅读笔记(三)---表单及其他新增和改良元素

一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </form> <textarea form = testForm></textarea> 2.表单内元素的formaction属性 <form id="testForm" action="test.jsp"> <input t

HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)

在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似的讨论做个铺垫.大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念.在移动端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助. 概念:设备像素和CSS像素 你需要明白的第一个概念是CSS像素,以及它和设备像素的区别. 设备像素是我们直觉上觉

HTML-HTML5+CSS3权威指南阅读(一)

一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2). HTML5 中为 <!DOCTYPE html> 2.指定字符编码 1). HTML4 中为 <

HTML-HTML5+CSS3权威指南阅读(四、媒体查询)

1.媒体类型 HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性, 扩展了媒体类型的功能; 2.媒体特性检测媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成, 媒体查询中可用于检测的媒体特性有width.height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下, 为特定的一些输出设备定制

HTML-HTML5+CSS3权威指南阅读(五、深入理解viewport)

1.手机浏览器与桌面浏览器的不同 现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多.一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容, 不可避免的会出现字体被缩小的现象.想象一下电脑里12号字体缩小好几倍的效果吧. 所以如果将web网页移植为wap应用上,还是有许多问题需要考虑. 2.理解两个viewport的概念 做过wap开发的都知道 html的 <meta name=”viewport”> ,这是一个从iphone引入的meta,现在几乎所有手机浏览

HTML5与CSS3权威指南.pdf6

第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess,onError,options); 第一个参数为获取成功执行的回调函数,第二个为失败时执行的回调函数,第三个为一些可选属性的列表(第二个和第三个可选) navigator.geolocation.getCurrentPosition(function(position){ //获取成功时的处理(参数

HTML5与CSS3权威指南.pdf8

第17章 与背景和边框相关的样式 与背景相关的新增属性 background-clip指定背景的显示范围 background-origin指定绘制背景图像时的起点 background-size指定背景中图像的尺寸 background-break指定内联元素的背景图像进行平铺时的循环方式 在Firefox浏览器需要加“-moz-” Safari浏览器需要加“-webkit-” background-clip的值有border(背景范围包括边框区域)和padding(背景范围包括padding

HTML5与CSS3权威指南.pdf1

第2章 HTML5与HTML4的区别 HTML5的文件扩展符与内容类型保持不变仍为“.html”或“.htm”,内容类型(ContentType)仍为“text/html” DOCTYPE声明: HTML4中,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HT

HTML5与CSS3权威指南.pdf2

第三章 HTML5的结构 article元素更强调独立性,section元素强调分段,div元素强调css的套用,aretcle元素和section元素在核实的情况下可以调换 nav元素用作页面导航的链接组,通常里面包含<ul><li><a>元素 aside元素表示页面或文章的附属信息部分,可以是与当前页面或内容相关的参考资料,名词解释 time元素表示24小时中的某个时刻或日期<time datetime="2014-8-6T19:53-14:00&q