html的标签位置属性（学习笔记）

div：定义位置有两种方式：一种是使用相对位置，一是使用绝对位置。

绝对定位有两个属性：left和top，分别是距离网页左边和网页顶部的绝对位置。借助style属性，按照如下的格式进行设置：

style = "position:absolute;left:距离左边距离;top:距离顶部距离"

例如：

<div name = "mydiv" id="mydiv" style="position:absolute;left:200px;top:200px">
JavaScript
</div>

相对定位同样也是两个属性：left top

style="position:relative;left:距离左边距离;top：距离顶部距离"

除了定义位置，还能够定义尺寸大小，定义尺寸大小需要用到width和height属性，格式如下：

style="width:宽度;height:高度"

例如：

 <div style="position:relative;left:200px;top:100px;width:400px;height:50px">div 层
</div>

例如：

如何让div居中：

div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。
{text-align: center; /*让div内部文字居中*/background-color: #fff;border-radius: 20px;width: 300px;height: 350px;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;
}注意：margin: 0 auto； 就是上下距离为0， auto就是左右自适应两边距离一样margin:auto；效果就是左右自适应两边距离一样，效果是一样的 ,水平居中

例如：

仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。{text-align: center;background-color: #fff;border-radius: 20px;width: 300px;height: 350px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
}

HTML样式实例 - 背景颜色

背景色属性（background-color）是使用 bgcolor 属性定义。

HTML 样式实例 - 字体, 字体颜色，字体大小

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

HTML 样式实例 - 文本对齐方式

文本对齐属性 text-align取代了旧标签 <center> 。

<p style="text-align:center;">123</p>

参考地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

html的标签位置属性（学习笔记）相关推荐

html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
python的label是什么_Python标签说明,pythontkinter,学习,笔记,之,Label,部件
python tkinter学习笔记之Label部件 Label:安置在窗口上的部件,用来显示文本或图像创建Label: l = tk.Label(window,text='你好!this is T ...
Vue中scoped属性学习笔记
#什么是scoped vue中在style标签中的一个属性,使用scoped属性可以使标签内的样式只作用于当前组件中的元素. #scoped的原理在刚开始使用的时候,页面调试的html标签内和样式中 ...
duilib 子窗口位置_Duilib学习笔记《02》— 界面布局
2. 简单空白窗体界面此处以创建一个简单的空白的灰色背景窗体为例.对应的XML布局文件对应的也就很简单.如下: 1<?xml version="1.0" encoding= ...
css flex属性学习笔记
参考文献 flex: 1 0calc((100% / min(var(--cx-active-view), var(--cx-max-views))) -var(--cx-split-gutter)) ...
HTML5新增属性学习笔记
1.form属性表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. 1 <form id="testForm&quo ...
opencv物品定位_使用OpenCV获取零件位置的学习笔记
最近公司接到一个案子,使用移动机械臂抓取圆盘上下料,目前我们的移动机器人定位精度在两厘米左右,因此需要视觉辅助定位来提高夹取的精度. 这个项目本身不是我做,出于对是视觉的兴趣,学习了一下如何使用Ope ...
Silverlight：Dependency Property(依赖属性)学习笔记
学习SL/WPF,Dependency Properties(依赖属性)是一个全新(陌生)但又无法回避的概念. http://www.wpftutorial.net/DependencyPropert ...

html的标签位置属性（学习笔记）

html的标签位置属性（学习笔记）相关推荐

最新文章

热门文章