index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS盒模型[下]</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- <div>我是HTML5</div> sdfsdfsdf <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> --> <!-- <div>我是块级元素</div> --> <!-- <span>我是行内元素</span> --> <!-- <img src="img.png"> --> <!-- <div>我是块级元素，将要转成行内元素</div> --> <!-- <span>我是行内元素，将要转成块级元素</span> --> <!-- <div>我是块级元素，将要转成行内块元素</div> <span>我是行内元素，将要转成行内块元素</span> sdfsd --> <div id="a">我是a</div> <div id="b">我是b</div> <!-- <div id="c">我是c</div> <div id="d">sdfsdfsdf</div> --> </body> </html>
style.css
@charset "utf-8";
/*
div {
background: silver;
width: 200px;
height: 200px;
/*visibility: visible;
visibility: hidden;
visibility: collapse;
}
table tr:first-child {
visibility: hidden;
visibility: collapse;
}
*/
/*div {
background: silver;
width: 200px;
height: 200px;
}*/
/*span {
background: silver;
width: 200px;
height: 200px;
}*/
/*img {
width: 100px;
height: 50px;
}*/
/*div {
background: silver;
width: 200px;
height: 200px;
display: inline;
}*/
/*span {
background: silver;
width: 200px;
height: 200px;
display: block;
}*/
/*div,span {
background: silver;
width: 200px;
height: 200px;
display: inline-block;
}
span {
display: none;
}*/
div {
width: 200px;
height: 200px;
}
/*#a {
background: maroon;
float: left;
}
#b {
background: green;
float: left;
}
#c {
background: blue;
float: left;
}
#d {
height: 300px;
background: orange;
float: left;
}*/
/*#a {
background: maroon;
float: right;
}
#b {
background: green;
float: left;
}*/
#a {
background: maroon;
float: left;
}
#b {
background: green;
float: none;
clear: both;
}
相关推荐
标题“第16章 CSS盒模型[上]”暗示我们将讨论盒模型的基本概念和属性，可能涵盖内容区、填充、边框和外边距的设置。通常，这部分会讲解如何使用CSS来调整这些属性，以便在不同浏览器间实现兼容性布局。 在描述中...
在给定的文件内容中，涉及到了CSS盒模型的三个主要学习要点：元素可见性、元素盒类型以及元素的浮动布局。 首先，元素的可见性可以通过CSS的visibility属性来控制。visibility属性有三个值： - visible：默认值，...
布局是指如何在页面上组织和排列元素，有多种布局技术，如流式布局（适合文本为主的网站）、网格布局（常用于响应式设计）、Flexbox（灵活的盒子模型，适用于复杂布局）和CSS Grid（二维网格系统，适用于复杂布局和...
在第六章“HTML5+CSS3网页设计-第六章 盒子模型”中，我们将深入探讨这些概念。 首先，要设置一个`<li>`标签的下边框为1px的蓝色虚线，可以使用以下CSS代码： ```css li { border-bottom: 1px dashed blue; } ``` ...
在本章“精通CSS+DIV源码”...总之，“精通CSS+DIV源码”的第16章将引导你深入理解CSS布局技术，掌握构建现代网页设计所需的技能。通过学习这一章的内容，你将能够更有效地设计和实现美观、功能齐全且适应性强的网页。
**第十一章：CSS布局模式** 这一章深入探讨了网格布局、Flexbox（弹性盒子）和Grid（CSS布局网格），这些都是现代网页布局的重要工具，可以创建更加灵活和响应式的页面结构。 **第十二章：实战案例分析** 通过实际...
盒模型是CSS布局的核心概念，它将每个元素视为一个矩形盒子，包含内容区域、内边距、边框和外边距。理解盒模型对于精确控制元素的尺寸和间距至关重要。 五、布局技术 1. 浮动布局：使用`float`属性让元素在容器内...
李刚 疯狂HTML5CSS3JavaScript讲义的源代码 第一部分 第1章 HTML 5简介 ... 第16章 本地存储与离线应用 第17章 使用Worker创建多线程 第18章 客户端通信 第四部分 第19章 HTML 5的疯狂俄罗斯方块
第16章 我的博客 16.1 分析构架 16.2 模块拆分 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 17.2 模块拆分 17.3 整体调整 第18章 企业网站 18.1 分析构架 ...
第1章 （X）HTML与CSS核心基础 ... 1.1.1 追根溯源 1.1.2 DOCTYPE（文档类型）的含义与选择 ... 1.2 （X）HTML与CSS ...第16章 综合案例研究 第17章 从学习到创作 附录 CSS英文小字典
其中包括：第一章 HTML基础 第二章 HTML基础(2).ppt 第三章 CSS样式表_语法规则 第四章 CSS样式表_样式控制 第五章 CSS样式表_盒子模型.ppt 第...JavaScript_HTML DOM对象.ppt 第十六章 JavaScript_表单验证与特效.ppt
第16章 我的博客 16.1 分析构架 16.2 模块拆分 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 17.2 模块拆分 17.3 整体调整 第18章 企业网站 18.1 分析构架 ...
第16章 我的博客 16.1 分析构架 16.2 模块拆分 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 17.2 模块拆分 17.3 整体调整 第18章 企业网站 18.1 ...
第1章 （X）HTML与CSS核心基础 1.1 HTML与XHTML 1.1.1 追根溯源 1.1.2 ...变宽度网页布局剖析与制作 第15章 “CSS禅意花园”作品研究 第16章 综合案例研究 第17章 从学习到创作 附录 CSS英文小字典
《CSS禅意花园》是CSS设计领域的一本经典著作，其第1章主要探讨了CSS的基础知识和设计理念，旨在帮助读者建立起对CSS的全面理解。在这个章节中，你会了解到CSS在网页设计中的重要性，以及如何通过优雅地使用CSS来...
第16章 本地存储与离线应用 535 16.1 Web Storage 536 16.2 Indexed数据库API 545 16.3 离线应用 564 16.4 本章小结 571 第17章 文件支持与二进制数据 572 17.1 HTML 5增强的文件上传域 573 17.2 ...
盒模型是理解CSS布局的关键。它包括元素的内容区域、内边距（padding）、边框（border）和外边距（margin）。理解盒模型有助于控制元素的大小和位置。 五、CSS的布局模式 1. 块级布局：元素占据整行，如`div`。 2....
全书pdf 210M, 共分9个分卷, 这是第8分卷 中文名: 精通CSS与HTML设计模式 英文名: Pro CSS and HTML Design Patterns ...第16章 列布局 第17章 布局 第18章 字母下沉 第19章 强调框和引用 第20章 提示框 索引...