【前端知识点总结】CSS 基础四

最新推荐文章于 2022-12-03 23:29:46 发布

疆子

最新推荐文章于 2022-12-03 23:29:46 发布

阅读量734

点赞数 1

分类专栏：前端知识点总结文章标签：前端 css css3

本文链接：https://blog.csdn.net/jiang_ziY/article/details/122916140

版权

前端知识点总结专栏收录该内容

31 篇文章 10 订阅

订阅专栏

定位 position

特点 : 特殊位置,压住(压住其他元素(层叠到其他元素上)浮动和标准流解决不了的位置)

静态定位

position: static; ：(元素默认的定位方式)标准流不会动

相对定位 `position: relative;` (缩写 por)

相对定位元素不脱标,还占据原来位置
位置偏移参考自身位置

绝对定位 `position: absolute；` (缩写 poa)

绝对定位元素脱标,不占据原来位置
绝对定位元素如果父元素没有定位,位置偏移参考浏览器
绝对定位元素如果父元素有定位,位置偏移参考离他最近的使用定位的父元素

固定定位 `position: fixed;` (缩写 pof)

把盒子固定在页面的某个位置,不会随滚动条滚动。配合方位名词移动 left right top bottom

固定定位的元素脱标,不占据原来位置
位置偏移参考浏览器可视窗口

子绝父相（实际开发中常用）

子元素绝对定位,父元素相对定位,子元素位置偏移参考父元素

<head>
    <style>
        .baba {
            position: relative;
            width: 800px;
            height: 300px;
            background-color: #ccc;
        }
        .son {
            position: absolute;
            right: 0;
            top: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="baba">
        <div class="son"></div>
    </div>
</body>

绝对定位的盒子居中方法

方法1 ：

<head>
    <style>
        .baba {
            position: relative;
            width: 600px;
            height: 400px;
            background-color: #ccc;
        }
        .erzi {
            position: absolute;
            /* 向右走父元素宽度的一半 */
            left: 50%;
            /* 向左走子元素自身宽度的一半 */
            margin-left: -75px;
            /* 向下走父元素高度的一半 */
            top: 50%;
            /* 向上走子元素自身高度的一半 */
            margin-top: -75px;
            width: 150px;
            height: 150px;
            background-color: red;
            /* margin: 0 auto; 只对标准流里边块元素水平居中有效 */
            /* margin: 0 auto; */
        }
    </style>
</head>
<body>
    <div class="baba">
        <div class="erzi"></div>
    </div>
</body>

方法 2 ：
left:0; right:0; top:0; bottom:0; margin:auto;

<head>
    <style>
        .baba {
            position: relative;
            width: 600px;
            height: 400px;
            background-color: #ccc;
        }
        .erzi {
            position: absolute;
            /* 这个方法子元素必须设置宽高 */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 150px;
            height: 150px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="baba">
        <div class="erzi"></div>
    </div>
</body>

注意 : 这个方法子元素必须设置宽高

鼠标形态 cursor

cursor: default; 默认状态小白
cursor: pointer; 小手
cursor: move; 移动
cursor: help; 帮助
cursor: not-allowed; 禁止
cursor: crosshair; 十字
cursor: text; 文本

元素的层级关系

标准流 < 浮动 < 定位

定位元素的层级关系

标签越靠后,层级越靠上

`z-index:值;` 默认值为auto=0 ，值越大越靠上

z-index用来调整定位(相对,绝对,固定)元素层叠顺序,值越大,层叠顺序越靠上,可以为负值

脱标元素(浮动绝对定位固定定位)的特点

浮动脱标和定位脱标的相同点

块元素脱标之后不会默认父元素宽度,默认宽高为0,内容撑开宽高
行内元素脱标后可以设置宽高了
脱标的块元素使用margin:0 auto;无效. 脱标的行内内元素行内块元素给父元素使用tac居中无效

浮动脱标和定位脱标的区别

浮动压不住文字行内元素行内块元素,浮动最重要的特点是多个块元素同行显示
定位元素脱标可以压住任意标签,定位的作用是特殊位置压住

CSS 装饰属性

基线垂直对齐

vertical-align：值； 控制行内元素行内块元素垂直对齐块元素无效

vertical-align：baseline；默认值基线对齐
vertical-align：top；顶对齐
vertical-align：middle；垂直居中对齐
vertical-align：bottom；底对齐

行内元素、行内块元素垂直顶对齐方法

行内元素,行内块元素,垂直对齐使用vertical-align
行内元素,行内块元素垂直顶对齐,也可以使用浮动,因为浮动的元素顶对齐,代码换行没有缝隙

解决图片底部缝隙的问题方法

给图片设置 vertical-align 除了基线对齐以外所有的值
把图片转换为块元素

内容溢出处理 overflow : 值 ;

overflow :visible; 默认值溢出可见
overflow :hidden; 溢出隐藏
overflow :scroll; 不管内容是否溢出都生成滚动条
overflow :auto; 内容溢出生成滚动条,不溢出不生成滚动条

元素的显示与隐藏

visibicity : hidden ; 隐藏后还占据原来位置
display : none ; 隐藏后不占据原来位置。display:block ; 显示隐藏元素（实际开发常用）

边框合并

border-collapse : collapse ; 表格边框合并,表格标签专有属性

精灵图的使用方法

把很多装饰类的小图放到一张大图上,作为背景使用,提升页面打开速度,减少请求次数，优化页面性能。

测量需要局部大小,设置宽高
测量图片的坐标值,设置为背景定位属性的负值

<head>
    <style>
        .box {
            /* 精灵图2步
            1.测量需要局部大小,设置为盒子的宽高
            2.测量局部坐标值,设置为背景定位负值
             */
            width: 24px;
            height: 24px;
            background: url(./images/index.png) no-repeat -157px -106px;
        }
        .abc {
            width: 13px;
            height: 8px;
            border: 1px solid #000;
            margin-top: 100px;
            background: url(./images/index.png) no-repeat -255px -27px;
        }
    </style>
</head>
<body>
    <!-- 精灵图是把很多装饰类的小图放到一张大图上,作为背景使用,提升页面打开速度,减少请求次数 -->
    <div class="box"></div>
    <div class="abc"></div>
</body>