1. 定位 1.1 定位的基本介绍 1.1.1 网页常见的布局形式
2. 浮动
1.可以将原来垂直布局的块级元素变成水平布局
3、定位
1.元素可以自由放置在网页的任意位置
2.一般用于箱子之间的堆垛
1.1.2 定位常见应用场景
可解决袋子之间的叠层问题
定位后的元素具有最高级别,可以堆叠在其他袋子中
可以将袋子固定在屏幕中的某个位置
1.2 定位的基本使用 1.2.1 定位初体验
要求:页面有两个袋子,要求完成图片的疗效。 怎样才能完成呢?
对于包之间的分层问题,建议使用定位来完成
<pre class="code-snippet__js" data-lang="css"> .blue{
/* 1.设置定位方式 */
position: absolute;
/* 2.设置偏移值 */
top: 150px;
left: 150px;
background-color: blue;
}
1.2.2 定位使用步骤
1. 设置定位方式
属性名称:位置
常用属性值:
2. 设置倾斜值
偏移值设置分两个方向,水平方向和垂直方向各选其一
选择的原则通常是就近原则(以距离最近的一侧为准)
1.3 静态定位 1.3.1 静态定位简介
静态定位是默认值,也就是之前已知的标准流。
代码:位置:静态;
当心:
1.静态定位是之前的标准流程,无法通过orientation属性连接
2、后面所说的定位不包括静态定位,一般指后一种:相对、绝对、固定
1.4 相对定位 1.4.1 相对定位简介
简介:自恋定位,与你之前的位置联系起来
代码:位置:相对;
特征:
1、需要配合orientation属性来实现联通
2. 相对于您的原始位置进行连接
3.占据页面位置→无标签外
应用场景:
1、与绝对定位组CP(儿子和父亲)合作
2.对于小规模联通
1.5 绝对定位 1.5.1 绝对定位简介
简介:实战爸爸定位、相对于父元素的非静态定位和连接定位
代码:位置:绝对;
特征:
1、需要配合orientation属性来实现联通
2.默认情况下,连接是相对于浏览器可视区域进行的
3. 不占据页面位置 → 已取消标记
应用场景: 1、与绝对定位组CP(儿子和父亲)合作
1.5.2 绝对定位相对于谁是有偏差的
绝对定位是相对于谁的?
1.祖先元素中没有定位→默认连接是相对于浏览器的
2.祖先元素中有定位→与最近的有定位的祖先元素进行通信
1.6 儿子和父亲简介 1.6.1 儿子和父亲简介介绍
场景:让子元素相对于父元素自由通信
意义:
子元素:绝对定位
父元素:相对定位
儿子相对于父亲的好处:
父元素相对定位,对网页布局影响最小
1.6.2(扩展)儿子死了、父亲死了的特殊场景
场景:使用子元素和父元素时,发现父元素已经绝对定位,直接child即可!
原因:
父元素已经定位以满足要求。 如果盲目改变父元素定位方式,可能会影响之前写的布局
.father{
width: 600px;
height: 600px;
background-color: pink;
position: relative;
}
.son{
width: 400px;
height: 400px;
background-color: blue;
position: absolute;
right:0px;
bottom: 0px;
}
.sun{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
right:0px;
}
1.6.3 卡模块热点图标定位案例
需求:根据设计图,通过PxCook测量数据,并基于day05-作业卡模块案例,定位热点图片,完成一致的疗效
<style>
*{
margin: 0;
padding: 0;
}
body {
background-color: #f4f5f9;
}
.box {
/* 1、宽高 */
width: 228px;
height: 270px;
/* 2、背景颜色 */
background-color: #fff;
margin: 100px auto;
/* 3、设置相对定位 */
position: relative;
}
.box .product {
/* width: 228px; */
width: 100%;
}
.box h3 {
height: 52px;
padding-left: 24px;
padding-right: 20px;
margin-top: 25px;
font-size: 14px;
font-weight: 400;
}
.box p{
margin-left: 24px;
font-size: 12px;
color: #929292;
}
.box p span{
color: #f77321;
}
.box .hot{
/* 设置绝对定位 */
position: absolute;
right:-4px;
top:4px;
}
</style>
<body>
<div class="box">
<img src="../images/hot.png" alt="" class="hot">
<img src="../images/product.png" alt="" class="product">
<h3>Android网络图片加载框架详解</h3>
<p><span>高级</span> • 1125人在学习</p>
</div>
</body>
1.6.4 儿子和父亲水平居中的情况
需求:使用子到父方面将子框在父包中水平居中(可以用任意长度的父子元素来实现)
解决办法: 1、儿子一定不能长得像父亲;
2.让子box连接到父包右侧的一半; 左:50%;
3、让子盒子连接到它自己的左半边;
常见做法:margin-left:-100px; 父母包长度的一半;
缺点:分包长度改变后,需要重新更改编码;
优化:变换:translateX(-50%);
优点:意味着自身长度的一半总是沿着X轴负方向(向左)连接css 固定定位,子袋长度的改变不需要修改代码;
<style>
*{
margin: 0;
padding: 0;
}
.father{
position: relative;
width: 600px;
height: 400px;
background-color: pink;
}
.son{
position: absolute;
left: 50%;
/* margin-left: -100px; */
transform:translateX(-50%);
width: 300px;
height: 100px;
background-color: blue;
}
1.6.5 父子水平和垂直居中的情况
需求:使用子到父图像使子框在父包中水平和垂直居中(父子元素可以实现任意宽度和高度)
解决方案:
1. 一个永远不像父亲的儿子
2.让子箱子走到右边,走到大袋子的一半
剩余:50%
3.让分箱下降到大包的一半
顶部:50%
4.让子盒子向左走+自己向上走一半
变换:翻译(-50%,-50%);
.father{
width: 600px;
height: 600px;
background-color: pink;
position: relative;
}
.son{
width: 400px;
height: 400px;
background-color: blue;
position: absolute;
right:100px;
bottom: 100px;
}
1.6.6 导航二维码居中定位案例
需求:根据设计图,以伟金所导航案例为基础,定位二维码图片,完成一致的疗效
<style>
*{
margin: 0;
padding: 0;
}
.nav{
height: 40px;
border-bottom: 1px solid #ccc;
}
ul {
list-style: none;
width: 1200px;
margin: 0 auto;
}
ul li{
float: left;
width: 20%;
height: 40px;
border-right: 1px solid #ccc;
box-sizing: border-box;
text-align: center;
line-height: 40px;
}
ul .last {
border-right: none;
}
ul li a{
display: block;
height: 40px;
text-decoration: none;
color: black;
font-size: 14px;
}
.nav .app{
position: relative;
}
.nav .app .code{
position: absolute;
left:50%;
transform: translateX(-50%);
top: 40px;
border: 1px solid #ccc;
}
</style>
<body>
<div class="nav">
<ul>
<li><a href="#">我要投资</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#" class="app">手机微金所
<img src="../images/code.jpg" class="code">
</a></li>
<li class="last"><a href="#">个人中心</a></li>
</ul>
</div>
</body>
1.6.7 顶部半透明描边效果
需求:根据设计图,通过代码完成网页中一致的效果
注意:定位的元素会脱标签(如:绝对定位),脱标签元素的宽高默认会被内容扩展
<style>
*{
margin:0;
padding:0;
}
.box{
width: 1226px;
height: 600px;
/* background-color: pink; */
margin: 0 auto;
background: url(../images/bg.jpg);
position: relative;
}
.mask{
/* width: 1226px; */
width: 100%;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0px;
}
</style>
<body>
<div class="box">
<div class="mask"></div>
</div>
</body>
1.7 固定定位 1.7.1 固定定位简介
简介:强迫性定位,相对于浏览器定位和联通而言
代码:位置:固定;
特征:
1、需要配合orientation属性来实现联通
2.相对于浏览器可视区域连接
3. 不占据页面位置 → 已取消标记
应用场景: 1.让包固定在屏幕上的某个位置
1.8 元素的层次关系 1.8.1 元素层次问题
不同布局形式元素的层级关系:标准流<浮动<定位
1.8.2 更改定位元素的层次结构
场景:更改定位元素的层次结构
属性名称:z-index
属性值:数字
数字越大,等级越高
2、装修 2.1 垂直对齐方法 2.1.1 知道基线(理解)
Baseline:浏览器中文本类型元素排版时有一个用于对齐的基线(baseline)
2.1.2 文本对齐问题
场景:解决行内/行内块元素垂直对齐问题
问题:图片和文字一行显示时,顶部不对齐
2.1.3 垂直对齐法
属性名称:垂直对齐
属性值:
img{
/* 基线对齐 */
vertical-align: baseline;
/* 顶部对齐 */
vertical-align: top;
/* 中部对齐 */
vertical-align: middle;
/* 底部对齐 */
vertical-align: bottom;
}
2.1.4vertical-align在(扩展)项目中可以解决的问题
1. 文本框和表单按钮无法对齐
<style>
input{
height: 50px;
box-sizing: border-box;
vertical-align: bottom;
}
</style>
<body>
<input type="text"><input type="button" value="百度一下">
</body>
2、input和img无法对齐
<style>
img {
/* height: 50px; */
box-sizing: border-box;
vertical-align: bottom;
}
</style>
<body>
<img src="../images/1.jpg"><input type="text">
3.div中的文本框,文本框无法粘贴到顶部
<style>
.father{
width: 200px;
height: 200px;
background-color: pink;
}
input{
vertical-align: top;
}
</style>
<body>
<div class="father">
<input type="text">
</div>
</body>
4、div没有设置高度,通过img标签拉伸。 这时候img标签下就会出现额外的间隙问题
<style>
.father{
width: 400px;
/* height: 200px; */
background-color: pink;
}
img{
/* 方法一:垂直对齐方式 */
/* vertical-align: bottom; */
/* 方法二:将图片转换成块级元素 */
display: block;
}
</style>
<body>
<div class="father">
<img src="../images/1.jpg" alt="">
</div>
</body>
5.使用line-height使img标签垂直居中
<style>
.father{
width: 400px;
height: 400px;
background-color: pink;
line-height: 400px;
}
img{
vertical-align: middle;
}
</style>
<body>
<div class="father">
<img src="../images/1.jpg" alt="">
</div>
</body>
2.2 光标类型
场景:设置键盘光标在元素上时显示的样式
属性名称:光标
常用属性值:
2.3 边框圆角 2.3.1 边框圆角介绍
场景:让包包的四个角显得饱满,增加页面细节,提高用户体验
属性名称:边框半径
常用值:数字+px、百分比
原则:
赋值规则:形参从左上角开始,然后顺时针形参,没有形参的看对角!
.box{
width: 200px;
height:200px;
background-color: blue;
/* border-radius: 30px; */
border-radius: 80px 80px ;
}
2.3.2 边框圆角的常见应用
画一个正圆: 1.盒子必须是正方形 2.将边框圆角设置为袋子宽度和高度的一半 → border-radius:50%
.box{
width: 200px;
height:200px;
background-color: yellow;
/* border-radius: 30px; */
border-radius: 50% ;
}
胶囊按钮:1.盒子要求是矩形2.设置→border-radius:盒子高度的一半
.box{
width: 400px;
height:200px;
background-color: blueviolet;
/* border-radius: 30px; */
border-radius: 100px ;
}
2.4 溢出部分显示疗效 2.4.1 溢出部分显示疗效
溢出部分:指袋子内容物超出袋子范围的区域
场景:控制内容溢出部分的显示效果,如:显示、隐藏、滚动条...
属性名称:溢出
常用属性值:
2.5 元素本身被隐藏 2.5.1 元素本身被隐藏
场景:使元素本身在屏幕上不可见。如:鼠标:元素悬停后隐藏
两者的区别:
1.visibility:hidden隐藏元素本身并在网页中占据位置
2.display:none 隐藏元素本身,不占据网页中的位置
2.5.2 元素显示隐藏开关盒
需求:代码完成:儿子元素默认隐藏,当鼠标移入父亲时,让儿子显示疗效
<style>
.father{
width: 200px;
height:200px;
background-color: pink;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
display: none;
}
.father:hover .son{
display: block;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
2.5.3 导航二维码显示隐藏切换案例
需求:通过代码,在刚刚完成的导航二维码居中定位案例的基础上,完成效果图中元素的显示和隐藏切换效果
.nav .app .code{
position: absolute;
left:50%;
transform: translateX(-50%);
top: 40px;
border: 1px solid #ccc;
display: none;
}
.nav .app:hover .code{
display: block;
}
2.5.4(扩展)元素的整体透明度
场景:让一个元素整体(包括内容)一起变得透明
属性名称:不透明度
属性值:0到1之间的数字 1:表示完全不透明 0:表示完全透明
注意事项:opacity会让元素整体透明,包括上面的内容,如:文字、子元素等...
.box{
width: 400px;
height:400px;
background-color: pink;
opacity:0.5;
}
2.5.5(扩展)边界合并
场景:让相邻的表格边框合并css 固定定位,得到细线边框的效果
代码:边框折叠:折叠;
table{
width: 250px;
height: 150px;
border: 1px solid #000;
border-collapse: collapse;
}
th,td{
border: 1px solid #000;
text-align: center;
}
2.5.6(拓展)用CSS画三角形的方法(面试题)
场景:在网页上显示小三角形时,除了使用图片之外,还可以使用代码来完成。
实现原理:借助包架完成
实施步骤:
1.设置一个包
2. 周围设置不同颜色的边框
3.将包的宽度和高度设置为0,只保留边框
4、获取四个三角形,选择其中一个,将其他三角形(边框)的颜色设置为透明
.box{
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0,0);
border-top:100px solid red;
border-right:100px solid blue;
border-bottom:100px solid orange;
border-left:100px solid yellow;
width: 0px;
height: 0px;
border-right:50px solid rgba(0, 0, 0,0);
border-bottom:100px solid rgba(0, 0, 0,0);
border-left:50px solid rgba(0, 0, 0,0);
}
3. 选择器扩展 3.1 链接伪类选择器 3.1.1 链接伪类选择器
场景:常用于选中超链接的不同状态
选择器语法:
当心:
如果需要同时实现以上四种伪状态的效果,就需要按照LVHA的顺序写出记忆公式:你男朋友送了你一个LV包,你开心哈笑
其中:hover伪类选择器使用频率较高,常用于选择各种元素的hover状态
3.2 焦点伪选择器 3.2.1 焦点伪选择器
场景:用于选择元素获得焦点时的状态,常用于表单控件
选择器语法:
input:focus{
background-color:skyblue;
}
效果:当表单控件获得焦点时,默认显示外轮廓
3.3 属性选择器 3.3.1 属性选择器
场景:通过元素上的HTML属性选择元素,常用于选择输入标签
选择器语法:
<style>
input[type="text"]{
background-color: pink;
}
input[type="password"]{
background-color: blue;
}
</style>
<body>
昵称:<input type="text" placeholder="请输入你的昵称"><br>
密码:<input type="password" placeholder="请输入你的密码"><br>
</body>
发表评论