day7 CSS布局3

杰瘦瘦

已于 2022-09-25 19:36:50 修改

阅读量93

点赞数

分类专栏：前端基础笔记文章标签：前端 css html javascript

于 2022-06-16 21:44:54 首次发布

本文链接：https://blog.csdn.net/m0_70619994/article/details/125269483

版权

前端基础笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、定位

1、网页常见布局方式

（1）标准流

块级元素独占一行→ 垂直布局
行内元素/行内块元素一行显示多个→ 水平布局

（2）浮动

可以让原本垂直布局的块级元素变成水平布局

（3）定位

可以让元素自由的摆放在网页的任意位置
一般用于盒子之间的层叠情况

2、定位的常见使用场景

（1）可以解决盒子与盒子之间的层叠问题

定位之后的元素层级最高，可以层叠在其他盒子上面

（2）可以让盒子始终固定在屏幕中的某个位置

3、使用定位的步骤

（1）设置定位方式

属性名：position
常见属性值：

（2）设置偏移值

偏移值设置分为两个方向，水平和纯质方向各选一个使用即可

选取的原则一般是就近原则（离哪边近用哪个）

4、静态定位

介绍：静态定位是默认值，就是之前认识的标准流

代码：position:static;

注意点：

静态定位就是之前标准流，不能通过方位属性进行移动
之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

5、相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动

代码：position:relative;

特点：

需要配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置（没有脱标）

应用场景

配合绝对定位组CP（子绝父相）
用于小范围的移动

代码示例：

<!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>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: relative;
            left: 100px;
            top: 200px;
        }
    </style>
</head>
<body>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <div>定位测试</div>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
</body>
</html>

展示效果：

注意点：

如果left和right都有，以left为准
如果top和bottom都有，以top为准

6、绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

代码：position:abosolute;

特点：

需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置（已经脱标）

应用场景：

配合绝对定位组CP（子绝父相）

（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>Document</title>
    <style>
        div{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <div>定位测试</div>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
</body>
</html>

展示效果：

（2）如果父级已经定位，就以这个父级为参照我进行定位。（父级设置为相对定位，子级设置为绝对定位->子绝父相）

代码示例：

<!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>Document</title>
    <style>
        .father{
            /* 父级设置相对定位 */
            position: relative;        
            width: 400px;
            height: 400px;
            background-color: green;

        }
        .son{
            /* 子级设置绝对定位：往右下方定位50px */
            position: absolute;
            right: 50px;
            bottom: 50px;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

展示效果：

注意点：

绝对定位查找父级的方式：就近找定位的父级，如果逐层找不到这样的父级，最终会以浏览器窗口为参照物进行定位。
绝对定位的盒子不能使用左右margin auto居中
方位也可以使用百分比进行设置，例：left:50%;

7、固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动，当我们滑动鼠标滚轮时，依旧显示在窗口固定的位置保持不变

代码：position:fixed；

特点：

需要配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置（已经脱标）

应用场景：

让盒子固定在屏幕中的某个位置

注意点：

具有行内块特点，尽量要设置宽高，否则盒子会依靠内容撑开，如果宽高和内容都为空的话，页面上将会显示不见

8、元素的层级关系

不同布局方式元素的层级关系

标准流<浮动<定位

不同定位之间的层级关系：

相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素

代码示例：

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .one{
            position: absolute;
            left: 20px;
            top: 50px;
            background-color: green;
        }
        .two{
            position: absolute;
            left: 50px;
            top: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="two">two</div>
    <div class="one">one</div>
</body>
</html>

展示效果：

根据上面的展示效果可以了解到.one标签是写在.two标签下面的，默认情况，定位的盒子，后来者居上，后面的会覆盖上面的元素。

但如果说我们不想改变标签位置又想上面的标签显示在最上层，就可以用到一个属性z-index

z-index:整数； --取值越大，显示顺序越靠（不设置的默认值为0）

二、装饰

1、认识基线

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

2、文字对齐问题

场景：解决行内/行内块元素垂直对齐问题

问题：当图片和文字在一行中显示时，其实底部不是对齐的

代码示例：

展示效果：

3、垂直对齐方式

属性名：vertical-align

属性值：

注意点：

浏览器把行内块标签当做文字处理，默认基线对齐

4、光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

常见属性值：

5、边框圆角

场景：让盒子的四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角

代码示例：

<!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>2</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* 1个值：四个角都会设置 
            2个值：左上右下 右上左下
            3个值：左上 右上左下 右下
            4个值：左上 右上 右下 左下
            */
            border-radius: 50px;
            /*  */
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="shree"></div>
    <div class="four"></div>
</body>
</html>

展示效果：

4、溢出部分显示效果

溢出部分：指的是盒子内容部分所超过盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条...

属性名：overflow

常见属性值：

代码示例：

<!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>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            overflow: visible;
        }
    </style>
</head>
<body>
    <div>溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果</div>
</body>
</html>

展示效果：

5、元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

常见属性：

visibility:hidden（占位隐藏）
display:none（不占位隐藏）

区别：

6、拓展点

（1）透明

场景：让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0~1之间的数字

1：表示完全不透明
0：表示完全透明

（2）边框合并

场景：让相邻表格边框进行合并，得到细线边框效果

代码：border-collapse:collapse；

（3）焦点伪类选择器

场景：用于选中元素获取焦点时状态，常用于表单控件

选择器语法：

input:focus{css样式}

代码示例：

效果：

表单控件获取焦点时默认会显示外部轮廓线

（4）属性选择器

场景：通过元素头上的HTML属性来选择元素，常用于选择input标签

选择器语法：

代码示例：

<!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>Document</title>
    <style>
        input[type='text']{
            background-color: skyblue;
        }
        input[type='password']{
            background-color: green;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
</body>
</html>

展示效果：

杰瘦瘦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day7 CSS布局3

目录一、定位1、网页常见布局方式2、定位的常见使用场景3、使用定位的步骤4、静态定位5、相对定位6、绝对定位7、固定定位8、元素的层级关系二、装饰1、认识基线2、文字对齐问题3、垂直对齐方式4、光标类型5、边框圆角4、溢出部分显示效果5、元素本身隐藏6、拓展点（1）透明（2）边框合并（3）焦点伪类选择器（4）属性选择器（1）标准流（2）浮动（3）定位（1）可以解决盒子与盒子之间的层叠问题（2）可以让盒子始终固定在屏幕中的某个位置（1）设置定位方式（2）设置偏移值偏移值设置分为两个方向，水平和纯质方向各选一个
复制链接

扫一扫