CSS
css三种方法：
行嵌式：在一行 style='' 就是行嵌入式
<!-- 写css先找位置：css载入方式、css引入方式、css书写位置 -->
<!-- css：Cascading Style Sheet：css2.0和css3.0 -->
<!-- 内嵌式 -->
在html中写css，就是内嵌式，需要<style>搭建环境
<!-- 在div身上添加style属性 k=“v”--> 是行嵌式
<div style="color:red; font-size:20px;">我是div</div>
外嵌式：
需要单独写个css后缀文件，在html中导入css文件：<link rel="stylesheet" href="mycss.css">
css语法：
布局常用样式属性：
width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色
复合属性： border
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色
实线 :solid 虚线:dashed 点线:dotted 无边框：none
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;
文本常用样式属性一：
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
p{
color: blue; color 颜色
font-size: 30px; 字体大小 浏览器最小12px
font-style: italic; 浏览器会显示一个斜体的字体样式
font-style: normal; 默认值。浏览器显示一个标准的字体样式
font-style: oblique; 浏览器会显示一个倾斜的字体样式
font-style: inherit; 规定应该从父元素继承字体样式
text-decoration: none; 默认。就是没有效果
text-decoration: overline; 定义文本上的一条线
text-decoration: underline; 定义文本的下划线
text-decoration: line-through; 定义穿过文本的删除线
text-decoration: blink; 定义闪烁的文本
font-weight: bold; 定义粗体字符。
font-weight: normal; 默认值。就是没有效果
font-weight: bolder; 定义更粗的字符。
font-weight: lighter; 定义更细的字符
text-indent: 2em; em 等于一个字的大小
line-height: 100px; 行高
}
div{
width: 200px; 块宽度
height: 300px; 块高度
background: green; 块背景颜色
border: 1px red solid; 块四边实线
border: 10px red dashed; 块四边虚线
border: 10px red dotted; 块四边点线
}
选择器：
类选择器
定义 .box{} ;定义一个box类选择器
使用定义的选择器：<div class="box">div2</div>；在div标签里 class=定义好的类选择器
前端实际开发中绝对不允许使用绝对路径，项目中使用相对路径
列表：
无序列表： ul---无序.隐藏模块 li---内容标题 换行显示
ul嵌套li ul是无序列表整体，li 是列表的某一项；
嵌套==父子关系==包含的意思；
有序列表： ol嵌套li 其他跟无序列表一样：
项目列表也叫自定义列表：
dl嵌套dt和dd:
<dt>项目标题
<dd>项目描述文字。换行显示
类选择器：
.box{} 定义方法
使用方法：class可以引用多个类名
id选择器：
#box{} 定义方法
使用方法：<div id='box'>
id选择器要求：一个id名在一个页面只能使用1次，css不能使用id,配合js使用。
层级选择器：
层级选择器=后代选择器=包含关系=父子关系
ul li{} 就是父子选择器
选择器有空格，就是后代选择器
并级选择器：
并级选择器=组选择器
h1,div,p,span,.box{}
选择器有逗号表示并级选择器
标签指定选择器：
p.box{} 定义方法
标签紧跟类名 前面标签后面类名
伪元素选择器：
可以添加内容
<元素=标签=标记<节点> 做后台 通常都叫节点；
div::berore{content:''}
div::after{content:''}
在选中的标签内部开头或结尾添加一个小标签，必须要有content；
文字属性：
text-align:left; 默认靠左对体
text-align:center;居中
text-align:right;靠有对体
垂直居中：
line-height:20px； 这设置自身高度；
font: 是否加粗 是否倾斜 字号/行高 字体；font:复合属性 一定要遵循顺序；
例子：font: bold italic 20px/200px '宋体'
font：1、一定要遵循顺序，2.必须设置字号和字体 否则不生效；
盒子模型：
padding: 30px; 内间距，拉开内容与盒子边缘的距离（出现在盒子的里面）；
margin: 30px; 外间距，拉开盒子间的距离（两个标签的距离）出现在盒子外面；
占位尺寸计算：margin+borber+padding+width/height
padding-top: ; 上边距
padding-right: ; 右边距
padding-bottom:; 下边距
padding-left:; 左边距
padding:作为复合属性，只能连接4个属性；
例子：padding:10px 20px 40px 80px；4个值时，是顺时针 上右下左；
例子：padding:10px 40px 80px; 3个值时， 代表上 左右 下
例子：padding:10px 80px; 2个值时 代表上下 和 左右
版心居中：
版心一定要有一个宽度，目前宽度是1000-1200；
版心居中：水平方向居中 ；必须有盒子宽度，盒子是换行的
margin: 0 auto; auto 是自适应；
外边距合并，外边距塌陷：
当垂直排列的盒子的垂直外边距挨在一起就会产生合并问题；
解决方法：如果多个外边距，最最大的一个；冷处理
坑爹现象：
盒子嵌套，内盒子调整时外盒子也跟着变化，这就是坑爹现象；
解决方法：1、给父盒子选择器加上 border:1px solid red;
2、给父盒子选择器加上 overflow:hidden; 设置内容超出父级隐藏
padding问题：
盒子变大的问题；
解决方法：1、手动减去边距，2、box-sizing:border-box;启动自动内减
超链接的伪类 a:
a:link{color: red;} 鼠标点击前，看到的链接颜色
a:visited{color：blue;} 鼠标点击后，看到的链接颜色
a:hover{color:grenn;} 鼠标划过，看到的链接颜色
a:active{color:red;} 鼠标点击不放，看到的颜色
现实开发中只设置两个：
a{color: red;}
a:hover{color:blue;}
Css初始化：<--css-rest-->
margin 0； 初始化外边距
padding: 0; 初始化内边距
ul,ol{list-style:none;} 取消列表的项目符号
body{font-size:12px;
color:#333;
font-fanily: '宋体'；} 初始化后自己设置的属性
a{text-decoration:none;
color:red;} 取消超链接
表单标签:
input 再使用表单的时候，需要form包裹，今后需要跟数据库交互；
使用：<form action="" method="get"> 或者post；
form:称为表单域，把里面的功能标签称为表单控件；
input 使用类型： <--input是不换行显示，换行使用br-->
文本框使用方法： 文本框：<input type="text" value="默认值">
文本框：<input type="text" placeholder="默认值">
文本框使用默认值属性，有两个，placeholder默认值事浅色的
密码框使用方法： 密码框：<input type="password">
单选框使用方法： 单选框：<input type="radio">男 <input type="radio">女 这个是不能单选的
单选框：<input type="radio" name="sex">男 <input type="radio" name="sex">女
这个才是能单选，单选需要加name属性
默认选中单选框： 单选框：<input type="radio" name="sex" checked>男 <input type="radio" name="sex" >女
加上checked就是默认选中
点击文字选中： 单选框：<input type="radio" name="sex" id="nv" checked><label for="nv">女</label>
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
扩大出发区域，文字用lable包裹，保证lable身上的for和input身上的id值完全相同；
单选框总结： 1、默认选中使用 checked;
2、真正单选功能添加name属性；
3、扩大出发区域，文字用lable包裹，保证lable身上的for和input身上的id值完全相同；
复选框使用：
复选框： <input type="checkbox">读书
<input type="checkbox">打游戏
<input type="checkbox">旅游
文件夹选择窗口：上传文件：<input type="file">
下拉菜单：<select>
<option>北京</option>
<option>上海</option>
<option selected>广州</option> 这一句加了selected 是默认选中广州
</select>
文本域： 文本域是能换行的，input是不能换行的
<textarea name="" id="" cols="30" rows="10"></textarea> 这个大小是不能拉大的
textarea{
resize: none;
width: 50px;
height: 50px;} 可以通过css取消默认值，重新设置大小
表单按钮：
<input type="submit" value="注册"> 这个按钮是提交用的
<input type="button" value="普通按钮"> 这个是预留按钮，将来用
<input type="reset" value="重置"> 这个是重置按钮
<--想要按钮真实可用，必须要有form表单域-->
块级：标签换行的称为块级，例如div, 如果css不写width 和 height,尺寸是父级的100%；
内联：标签不换行称为内联或行联，例如:span，如果css写width 和 height不生效，尺寸和内容一样大；
换行的是块级元素，不换行的是内联元素；
display:
display:inline; css写这个尺寸不生效 将块级转换成行内显示， 不换行 这个内联尺寸不生效；
display:block； css写这个尺寸生效，转换成块级显示，换行，尺寸生效
display:inline-block; 内联块，行内显示，尺寸生效；
display:nane; 隐藏 不占位隐藏 写菜单用
visibility;hidden; 占位隐藏
浮动：
标准流/文档流：标签默认的元素类型；
浮动的作用：放块级无间隙在一行内显示；
float:left/right 靠左/靠右
浏览器认为浮动后的标签不再占用标准刘的位置；
清除浮动：
类选择器里面定义了行高和宽度，不存在浮动问题；
解决方法1：css父级加上 overflow: hidden; 检查
解决方法2：额外标签法，.clearFix{clear: both;}
解决方法3：伪元素办法，.clearfix::after{
/* 子级的结尾处添加一个小标签 */
content: '';
display: block;
/* after和before添加的小标签元素类型默认是行内/内联 */
clear: both;
height: 0;
visibility: hidden;
zoom:1; /* 解决ie6兼容性：ie6 不认识伪元素 */
需要在盒子下面写入<div class="con clearfix">
定位：共有三种
相对定位：
position:static; 静态定位，就是不定位，不用；
position: relative;
left: 200px;
top: 300px;
相对定位特点：1、改变位置的参照物是他自己；
2、无法改变标签的元素类型；
3、占用脱离标准流；
绝对定位：
position: absolute;
绝对定位特点：1、改变元素，具备内联块的元素特点（宽度生效）
2、完全脱离标准流；
3、参照物，默认是浏览器；
/\*改变绝对定位的参照物满足一个条件：以最近的已经定位好的父级为参照物\*/
固定定位：
position: fixed;
固定定位特点：1、完全脱离标准流
2、参照物永远是浏览器
3、具备内联块的元素特点（尺寸生效）
定位总结：排除固定定位；子级绝对定位，父级相对定位；
背景图：
background: green url(logo.png) no-repeat 100px bottom;
background 也是一个复合属性 ，取值部分先后顺序
1 背景图 url()
2 repeat 默认值 平铺
repeat-x 水平平铺
repeat-y 垂直平铺
no-repeat 不平铺
3 定位：x y 取值可以是数值也可以是英文方向单词；如果只给一个值代表水平，垂直取center
background-color: ; 背景颜色
background-image: url(); 背景图片
background-repeat: ; 平铺
background-position:x y ; 定位
background-attachment: fixed; 将背景图固定
绘制图形：
border-radius: 20px; 圆角，4个角都是圆角
border-radius: 50%; 制作圆 ，利用宽度和高度的50%，最大50%
z-index: -10； 取值为整数，取值越大，显示越靠上
为了防止盒子变大，使用padding 时，用:box-sizing: border-box;
outline: none; 取消焦点框
border: none; 去掉描边
设置鼠标指针：
cursor: pointer; 显示鼠标手，
cursor: text; 显示鼠标文本；
cursor: move; 显示鼠标十字；