css-知识点（学习笔记）

最新推荐文章于 2024-09-14 08:13:21 发布

奶茶丶

最新推荐文章于 2024-09-14 08:13:21 发布

阅读量1.6k

点赞数 3

分类专栏：前端 html css 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_52764447/article/details/119934942

版权

前端同时被 3 个专栏收录

59 篇文章 4 订阅

订阅专栏

html

51 篇文章 2 订阅

订阅专栏

css

17 篇文章 1 订阅

订阅专栏

本文介绍了前端开发中的几个关键技巧：hover伪类的多种用法，包括对父子元素、兄弟元素的操作；图片自适应容器的两种方法，避免图片失真；解决3D翻转导致的闪烁问题；fixed定位的理解及其应用；行内元素和块元素的居中策略；以及双飞翼布局和圣杯布局在创建三栏布局时的应用。这些技巧对于优化前端布局和用户体验至关重要。

摘要由CSDN通过智能技术生成

一、鼠标悬停样式

hover伪类基础用法
在前端学习的初期，想必大家用的很多的属性之一就有hover吧,hover伪类元素使用的三种情况
1、 hover用于父子元素
父子元素直接在父元素的id或者class或者标签名后紧接着:hover 然后空格子元素的名字就可以了。

2、 hover用于兄弟元素是当前元素的相邻元素
但是兄弟元素要注意在html里前面的兄弟元素放在后面兄弟元素的前面。而且hover后面加上“+”。否则不会有变化.

<div class="borther1"></div>
<div class="borther2"></div>
.borther1:hover+.borther2 {}

3、hover用于兄弟元素不是当前元素的邻接元素
比如下面的例子,borther1和borther3不是邻接元素，此时就用～符号

<div class="borther1"></div>
<div class="borther2"></div>
<div class="borther3"></div>
.borther1:hover～.borther3 {}

二、图片自适应容器问题

1、img标签的方式
我们想到是，把width、height设置为100%,

 .tu {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
        .tu img {
            width: 100%;
            height: 100%;
        }

在这里插入图片描述
可以看出图片明显的被拉宽的，虽然符合了自适应的要求，但是图片失真了，这种图片比容器小的情况强行将图片自适应的话图片就失真。这时给图片一个max-height和max-width，此属性会阻碍height属性的设置值变得比max-height更大，当使用max-height设置给定元素的最大高度，如果height属性的高度比该属性设置的高度还大，则height属性会失效，
一般将width：100% 和max-width搭配使用，width是参照父盒子的大小，max-width是限定图片自身的大小，可以缩小但是不可以放大

2、背景图片background

通过background-size:cover/contain或者是具体的百分比去设置图片在容器中所占比例的大小。

三、3D翻转不停闪的问题

1)将旋转图片的背面隐藏：backface-visibility：hidden；
2)或者给背面盒子添加一个1px的z轴距离：translateZ(1px);

在这里插入图片描述

四、fixed固定定位

1）加了固定定位的盒子要给宽度，固定定位是跟父盒子没有关系的，是以浏览器为准的
2）flexed 设置偏移量的问题
2.1 在浏览器的可视区域只设置一个偏移量是可以的，一般固定在一个地方就设置两个偏移量
2.2如果没在可视区域一个偏移量是不够的

五、行内元素、块元素居中方式

5.1、行内元素水平居中：

text-align:center;
flex+justify-content ；

5.2、块元素水平居中：

绝对定位+translate
flex+margin
margin：0 auto；
子盒子浮动的情况下父盒子必须添加：width：fit-content；和 maigin：0 auto；

5.2、浮动元素水平居中：

对于定宽的浮动元素，通过子元素设置relative + 负margin
对于不定宽的浮动元素，父子容器都用相对定位
通用方法(不管是定宽还是不定宽)：flex布局

5.3、行内元素垂直居中：

flex
行高等于父盒子的高度
利用表布局（table）display:table;（将父盒子转成表格的方式在将里面的内容居中）
利用表布局的vertical-align: middle可以实现子元素的垂直居中。（都写在父盒子里面）

5.3、块元素垂直居中：

使用absolute+负margin(已知高度宽度)
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。
使用absolute+transform
当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
使用flex+align-items
通过设置flex布局中的属性align-items，使子元素垂直居中。
使用table-cell+vertical-align: middle 添加在父盒子里面
通过将父元素转化为一个表格单元格显示（类似和），再通过设置 vertical-align属性，使表格单元格内容垂直居中。

六、三栏布局

知识点：

margin-left:-100%

是对象向左移动一段距离，这段距离等于父亲的内容宽度，浮动到前面元素的最左边。
圣杯布局和双飞翼布局实现的效果一样，但是在解决中间部分被挡住的问题，采取解决的方法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

————————————————
版权声明：本文为CSDN博主「@Demi」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38128179/article/details/86542447

6.1、双飞翼布局:左右盒子固定中间盒子自适应
举例：
定高200px，左右宽度为200px，中间自适应
在这里插入图片描述

html

 <div class="box">
     <div class="box1">左边</div>
     <div class="box3">右边</div>
     <div class="box2">中间</div>
 </div>

      * {
            padding: 0;
            margin: 0;
        }
       /* 清除浮动*/
       .box {
            overflow: hidden;
        }
        .box1 {
            text-align: center;
            list-style: 600px;
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {

            height: 200px;
            background-color: plum;
            margin-right: 200px;
            margin-left: 200px;
        }

        .box3 {
            text-align: center;
            list-style: 200px;
            float: right;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

6.2、圣杯布局: 要求中间区域优先渲染，左右区块给定宽，中间区块自适应；浮动和定位都用到
html
在这里插入图片描述

<body>
    <div class="box">
        <div class="box2">中间</div>
        <div class="box1">左边</div>
        <div class="box3">右边</div>
    </div>
</body>

css

  * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box {
            width: 100%;
            margin: 0 auto;
            padding: 0 200px 0 200px;
            overflow: hidden;
        }
        .box2 {
            width: 100%;
            position: relative;
            float: left;
            height: 100px;
            background-color: pink;
        }
        .box1 {
            position: relative;
            float: left;
            height: 100px;
            width: 200px;
            background-color: red;
            margin-left: -100%;
            left: -200px;
        }
        .box3 {
            position: relative;
            float: left;
            height: 100px;
            width: 200px;
            background-color: red;
            margin-left: -200px;
            right: -200px;
        }