知识回顾
css属性值的计算
属性值计算过程简介
- 确定声明值： 参考样式表中没有冲突的声明，作为CSS属性值。
- 层叠冲突： 对样式表中有冲突的声明使用层叠规则，确定CSS属性
- 使用继承： 对仍让没有值得属性，若可以继承，则继承父元素的值
- 使用默认值 最后对没有值得属性，使用默认值
特殊性
按照规则的优先级, 优先级高的被使用 别内联更高的是!important 10000
常规流
# 常规流
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
1. 常规流
2. 浮动
3. 定位
层模型（定位）
1）绝对定位：
position： absolute
top：（填数字） px；
left:（填数字） px；
当你希望某一元素出现在特定位置的时候，可以使用绝对定位，然后配合着 top、 left、right、 bottom 一起用（距离某一方向多少像素，但是 left 和 right 不能同时出现
并且 left 是左边线距离浏览器多少像素， right 是右边线距离浏览器多少像素， top是上边线距离浏览器多少像素，一般不用 bottom），但是， 他会脱离原来的位置进行定位（会向上一层，底下的位置会空出来，其他的元素顶上去），它是相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。
.modal .container{
width:404px;
height: 512px;
background: #fff;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
box-sizing: border-box;
padding: 1em;
border-radius: 6px;
}2） 相对定位：
position： relative；
top：（填数字） px；
left:（填数字） px；
当你希望某一元素出现在特定位置的时候，可以使用相对定位，然后配合着 top、 left、
right、 bottom 一起用，但是， 他会保留原来的位置进行定位（原来的位置还占着，但是没东西），它是相对于自己原来的位置进行定位。
3）定位原则：
用 relative 作为参照物（保留原来位置进行定位，如果不设置 top和 left， 对后续元素都没有影响），用absolute 定位（可以任意调换自己的参照物，定位更灵活），这种原则被称为子绝父相。
4）固定定位：
position： fixed； top：（填数字） px； left:（填数字） px； 当你希望某一元素不随着滚动条的拖曳而改变的时候，可以使用固定定位，然后配合着 top、left、 right、 bottom 一起用
5）堆叠上下文
设置z-index，只有定位元素设置此属性值有效，z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖，z-index： 1；： 提高层级，值越大越往上。
四、补充
绝对定位、固定定位元素一定是块盒
绝对定位、固定定位元素一定不是浮动
没有外边距合并
定位的练习 二级菜单
<!DOCTYPE html>
<html>
<head>
<style>
/* 样式化菜单 */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
position: relative;
}
ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a>
<ul>
<li><a href="#">二级菜单4</a></li>
<li><a href="#">二级菜单5</a></li>
</ul>
</li>
<li><a href="#">一级菜单3</a></li>
</ul>
</body>
</html>
更多的样式
透明度
1. opacity，它设置的是整个元素的透明，它的取值是0 ~ 1
2. 在颜色位置设置alpha通道(rgba )
鼠标
使用cursor设置
盒子隐藏
1. display:none，不生成盒子
2. visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。
背景图
和img元素的区别
img元素是属于HTML的概念
背景图属于css的概念
1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化页面时，必须使用背景图
涉及的css属性
1. background-image
2. background-repeat
雪碧图示例 通过移动找到需要的标识
默认情况下，背景图会在横坐标和纵坐标中进行重复
div{
width:1000px;
height: 300px;
border: 2px solid;
background-image: url("../imgs/main_bg.jpg");
background-repeat: no-repeat;
background-size: 400px 200px;
}
3. background-size
预设值：contain、cover，类似于object-fit
数值或百分比
4. background-position
设置背景图的位置。
预设值：left、bottom、right、top、center
数值或百分比
雪碧图（精灵图）（spirit）
5. background-attachment
通常用它控制背景图是否固定。
6. 背景图和背景颜色混用
7. 速写（简写）background
背景图练习
高度坍塌 clear属性练习
.clearfix::after{
content: "";
display: block;
clear: both;
}
iframe元素
框架页
通常用于在网页中嵌入另一个页面
iframe 可替换元素
1. 通常行盒
2. 通常显示的内容取决于元素的属性
3. CSS不能完全控制其中的样式
4. 具有行快盒的特点
在页面中使用flash
object
embed
它们都是可替换元素
MIME(Multipurpose Internet Mail Extensions)
表单元素
一系列元素，主要用于收集用户数据
input元素
输入框
- type属性：输入框类型
type: text， 普通文本输入框
type：password，密码框
type: date, 日期选择框，兼容性问题
type: search, 搜索框，兼容性问题
type: number，数字输入框
type: checkbox，多选框
type: radio，单选框
- value属性：输入框的值
- placeholder属性：显示提示的文本，文本框没有内容时显示
input元素可以制作按钮
当type值为reset、button、submit时，input表示按钮。
select元素
下拉列表选择框
通常和option元素配合使用
textarea元素
文本域，多行文本框
按钮元素
button
type属性：reset、submit、button，默认值submit
表单状态
readonly属性：布尔属性，是否只读，不会改变表单显示样式
disabled属性：布尔属性，是否禁用，会改变表单显示样式
配合表单元素的其他元素
label
普通元素，通常配合单选和多选框使用
- 显示关联
可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值
- 隐式关联
datalist
数据列表
该元素本身不会显示到页面，通常用于和普通文本框配合
form元素
通常，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。
form元素对开发静态页面没有什么意义。
fieldset元素
表单分组
扫一扫
1938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
