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. vue的混合mixins学习
			
    mixins   混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.   混合对象可以包含任意组件选项.   当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选 ...
    
			
    2. 
						
  2. Mac实用技巧之：访达/Finder
			
    更多Mac实用技巧系列文章请访问我的博客:Mac实用技巧系列文章 Finder就相当于windows XP系统的『我的电脑』或win7/win10系统里的『计算机』(打开后叫资源管理器),find是查 ...
    
			
    3. 
						
  3. ftp上传与下载文件
			
    准备工作 服务器已经配置好ftp服务 服务器linux centos 7.4 搭建ftp服务器:https://www.cnblogs.com/mmzs/p/10601683.html 需要用到的ja ...
    
			
    4. 
						
  4. Eclipse4JavaEE配置Tomcat运行环境
			
    如果我们想搭一个网站,我们可以使用Eclipse for JavaEE IDE进行开发. 初次使用需要配置网站的运行环境,可以去Apache官网下载Tomcat 8.5或Tomcat 9的版本 然后打 ...
    
			
    5. 
						
  5. 非常易于理解‘类'与'对象’ 间 属性 引用关系，暨《Python 中的引用和类属性的初步理解》读后感
			
    关键字:名称,名称空间,引用,指针,指针类型的指针(即指向指针的指针) 我读完后的理解总结: 1. 我们知道,python中的变量的赋值操作,变量其实就是一个名称name,赋值就是将name引用到一个 ...
    
			
    6. 
						
  6. Linux使用nginx反向代理。可实现域名指向特定端口
			
    在配置80指向域名的时候出现端口占用,使用kill -9无法杀死端口,应使用下面的命令来杀死进程killall -9 nginx(使用完本命令需要再把配置过的配置文件重新启动.命令写在了PS下面)后在 ...
    
			
    7. 
						
  7. SQL 获取时间段内日期列表
			
    declare @start date,@end date; set @start='2010-01-01'; set @end='2010-02-01'; --获取时间段内日期列表 select [ ...
    
			
    8. 
						
  8. java笔记----获取项目resource中class下的路径
			
    String path =类名.class.getClassLoader().getResource("./包/文件名").getPath(); 相对路径推荐使用这个 类名.cla ...
    
			
    9. 
						
  9. JPA实现复杂条件分页查询
			
    相信熟悉Hibernate的人对于ORM给编程带来的便利于快捷一定不陌生,相对于MyBatis等需要编写复杂的SQL语句,ORM映射为我们带来的便利显而易见.但是,在获得便利的同时,失去的便是灵活性, ...
    
			
    10. 
						
  10. UNIX DOMAIN SOCKET效率
			
    关于UNIX DOMAIN SOCKET和普通udp socket的对比 在TX1(4核A57 1.7GHz)的板卡上进行测试,每个包大小设置为1024,全速收发,UDS的速度在90Mbps左右,UD ...
    
			
    11.