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. 实现一个简单的基于Token的身份认证
			
    这个例子是基于客户端与webapi进行进行交互的身份认证,当然也适用于其他情况下的身份认证.   简单的交互过程: 1.首先输入用户名.密码进行登录操作 2.服务器验证用户名.密码的正确性,验证通过之 ...
    
			
    2. 
						
  2. 用SpringCloud进行微服务架构演进
			
    在<架构师必须要知道的阿里的中台战略与微服务> 中已经阐明选择SpringCloud进行微服务架构实现中台战略,因此下面介绍SpringCloud的一些内容,SpringCloud已经出来 ...
    
			
    3. 
						
  3. Docker最全教程之使用Tencent Hub来完成CI(九）
			
    使用Tencent Hub来完成CI 关于Tencent Hub Tencent Hub是腾讯出品的DevOps服务.主要提供多存储格式的版本管理,支持Docker Image.Binary.Helm ...
    
			
    4. 
						
  4. 记一个 DataBindings遇到的坑，当ComboBox同时绑定DataSource与DataBindings的时候，绑定的元素一定要同名
			
    下面的两个member1 一定要一样才行,不然会导致绑定异常 comboBox1.DisplayMember = "member1"; comboBox1.DataBindings ...
    
			
    5. 
						
  5. MVC中使用Ninject依赖注入
			
    在.NET MVC中使用Ninject注入,主要分为以下几步: 使用NuGet包添加Ninject引用,我添加的是目前最新版本3.34 在App_Start文件夹下,创建NinjectControll ...
    
			
    6. 
						
  6. 006. SSO 单点登录（同域SSO/跨域SSO）
			
    SSO 单点登录:一次登录,处处登录. 只需在一个登录认证服务下进行登录后,就可访问所有相互信任的应用 同域 SSO 1. session-cookie机制:服务端通过cookie认证客户端. 用户第 ...
    
			
    7. 
						
  7. 移动开发基础-学习笔记二-字体图标、less、bootstrap入门
			
    1.字体图标 1.字体图标都是用svg图片 1.svg图片不失真 2.svg图标由设计师提供 3.为了减少网络请求,会把svg图标转换成字体图标,放到字体文件中,通过字体库的方式使用 2.制作步骤 1 ...
    
			
    8. 
						
  8. 在react中实现打印功能
			
    最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...
    
			
    9. 
						
  9. Android远程桌面助手(B1309)
			
    修改了窗口缩放的处理,支持Android Car等非常规分辨率的Android设备: 修改了获取Android端软件版本的方法,优化了APK的升级逻辑: 优化了远程输入法功能,支持利用PC端输入法快速 ...
    
			
    10. 
						
  10. VS fopen sprinft ... unsafe 问题
			
    我的用的是VS2017 VS项目->右键属性(最下面)->C/C++->预处理器->预处理器定义->编辑->加上_CRT_SECURE_NO_WARNINGS  - ...
    
			
    11.