HTML基础--css基本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 指定编码 -->
<title>liudaozhang</title>
<link rel="shortcut icon" href="http://www.nnzhp.cn:80/wp-content/themes/QQ/images/logo.jpg">
<style>
/*.c1{*/
/*height: 100px;*/
/*width: 100px;*/
/*border: red 2px solid;*/
/*text-align: center;*/
/*line-height: 100px;*/
/*}*/
/*text-align: center; 水平方向居中*/
/*line-height: 100px; chS方向居中*/
/*.c1{*/
/*height: 100px;*/
/*width: 100px;*/
/*border: red 2px solid;*/
/*float: right; ;*/
/*}*/
/*float:通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，*/
/*超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承*/
</style>
</head>
<body>
<!--<div style="height: 100px;width: 100px;kkk</div>-->
<!--<div style="height: 100px;width: 100px;font-size: 100px">kkk</div> 字体大小-->
<!--<div style="height: 100px;width: 100px;font-weight: bold">kkk</div> 字体粗细-->
<!--<div style="height: 100px;width: 100px;border: red 2px solid;text-align: center">kkk</div> 水平方向居中-->
<!--<div style="height: 100px;width: 100px;border: red 2px solid;text-align: center;line-height: 100px">kkk</div> 水平方向居中-->
<!--<div class="c1">kkk</div>-->
<!--<div class="c1">kkk</div>-->
<!--<div class="c1">kkk</div>-->
<!--display 属性行内块级标签的转换 重要 重要 重要-->
<!--<span style="height: 100px;width: 100px;border: red 2px solid;display: block"></span>-->
<!--display:block 行内标签转换为块级标签 行内标签无法设置无法设置高度、宽度、padding、margin，-->
<!--<span style="height: 100px;width: 100px;border: red 2px solid;display: none"></span>-->
<!--display:none 隐藏属性-->
<!--<div style="display: inline">qqq</div>-->
<!--display:inline，块级标签转换为行内标签-->
<!--<span style="height: 100px;width: 100px;border: 2px red solid;display: inline-block"></span>-->
<!--display:inline-block，行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->
<!--<div style="height: 100px;width: 100% ;border: 2px blue solid;">-->
<!--<div style="height: 70px;width: 60% ;margin-left:1px "></div>-->
<!--<div style="height: 70px;width: 60% ;padding-left:1px "></div>-->
<!--</div>-->
<!--margin 外边距-->
<!--自己针对外围的div产生变化 外边距撑大外层 top left right bottom-->
<!--padding 内边距-->
<!--内边距 自身的边距增加 top：从上到下增加 内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加-->
</body>
</html>
==============================分割线===========================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 指定编码 -->
<title>liudaozhang</title>
<link rel="shortcut icon" href="http://www.nnzhp.cn:80/wp-content/themes/QQ/images/logo.jpg">
<style>
/*.c1{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/
/*.c1:hover{*/
/**/
/*}*/
/*hover属性是当鼠标移动到上面后，设置其样式*/
.c2{
height: 50px;
width: 50px;
border: 1px solid;
background-image: url("http://ui.imdsx.cn/static/image/icon.png");
background-position-x: 10px;
background-position-y: 10px;
}
/*将 div看做一个窗户 图片在窗户外移动 用于切图*/
/*background-position-x: 10px;*/
/*background-position-y: 10px;*/
</style>
</head>
<body style="margin: 0">
<!--position-->
<!--<div style="height: 48px;width: 100%;position: fixed">1234</div> 写法1 -->
<!--<div style="height: 48px;position: fixed;top: 0;left:0;right: 0"></div> 写法2-->
<!--<div style="height: 1000px;margin-top: 48px">222</div>-->
<!--position 分层-->
<!--position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right -->
<!--position relative absolute-->
<!--position：relative 与 position：absolute(绝对定位，单用没什么作用 结合relative才牛逼) -->
<!--absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html-->
<!--<div style="height: 400px;width: 400px;border:red 2px solid;position: relative">-->
<!--<div style="height: 50px;width: 50px;position: absolute;right: 0;bottom: 0"></div>-->
<!--<div style="height: 50px;width: 50px;position: absolute;left: 0;top: 0"></div>-->
<!--<div style="height: 50px;width: 50px;position: absolute;right: 0;top: 0"></div>-->
<!--<div style="height: 50px;width: 50px;position: absolute;left: 0;bottom: 0"></div>-->
<!--</div>-->
<!--position 的absolute 和relative属性 使用这样便于调整布局top left bottom right 按上下键能调整 -->
<!--relative和absolute必须要连用，relative在外层 absolute在内层-->
<!--<div style="height: 100px;width: 100px;position: absolute;top: 100px;left: 100px"></div>-->
<!--<div style="height: 1000px;margin-top: 48px;">2222</div>-->
<!--<div style="height: 100px;width: 100px;position: relative">-->
<!--<div style="height: 100px;width: 100px;z-index: 2 ;position: absolute "></div>-->
<!--<div style="height: 100px;width: 100px;z-index: 2 ;position: absolute "></div>-->
<!--z-index: 2 谁的值大 谁就是在上一层/外层 就显示谁的颜色-->
<!--<input type="button" value="login" style="cursor:pointer"> 这是鼠标变成小手-->
<!--<input type="button" value="login" style="cursor:move"> 鼠标变成十字架-->
<!--<input type="button" value="login" style="cursor:crosshair"> 鼠标变成截图-->
<!-- auto 自动增加滚动条-->
<!--<div style="height: 200px;width: 200px;border: red 1px ;overflow: auto">-->
<!--hidden 自动截取超出部分的滚动条-->
<!--<div style="height: 200px;width: 200px;border: red 1px ;overflow: hidden">-->
<!--scroll 要求出现滚动条-->
<!--<div style="height: 400px;width: 400px;border: red 1px ;overflow: scroll">-->
<!--<img src="http://www.imdsx.cn:80/wp-content/themes/QQ/images/logo.jpg">-->
<!--overflow属性设置当div内的内容溢出div的高宽时，如何处理 默认会出现在元素框之外-->
<!--hidden：溢出部分截取掉 scroll：超出就出现滚动条-->
<!--<div class="c1"></div> /*hover属性是当鼠标移动到上面后，设置其样式*/-->
<!--<div style="height: 1000px;width: 100%;background-image: url('logo.jpg');background-repeat: repeat-x"></div>-->
<!--<div style="height: 1000px;width: 100%;background-image: url('logo.jpg');background-repeat: repeat-y"></div>-->
<!--<div style="height: 1000px;width: 100%;background-image: url('logo.jpg');background-repeat: no-repeat"></div>-->
<!--background 是针对背景一些样式设置， background-image：背景图片，-->
<!--图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。-->
<!--可通过background-repeat属性对是否堆叠进行设置-->
<!--no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)。-->
<!--background-position 针对div设置图片展示的位置。-->
<!--background-position-y: 10px 纵向移动图片-->
<!--background-position-x: 10px 横向移动图片。-->
<!--也可以不写x或y，默认第一个为x的值 第二个位y的值，-->
<!--background-position:10px 10px。-->
<!--可以通过background直接简写，-->
<!--background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠-->
<!--<img src="http://www.imdsx.cn:80/wp-content/themes/QQ/images/logo.jpg">-->
<!--<div style="height: 10px;width: 10px;border: 1px red solid;background-image: url('http://www.imdsx.cn:80/wp-content/themes/QQ/images/logo.jpg')"-->
<!--<div class="c2"></div> 切图-->
</body>
</html>
<!--hw：-->
<!--顶层 用-->
<!--<div align=""-->
<!--导航用position-->
<!--文案覆盖的话用margim-top：48px-->
<!--贴边：margim：0-->
来源：https://www.cnblogs.com/zunchang/p/8283987.html