课程回顾

1.盒子模型 - 外边距 边框 内边距 宽高 - 外边距：元素距上级元素或相邻兄弟元素的距离 margin-left/right/top/bottom margin:10px; margin:10px 20px; 上下10 左右20 margin:0 auto maring:10px 20px 30px 40px 行内元素上下外边距不生效 粘连问题： 通过overflow：hidden 左右相邻外边距相加 上下相邻取最大值 - 边框： border-left/right/top/bottom： 粗细 样式 颜色 块级元素全部生效 影响元素所占宽高 行内元素全部生效 只影响宽度不影响高度 - 内边距：元素边框距内容的距离 赋值方式和外边距类似 块级元素全部生效 影响元素所占宽高 行内元素全部生效 只影响宽度不影响高度 - 宽高：width/height
行内元素不能修改宽高 2. 文本相关 - 文本对齐 text-align:left/right/center - 文本修饰 text-decoration: overline,underline,line-through,none - 行高 line-height 可以实现垂直居中 - 阴影 text-shadow: 颜色 x偏移 y偏移 浓度（值越小越清晰） - 颜色 color 3. 圆角 border-radius 4. 字体相关： - 大小 font-size - 加粗 font-weight:bold/normal(去掉自带的加粗效果) - 斜体 font-style:italic - 字体样式 font-family：xxx,xxx,xxx; 5. 溢出设置 overflow - visible（默认） 超出范围显示 - hidden 超出范围隐藏 - scroll 超出范围滚动显示 6. 显示方式 display - block：块级元素的默认值 独占一行 可以修改宽高 - inline： 行内元素的默认值 共占一行 不能修改宽高 - inline-block: 行内块 共占一行 也能修改宽高

定位

文档流定位(静态定位)

• 默认的定位方式
• position:static(默认)
• 块级元素从上到下，行内元素从左向右
• 通过外边距控制元素的位置

相对定位

• position:relative;
• 元素不脱离文档流
• 应用场景：当元素需要从当前位置做偏移，但不影响其它元素的时候使用相对定位
• 通过top/left/right/bottom 控制元素的偏移，偏移值相对于元素的初始位置

绝对定位

• position:absolute;
• 元素脱离文档流
• 应用场景：但需要往页面中添加一个元素这个元素显示或不显示不影响其它元素的效果
• 通过top/left/right/bottom控制元素的位置，位置相对于窗口(默认)或某一个上级元素
• 如果需要相对于某一个上级元素，需要让上级元素做非static定位(推荐使用relative相对定位)

固定定位

• position：fixed;
• 脱离文档流
• 通过top、left、right、bottom控制元素的位置，位置相对于窗口
• 应用场景：当需要把某个元素固定在窗口的某个位置时使用固定定位

浮动定位

• float:left/right;
• 脱离文档流，元素从当前所在行向左或向右浮动，当碰到上级元素边框或其它浮动元素时停止
• 一行装不下会自动换行，换行时有可能被卡住
• clear：left/right/both 禁止元素某个方向出现浮动元素
• 如果元素的所有子元素全部浮动，此时自动识别的高度为0，如果希望元素正好包裹所有子元素则给元素添加overflow:hidden解决
• 应用场景：当需要将纵向排列的元素改成横向排列时使用浮动定位

定位总结：

文档流定位（静态定位）position：static 从上到下 从左向右 相对定位 postion:relative
不脱离文档流， 通过left right top bottom控制位置 相对于元素初始位置 绝对定位 postion:absolute 脱离文档流，通过left right top bottom控制位置，相对于窗口（默认）或某一个上级元素(做非static定位推荐relative) 固定定位 postion：fixed 脱离文档流，通过left right top bottom控制位置，相对于窗口，固定在窗口的某个位置 浮动定位 float:left/right 脱离文档流，元素从当前所在行向左或向右浮动，一行装不下自动换行，clear：left/right/both禁止出现浮动元素，如果元素的所有子元素全部浮动则自动识别的高度为0，通过overflow:hidden解决

行内元素垂直对齐

/* 垂直对齐方式 
bottom底部
top顶部
middle中间
baseline 基线(默认)
    */
vertical-align: middle;

CSS的三大特性

1. 继承性： 子元素可以继承上级元素的部分属性，只能继承文本和字体相关的属性，部分元素的显示效果不受继承影响比如：超链接a的字体颜色不受影响，h1-h6的字体大小不受继承影响
2. 层叠性： 如果有多个选择器选择同一元素但设置的样式不同，则所有样式全部层叠到一起全部生效,如果多个选择器设置的样式相同则由优先级决定。
3. 优先级： 作用范围越小，优先级越高 id>class>标签名

代码介绍： - demo01 练习 超链接改按钮效果的练习 - demo02 相对定位 - demo03 绝对定位 - demo04 绝对定位练习（登录框） - demo05 固定定位 - demo06 浮动定位 - demo07 浮动练习：无序列表纵向变横向 - demo08 垂直对齐方式 - demo09 学子商城登陆页练习