使用html记笔记,开始学习HTML,并记下笔记
开始学习HTML,并记下笔记。
外边距(不影响可见框大小,影像盒子位置)
margin-top(上)
right(右)
bottom(下)
left(左)
“外边距也可以为一个负值,元素会反方向移动”
margin还可以设置为auto,auto一般只设置给水平方向的margin.
如果只指定,左边距或右边距的margin为auto则会将外边距设置为最大值
如果两侧同时设置,则两侧的外边距会设置为相同的值。
就可以使元素自动在父元素中居中,所以通常左右同事设置auto,以使子元素在父元素中水平居中。
(垂直方向设置auto,则外边距默认就是0)
margin-left:auto;
垂直外边距的重叠
在网页中相邻的垂直方向的外边距会发生外边距的重叠(指兄弟元素之间的相邻外边距会取最大值而不是取和)
!可在两个元素间加一个a而使他们外边距相加
如果父子元素的垂直边距相邻了,则子元素的外边距会设置给父元素。(可在两个元素间加一个a而使他们外边距相加“不建议使用”)
!可谓子元素设置一个上边框:设置Padding-top:1px;
!可谓父元素设置一个上边距Padding-top:100px;(将父元素的高降低100px)
浏览器默认样式
浏览器为了在页面没有样式时,也可以有一个比较好的显示效果,
所以为很多元素都设置了一些默认的margin和padding,(不需要使用,通常都会去掉浏览器的默认样式)
“标签名”{
margin:0;
}(过于麻烦)
*{
margin:0;
padding:0;
} (清除浏览器默认样式)
内联元素的盒模型
内容区:内联元素不能设置width和hight
水平方向内边距:内联元素可以设置水平方向内边距
垂直方向内边距:内联元素可以设置垂直方向内边距,但是不会影响布局。
边框:可以设置边框,但是垂直边框不会影响布局,水平会。
水平外边距:支持水平方向外边距,且不会重叠而是求和。
垂直外边距:不支持。
display和visibility
一个连接(内联元素不支持宽和高)
但是可以讲一个内联元素变成块元素,通过display样式可以修改元素的类型。
display
可选值:
inline:可以将一个元素作为内联元素显示
block:可以将一个元素设置为块元素显示
inline-block:将一个元素转换为行内块元素(既可以设置宽高也不会独占一行)
none:不显示元素并且元素不会在页面继续占有位置
visibility(可以用来设置元素显示和隐藏的状态)
可选值:
Visible:默认值
Hidden:元素会隐藏不显示,但是它的位置会依然保持
overflow
{子元素默认是存在于父元素的内容区中,理论上子元素的大小最大等于父元素内容区的大小,如果子元素的设置的大小超过了父元素的内容区,则超出的部分会在父元素以外的地方显示,及溢出的内容,}
通过overflow可以设置父元素如何处理溢出的内容。
可选值:
visible:默认值
hidden:溢出的部分会被修剪,不显示
scroll:会为父元素添加滚动条,通过拖动滚动条来查看完整的内容,而且不论内容是否溢出,都会添加水平和垂直双方向的滚动条。
auto:会根据需求自动添加滚动条(水平或垂直或无)
文档流
文档流处在网页的最底层 ,它表示的是一个页面中的位置。我们所创建默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行,块元素会自上而下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中高度默认被内子元素(内容 )撑开
内联元素
1.内联元素在文档流中只占自身大小,会默认自左向右排列,如果一行中不足以容纳所有的内联元素,则会换到下一行。继续自左向右
2.前提在文档流中,内联元素的宽度和高度默认被内子元素(内容 )撑开
【“width和hight的默认值为auto”当元素的高和宽度的值为auto时,此时指定内边距不会影响可见框的大小,而是会自动修改宽度和高度,以适应内边距。】
使用html记笔记,开始学习HTML,并记下笔记相关推荐
- 系列笔记 | 深度学习连载(5):优化技巧(下)
点击上方"AI有道",选择"星标"公众号 重磅干货,第一时间送达 深度学习中我们总结出 5 大技巧: 本节继续从第三个开始讲起. 3. Early stoppi ...
- 系列笔记 | 深度学习连载(2):梯度下降
点击上方"AI有道",选择"星标"公众号 重磅干货,第一时间送达 我们回忆深度学习"三板斧": 1. 选择神经网络 2. 定义神经网络的好坏 ...
- 学习自旋电子学的笔记00:杂谈(闲话) OOMMF软件的安装
文章目录 前言 一.杂谈 二. OOMMF软件的安装 1.TK环境的安装 2.下载OOMMF资源包 总结 年年岁岁花相似,岁岁年年人不同.--刘希夷<代悲白头翁> 前言 时光飞逝,日月如梭 ...
- 腾讯优图一年记:贾佳亚的专访笔记
腾讯优图一年记:贾佳亚的专访笔记 关于规模 关于服务 业务成熟的原因 我们选择任务时考虑的因素有三点(目标:尽量高效利用资源) 关于技术与需求之间的gap 学术的人才来工业界的优势 学术界与工业界的g ...
- 怎么用手机记笔记?安卓手机超实用的笔记app
都已经到2023年了,现在还有人随着携带纸质笔记本来记笔记吗?与纸质笔记本相比,手机笔记APP上不仅支持用户添加文字.图片.视频等多种格式的文件随手做笔记,而且更加便于修改.保存.删除.分享等,可以提 ...
- 扇贝python课程打卡_扇贝打卡500天纪实——如何有效利用扇贝记单词、学习英语?...
扇贝打卡500天纪实--如何有效利用扇贝记单词.学习英语? 编者按: 背单词到底有没有用?打卡1000天后能不能无障碍地阅读英语原著?为什么有人打卡1000天了还在背单词,难道学习三年之后,英语的实际 ...
- 计量经济学学习与Stata应用笔记(三)Stata入门实例
计量经济学学习与Stata应用笔记(三)Stata入门实例 使用的版本为stata15. 电力行业规模报酬的经典研究 本例为Nerlove(1963)对电力行业规模的经典研究. 导入数据 Excel的 ...
- Yann Lecun纽约大学《深度学习》2020课程笔记中文版,干货满满!
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! [导读]Yann Lecun在纽约大学开设的2020春季<深度学习>课 ...
- 【干货】机器学习经典书PRML 最新 Python 3 代码实现,附最全 PRML 笔记视频学习资料...
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 将 Bishop 大神的 PRML 称为机器学习圣经一点也不为过,该书系统地介绍了 ...
最新文章
- KDD 18 论文解读 | GraphWave:一种全新的无监督网络嵌入方法
- 函数返回指针类型(strchr函数)
- 如何知道mysql的地址_如何知道自己的计算机上mysql的地址?
- mysql怎么退出时保存导出_Mysql应用使用MySQL MySqldump命令导出数据时的注意事项...
- LiteOS内核源码分析:任务栈信息
- ORA-00018-超出最大连接数
- Bailian2936 试剂配制【标记+逻辑】
- asp网上书店的代码_使用Helm将ASP.NET Core应用程序部署到Kubernetes容器集群
- 服务器用户配置文件在哪里找,SharePoint Server 中的服务器到服务器身份验证和用户配置文件...
- 微信端修改title
- era5数据内容说明_接口测试:A04_HttpRunner通用_02_提取数据_01_extract关键字
- 用 DocFetcher 全文搜索
- java课程设计学生信息管理系统。
- 到底如何理解文本?一文读懂命名实体识别(实体消歧和实体统一)
- CentOS更改语言两种方式
- 当你痛苦时,想想别人更深重的痛苦吧!
- C++ 单词转换例子
- Android NFC智能卡介绍
- NC19822 我不爱她 kmp+hash
- linux 手机互传,轻松实现Linux笔记本和手机、PDA互传文件(转)
热门文章
- 聊聊spring cloud gateway的XForwardedHeadersFilter
- 解决Mac10.13 Pod报错 -bash: /usr/local/bin/pod: /System/Library/Frameworks/Ruby.fram
- Spring Boot Servlet
- 如何在{{input}}中使用action
- 转: RSA原理 阮一峰的博客
- PHP autoload实践
- 使用.NET Remoting开发分布式应用——基于租约的生存期(转载)
- 数据冒险控制冒险_劳动生产率和其他冒险
- 数据分析师 需求分析师_是什么让分析师出色?
- 黑苹果 wifi android,动动手指零负担让你的黑苹果连上Wifi