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>
相关推荐
埃菲尔铁塔_CV算法8 分钟前
C# WPF 基础知识学习(三)
人工智能·神经网络·学习·计算机视觉·c#·wpf
用户25871419326311 分钟前
Vue3使用多线程处理文件分片任务
前端
不懂装懂的不懂13 分钟前
【vue3】中断请求、取消请求
前端·javascript·vue.js
鱼樱前端18 分钟前
React18+pnpm+Ts+React-Router v6从0-1搭建后台系统
前端·javascript·react.js
Epicurus19 分钟前
ES6箭头函数
前端
掘金0119 分钟前
手把手教你使用 FLV.js 在 Vue 项目中播放 FLV 视频
前端
前端没钱20 分钟前
vue3怎么和大模型交互?
前端
狗头大军之江苏分军22 分钟前
移动端直播卡顿如何实时检测且告知用户
java·前端·后端
1024小神24 分钟前
拦截网页中的 Fetch 和 XMLHttpRequest 请求方式方法
前端·javascript
谎言西西里24 分钟前
Vue组件化实战🧐:手把手教你打造模块化组件树🌳
前端