致自己：CSS学习笔记五
CSS布局
1、定位
1、定位的基本介绍
1、网页常见的布局方式
1、标准流：块元素独占一行--》垂直布局行内元素/行内块元素一行可以显示多个--》水平布局2、浮动：可以让原本垂直布局的块级元素变成水平布局3、定位：可以让元素自由的摆放在网页的任意位置一般适用于盒子之间的层叠情况
2、定位的基本使用
1、使用步骤：
1、设置定位方式：position：属性值；
| 定位方式 | 属性值 |
|---|---|
| 静态定位 | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
2、设置偏移量：
- 偏移量设置分为两个方向，水平和垂直方向各选一个使用即可
- 选取的原则是就近原则
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+px | 距离下边的距离 |
3、静态定位
1、静态定位：即标准流，静态定位是默认值
2、代码：position：static；
3、注意点：静态定位即标准流，不能通过方位属性进移动
4、代码示例：
<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>Documenttitle><style>/* 静态定位设置left、right、top、bottom属性不生效 */div:first-child {width: 100px;height: 100px;background-color: pink;position: static;left: 100px;top: 100px;}div:nth-child(2) {width: 100px;height: 100px;background-color: skyblue;position: static;left: 100px;top: 100px;}div:nth-child(3) {width: 100px;height: 100px;background-color: orange;position: static;left: 100px;top: 100px;}div:last-child {width: 100px;height: 100px;background-color: yellow;position: static;left: 100px;top: 100px;}style>
head>
<body><div>1111div><div>1111div><div>1111div><div>1111div>
body>
html>
4、相对定位
1、相对定位：相对定位是相对于自己之前的元素位置进行移动的
2、代码：position：relative；
3、特点：
- 需要配合方位属性来实现移动
- 是相对于自己原来的位置进行移动的
- 在页面中占有位置，没有脱离标准流
- 适用于小范围的移动
- 配合绝对定位组实现子绝父相
4、代码示例：
<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>Documenttitle><style>/* 相对定位是相当于自己原来的位置移动的，需要配合访问属性实现移动 */.father {width: 500px;height: 500px;background-color: pink;}.son1 {width: 100px;height: 100px;background-color: skyblue;position: relative;left: 100px;top: 100px;}.son2 {width: 100px;height: 100px;background-color: orange;position: relative;left: 200px;top: 200px;}style>
head>
<body><div class="father"><div class="son1">div><div class="son2">div>div>
body>
html>
5、绝对定位
1、绝对定位：相对于非静态定位的父元素进行定位移动的
2、代码：position：absolute；
3、特点：
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置，已经脱离标准流
- 配合相对定位组实现子绝父相
4、注意点：
- 如果祖先元素没有定位，则默认相对于浏览器进行移动
- 如果祖先元素有定位，则相对于最近的有定位的祖先元素进行移动
5、代码示例：
<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>Documenttitle><style>/* 绝对定位：先找有没有定位的父级，没有则相当于浏览器窗口进行定位找到有定位的父级，则以此父级为参照物进行定位 */.box1 {width: 500px;height: 500px;background-color: pink;}/* 已经脱离标准流，在页面中不占位置 */.box2 {width: 100px;height: 100px;background-color: skyblue;position: absolute;left: 100px;top: 100px;}style>
head>
<body><div class="box1">div><div class="box2">div>
body>
html>
6、子绝父相
1、子绝父相：父元素相对定位，子元素绝对定位，让子元素相对于父元素进行自由移动
2、特点：父元素相对定位，对网页的布局影响最小
3、代码示例：
<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>Documenttitle><style>.father {width: 600px;height: 600px;position: relative;background-color: bisque;}/* 子绝父相：父级元素相对定位子级元素绝对定位*/.son {width: 200px;height: 200px;background-color: aqua;position: absolute;right: 200px;}.sun {width: 100px;height: 100px;background-color: orange;position: absolute;right: 10px;bottom: 30px;}style>
head>
<body><div class="father"><div class="son"><div class="sun">div>div>div>
body>
html>
4、子绝父相元素居中显示
<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>Documenttitle><style>/* 相对定位元素水平居中 */.rel {position: relative;margin: 0 auto;width: 100px;height: 100px;background-color: pink;}/* 绝对定位不能使用 margin: 0 auto; 进行居中*/.abs {position: absolute;/* margin: 0 auto; */left: 50%;top: 50%;/* 位移: 自己宽度高度的一半 */transform: translate(-50%,-50%);width: 100px;height: 100px;background-color: skyblue;}style>
head>
<body><div class="rel">div><div class="abs">div>
body>
html>
7、固定定位
1、固定定位：相对于浏览器进行定位
2、代码：position：fixed；
3、特点：
- 需要使用方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置 ，已经脱离标准流
- 可以让盒子固定在屏幕的某个位置
4、代码示例：
<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>Documenttitle><style>/*固定定位元素已经脱离标准流，位置改变参考的是浏览器窗口具备行内块元素特点*/.box1 {width: 500px;height: 500px;background-color: pink;}.box2 {width: 200px;height: 200px;background-color: orange;position: fixed;left: 100px;top: 100px;}style>
head>
<body><div class="box1">div><div class="box2">div>
body>
html>
8、元素的层级关系
1、不同布局元素的层级关系：标准流 < 浮动 < 定位
2、不同定位之间的层级关系：
- 相对定位、绝对定位、固定定位默认层级相同
- 此时html中写在最下面的元素层级更高，会覆盖上面的元素
3、改变定位元素的层级：z-index: 数字;
数字越大，层级越高
4、代码示例：
<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>Documenttitle><style>div {width: 200px;height: 200px;}.box1 {background-color: pink;position: absolute;left: 50px;top: 50px;z-index: 3;}.box2 {background-color: orange;position: absolute;left: 100px;top: 100px;z-index: 2;}style>
head>
<body><div class="box1">box1div><div class="box2">box2div>
body>
html>
2、装饰
1、垂直对齐方式
1、基线：浏览器文字类型元素排版中存在的用于对齐的基线
2、垂直对齐方式：vertical-align：属性值；
3、属性值：
| 属性值 | 效果 |
|---|---|
| baseline | 默认值，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
4、垂直对齐方式可以解决的问题
- 文本框和表单按钮无法对齐的问题
- input和img无法对齐的问题
- div中的文本框无法贴顶问题
- div不设置高度由img标签撑开，此时img标签下面会存在额外的间隙问题
- 使用line-height让img标签垂直居中问题
5、代码示例：
<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>Documenttitle><style>.father {width: 200px;height: 200px;background-color: pink;}input {vertical-align: top;}style>
head>
<body><div class="father"><input type="text">div>
body>
html>
2、光标类型
1、使用场景：设置鼠标光标在元素上时显示的样式
2、属性名：cursor
3、属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
4、代码示例：
<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>Documenttitle><style>.box {cursor: pointer;width: 100px;height: 100px;background-color: #ccc;}style>
head>
<body><div class="box">光标类型div>
body>
html>
3、边框圆角
1、使用场景：让盒子四个角变得圆润，提升用户体验
2、属性名：border-radius
3、属性值：数字+px，或者百分比
4、赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
5、代码示例：
<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>Documenttitle><style>.box {cursor: pointer;width: 100px;height: 100px;background-color: #ccc;margin: 100px auto;/* 一个值：四个角border-radius: 30px;两个值：左上、右下10px，右上、左下20x.pxborder-radius: 10px 20px;三个值：左上10px、右上和左下20px、右下30pxborder-radius: 10px 20px 30px;四个值：左上10px、右上20px、右下30px、左下40pxborder-radius: 10px 20px 30px 40px;百分比同理：border-radius: 50%;*/border-radius: 20% 50%;}style>
head>
<body><div class="box">div>
body>
html>
4、overflow溢出部分显示效果
1、溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
2、使用场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条等等
3、 属性名：overflow
4、常见属性值：
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或者隐藏滚动条 |
5、代码示例：
<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>Documenttitle><style>.box {width: 100px;height: 100px;background-color: #ccc;/* 溢出隐藏 *//* overflow: hidden; *//* 滚动: 无论内容是否超出都显示滚动条的位置 *//* overflow: scroll; *//* auto: 根据内容是否超出, 判断是否显示滚动条 */overflow: auto;}style>
head>
<body><div class="box">测试溢出显示效果，测试溢出显示效果，测试溢出显示效果，测试溢出显示效果div>
body>
html>
5、元素本身隐藏
1、使用场景：让某元素在页面中不可见，如：鼠标:hover 之后元素隐藏
2、常见属性：
- visibility：hidden—》隐藏元素本身，并且在网页中占位置
- display：none—》隐藏元素本身，并且在网页中不占位置
3、注意点：
- 开发中经常使用display属性完成元素的显示和隐藏的切换
- display：none；（隐藏）、 display：block；（显示）
4、代码示例：
<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>Documenttitle><style>div {width: 200px;height: 200px;}.one {/* 隐藏，不占位置 *//* display: none; *//* 隐藏，占用位置 */visibility: hidden;background-color: pink;}.two {background-color: skyblue;}style>
head>
<body><div class="one">onediv><div class="two">twodiv>
body>
html>
6、元素透明度
1、使用创建：让某个元素整体变透明，包括内容
2、属性名：opacity
3、属性值：0-1之间的数字，0表示完全透明，1表示完全不透明
4、注意点：opacity会让元素整体透明，包括里面的内容，如：文字、子元素等
5、代码示例：
<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>Documenttitle><style>.opc {opacity: 0.5;}style>
head>
<body><div class="opc">透明字<div>子元素也是透明字div>div><div>不透明字div>
body>
html>
7、边框合并
1、使用场景：让相邻边框进行合并，得到细线边框效果
2、代码：border-collapse：collapse；
3、代码示例：
<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>Documenttitle><style>table {border: 1px solid #ccc;border-collapse: collapse;}td {border: 1px solid red;}style>
head>
<body><table><tr><td>11td><td>22td>tr><tr><td>33td><td>44td>tr>table>
body>
html>
3、选择器拓展
1、链接伪类选择器
1、使用场景：用于选中超链接的不同状态
2、选择器语法：
| 选择器语法 | 说明 |
|---|---|
| a:link{} | 选中超链接未访问的状态 |
| a:visited{} | 选中超链接访问之后的状态 |
| a:hover{} | 选中鼠标悬停到元素上的状态，可以用于任意元素 |
| a:active{} | 选中鼠标按下的状态 |
3、代码示例：
<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>Documenttitle><style>a {text-decoration: none;}a:link {color: pink;}a:visited {color: red;}a:hover {color: green;}a:active {color: yellow;}style>
head>
<body><a href="https://www.baidu.com" target="_blank">测试超链接伪类a>
body>
html>
2、焦点伪类选择器
1、使用场景：用于选中元素获取焦点时的状态，常用于表单控件
2、选择器语法：input:focus {}
3、表单控件获取焦点时默认会显示外部轮廓线
4、代码示例：
<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>Documenttitle><style>/* 获得焦点：把光标点到input里面失去焦点：把光标从input里面拿出来*/input:focus {background-color: pink;}style>
head>
<body>用户名：<input type="text">密码：<input type="password">提交：<input type="button">
body>
html>
3、属性选择器
1、使用场景：通过元素上的html属性来选择元素，常用于选择input标签
2、选择器语法：
| 选择器 | 说明 |
|---|---|
| E[attr] | 选择具有attr属性的E元素 |
| E[attr=“val”] | 选择具有attr属性，并且属性值为val的E元素 |
3、代码示例：
<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>Documenttitle><style>input[type="text"] {background-color: pink;}input[type="password"] {background-color: skyblue;}style>
head>
<body>用户名：<input type="text">密码：<input type="password">
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！