经过一周的学习我又来发布笔记啦
今天我们来到了CSS基础重要部分，浮动和定位
1.浮动
视觉格式化模型，大体上将页面中盒子的排列分为三种方式:
1. 常规流
块盒：纵向上外边距合并；横向上撑满包含快
行盒：上一个行盒的头部接上下一个行盒的尾巴
2. 浮动
3. 定位
应用场景
1. 文字环绕
2. 横向排列
浮动的基本特点
修改float属性值为:
- left:左浮动，元素靠上靠左
- right: 右浮动，元素靠上靠右
默认值为none
1. 当一个元素浮动后，元素必定为块盒(浮动后更改display属性为block)
2. 浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子尺寸
1. 宽度为auto时，适应内容宽度(常规流会撑满）
2. 高度为auto时，与常规流一致，适应内容的高度
3. margin为auto时， 为0
（常规流会吸收剩余空间但没有宽度吸收能力强，若宽度和margin均为auto则宽度吸收完margin不吸收）
4. 边框，内边距，百分比设置与常规流一样（包含快宽度的百分比）
盒子排列
1. 左浮动的盒子靠上靠左排列
2. 右浮动的盒子考上靠右排列
右浮动
左浮动
3. 浮动盒子在包含块中排列时，会避开常规流块盒
4. 常规流块盒在排列时，无视浮动盒子
5. 行盒在排列时会避开浮动盒子
6. 外边距合并不会发生（只有常规流会发生，定位也不会）
> 如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒
文字环绕
文字与图片之间的距离应该设置图片的margin-right
## 高度坍塌
其中为浮动盒子
其中为常规流盒子会被撑开
高度坍塌的根源:常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动，涉及css属性: clear
- 默认值: none
- left: 清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- ripht; 清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both: 清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
解决高度坍塌
1. 在所有浮动盒子后面写一个clearfix
2. 用after
2.浮动练习
# 导航菜单
1. ul>li*导航菜单的个数>a>导航菜单的内容
2. nav元素表示导航菜单
<nav>
a*导航菜单的个数>导航菜单的内容
</nav>
# 设置行高
text-align:center ;/*水平居中*/
line-height: 60px;/*垂直居中 line-height=height（行高）*/
# 鼠标移入时变成什么颜色
.main .nav a :hover
{/*鼠标在其上面时为什么颜色*/
color: #fff；
# 鼠标位于当前页面时显示的是什么
.main .nav a.select{
color: #ef4238;/*鼠标位于当前页面时显示的是什么*/
}
# 居中
水平方向上
margin: 0 auto;
# 解决高度坍塌
某一元素设置了浮动之后，找其父元素看其父元素有没有固定高度，有则不会发生高度坍塌，没有则需给其父元素加上clearfix
.clearfix::after{
content:"" ;
display: block;
clear: both;
}
# 引用元素时要用空格隔开
# 将边框设置为圆的
/*css3圆角边框*/
border-radius: 15px;
# 重复电影类型
div.movie-item*30>(图片)+(名字)+(评分)来生成
# nth-child() 伪类选择器，选择括号里面的数据进行样式的改变
.main .container .movies .movie-item:nth-child(6n){
}
# 文字多时显示时有省略号可以用
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 2px;
text-align: center;
# 文字为斜体
font-style: italic;
# 让第一个字变大
.main .container .movies .movie-item .score::first-letter{
font-size: 1.5em;
}
# first-letter元素选择器
可选中第一个元素
# 练习结果
# 3. 定位
视觉格式化模型，大体上将页面中盒子的排列分为三种方式:
1. 常规流
2. 浮动
3. 定位
定位:手动控制元素在包含块中的精准位置
涉及的CSs属性: position
## position属性
- 默认值:static，静态定位 (不定位)
- relative:相对定位（不影响原来位置，原来是常规流现在仍然是常规流，原来是浮动现在仍然是浮动，不会脱离文档流，但是会变成一个定位元素）给绝对定位元素提供包含快
- absolute:绝对定位
- fixed: 固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素:
1. 文档流中的元素摆放时，会忽略脱离了文档流的元素
2. 文档流中元素计算自动高度时，会忽略脱离了文档流的元素(高度坍塌)
## 相对定位
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移
不影响原来位置，原来是常规流现在仍然是常规流，原来是浮动现在仍然是浮动，不会脱离文档流，但是会变成一个定位元素
可以通过四个CSS属性对设置其位置
- left
- right
- top
- bottom
margin-left与left区别
margin-left的宽度会减小；left只偏移但宽度不变
当左右同时出现时会用左效果
当上下同时出现时会用上效果
盒子的偏移不会对其他盒子造成任何影响
祖先元素为其向上找到的第一个的第一个定位元素
## 绝对定位
给绝对定位元素提供包含快、
1. 高为auto，适应内容
2. 包含块变化: 找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页 (初始化包含块)
整个网页为其包含快，其在整个网页内活动
left right top bottom等于几表示离包含快左右上下的距离
## 固定定位
其他情况和绝对定位完全一样
只有包含块与绝对定位不同:固定为视口（浏览器的可视窗口，肯能比初始化网页大可能比初始化网页小）
不论页面怎么动，固定定位后的元素不会动
初始化网页包含整个网页
## 定位下的居中
某个方向居中
1. 定宽(高)
2. 将左右(上下)距离设置为0
3. 将左右(上下) margin设置为auto
绝对定位和围定定位中，margin为auto时，会自动吸收剩余空间，使得元素居中
设置 border-radius：几% 可以将其变为圆框
## 多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
谁值大，谁靠前，在最上面
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流和浮动元素，则常规流和浮动元素会覆盖定位元素
文字在红圆圈的上面
## 补充
1. 绝对定位、固定定位元素一定是块盒
2. 绝对定位、固定定位元素一定不是浮动
（若浮动和定位一起出现，则浮动被强制改为定位）
3. 没有外边距合并
4.定位练习
# 二级菜单
1. 只要使用了浮动记得给其父元素加clearfix
.clearfix::after{
content: "";
display: block;
clear: both;
}
2. 二级菜单是某个菜单的一个子菜单，写在它对应的li中就好了
3. 浮动元素宽度是auto时，表示宽度适应内容，内容较多时就会把宽度撑开
4. .header .topnav>li topnav后面加了>li表示支只对li元素进行样式设置
5. 先四个方向全部设置边框最后去掉下边框，得到三周边框
border: 2px solid #ccc;
border-bottom: none;
6. 想要加了边框后不改变盒子的尺寸，用 box-sizing: border-box;
7. 行高固定，加了边框后，框内的内容会往下移，为了解决此问题，可以设置line-height 调试到合适的行高使得文字不再移动
8. 实现鼠标点上去显示，移开时隐藏
/*不生成盒子,若一个元素没有生成盒子的话，元素是不显示的*/
display: none;
/*使其移上时显示*/
.header .topnav>li:hover.submenu{
display: block;
}
9. 若想要固定菜单可以设置,就可以让菜单固定在网页上，不随页面滑动而移动
position: fixed;
width: 100%;
left: 0;
top: 0;
# 弹出层
1. 透明效果
每个颜色都具有透明通道，0 ~ 1
1.rgba(红，绿，蓝，alpha)
2.hex: #红绿蓝透
1不透明，0完全透明
改变透明度可以实现蒙层
2. 鼠标变为一个小手，用cursor: pointer;
# 轮播图
1. 图片显示一张，但是其后面可能有很多张
2. 蒙层使用绝对定位还是相对定位取决于蒙层是蒙上网页的一部分（绝对定位），还是蒙上整个视口（固定定位）
5.更多的选择器
## 更多伪类选择器
若要与其他元素选择器连用可以a:伪类选择器（用一个：）
1. first-child first-of-type
first-child选择第一个子元素
通常在选择器前面加另一个元素选择器，表示选中某一个元素的第一个子元素
页面上没有即使第一个元素又是a元素的元素，所以没有元素会被选中
first-of-type选中的是子元素中的第一个a元素，不论a之前有没有别的元素
2. last-child last-of-type
last-child
必须是a且必须是最后一个a，若后面有其他元素则不被选中
last-of-type
子元素中的最后一个a元素，不论后面还有没有元素，最后一个a都会被选中
3. nth-child
选中指定的第几个子元素
even：关键字，等同于2n 偶
odd：关键字，等同于2n+1 奇
中间可以使用变量2n，n+1等
若前面有其他元素，其他元素的个数也算上
4. nth-of-type
选中指定的子元素中第几个某类型的元素，不管其他元素
隔行变色
## 更多伪元素选择器
若要与其他元素选择器连用可以a:：伪元素选择器（用两个：）
1. first-letter
选中元素中的第一个字母或文字
2. first-line
选中元素中第一行的文字
3. selection
选中被用户框选时的文字
6.更多样式
## 透明度
0表示透明，1表示完全不透明
1. opacity，他设置的是整个元素的透明，它的取值时0~1
整个盒子的所有东西，所有子元素都变透明，不论文字还是背景
2. 在颜色位置设置alpha通道（rgba）
rgba（0，0，0，.5）
注意背景会默认覆盖边框盒
## 鼠标样式
使用cursor设置
使用图片做鼠标样式，注意图片类型必须是ico 或者cur
## 盒子的隐藏
1. display:none, 不生成盒子
2. visibility：hidden，生成盒子，只是从视觉上移除盒子，盒子依然存在，依然占据空间
## 背景图
img元素是属于HTML的概念
背景图属于css的概念
1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化页面时，必须使用背暴图
### 涉及的css属性
1. background-image
在本文件当中引用图片
用url引用图片
若在css文件中引用图片则需用相对路径需要..返回上一级目录然后读取图片
2. background-repeat
默认情况下，背景图会在横坐标和纵坐标中进行重复
可以使用background-repeat：no-repeat 取消重复
3. background-size
预设值：contain，cover
contain
图片完整的显示出来，而且比例不变
cover
图片一定要撑满整个区域，还要保证图片的比例不变，所以可能图片的某些地方就被隐藏了
数值或百分比
数值：宽高
横向盛满，纵向按照比例进行缩放
横向纵向比例都撑满，但是图片的比例肯能会改变
4. background-position
设置背景图的位置，用数值或者百分比
预设值：left，bottom，right，top，center
横纵，百分比
左右上下，数值
雪碧图（精灵图）（spirit）
5. background-attachment
通常通常用它控制背景图是否固定
滑动文字后面的背景图固定不变
)
6. 背景图与背景颜色混用
没有背景图的地方会用背景颜色来填充
7. 速写属性 background
在尺寸和位置中先写位置再写尺寸，中间用/连接
HTML进阶
#1. iframe元素
框架页
通常用于在网页中嵌入另一个页面
iframe为可替换元素
1. 通常为行盒
2. 通常显示的内容取决于元素的属性
3. CSs不能完全控制其中的样式
4. 具有行快盒的特点(盒模型中各个尺寸都可以设置)
点击链接可以直接在本网页打开别的网页
可以在网页中加入别的网站的视频，注意加的是嵌入地址，不是网站地址
<iframe src="加嵌入地址" frameborder="0"></iframe>
# 2. 在页面中使用flash
多用途互联网邮件类型:MIME (Multipurpose Internet Mail Extensions)
比如，资源是一个jpg图片，MIME:image/jpeg
object ，embed 来嵌入flash
它们都是可替换元素
1. object
object中可以加入参数，name参数名，value参数值
2. embed
可以直接在embed中加入参数和参数值
更兼容的写法，当object不能被识别时，就用embed，若能被识别则embed就不会被识别
#3. 表单元素
一系列元素，主要用于收集用户数据
## input元素
输入框
可以用input：text加回车生成
重要元素
- value属性: 输入框的值
- placeholder属性: 显示提示的文本，文本框没有内容时显示
- type属性: 输入框类型
type: text， 普通文本输入框
type: password，密码框
type: date，日期选择框，有兼容性问题
type: search，搜索框，兼容性问题
type: number，数字输入框
step属性每次向上或者向下加或减的多少，默认为1
type：color 颜色选择框
type：checkbox 多选框
type：radio 单选框
注意单选框需要知道其分组，那几个单选是一组否则就会都被选上
默认选中：在input元素中加上checked（其实是布尔属性checked=checked）
type：file 多文件选择
input元素还可以制作按钮
reset，button，submit
当type值为reset时为重置按钮，可以通过value来改变按钮上显示的值，但是默认为重置
当type值为button时为普通按钮，可以通过value来改变按钮上显示的值，但是默认为空白
当type值为submit时为提交按钮，可以通过value来改变按钮上显示的值，但是默认为提交
## select元素
下拉列表选择框,而且可以给下拉列表进行分组
通常和option元素配合使用，给下拉列表进行分组用optgroup
默认被选中：selected（其实是布尔属性selected=selected）
在select中加上multiple（布尔属性）可以实现多选
按住ctrl可以同时选中几个或者按一下ctrl在按shilt键
## textarea元素
文本域，多行文本框
尽量用css来设置样式
## 按钮元素
button（设置按钮尽量用button，不推荐用input）
button默认是一个提交按钮，但可以用type来改变其类型
type属性：reset，submit，button
button可以直接在图片下面加文字，可以直接在后面加个style来改变图片的样式
## 表单状态
readonly属性：布尔属性，只读状态，不会改变表单显示样式
disabled属性：布尔属性，禁用，不能再点击，会改变表单显示样式
## 配合表单元素的其他元素
### label
普通元素，通常配合单选和多选框使用
- 显示关联
可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素的id的值
用for属性关联单选和多选框元素的id名，使得单选和多选框元素选中文字时也被选中
- 隐式关联
将表单元素直接放在label元素里面
### datalist
数据列表
该元素本身不会显示到页面，通常用于和文本框配合
将datalist通过id名和其他表单元素的list属性进行关联，回车时显示的是其value值
### form元素
通常情况下，会将整个表单元素，放置到form元素的内部。
作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器
form元素对开发静态页面没有什么意义
### fieldset
分组
允许其内部加一个子元素legend表示分组的标题
#4. 美化表单元素
## 新的伪类
1. focus
元素聚焦时的样式，点击时的样式
2. checked
单选框或者多选框被选中时的样式
选中的单选框的下一个兄弟元素
若直接选中checked没有给单选框加label则不会有样式变化
## 常见用法
1. 重置表单元素样式
2. 设置textarea是否允许调整尺寸
用css属性resize：
- both: 默认值，两个方向都可以调整尺寸
- none: 不能调整尺寸
- horizontal:水平方向可以调整尺寸
- vertical: 垂直方向可以调整尺寸
3. 文本框边缘到内容的距离
padding 左右各到边框的距离
text-indent 首行缩进
4. 控制单选和多选的样式
+表示选中后面一个元素，~表示选中后面的所以元素
/*重置表单元素*/
input, textarea, button, select{
border: none;
}
input:focus, textarea:focus, button:focus, select:focus{
outline: none;
outline-offset: 0;
}
好啦，这一周的分享就结束啦！！！
大家记得练习哦~~
下一星期同一时间同一地点我们不见不散！！！
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
