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. CollapsingToolbarLayoutDemo【可折叠式标题栏，顺便带有CardView卡片式布局】
			
    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 CollapsingToolBarLayout是一个作用于ToolBar基础之上的布局,它也是由Design Support库提供的 ...
    
			
    2. 
						
  2. [深度应用]·DC竞赛轴承故障检测开源Baseline（基于Keras 1D卷积 val_acc:0.99780）
			
    [深度应用]·DC竞赛轴承故障检测开源Baseline(基于Keras1D卷积 val_acc:0.99780) 个人网站--> http://www.yansongsong.cn/ Githu ...
    
			
    3. 
						
  3. Flink重启策略
			
    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...
    
			
    4. 
						
  4. mysql索引规范
			
    索引并不是越多越好!索引可以提高查询效率,但会降低增删改效率.但多了甚至会降低查询效率. Innodb是按照主键索引的顺序来组织表,如没有建立主键,mysql会选择第一个非空唯一索引做为主键,或生成一 ...
    
			
    5. 
						
  5. 1.5准备CentOS和Nginx环境「深入浅出ASP.NET Core系列」
			
    准备CentOS 1.1虚拟机 CentOS的安装这里使用vmware workstation 14来做虚拟机,当然你也可以用Oracle的虚拟机或者不用虚拟机,使用云服务或者使用双系统,不是什么大问 ...
    
			
    6. 
						
  6. [JavaScript] requireJS基本使用
			
    requireJS 是一个 AMD 规范的模块加载器主要解决的js开发的4个问题1. 异步加载,防止阻塞页面渲染2. 解决js文件之间的依赖关系和保证js的加载顺序3. 按需加载 来实现一个 requ ...
    
			
    7. 
						
  7. void类型和void* 的用法
			
    C语言中的void  和 void * 总结 1.void的作用 c语言中,void为“不确定类型”,不可以用void来声明变量.如:void a = 10:如果出现这样语句编译器会报错:variab ...
    
			
    8. 
						
  8. Java建造（Builder）模式
			
    一.什么是建造模式: 建造模式可以将一个产品的内部表象与产品的生成过程分割开来,从而使一个建造过程生成具有不同内部表象的产品.客户端不需要知道产品内部的结构和生产过程. 二.建造模式的结构: Buil ...
    
			
    9. 
						
  9. Umi+Dva搭建Cesium 3D开发环境
			
    umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架,是蚂蚁金服的底层前端框架,已直接或间接地服务了 600+ 应用,包括 java.node.H5 无线.离线(Hybrid)应用.纯 ...
    
			
    10. 
						
  10. 详细QRCode生成二维码和下载实现案例
			
    using System; using System.Collections.Generic; using System.Linq; using System.Web; using ThoughtWo ...
    
			
    11.