山药泥拌饭

前端学习记录~2023.7.15~CSS杂记 Day7

前言
一、介绍 CSS 布局
- 1、正常布局流
- 2、display 属性
- 3、弹性盒子
- - （1）设置 display：flex
  - （2）设置 flex 属性
- 4、Grid 布局
- - （1）设置 display：grid
  - （2）在网格内放置元素
- 5、浮动
- 6、定位
- 7、表格布局
- 8、多列布局
总结

前言

由于有很多知识非常符合直觉或者和其他语言有通用性，因此个人觉得不需要全部记下来，本篇只记录一些个人觉得需要注意或单独记忆的知识点。

同时为了提高效率和减少对不重要内容的时间投入，会考虑更加精简

一、介绍 CSS 布局

这个模块中将涉及更多关于页面布局技术的细节：

正常布局流
display属性
弹性盒子
网格
浮动
定位
CSS 表格布局
多列布局

1、正常布局流

正常布局流（normal flow）指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。

出现在另一个元素下面的元素被描述为块元素，与出现在另一个元素旁边的内联元素不同，内联元素就像段落中的单个单词一样

块元素内容的布局方向被描述为块方向。块方向在英语等具有水平书写模式(writing mode) 的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的内联方向是内联内容（如句子）的运行方向

下列布局技术会覆盖默认的布局行为：

display属性：标准的 value，比如block, inline 或者 inline-block 元素在正常布局流中的表现形式。接着是全新的布局方式，通过设置display的值，比如 CSS Grid 和 Flexbox
浮动：应用float值，例如left能让块级元素互相并排成一行，而不是一个堆叠在另一个上面
position属性：允许精准设置盒子中的盒子位置，正常布局流中默认为static，使用其他值可以引起元素不同布局方式，比如将元素固定到浏览器视口的左上角
表格布局：表格的布局方式可以用在非表格内容上，可以使用display：table和相关属性在非表元素上使用
多列布局：可以让块按列布局，比如报纸的内容就是一列一列排布的

2、display 属性

除了可以通过将一些内容从block转换为inline（反之亦然）来更改默认表示形式之外，还有一些更大的布局方法以display值开始。但是，在使用这些属性时，通常需要调用其他属性。在讨论布局时，对我们来说最重要的两个值是 display: flex 和 display: grid

3、弹性盒子

Flexbox（Flexible Box Layout Module）是 CSS 弹性盒子布局模块的缩写。用于创建横向或纵向的一维页面布局。在需要进行 flex 布局的父元素上应用display：flex，所有直接子元素都将会按照 flex进行布局

（1）设置 display：flex

下面这些 HTML 标记描述了一个 class 为wrapper的容器元素，它的内部有三个

元素。它们在我们的英文文档当中，会默认地作为块元素从上到下进行显示

<div class="wrapper">
  <div class="box1">Onediv>
  <div class="box2">Twodiv>
  <div class="box3">Threediv>
div>

现在，当我们把display: flex添加到它的父元素时，这三个元素就自动按列进行排列。这是由于它们变成了flex 项 (flex items)，按照 flex 容器（也就是它们的父元素）的一些 flex 相关的初值进行 flex 布局：它们整整齐齐排成一行，是因为父元素上flex-direction的初值是row。它们全都被拉伸至和最高的元素高度相同，是因为父元素上align-items属性的初值是stretch。这就意味着所有的子元素都会被拉伸到它们的 flex 容器的高度，在这个案例里就是所有 flex 项中最高的一项。所有项目都从容器的开始位置进行排列，排列成一行后，在尾部留下一片空白

.wrapper {
  display: flex;
}

结果如下

（2）设置 flex 属性

除了上述可以被应用到 flex 容器的属性以外，还有很多属性可以被应用到 flex 项 (flex items) 上面。这些属性可以改变 flex 项在 flex 布局中占用宽/高的方式，允许它们通过伸缩来适应可用空间

比如在所有子元素上添加flex属性并赋值为1，这会使得所有子元素都伸展并填充容器，而不是在尾部留下空白

.wrapper {
    display: flex;
}

.wrapper > div {
    flex: 1;
}

<div class="wrapper">
    <div class="box1">Onediv>
    <div class="box2">Twodiv>
    <div class="box3">Threediv>
div>

效果如下

更多信息在下面专门的 flexbox章节

4、Grid 布局

Flexbox 用于设计横向或纵向的布局，而 Grid 布局被用于同时在两个维度上把元素按行和列排列整齐

