Web前端第二季(CSS):七:第3章:盒子模型:306-盒子模型的外边距+307-外边距自动合并+308-边框样式+309-边框颜色和边框宽度
目录
一.目的
1.想：学习前端知识
2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。
二.参考
1.我自己代码的GitHub网址
1.SIKI学院:我参考此视频实操
1.w3school官网:当做字典使用
1.菜鸟教程：当做字典使用
三.注意
四.操作:1:成功:306-盒子模型的外边距
1.margin 上右下左
1.上下对应，右左对应，有上没有下的时候，下复制上的数值
1.父元素的左右居中，上下居中无法实现
四.操作:2:成功:307-外边距自动合并
1.类标签的边距自动使用最大的数值
1.父子盒子也是自动使用最大的数值
四.操作:3:成功:308-边框样式
1.设置
四.操作:4:成功:309-边框颜色和边框宽度
1.边框宽度
1.边框颜色
一.目的
1.想：学习前端知识
2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。
二.参考
1.我自己代码的GitHub网址
GitHub - xzy506670541/WebTest: SIKI学院的Web前端
1.SIKI学院:我参考此视频实操
Web前端第二季（CSS） - SiKi学院 - 生命不息，学习不止！
- 我参考此视频实操
1.w3school官网:当做字典使用
w3school 在线教程
1.菜鸟教程：当做字典使用
菜鸟教程 - 学的不仅是技术，更是梦想！
三.注意
四.操作:1:成功:306-盒子模型的外边距
1.margin 上右下左
1.上下对应，右左对应，有上没有下的时候，下复制上的数值
1.父元素的左右居中，上下居中无法实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body {margin: 0px;padding: 0px;}p {/* 外边距 *//* margin: 10px; */width: 1000px;height: 100px;/* 上右下左 *//* margin:10px 20px 30px 40px;*//* 上下对应，右左对应，有上没有下的时候，下复制上的数值 *//* margin: 10px 20px ; *//* auto左右居中 */margin: 10px auto 10px auto; }.parent{width: 500px;height: 500px;background-color: red;}.child{width: 200px;height: 100px;background-color: green;/* 父元素的左右居中，上下居中无法实现 */margin: 0 auto;}</style></head><body><div class="parent"><div class="child"></div></div><!-- p标签和div标签对比是有一些间距的 --><p>web（World WideWeb）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。[1]</p><p>web（World WideWeb）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。[1]</p><p>web（World WideWeb）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。[1]</p><div>web（World WideWeb）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。[1]</div><div>web（World WideWeb）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。[1]</div><div>web（World WideWeb）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。[1]</div></body>
</html>
四.操作:2:成功:307-外边距自动合并
1.类标签的边距自动使用最大的数值
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css"> /* 1.类标签的边距自动使用最大的数值 */.one,.two{width: 300px;height: 300px;}.one{background-color: red;margin-bottom: 30px;}.two{background-color: green;margin-top: 50px;} </style> </head><body><div class="one"></div><div class="two"></div></body>
</html>
1.父子盒子也是自动使用最大的数值
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 1.类标签的边距自动使用最大的数值 *//* .one,.two{width: 300px;height: 300px;}.one{background-color: red;margin-bottom: 30px;}.two{background-color: green;margin-top: 50px;} *//* 2.父子盒子也是自动使用最大的数值 */.one{width: 300px;height: 300px;}.two {width: 100px;height: 100px;}.one {background-color: red;margin-top: 30px;}.two {background-color: green;margin-top: 100px;}</style></head><body><div class="one"> <div class="two"></div> </div></body>
</html>
四.操作:3:成功:308-边框样式
1.设置
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{width: 500px;height: 500px;/* border: 10px solid green; */border: 10px;border-style: dashed; }</style></head><body><div></div></body>
</html>
四.操作:4:成功:309-边框颜色和边框宽度
1.边框宽度
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 500px;height: 500px;/* border: 10px solid green; */border-style: double;/* 边框宽度设置：上右下左 */border-width: 10px 20px 30px 40px;}</style></head><body><div></div></body>
</html>
1.边框颜色
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 500px;height: 500px;/* border: 10px solid green; */border-style: double;/* 边框宽度设置：上右下左 */border-width: 10px 20px 30px 40px;/* border-color: navajowhite; */border-top-color: #0000FF;border-right-color: #008000;border-bottom-color: #00FFFF;border-left-color: #A52A2A;}</style></head><body><div></div></body>
</html>
Web前端第二季(CSS):七:第3章:盒子模型:306-盒子模型的外边距+307-外边距自动合并+308-边框样式+309-边框颜色和边框宽度相关推荐
- Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
- web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 01.{HTML题目}HTML是什么意思? (B) A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 ...
- web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
- Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
- web前端第二周学习
第二周学习 二十一.嵌套列表 二十二.表格标签 二十三.表格属性 二十四.表单标签 二十五.表单相关标签 二十六.表格表单组合使用 二十七.div与span 二十八.CSS语法格式 二十九.内联样式与 ...
- 自学web前端怎么学？web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
- 【web前端开发】CSS浮动
文章目录 1.浮动 2.伪元素 3.标准流 4.行内块元素的问题 5.浮动的作用 6.浮动的特点 7.清除浮动 方法1:额外标签 方法2:单伪元素 方法3:双伪元素 方法4:overflow 1.浮动 ...
- Web前端学习html css（一）
10.15 1.1 导学 1.拨云见日 html ,css, 切图流程, PC企业布局, PC游戏布局 2.溯本求源 扩展html , 扩展css, html5新语法,css3新语法,兼容与hack ...
最新文章
- POC测试——原型验证，降低风险，IT系统销售工作之一
- jquery ajax 样例
- Linux常用命令——fsck
- Redis的Expire与Setex
- 版是什么_雕版研习 | 什么是版画？版是画的母亲，画是版的子女
- Jsp+SpringMVC+Mysql实现的进销存库存管理系统附带论文
- BAD packet signature 18245
- vue webpack打包后图片路径错误的解决方法
- oracle bip报表乱码,Oracle EBS的BIP报表中显示特殊字体
- VS2015卸载官方教程
- 跨平台数据库ODB实战1-ODB安装
- PS--人物皮肤处理流程（一）
- 专业导师告诉你，有哪些51单片机教程值得大力推荐
- Micro:Bit手柄试用之一MagicPad (解决蓝牙与gamePad包共存)
- 小米3 打开开发者选项
- SQL宝典(中文版) 高清PDF版下载
- python 计算月还款额度
- Android系统中的输入输出设备
- Whitelabel Error Page，status=404解决方法
- Shader(着色)