HTML知识点-盒子模型
一张图详细展示
实例：（是平时的作业！）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>#wrap{width: 900px;margin: 0 auto; margin-top: 5px;border:red solid 2px;}div{text-align: center;}#wrap::after{content:"";display: block;clear:both;}#pic{width: 420px;height: 300px;background-image: url(111.jpg);background-size: 95%;background-position: center;background-repeat: no-repeat;background-color: #77A;float: left;}#text{width: 420px;height: 550px;font-weight: bold;padding: 10px;background-image: url(111.jpg);background-repeat: repeat-y;background-size: 100% auto; margin-left: 40px;background-color: #77a;float:left;}#title{font-family: "华文彩云";font-size: 32px;}#author{font-family: "黑体";font-size: 12px;text-align: right;margin-bottom: 24px;}#content p{font-family: "隶书";font-size: 24px;border: 2px;letter-spacing: 0.5em;line-height: 1.5em;text-align: center;}h1{text-align: center;background-color: #667788;color: white;}img{width: 5%;height: 5%;border:2px solid gray;}img+p{display: inline-block;font-size: 25px;font-family: "微软雅黑";vertical-align:top;}span{font-weight: bold;font-size: 50px;vertical-align: middle;}</style>
</head>
<body><div id="wrap"><div id="pic"></div><div id="text"><div id="title">木兰花令.拟古决绝词</div><div id="author">纳兰性德</div><div id="content"><p>人生若只如初见，</p><p>何事秋风悲画扇。</p><p>等闲变却故人心，</p><p>却道故心人易变。</p><p>骊山雨罢清宵半，</p><p>泪雨霖铃终不怨。</p><p>何如薄幸锦衣郎，</p><p>比翼连枝当日愿。</p></div></div></div><h1>Head Line</h1><img src="实验8.jpg"/><p><span>M</span>obile Widget使用的标准的Web技术，如HTML，CSS，javascript等。这些经典的Web技术规范是由W3C（万维网联盟）的下属各个工作组制定并推进的。作为开发Widget之前的知识准备，在本章中我们将逐一介绍这些技术。</p>
</body>
</html>练习：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div#p1{border-radius: 50px;background-color: aquamarine;text-align: center;height: 50px;}div#p2{border: solid red 10px;height: 50px;border-radius: 10px 20px 30px 40px;background-color: blueviolet;}div#p3{background-color: burlywood;box-shadow: 15px 15px 5px bisque;border-radius: 10px;height: 100px;}</style>
</head>
<body><div id="p1">这是一个普普通通的圆角边框</div><br><div id="p2">这是border设置多个不同的边框，按照顺时针方向设置的</div><br><div id="p3"></div><br></body>
</html>HTML知识点-盒子模型相关推荐
- 【重识 HTML + CSS】盒子模型相关知识点
盒子模型 盒子模型 (Box Model) 宽度.高度相关 CSS 属性 - width.height 内边距相关 CSS 属性 - padding 外边距相关 CSS 属性 - margin [常见 ...
- 【CSS3】一文搞懂盒子模型（知识点加案例）
看透网页布局本质 行内元素比如文字类似牛奶,需要一个盒子把他们装起来,我们所学过的双标签都是一个盒子.有了盒子,我们就能任意的,自由的摆放位置了. 看透网页布局的本质:把网页元素比如文字图片等等,放入 ...
- css盒子模型相关知识点二
目录 一.垂直布局 二.外边距的折叠 三.内联元素的盒子 四.默认样式 五.盒子的大小 六.阴影和圆角 一.垂直布局 使用overflow属性设置父元素如何处理溢出的子元素: 可选值: visible ...
- 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...
- 盒子模型基本介绍及知识点
盒子模型 盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 盒子模型有元素的内容.边框(border).内边距(padding).和外边距( margin)组 ...
- html盒模型中border的写法,HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手...
很多小伙伴在前端学习的时候,发现盒子模型默认为正方形.如何把盒子变成想要的模型呢? 首先我们来看一下默认的情况---- .box{ width: 100px; height: 100px; backg ...
- html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...
- CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- 盒子模型代码_果冻公开课第五课：五分钟理清盒模型的前世今生
果冻公开课第五课:五分钟理清盒模型的前世今生 在前端程序员眼中,页面其实可以被视为一个个盒子组成的 那么,这些盒子是如何构建起整个页面的呢? 动画视频: 如何理解盒子模型 文字解析: 在上一节里面 我 ...
最新文章
- Windows下Node.js开发入门(1)
- JSPServlet学习手册
- 利用gulp对项目html,js,css,图片进行压缩
- eclipse build path 以及 clean(转)
- Unknown column 'XXX' in 'where clause'一例排查
- vue如何使用原生js写动画效果_深入理解 Vuejs 动画效果
- Python 位操作运算符
- hash地址_深入浅出一致性Hash原理
- 传统IT正在被颠覆，下一个风口会是互联网+吗？
- appium自动化测试环境部署_Android
- url请求特殊字符转换
- java 下划线_Java SE 9：“ _”（下划线）更改
- Python scapy网络包嗅探模块（转载）
- android抓包工具_无需额外工具，简单抓包教程
- 常用计算机接口类型,常见的电脑数据接口类型有哪些
- Unity角色动画详细学习记录
- 怎么看台式计算机是几位的,电脑多少位在哪里看_如何看电脑系统是多少位-win7之家...
- 订单类 京东快递电子面单接口的使用开发
- 【成长篇】选择一定很重要
- 经纬度与墨卡托坐标转化