（1）设置 display：grid

除了使用display:grid，我们还分别使用 grid-template-rows 和 grid-template-columns 两个属性定义了一些行和列的轨道。定义了三个1fr的列，还有两个100px的行之后，无需再在子元素上指定任何规则，它们自动地排列到了我们创建的格子当中

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

<div class="wrapper">
    <div class="box1">Onediv>
    <div class="box2">Twodiv>
    <div class="box3">Threediv>
    <div class="box4">Fourdiv>
    <div class="box5">Fivediv>
    <div class="box6">Sixdiv>
div>

效果如下

（2）在网格内放置元素

一旦你拥有了一个 grid，你也可以显式地将元素摆放在里面，而不是依赖于浏览器进行自动排列。在下面的第二个例子里，我们定义了一个和上面一样的 grid，但是这一次我们只有三个子元素。我们利用 grid-column 和 grid-row 两个属性来指定每一个子元素应该从哪一行/列开始，并在哪一行/列结束。这就能够让子元素在多个行/列上展开

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}

<div class="wrapper">
    <div class="box1">Onediv>
    <div class="box2">Twodiv>
    <div class="box3">Threediv>
div>

更多信息在下面专门的 Grid网格章节

5、浮动

把一个元素“浮动”(float) 起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动 (float) 的元素周围环绕

float属性有 4 个可能的值：

left：将元素浮动到左侧
right：将元素浮动到右侧
none：默认值，不浮动
inherit：继承父元素的浮动属性

在下面这个例子当中，我们把一个

元素浮动到左侧，并且给了他一个右侧的margin，把文字推开。这给了我们文字环绕着这个

元素的效果

<h1>Simple float exampleh1>

<div class="box">Floatdiv>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.p>

.box {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 30px;
}

效果如下

6、定位

定位 (positioning) 能够让我们把一个元素从它原本在正常布局流 (normal flow) 中应该在的位置移动到另一个位置。定位 (positioning) 并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。

有 5 种主要的定位类型需要我们了解：

静态定位（static positioning）：元素默认属性，指放在文档布局流的默认位置
相对定位（relative positioning）：允许我们相对于元素在正常的文档流中的位置进行移动，包括将两个元素叠放在页面上。这对于微调和精准设计非常有用
绝对定位（absolute positioning）：将元素完全从页面的正常布局流中移除，类似将它单独放在一个图层中。我们可以将元素相对于页面的元素边缘固定，或相对于该元素的最近被定位祖先元素。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板
固定定位（fixed positioning）：与绝对定位类似，但它是将一个元素相对浏览器视口固定，而不是相对于另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用
粘性定位（sticky positioning）：一种新的定位方式，它会让元素先保持和 position: static 一样的定位，当它的相对视口位置达到某一个预设值时，它就会像 position: fixed 一样定位

更多具体的在后面专门章节再仔细记录

7、表格布局

现在已经不太使用，它通常会被用于兼容一些不支持 Flexbox 和 Grid 的浏览器。

一个

标签之所以能够像表格那样展示，是由于 css 默认给

标签设置了一组 table 布局属性。当这些属性被应用于排列非

元素时，这种用法被称为“使用 CSS 表格”

<form>
  <p>First of all, tell us your name and age.p>
  <div>
    <label for="fname">First name:label>
    <input type="text" id="fname">
  div>
  <div>
    <label for="lname">Last name:label>
    <input type="text" id="lname">
  div>
  <div>
    <label for="age">Age:label>
    <input type="text" id="age">
  div>
form>

html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label, form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}

结果如下

8、多列布局

多列布局模组给了我们一种把内容按列排序的方式，就像文本在报纸上排列那样。由于在 web 内容里让你的用户在一个列上通过上下滚动来阅读两篇相关的文本是一种非常低效的方式，那么把内容排列成多列可能是一种有用的技术。

要把一个块转变成多列容器 (multicol container)，我们可以使用 column-count属性来告诉浏览器我们需要多少列，也可以使用column-width来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。

<div class="container">
    <h1>Multi-column layouth1>

    <p>Paragraph 1.p>
    <p>Paragraph 2.p>

div>

我们指定了该容器的column-width为 200 像素，这让浏览器创建了尽可能多的 200 像素的列来填充这一容器。接着他们共同使用剩余的空间来伸展自己的宽度

    .container {
        column-width: 200px;
    }

效果如下

总结

只记录了 CSS 的部分内容

你可能感兴趣的:(前端学习记录,前端～CSS,前端,学习,css)

