Html浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
(一)文本类型css
1.字体颜色 color:red/#000/rgb(0,0,0);
2.字体大小 font-size:16px; 1em=16px;
3.文本的水平对齐方式 text-align:left/center/right/justify(两端对齐);
4.文本修饰 text-decoration:none/underline(下划线)/line-through(删除线)/overline(上划线);
5.行高 line-height:30px;
行高的使用：
5.1针对于多行文本(字体大小一样)之间的上下间距，可以用行高实现。(行高的测量：第一行文字的头部距离第二行文字头部之间的距离)
5.2针对于单行文本，可以实现文本做垂直居中效果，line-height:当前盒子的height。
6.首行缩进属性 text-indent:2em;
(二)背景类型css
1.背景颜色 background-color:red/#000/rgb(0,0,0);
2.背景图片 background-image:url(路径);
3.背景平铺 background-repeat:no-repeat/repeat-x/repeat-y;
4.背景定位 background-position:left/center/right/值 top/center/bottom/值；
5.背景大小 background-size:cover;覆盖
6.背景固定 background-attachment:fixed;
(三)其他类型Css
1.宽度
2.高度
(四)列表css
1.去掉列表的小黑点或者数字 list-style:none;
(五)浮动属性
特点：给元素添加浮动之后，元素就飘了，不要自己的位置了
作用：实现竖着的元素横着排列
浮动是有副作用的，解决副作用的方案：
要求平时布局的时候，首先要在外层套一个大的盒子，然后给大盒子添加宽高
布局思路：首先先完成大盒子，然后再大盒子里面写小盒子，再给小盒子添加浮动即可。所有的盒子一定要添加宽高大小。
(六)盒模型 margin\padding\border\content
(七)margin
外边距 margin 盒子以外的距离，分为4个方向：上下左右top bottom left right
上外边距 margin-top
下外边距 margin-bottom
左外边距 margin-left
右外边距 margin-right
margin的使用：要移动谁的位置，就给谁添加margin
*** margin-top的使用是有兼容bug的
问题的产生：当我们给子元素添加margin-top之后，会导致父元素整个下移。
问题的解决：1.给父元素添加 overflow:hidden; (bfc)
margin:0 auto; auto 自适应
可以实现一个有宽度并且宽度生效的大标签做水平居中效果。
(八)border
边框 border
1.边框的粗细(宽度) border-width
2.边框的样式 border-style
常见的边框样式 实线 solid 虚线 dashed 点划线 dotted 双线 double
3.边框的颜色 border-color
如果想添加某一方向的边框：
左边框 border-left:5px solid green;
右边框 border-right:5px solid green;
上边框 border-top:5px solid green;
下边框 border-bottom:5px solid green;
边框的特点：
在w3c标准盒模型下，给元素添加了边框之后，元素的宽高就会被撑大。如果想保持元素原本的宽高大小，就需要减去添加的border值。
(九)padding
内边距 padding 补白、内填充 就是盒子里面的内容距离盒子边边的距离
分为4个方向 上下左右
左内边距 padding-left
右内边距 padding-right
上内边距 padding-top
下内边距 padding-bottom
内边距的特点：
在w3c标准盒模型下，给元素添加了padding之后，元素的宽高就会被撑大。如果想保持元素原本的宽高大小，就需要减去添加的padding值。
padding的使用，一般是给父元素添加比较多。
*/
</style>
</head>
<body>
<!--
(一)大标签 特点：竖着排列，独占一行或者一块区域
1.标题标签
<h1></h1> ... <h6></h6>
在我们一个页面里面，h1标题标签最好只使用一次，这样方便与搜索引擎的收录，提升网站的排名
2.段落标签 <p></p>
3.表格标签
<table>
<tr>
<td></td>
</tr>
</table>
重要属性：
1.边框 border="1"
2.去掉单元格与单元格之间的间距 cellspacing="0"
3.去掉单元格内容与边框之间的间距 cellpadding="0"
4.宽度 width
5.高度 height
6.单元格合并(单元格做了合并之后，一定要删除或者注释掉多余的单元格)
合并右边的单元格(列合并) colspan=""
合并下边的单元格(行合并) rowspan=""
4.块标签 ,主要用来做页面布局的
<div></div>
5.列表标签
5.1无序列表
<ul>
<li></li>
</ul>
5.2有序列表
<ol>
<li></li>
</ol>
5.3自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
6.表单标签 <form method="get/post" action="路径"></form>
(二)小标签 特点：挨着排列的，而且有默认间距
1.加粗标签
<b></b> <strong></strong>
2.倾斜标签
<i></i> <em></em>
3.文本节点标签
<span></span>
4.超链接标签
<a href="路径" target="_blank"></a>
(三)特殊标签
1.图片标签
<img src="路径" title="图片标题" alt="给用户做提示用的">
2.输入框标签
2.1文本类型输入框
<input type="text" name="" value="" placeholder="给用户做提示的">
2.2密码类型输入框
<input type="password" name="" value="" placeholder="给用户做提示的">
3.按钮标签
3.1提交按钮
<input type="submit" value="登录">
3.2按钮
<button>注册</button>
3.3重置按钮
<input type="reset" value="重置">
-->
</body>
</html>
浙公网安备 33010602011771号