CSS片段

最新推荐文章于 2025-12-01 06:15:27 发布

原创最新推荐文章于 2025-12-01 06:15:27 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

前端基础知识专栏收录该内容

2 篇文章

订阅专栏

这里写目录标题

1.优先级

内联 > ID选择器 # > 类选择器 . > 标签选择器

2.三角形

CSS绘制三角形—border法

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style type="text/css">
        div {
            width: 0px;
            height: 0px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

        div {
            width: 0px;
            height: 0px;
            border: 100px solid;
            border-color: transparent transparent red;
        }

3.水平居中

css3 利用dispaly:flex
CSS水平居中+垂直居中+水平/垂直居中的方法总结

    <style type="text/css">
        div {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>

        div {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        div {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        div {
            margin: 0 auto;
            text-align: center;
        }

4.垂直居中


<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
</style>
 
<div id="father">
    <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
</div>

    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
    }

5.水平垂直居中

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
}
 
    #son {
        background-color: green;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

6.BFC

深入理解BFC
Block Formatting Context 块级上下文格式化
作用是在一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离

触发条件
　　满足下列条件之一就可触发BFC

【1】根元素，即HTML元素

【2】float的值不为none

【3】overflow的值不为visible

【4】display的值为inline-block、table-cell、table-caption

【5】position的值为absolute或fixed
　　
作用
　　【1】可以阻止元素被浮动元素覆盖
　　【2】可以包含浮动元素
　　【3】相邻两个块级子元素分属于不同的BFC时可以阻止margin重叠
　　
解决问题：父元素不设高度，子元素设置float，父元素高度就变成0

解决办法：

float 不为none
position不是static或者relative
display是inline-block，flex，或inline-flex
overflow：hidden

作用：

取消盒子margin塌陷：竖直方向有塌陷，两个上下div的margin取大的那个
父元素加overflow：hidden，子元素正常（不需要float）
阻止元素被浮动元素覆盖
没什么用

7.清除浮动

解决问题：两个父盒子div没有高度，每个div有两个float的

，结果显示一行四个

没有两行两列p

两个div没有形成bfc，子元素就追上去，浮动没有关闭在父div里

解决办法：

父盒子设置高度（高度不能不固定）
父盒子div设置overflow：hidden，此方法可以改margin
第二个盒子加clear：both，不能改margin
通过类 .clearfix：：after{ content: ‘’; clear: both; display: block}，可以改margin
两个父div中间加一个div，clear: both

8.定位

相对定位：
相对原来位置，会在“老家留坑”，对其他元素没有影响
position：relative；
right：100px；

用途：
	微调元素位置
	当作绝对定位的参考位置

绝对定位：
position：absolute；
脱离了标准流，漂浮了起来。子绝父相，找最近的（相对）定位
绝对定位的盒子垂直居中在父盒子
position：absolute；
top：50%；
margin-top：自己高度的一半的负数

用途：
	制作“压盖”，“遮罩”
	结合CSS精灵
	结合JS实现动画

固定定位：
只能以页面为参考点
脱离标准文档流