目录
一.浮动
应用场景
1.文字环绕
2.横向排列
浮动的基本特点
修改float属性值为：
left：左浮动，元素靠上靠左
right：右浮动，元素靠上靠右
默认值为none
1.当一个元素浮动后，元素必定为块盒（更改display属性为block）
2.浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子尺寸
1.宽度为auto时，表示适应内容宽度
2.高度为auto时，与常规流一致，适应内容的高度
3.margin为auto，为0，
4.边框、内边距、百分比设置与常规流一样
盒子排列
1.左浮动的盒子靠上靠左排列
2.右浮动的盒子靠上靠右排列
3.浮动盒子在包含块中排列时，会避开常规流块盒
4.常规流块盒在排列时，无视浮动盒子
5.行盒在排列时，会避开浮动盒子
6.外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。
高度坍塌
高度坍塌的根源:常规流盒子的自动高度，在计算时，不考虑浮动盒子
清除浮动，涉及css属性：clear
默认值：none
left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both:清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
通用解决写法：
div：：after{
content:"";
display:block;
clear:both;
}
二.定位
定位：手动控制元素在包含块中的精准位置
涉及的css属性：position
position属性
默认值：static，静态定位（不定位）
relative：相对定位
absolute：绝对定位
fixed：固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
1.文档流中的元素摆放时，会忽略脱离了文档流的元素
2.文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移
可以通过四个css属性对其设置位置
left right top bottom
盒子的偏移不会对其他盒子造成任何影响
绝对定位
1.宽高为auto，适应内容
2.包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块是整个网页（初始化包含块）
固定定位
其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）
定位下的居中
某个方向居中：
1.定宽（高）
2.将左右（上下）距离设置为0
3.将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
多个元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被覆盖
补充
绝对定位、固定定位元素一定是块盒
绝对定位、固定定位元素一定不是浮动
没有外边距合并
透明
每个颜色都具有透明通道，0~1
1.rgba（红，绿，蓝，alpha）
2.hex：#红绿蓝透
三.伪类
伪类选择器：
| :hover | 定义标记在鼠标悬停(划过)时的样式 | 所有显示标记 |
| :link | 定义标记在超链接状态下的样式 | a标签 |
| :focus | 定义标记在获取焦点时的样式 | a标签(IE浏览器不支持) |
| :visited | 定义标记被访问过后的样式 | a标签 |
| :active | 定义标记在选定时刻下的样式 | a标签 |
| :first-child | 定义选中的第一个子元素 | 所有显示标记 |
| :first-of-type | 定义选中元素中第一个某类子元素 | 所有显示标记 |
| :last-child | 定义选中的最后一个子元素 | 所有显示标记 |
| :last-of-type | 定义选中元素中最后一个某类子元素 | 所有显示标记 |
| :nth-child | 定义选中指定的第几个子元素 even：关键字，等同于2n odd：关键字，等同于2n+1 | 所有显示标记 |
| :nth-of-type | 定义选中指定的元素中第几个某类型的子元素 | 所有显示标记 |
| :focus | 定义元素聚焦时的样式 | 表单元素，a元素 |
| :checked | 定义单选或多选框被选中的样式 | 单选框，多选框 |
四.伪元素
伪元素选择器：
| :first-letter | 定义文本的第一个字符样式 |
| :first-line | 定义文本的首行样式 |
| :before | 定义对象之前内容的样式 |
| :after | 定义对象之后内容的样式 |
| :section | 定义被用户框选文字样式 |
伪类和伪元素的根本区别在于：它们是否创造了新的元素。
伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器
五.本周学习内容
六.实践内容
1.背景图练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="CSS/reset.css">
<link rel="stylesheet" href="css/背景图练习.css">
</head>
<body>
<header class="header">
<nav>
<a href="">进入官网</a>
<a href="">账号注册</a>
<a href="">充值管理</a>
<a href="">游戏下载</a>
<a href="">客户中心</a>
<a href="">官方论坛</a>
</nav>
<a href="" class="logo">
<h1>重生细胞</h1>
</a>
</header>
<div class="menu">
<a href="" class="detail">
<span>了解详情</span>
</a>
<a href="" class="download">
<span>客户端下载</span>
</a>
</div>
</body>
</html>body{
background: url(背景图.png) no-repeat 0 0/100%;
}
.header{
width: 1198px;
height: 73px;
line-height: 73px;
color: #f8b770;
background: red;
margin: 0 auto;
margin-top: 45px;
background: url(导航栏.png) no-repeat 0 0/100% 100%;
border-left: none;
border-right: none;
position: relative;
}
.header nav a{
float: left;
width: 160px;
height: 73px;
text-align: center;
box-sizing: border-box;
border: 1px solid #3f2a22;
border-top: none;
border-bottom: none;
}
.header nav a:nth-child(3){
margin-right: 228px;
}
.header .logo{
position: absolute;
width: 238px;
height: 118px;
}
.header .logo h1{
display: none;
}
.menu{
text-align: center;
margin: 473px;
}
.menu a{
display: inline-block;
background: url(了解详情.png) no-repeat;
}
.menu a span{
display: none;
}2.制作单选框练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="as" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.radio-item .radio{
width:12px;
height:12px;
border:1px solid #999;
border-radius:50%;
cursor:pointer;
display: inline-block;
}
.radio-item input:checked+.radio{
border-color: #008c8c;
}
.radio-item input:checked~span{
color: #008c8c;
}
.radio-item input:checked+.radio::after{
content:"";
display:block;
width:5px;
height:5px;
background:#008c8c;
border-radius:50%;
margin-left:3.5px;
margin-top:3.5px;
border-radius: 50%;
}
.radio-item input[type="radio"]{
display: none;
}
</style>
</head>
<body>
<p>
请选择性别：
<label class="radio-item">
<input type="radio" name="gender">
<span class="radio"></span>
<span>男</span>
</label>
<label class="radio-item">
<input type="radio" name="gender">
<span class="radio"></span>
<span>女</span>
</label>
</p>
</body>
</html>
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