使用Python获取在线股票交易网站的实时交易数据嵌入式开发项目 2025年爬虫精通专栏 python 开发语言爬虫
目录步骤1：选择股票交易网站步骤2：使用requests库发送HTTP请求步骤3：解析HTML内容步骤4：提取实时交易数据步骤5：存储和使用数据在金融市场中，实时交易数据对于投资者来说具有重要的价值。实时的股票价格、交易量和其他市场指标可以帮助投资者做出更准确的决策，同时也是进行金融分析和建模的重要数据源。在本篇博客中，我们将学习如何使用Python获取在线股票交易网站的实时交易数据。在开始之前，
【人工智能】提升编程效率的6种GPT实用应用技巧！保姆级讲解！ ChatGPT-千鑫人工智能 AI领域人工智能 gpt AI编程
文章目录实用教程：六大AI编程技巧解锁效率提升技巧1：快速实现需求demo操作步骤技巧2：代码审查——AI帮你提升代码质量操作步骤技巧3：错误排查——AI助你快速定位问题操作步骤技巧4：代码注释——AI帮你理解复杂逻辑操作步骤技巧5：数据整理——AI帮你高效准备测试数据操作步骤技巧6：学习未知代码库——AI助你快速掌握新工具操作步骤使用教程：全面掌握CodeMoss的高效编程工具（1）VSCode
用 TensorFlow 搭建简单的手写数字识别模型 lozhyf 工作面试学习 tensorflow 人工智能 python
一、引言手写数字识别是机器学习领域中一个经典且基础的问题，它在很多实际场景中都有广泛的应用，比如邮政系统中的邮件分拣、银行支票金额识别等。TensorFlow是一个强大的开源机器学习框架，由Google开发并维护，它提供了丰富的工具和接口，能帮助我们快速搭建和训练深度学习模型。在这篇博客中，我们将使用TensorFlow构建一个简单的神经网络模型，用于识别手写数字。二、环境准备在开始之前，你需要安
深度学习在医疗影像分析中的革命性应用 Echo_Wish 人工智能前沿技术深度学习人工智能
深度学习在医疗影像分析中的革命性应用引言医疗影像分析是现代医学中不可或缺的一部分，特别是在疾病诊断和治疗过程中发挥了至关重要的作用。随着深度学习技术的发展，医疗影像分析的效率和准确性得到了显著提升。本文将探讨如何利用深度学习技术，特别是Python编程语言，来优化医疗影像分析，展示具体的代码实例，并举例说明其实际应用效果。深度学习与医疗影像分析深度学习（DeepLearning）是一种基于人工神经
前端超长列表，虚拟滚动实现大橙子- 前端 css javascript
虚拟滚动.container{width:300px;height:500px;overflow:hidden;border:1pxsolid#ccc;margin-top:50px;}.scroll-box{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;}.scroll-height-main
vue制作导航栏html,Vue实现导航栏菜单 DataQueen vue制作导航栏html
本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称您好，用户！v-bind:class="{checked:index==nowIndex}"v-on:click="setTab('menu',index,menus)">{{menu.text}}菜单一的内容菜单二的内
学习路之微服务--PHP中实现微服务几种方式 hopetomorrow 微服务学习微服务 php
学习路之微服务--PHP中实现微服务实现微服务是一种将应用程序拆分成小型、独立的服务，每个服务都专注于完成特定的业务功能。通过这种方式，可以实现系统的高可伸缩性、可靠性和可维护性。在PHP中实现微服务可以采用以下几种方法：使用框架和组件：PHP提供了许多流行的框架和组件，如Laravel、Symfony和Lumen等，这些框架提供了许多开箱即用的功能，可以简化微服务的开发。可以使用这些框架来创建独
yolov8人脸识别与脸部关键点检测（代码+原理） QQ_1309399183 计算机视觉实战项目集锦 YOLO 人工智能人脸识别 yolo人脸检测
YOLOv8脸部识别是一个基于YOLOv8算法的人脸检测项目，旨在实现快速、准确地检测图像和视频中的人脸。该项目是对YOLOv8算法的扩展和优化，专门用于人脸检测任务。YOLOv8是一种基于深度学习的目标检测算法，通过将目标检测问题转化为一个回归问题，可以实现实时的目标检测。YOLOv8Face项目在YOLOv8的基础上进行了改进，使其更加适用于人脸检测。以下是YOLOv8Face项目的一些特点和
【机器学习】基于3D CNN通过CT图像分类预测肺炎 MUKAMO AI Python应用机器学习深度学习人工智能神经网络 3D CNN
1.引言1.1.研究背景在医学诊断中，医生通过分析CT影像来预测疾病时，面临一些挑战和局限性：图像信息的广度与复杂性：CT扫描生成的大量图像对医生来说既是信息的宝库也是处理上的负担。每组CT数据可能包含数百张切片，医生必须迅速审阅这些图像，以便捕捉到病变的微小细节。这种庞大的信息量要求医生在有限的时间内做出精准诊断，但同时也增加了漏诊或误诊的风险。部分容积效应也可能模糊小病变的边界，使得准确诊断变
TensorFlow LiteRT 概览姚家湾 tensorflow 人工智能 python
LiteRT（简称LiteRuntime，以前称为TensorFlowLite）是Google面向设备端AI的高性能运行时。您可以找到适用于各种机器学习/AI任务的LiteRT就绪模型，也可以使用AIEdge转换和优化工具将TensorFlow、PyTorch和JAX模型转换为TFLite格式并运行。主要特性针对设备端机器学习进行了优化：LiteRT解决了五项关键的ODML约束条件：延迟时间（无需
前端框架虚拟DOM的产生大橙子- 前端框架前端 javascript
直接说结论：为了找出与命令式(原生实现步骤)所执行代码的最小差异化，从而优化代码性能。命令式：可以理解为面向过程编程，需要写好每个实现步骤constdiv=document.querySelector('#app')//获取divdiv.innerText='helloworld'//设置文本内容如果需要修改文字内容为“你好”div.innerText='你好'//设置文本内容声明式：可以理解为面
Python Web开发新选择：FastAPI框架详细教程车载testing python python 前端 fastapi
PythonWeb开发新选择：FastAPI框架详细教程简介FastAPI是一个用于构建API的现代、快速（高性能）的Web框架，它基于Python3.6+的类型提示。本文将通过具体的示例，详细介绍如何使用FastAPI进行Web开发。一、FastAPI简介1.FastAPI能做什么？FastAPI适用于构建：Web站点WebAPI测试平台持续集成工具自动生成API文档2.为什么要学习FastAP
机器学习（1）安装Pytorch CoderIsArt 机器学习与深度学习机器学习 pytorch 人工智能
1.安装命令pip3installtorchtorchvisiontorchaudio--index-urlhttps://download.pytorch.org/whl/cu1182.安装过程Log：Lookinginindexes:https://download.pytorch.org/whl/cu118CollectingtorchDownloadinghttps://download.
《从编程小白到人工智能大神：大学新生Python入门攻略》千帆过尽. python 人工智能
前言在如今这个技术飞速发展的时代，编程已经成为许多大学生不可或缺的技能，尤其是对于人工智能方向的学生来说，编程更是必不可少的一部分。作为一名大三学生，并且专注于Python和人工智能方向，我深知刚开始学习编程时的挑战与迷茫。希望本文能帮助作为大学新生的你们在编程入门的过程中少走弯路，提供一条清晰有效的学习路径。一、编程语言选择作为编程新手，选择一门适合自己的编程语言至关重要。对于希望进入人工智能领
探索Vearch：高效的深度学习向量相似度搜索系统 scaFHIO 深度学习人工智能 python
Vearch是一个可扩展的分布式系统，用于高效搜索深度学习向量的相似度。在本文中，我们将介绍Vearch的技术背景及其核心原理，演示如何使用VearchPythonSDK进行安装和设置，并分析一些实际应用场景，最后提供一些实战建议。技术背景介绍随着深度学习技术的发展，向量相似度搜索在各类应用中变得越来越重要。从图像识别、推荐系统到自然语言处理，向量搜索可以极大地提升系统的性能。然而，随着数据量的增
27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？程序员yt java 机器学习开发语言
今天给大家分享的是一位粉丝的提问，27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？接下来把粉丝的具体提问和我的回复分享给大家，希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问：211建筑本科，22年毕业后gap一年转码去了英国读的QS100的it的水硕（24年12月份毕业），转码后对就业形势认知不足，时间全花在课业上，八股文和算法准备的不充足，秋招算是惨败。读研
华为的云端训练算力与迭代效率 AI大模型应用之禅 DeepSeek R1 &AI大模型与大数据计算科学神经计算深度学习神经网络大数据人工智能大型语言模型 AI AGI LLM Java Python 架构设计 Agent RPA
华为云、云端训练、算力、迭代效率、人工智能、深度学习、模型训练、分布式训练、优化算法1.背景介绍人工智能（AI）技术近年来发展迅速，深度学习作为其核心驱动力，在图像识别、自然语言处理、语音识别等领域取得了突破性进展。然而，深度学习模型的训练需要海量数据和强大的计算资源，这成为AI技术发展面临的瓶颈之一。云计算作为一种新型的计算模式，为深度学习提供了强大的算力支持。华为云作为国内领先的云计算平台，在
Git入门与进阶：详细使用指南向着开发进攻 git git
Git入门与进阶：详细使用指南Git是一款强大的分布式版本控制工具，广泛用于软件开发中的源代码管理。无论你是一个刚刚开始学习编程的新手，还是一个已经有经验的开发者，Git都是你日常工作中的必备工具。在这篇文章中，我将详细介绍Git的使用方法，帮助你从基础到进阶掌握Git。什么是Git？Git是一种分布式版本控制系统（VCS），它让多个开发者能够高效地协同开发，跟踪代码的历史版本，并且管理项目的不同
AI外呼机器人：营销新利器还是骚扰电话的升级版？ yoloGina 客户管理外呼系统电话外呼人工智能机器人
"您好，这里是XX房产，最近有购房需求吗？""您好，您最近有种牙需求吗？"相信很多人都接到过类似的营销电话，而电话那头，很可能已经不是真人，而是AI外呼机器人。近年来，AI外呼系统凭借其高效率、低成本的优势，迅速在电销行业普及，成为企业营销的"新宠"。据统计，2022年中国AI外呼市场规模已达50亿元，预计2025年将突破100亿元。AI外呼系统的核心技术是语音识别和自然语言处理。通过深度学习海量
CSS 修改 SVG图标的颜色小达学徒 html css svg 图标颜色改变
方法1、利用filter中的drop-shadow给icon加样式(利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)filter:drop-shadow(red80px0);transform:translateX(-80px);给父元素加样式（父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域）overflow:hidden;filter的drop-shadow标准用法drop-sh
python ffmpeg直播_FFmpeg+Nginx+Rtmp+HLS+Videojs搭建直播网站（理论与实战） weixin_39565300 python ffmpeg直播
第1章直播原理与架构28分钟2节1-1直播原理与架构直播原理与架构「仅限付费用户」点击下载“直播原理与架构.pdf”[14:53]开始学习1-2甜点：福优学苑--简历包装与面试技巧甜点：福优学苑--简历包装与面试技巧「仅限付费用户」点击下载“福优学苑--简历包装与面试技巧--51other.pdf”[13:36]开始学习第2章亲手搭建FFmpeg+Nginx直播网站1小时48分钟11节2-1直播引
i css svg,如何设置 CSS 背景图中的 SVG 的颜色魔法少女皮皮瞎 i css svg
ColoringSVGsinCSSBackgroundImages如何设置CSS背景图中的SVG的颜色IloveusingSVGinCSSbackgroundimagesbutitsucksthatyoucan'talterthefillcoloreasilywithinyourCSS.Hereareafewwaysaroundthat.在CSS背景中我喜欢用SVG，但是，这会导致你无法用CSS很
Java零基础入门笔记：(3)程序控制 Sherlock Ma Java Java入门 java 笔记开发语言程序人生学习方法改行学it 跳槽
前言本笔记是学习狂神的java教程，建议配合视频，学习体验更佳。【狂神说Java】Java零基础学习视频通俗易懂_哔哩哔哩_bilibiliScanner对象之前我们学的基本语法中我们并没有实现程序和人的交互，但是Java给我们提供了这样一个工具类，我们可以获取用户的输入。Scanner类是Java中的一个实用工具类，位于java.util包中，主要用于从用户输入、文件或其他输入源中读取数据。它提
Java零基础入门笔记：(4)方法 Sherlock Ma Java Java入门 java 笔记开发语言学习方法改行学it 跳槽程序人生
前言本笔记是学习狂神的java教程，建议配合视频，学习体验更佳。【狂神说Java】Java零基础学习视频通俗易懂_哔哩哔哩_bilibili第1-2章：Java零基础入门笔记：(1-2)入门（简介、基础知识）-CSDN博客第3章：Java零基础入门笔记：(3)程序控制-CSDN博客--方法何谓方法Java方法是语句的集合，它们在一起执行一个功能。方法是解决一类问题的步骤的有序组合方法包含于类或对象
css给网页添加黑白滤镜 nqxcwl 前端 css 给网页添加黑白滤镜
/*给网页添加黑白滤镜*/html{/*兼容FF*/filter:url("data:image/svgxml;utf8,#grayscale");/*兼容IE内核*/filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*兼容其它，谷歌之类的*/-webkit-filter:grayscale(1);}
江科大51单片机学习笔记（1）悠闲漫步者 51单片机 51单片机学习笔记
点亮一个LEDLED介绍中文名：发光二极管外文名：LightEmittingDiode简称：LED用途：照明、广告灯、指引灯、屏幕。如果想让LED发光，需要让发光二极管两端产生电位差。LED模块中串并联电阻是为了保护电路（限流）电阻的运算(上图电阻中所标注)：102(1010^2=1000=1K)473(4710^3=47000=47K)1001(100*10^1=1000=1K)VCC：电源正极
芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案青牛科技-Allen GLOBALCHIP 音视频单片机嵌入式硬件收录机人工智能家用电器
引言在直播设备、智能语音终端等新兴应用的推动下，高性能音频采集系统的需求持续增长。芯麦半导体推出的GC1808立体声音频模数转换器，凭借其全集成信号链设计和灵活的接口配置，为开发者提供了高性价比的音频前端解决方案。本文将从核心架构、关键技术特性及典型应用场景三个方面，深入解析这款芯片的设计亮点。一、GC1808核心特性概览全集成信号链内置64倍过采样率Δ-Σ调制器集成数字梳状滤波器（CombFil
信息管理与信息系统专业总结&不存在计算机专业歧视 WhyteHighmore 感悟与总结
所有边缘交叉学科的人，这篇文章都适用就像我的专业信息管理与信息系统那样！多而不精，而我也同样继承了我专业的特点，但计算机除外。但我很庆幸选报这个专业，也很推荐这个专业。它能让你在高考报考的迷茫期后有更多的选择余地，你可以通过专业了解三大行业，并作出对某一个喜欢行业的努力，不至于学习的不是喜欢的。比如本次vivo组织的篮球赛，上面有说。初次之外我参加过手球赛、羽毛球赛、排球赛。学过网球、游泳、乒乓球
前端面试题（HTML篇）每天一点点~ html css javascript
1.网络中使用最多的图片格式有哪些？JPEG，GIF，PNG最流行的是JPEG格式，可以把文件压缩到最小在PS以JPEG格式存储时，提供11级压缩等级2.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?声明文档类型声明位于位于HTML文档中的第一行，处于标签之前DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式(严格模式)浏览器按照W3C的标准解析执行代码标准模式(严
python websocket 心跳_websocket心跳及重连机制蜗牛老湿 python websocket 心跳
websocket心跳及重连机制websocket是前后端交互的长连接，前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒。因此为了保证连接的可持续性和稳定性，websocket心跳重连就应运而生。在使用原生websocket的时候，如果设备网络断开，不会立刻触发websocket的任何事件，前端也就无法得知当前连接是否已经断开。这个时候如果调用websocket.send方法，浏览器
Spring4.1新特性——综述 jinnianshilongnian spring 4.1
目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
Schema与数据类型优化 annan211 数据结构 mysql
目前商城的数据库设计真是一塌糊涂，表堆叠让人不忍直视，无脑的架构师，说了也不听。在数据库设计之初，就应该仔细揣摩可能会有哪些查询，有没有更复杂的查询，而不是仅仅突出很表面的业务需求，这样做会让你的数据库性能成倍提高，当然，丑陋的架构师是不会这样去考虑问题的。选择优化的数据类型 1 更小的通常更好更小的数据类型通常更快，因为他们占用更少的磁盘、内存和cpu缓存，
第一节 HTML概要学习 chenke html Web css
第一节 HTML概要学习 1. 什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。打开记事本输入一下内
MyEclipse里部分习惯的更改 Array_06 eclipse
继续补充中---------------------- 1.更改自己合适快捷键windows-->prefences-->java-->editor-->Content Assist--> Activation triggers for java的右侧“.”就可以改变常用的快捷键选中 Text
近一个月的面试总结 cugfy 面试
本文是在学习中的总结，欢迎转载但请注明出处：http://blog.csdn.net/pistolove/article/details/46753275 前言打算换个工作，近一个月面试了不少的公司，下面将一些面试经验和思考分享给大家。另外校招也快要开始了，为在校的学生提供一些经验供参考，希望都能找到满意的工作。
HTML5一个小迷宫游戏 357029540 html5
通过《HTML5游戏开发》摘抄了一个小迷宫游戏，感觉还不错，可以画画，写字，把摘抄的代码放上来分享下，喜欢的同学可以拿来玩玩！ <html> <head> <title>创建运行迷宫</title> <script type="text/javascript"
10步教你上传githib数据张亚雄 git
官方的教学还有其他博客里教的都是给懂的人说得，对已我们这样对我大菜鸟只能这么来锻炼，下面先不玩什么深奥的，先暂时用着10步干净利索。等玩顺溜了再用其他的方法。操作过程（查看本目录下有哪些文件NO.1）ls （跳转到子目录NO.2）cd+空格+目录（继续NO.3）ls （匹配到子目录NO.4）cd+ 目录首写字母+tab键+（首写字母“直到你所用文件根就不再按TAB键了”）（查看文件
MongoDB常用操作命令大全 adminjun mongodb 操作命令
成功启动MongoDB后，再打开一个命令行窗口输入mongo，就可以进行数据库的一些操作。输入help可以看到基本操作命令，只是MongoDB没有创建数据库的命令，但有类似的命令如：如果你想创建一个“myTest”的数据库，先运行use myTest命令，之后就做一些操作（如：db.createCollection('user')）,这样就可以创建一个名叫“myTest”的数据库。一
bat调用jar包并传入多个参数 aijuans
下面的主程序是通过eclipse写的： 1.在Main函数接收bat文件传递的参数（String[] args）如： String ip =args[0]; String user=args[1]; &nbs
Java中对类的主动引用和被动引用 ayaoxinchao java 主动引用对类的引用被动引用类初始化
在Java代码中，有些类看上去初始化了，但其实没有。例如定义一定长度某一类型的数组，看上去数组中所有的元素已经被初始化，实际上一个都没有。对于类的初始化，虚拟机规范严格规定了只有对该类进行主动引用时，才会触发。而除此之外的所有引用方式称之为对类的被动引用，不会触发类的初始化。虚拟机规范严格地规定了有且仅有四种情况是对类的主动引用，即必须立即对类进行初始化。四种情况如下：1.遇到ne
导出数据库提示 outfile disabled BigBird2012 mysql
在windows控制台下，登陆mysql，备份数据库： mysql>mysqldump -u root -p test test > D:\test.sql 使用命令 mysqldump 格式如下： mysqldump -u root -p *** DBNAME > E:\\test.sql。注意：执行该命令的时候不要进入mysql的控制台再使用，这样会报
Javascript 中的 && 和 || bijian1013 JavaScript &&||
准备两个对象用于下面的讨论 var alice = { name: "alice", toString: function () { return this.name; } } var smith = { name: "smith",
[Zookeeper学习笔记之四]Zookeeper Client Library会话重建 bit1129 zookeeper
为了说明问题，先来看个简单的示例代码： package com.tom.zookeeper.book; import com.tom.Host; import org.apache.zookeeper.WatchedEvent; import org.apache.zookeeper.ZooKeeper; import org.apache.zookeeper.Wat
【Scala十一】Scala核心五：case模式匹配 bit1129 scala
package spark.examples.scala.grammars.caseclasses object CaseClass_Test00 { def simpleMatch(arg: Any) = arg match { case v: Int => "This is an Int" case v: (Int, String)
运维的一些面试题 yuxianhua linux
1、Linux挂载Winodws共享文件夹 mount -t cifs //1.1.1.254/ok /var/tmp/share/ -o username=administrator,password=yourpass 或 mount -t cifs -o username=xxx,password=xxxx //1.1.1.1/a /win
Java lang包-Boolean BrokenDreams boolean
Boolean类是Java中基本类型boolean的包装类。这个类比较简单，直接看源代码吧。 public final class Boolean implements java.io.Serializable,
读《研磨设计模式》-代码笔记-命令模式-Command bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.List; /** * GOF 在《设计模式》一书中阐述命令模式的意图：“将一个请求封装
matlab下GPU编程笔记 cherishLC matlab
不多说，直接上代码 gpuDevice % 查看系统中的gpu,,其中的DeviceSupported会给出matlab支持的GPU个数。 g=gpuDevice(1); %会清空 GPU 1中的所有数据,,将GPU1 设为当前GPU reset(g) %也可以清空GPU中数据。 a=1; a=gpuArray(a); %将a从CPU移到GPU中 onGP
SVN安装过程 crabdave SVN
SVN安装过程 subversion-1.6.12 ./configure --prefix=/usr/local/subversion --with-apxs=/usr/local/apache2/bin/apxs --with-apr=/usr/local/apr --with-apr-util=/usr/local/apr --with-openssl=/
sql　行列转换 daizj sql 行列转换行转列列转行
行转列的思想是通过case when 来实现列转行的思想是通过union all 来实现下面具体例子：假设有张学生成绩表(tb)如下: Name Subject Result 张三语文　　74 张三数学　　83 张三物理　　93 李四语文　　74 李四数学　　84 李四物理　　94 */ /* 想变成姓名 &
MySQL--主从配置 dcj3sjt126com mysql
linux下的mysql主从配置：说明：由于MySQL不同版本之间的(二进制日志)binlog格式可能会不一样，因此最好的搭配组合是Master的MySQL版本和Slave的版本相同或者更低， Master的版本肯定不能高于Slave版本。（版本向下兼容） mysql1 : 192.168.100.1 //master mysq
关于yii 数据库添加新字段之后model类的修改 dcj3sjt126com Model
rules: array('新字段','safe','on'=>'search') 1、array('新字段', 'safe')//这个如果是要用户输入的话，要加一下， 2、array('新字段', 'numerical'),//如果是数字的话 3、array('新字段', 'length', 'max'=>100),//如果是文本 1、2、3适当的最少要加一条，新字段才会被
sublime text3 中文乱码解决 dyy_gusi Sublime Text
sublime text3中文乱码解决原因：缺少转换为UTF-8的插件目的：安装ConvertToUTF8插件包第一步：安装能自动安装插件的插件，百度“Codecs33”，然后按照步骤可以得到以下一段代码： import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a30980927
概念了解：CGI，FastCGI，PHP-CGI与PHP-FPM geeksun PHP
CGI CGI全称是“公共网关接口”(Common Gateway Interface)，HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。 CGI可以用任何一种语言编写，只要这种语言具有标准输入、输出和环境变量。如php,perl,tcl等。 FastCGI FastCGI像是一个常驻(long-live)型的CGI，它可以一直执行着，只要激活后，不
Git push 报错 "error: failed to push some refs to " 解决 hongtoushizi git
Git push 报错 "error: failed to push some refs to " . 此问题出现的原因是：由于远程仓库中代码版本与本地不一致冲突导致的。由于我在第一次git pull --rebase 代码后，准备push的时候，有别人往线上又提交了代码。所以出现此问题。解决方案： 1： git pull 2：
第四章 Lua模块开发 jinnianshilongnian nginx lua
在实际开发中，不可能把所有代码写到一个大而全的lua文件中，需要进行分模块开发；而且模块化是高性能Lua应用的关键。使用require第一次导入模块后，所有Nginx 进程全局共享模块的数据和代码，每个Worker进程需要时会得到此模块的一个副本（Copy-On-Write），即模块可以认为是每Worker进程共享而不是每Nginx Server共享；另外注意之前我们使用init_by_lua中初
java.lang.reflect.Proxy liyonghui160com
1.简介 Proxy 提供用于创建动态代理类和实例的静态方法（1）动态代理类的属性代理类是公共的、最终的，而不是抽象的未指定代理类的非限定名称。但是，以字符串 "$Proxy" 开头的类名空间应该为代理类保留代理类扩展 java.lang.reflect.Proxy 代理类会按同一顺序准确地实现其创建时指定的接口
Java中getResourceAsStream的用法 pda158 java
1.Java中的getResourceAsStream有以下几种： 1. Class.getResourceAsStream(String path) ： path 不以’/'开头时默认是从此类所在的包下取资源，以’/'开头则是从ClassPath根下获取。其只是通过path构造一个绝对路径，最终还是由ClassLoader获取资源。　　2. Class.getClassLoader.get
spring 包官方下载地址（非maven） sinnk spring
SPRING官方网站改版后，建议都是通过 Maven和Gradle下载，对不使用Maven和Gradle开发项目的，下载就非常麻烦，下给出Spring Framework jar官方直接下载路径: http://repo.springsource.org/libs-release-local/org/springframework/spring/ s
Oracle学习笔记(7) 开发PLSQL子程序和包 vipbooks oracle sql 编程
哈哈，清明节放假回去了一下，真是太好了，回家的感觉真好啊！现在又开始出差之旅了，又好久没有来了，今天继续Oracle的学习！这是第七章的学习笔记，学习完第六章的动态SQL之后，开始要学习子程序和包的使用了……，希望大家能多给俺一些支持啊！编程时使用的工具是PLSQL

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他