Html指超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素。

打个比方，房子墙和柱的结构就是Html，CSS代表你的装修风格。

网页的所有元素都是由盒子组成，盒子都是矩形方框。

盒子模型：

margin外边距,padding内边距，boder是边界。

下图，当你按下F12,点击元素h2(标题二的意思)，就出现了一个方框。

那么圆形是如何实现的呢？

当你关闭Styles里的border-radius:50%是这样的：

所以网站上的一切实际上都是方框。

html的格式:

<!DOCTYPE html>  <!-- 网络上有很多不同的文件,<!DOCTYPE>声明有助于浏览器中正确显示网页, -->
<html>
<head> <!--<head> 元素包含了所有的头部标签元素. 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.-->
    <title>文档标题</title>
</head>
<body> 可见文本... <!-- <body> 元素定义了 HTML 文档的主体。 -->
</body>
</html>

例子:Android端firefox已测试，Android端chrome不能打开本地资源，图片无法显示，

html:
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">   <!-- 适配中文-->
    <title>Pictures</title>  <!-- 网页的标题-->
    <link rel="stylesheet" type="text/css"  href="css/style.css"> <!-- 指定了css文件-->
</head>
<body>
    <div class="image">
        <p>Sunset</p>
        <img src="css/sunset-sd_2.png">
        <p>Skyline</p>
        <img src="css/zurich.png">
    </div>
</body>
</html>

style.css:


* {
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body div{
    max-width: 100%;
}

.image img{
    display:block;;
    margin: auto;
    max-width: 100%;
}

p{
    text-align: center;
}

效果图：



												


											
Html，CSS和盒子的更多相关文章
	

    
						
  1. div垂直居中 css div盒子上下垂直居中
		
    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
    
		
    2. 
						
  2. 深入理解CSS系列（一）：理解CSS的盒子模型
		
    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
    
		
    3. 
						
  3. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
		
    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局)  ...
    
		
    4. 
						
  4. 使用css弹性盒子模型
		
    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
    
		
    5. 
						
  5. 认识CSS中盒子模型
		
    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
    
		
    6. 
						
  6. #CSS的盒子模型、元素类型
		
    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
    
		
    7. 
						
  7. 深入了解CSS中盒子模型
		
    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
    
		
    8. 
						
  8. CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法
		
     CSS 实现盒子模型水平居中 水平居中效果图如下: HTML: CSS 全局样式: 方法一:使用margin: 0 auto;(只适用于子盒子有宽的时候) 方法二:text-align + disp ...
    
		
    9. 
						
  9. CSS 弹性盒子模型
		
    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
    
		
    10. 
						
  10. css 大话盒子模型
		
    什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. DotNetCore跨平台~2.0提前发布喽
			
    回到目录 提前1个多月把2.0发布出来了,小微真的把持不住了,哈哈! windows上安装 http://mp.weixin.qq.com/s/ueJdhaBBCHga0sQlVD6YiQ https ...
    
			
    2. 
						
  2. [翻译] 使用 Python 创建你自己的 Shell：Part II
			
    目录 使用 Python 创建你自己的 Shell:Part II 原文链接与说明 步骤 4:内置命令 最后的想法 使用 Python 创建你自己的 Shell:Part II 原文链接与说明 htt ...
    
			
    3. 
						
  3. python ddt数据驱动（简化重复代码）
			
    在接口自动化测试中,往往一个接口的用例需要考虑 正确的.错误的.异常的.边界值等诸多情况,然后你需要写很多个同样代码,参数不同的用例.如果测试接口很多,不但需要写大量的代码,测试数据和代码柔合在一起, ...
    
			
    4. 
						
  4. HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）
			
    传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...
    
			
    5. 
						
  5. 分布式缓存Hazelcast案例一
			
    分布式缓存Hazelcast案例一 Hazelcast IMDG Architecture 今天先到这儿,希望对您技术领导力, 企业管理,物联网,  系统架构设计与评估,团队管理, 项目管理, 产品管 ...
    
			
    6. 
						
  6. WPF 自定义 ImageButton
			
    控件源码: public class ImageButton : Button    {        public ImageButton() {        } public string No ...
    
			
    7. 
						
  7. Java集合类源码解析：Vector
			
    [学习笔记]转载 Java集合类源码解析:Vector   引言 之前的文章我们学习了一个集合类 ArrayList,今天讲它的一个兄弟 Vector.为什么说是它兄弟呢?因为从容器的构造来说,Vec ...
    
			
    8. 
						
  8. Spring MVC（三）控制器获取页面请求参数以及将控制器数据传递给页面和实现重定向的方式
			
    首先做好环境配置 在mvc.xml里进行配置 1.开启组件扫描 2.开启基于mvc的标注 3.配置试图处理器 <?xml version="1.0" encoding=&qu ...
    
			
    9. 
						
  9. IDEA 安装配置可视化 MongDB 插件
			
    IDEA 安装配置可视化 MongDB 插件 1.安装MongoDB插件 打开 IDEA ,file --> settings --> plugins,在右边搜索栏中输入Mongo,点击  ...
    
			
    10. 
						
  10. jQuery内容过滤选择器与子元素过滤选择器用法实例分析
			
    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...
    
			
    11.