css -学习 - 技术栈

css

css是什么

层叠样式表

对于页面上的文字、图案、多媒体、整体的布局、表现、样式问题、都是css来解决的。

BFC 是什么？

盒模型。

把文档看成一个个盒子

BFC的概念

所谓BFC,就是block formatting context ，块级格式化上下文。

它会创建一个特殊的区域，在这个区域中，只有block box参与布局。

BFC的成因

根元素或者其他包含它的元素
浮动元素
绝对定位元素
内联块
表格单元格
表格标题
*具有overflow，且不是visible的元素
display：inline-bloc\table-cell\table-caption/flex/inline-flex/grid/inline-grid

BFC的特点/原则

内部的box将会独占宽度，且在垂直方向，轮流排列。
box垂直方向的间距由margin决定，但是同一个BFC的两个相邻box的margin ,会出现边距折叠的现象。
BFC区域不会与浮动元素重叠而是依次排列。
BFC 的区域是一个独立的渲染容器，容器内的元素和BFC区域外的元素不会形成干扰。
浮动元素的高度也参与到BFC 高度计算中。

js 复制代码

<!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>
    <!-- <link rel="stylesheet" type="text/css" href="./index.css" > -->
</head>
<body>
    
    <h2>BFC 例题</h2>
    <h3>BFC  例1：左边固定右边自适应</h3>

        <div class="left1"></div>
        <div class="right1"></div>
    
    <h3>BFC  例2：高度塌陷</h3>
    <div class="root">
        <div class="child child1" ></div>
        <div class="child child2" ></div>
    </div>

    <h3>BFC  例3：边距折叠</h3>
    <div>
        <p>paragraph 1</p>
        <div class="warpped">
            <p>paragraph 2</p>
        </div>
        
    </div>
    

</body>
<style>
    .warpped {
        overflow: hidden;
    }
    p {
        color:aqua;
        background: #000;
        width: 200px;
        margin: 20px;
    }
    .root {
        border: 2px solid #000;
        width: 600px;
        overflow: hidden;
    }
    .child {
        border: 2px solid #f66;
        width: 100px;
        height: 100px;
        float: left;
    }

    .title {
        color: red;
    }
    .left1 {
        width: 200px;
        height: 160px;
        float: left;
        background: #f66;
    }
    .right1 {
        height: 200px;
        background-color: beige;
        overflow: hidden;
    }

</style>
</html>

css 的重点

背景、阴影、滤镜

背景background

X-color
X-image
X-repeat
X-attachment scroll/fixed
X-position
X-size
X-origin
X-clip
X-blend-mode

background 的连接规则

background：color image repeat attachment position/size

阴影 box-shadow text-shadow

offsetX 水平偏移

offsetY 垂直偏移

blur 模糊半径

color 颜色

滤镜 filter

blur 模糊
brightness 两端
contrast 对比度
drop-shadow 阴影
hue-rotate 色相旋转
invert 反相
opacity 透明度
saturate 饱和度
sepia 褐色

定位

fixed 相对于浏览器窗口定位
absolute 相对于第一个父级不为static的定位
relative 不改变文档流，直接基于原来的位置定位
sticky fixed 和relative 切换
static normal

js 复制代码

<!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>
</head>
<body>
    <div class="grand">
        <div class="father">
            <div class="child1">

            </div>
            <div class="child2">

            </div>
        </div>
    </div>
</body>
<style>
    .grand {
        height: 2000px;
        width: 1000px;
        background-color:antiquewhite;
    }
    .father {
        height: 600px;
        width: 600px;
        background-color: aquamarine;
        margin: 100px;
        left: 100px;
    }
    .child1 {
        height: 200px;
        width: 200px;
        background-color: red;
        
        top: 0px;
        left: 0px;
    }
    .child2 {
        height: 200px;
        width: 200px;
        background-color: #f66;
        position: sticky;
        top: 0px;
        left: 0px;
    }
</style>
</html>