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>
相关推荐
best6661 分钟前
预检请求是什么?
前端
前端加油站3 分钟前
单元测试入门与进阶
前端·单元测试
前端付杰8 分钟前
第八节: 全面理解vue3: 工具函数的核心作用与使用方法
前端·javascript·vue.js
Mr_sun.8 分钟前
Node.js与VUE安装
前端·vue.js·node.js
Tonychen9 分钟前
【React 源码阅读】为什么 React Hooks 不能用条件语句来执行?
前端·react.js·源码阅读
Cutey91613 分钟前
Vuex vs Pinia
前端·vue.js·面试
Sallywa19 分钟前
全局替换的思路历程
前端
瞌睡不来19 分钟前
(学习总结28)Linux 基本命令3
linux·学习
Anlici24 分钟前
虚拟dom 源码分析一下
前端·javascript·前端框架
一人前行33 分钟前
Flutter_学习记录_ ImagePicker拍照、录制视频、相册选择照片和视频、上传文件
学习·flutter