LinDaiuuj
CSS页面基本布局

前提回顾

1. 超文本标记语言（HTML）是一种标记语言，用来结构化我们的网页内容并赋予内容含义；
（超文本标记语言（英语：HyperText Markup Language /ˈhaɪpətekst ˈmɑːkʌp ˈlæŋɡwɪdʒ /，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。）
2. 层叠样式表（CSS）是一种样式规则语言，用来为网站设置样式，布局的代码。
CSS（Cascading Style Sheets /kæˈskeɪdɪŋ staɪl ʃiːts/，层叠样式表）是为 web 内容添加样式的代码，用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。
3.JavaScript 是一种脚本编程语言，你用它来给你的网站添加交互功能
JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新；
CSS 布局

CSS 页面布局技术允许我们对网页中的元素设置，控制它们相对正常布局流、周边元素（兄弟）、父容器或者主视口/窗口的位置
正常布局流
display属性
弹性盒子
网格
浮动
定位
CSS 表格布局
多列布局
正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。
display属性：讨论布局的时候重要的两个值是 `display: flex` 和 `display: grid`

none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline： 指定对象为内联元素。 
block： 指定对象为块元素。 
list-item： 指定对象为列表项目。 
inline-block： 指定对象为内联块元素。（CSS2） 
table： 指定对象作为块元素级的表格。类同于html标签（CSS2） 
inline-table： 指定对象作为内联元素级的表格。类同于html标签（CSS2） 
table-caption： 指定对象作为表格标题。类同于html标签（CSS2） 
table-row-group： 指定对象作为表格行组。类同于html标签（CSS2） 
table-column： 指定对象作为表格列。类同于html标签（CSS2） 
table-column-group： 指定对象作为表格列组显示。类同于html标签（CSS2） 
table-header-group： 指定对象作为表格标题组。类同于html标签（CSS2） 
table-footer-group： 指定对象作为表格脚注组。类同于html标签（CSS2） 
compact： 分配对象为块对象或基于内容之上的内联对象（CSS3） 
run-in： 分配对象为块对象或基于内容之上的内联对象（CSS3） 
ruby： 将对象作为表格脚注组显示（CSS3） 
ruby-base： 将对象作为表格脚注组显示（CSS3） 
ruby-text： 将对象作为表格脚注组显示（CSS3） 
ruby-base-group： 将对象作为表格脚注组显示（CSS3） 
ruby-text-group： 将对象作为表格脚注组显示（CSS3） 
box： 将对象作为弹性盒模型显示（CSS3） 
inline-box： 将对象作为内联块级弹性盒模型显示（CSS3
弹性盒子：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
 
   主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。 
   交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。 
   设置了 display: flex 的父元素（在本例中是 ）被称之为 flex 容器（flex container）。 
   在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item） 
  
display: flex / inline-flex;

flex： 将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示
在父类中设置的样式
 flex-direction：子类在主轴上的分布
 flex items默认都是沿着main axis（主轴）从main start 开始往main end 方向排布
flex-direction决定了main axis的方向，有4个取值：
 
   row（默认）：从左往右 
   row-reverse：从右往左 
   column：从上往下 
   column-reverse：从下往上 
  
justify-content：子类在主轴上的对齐方式 
 justify-content决定了flex items在main axis 上的对齐方式，共6个取值：
 
   flex-start（默认值）：与 main start 对齐 
   flex-end：与 main end 对齐 
   center：居中对齐 
   space-between：flex items之间的距离相等，与main start、main end两端对齐 
   space-evenly：flex items之间的距离相等，与main start、main end之间距离等于flex items之间的距离 
   space-around：flex items之间的距离相等，与main start、main end之间距离等于flex items之间的距离的一半 
  
align-content：子类在交叉轴上的分布 
  align-content决定了多行flex items在cross axis上的对齐方式，用法和 justify-content类似，共7个取值：
 
   stretch（默认值）：与align-items的stretch类似 
   flex-start：与cross start对齐 
   flex-end：与cross end对齐 
   center：居中对齐 
   space-between：flex items之间的距离相等，与cross start、cross end两端对齐 
   space-evenly：flex items之间的距离相等，与cross start、cross end之间距离等于flex items之间的距离 
   space-around：flex items之间的距离相等，与cross start、cross end之间距离等于flex items之间的距离的一半 
  
align-items：子类在交叉轴上的对齐方式
 align-items决定了flex items在cross axis上的对齐方式，共6个取值：
 
   normal：在弹性布局中，效果和stretch一样 
   stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container 
   flex-start：与cross start对齐 
   flex-end：与cross end对齐 
   center：居中对齐 
   baseline：与基准线对齐 
  
flex-wrap：子类的多行显示
flex-wrap决定了flex container是单行还是多行，共3个取值：
 
   nowrap（默认）：单行 
   wrap：多行 
   wrap-reverse：多行（对比wrap，cross start与cross end相反） 
  
在子类中设置的样式

flex-grow：子类的扩展
 flex-grow决定了flex items如何扩展
可以设置任意非负数字（正小数、正整数、0），默认值为0
 当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
 如果所有flex items的flex-grow总和sum超过1
每个flex items扩展的size = flex container的剩余size*flex-grow / sum
 如果所有flex items的flex-grow总和sum不超过1
每个flex items扩展的size = flex container的剩余size*flex-grow
 flex items扩展后的最终size不能超过max-width 、max-height
 flex-shrink：子类的收缩
  flex-shrink决定了flex items如何收缩
可以设置任意非负数字（正小数、正整数、0），默认值为1
 当flex items在main axis方向上超过了flex container的size时，flex-shrink属性才会有效

align-self：子类在交叉轴上的对齐方式
 flex items可以通过align-self覆盖flex container设置的align-items，共6个取值：
auto（默认值）：遵从flex container设置的align-items
 stretch、flex-start、flex-end、center、baseline，效果和align-items一样
 flex
 flex是flex-grow，flex-shrink、flex-basis的简写，flex属性可以指定1/2/3个值
  

                    
                        
                        
                             
                        
                        
                        
                            
                        
                        
                        
                            
                        
                    
                

        你可能感兴趣的:(css,前端)
        
            
                
                    解析：浏览器事件冒泡及事件捕获
                        C860
浏览器浏览器
                        今天的效率有点奇葩，说高吧，一个上午做了不少事。说低吧，因为一个分布式的算法花了我不少时间，终于有点头绪。估计明天会写一篇文章来讲述一下自己的看法。而今天，还是回到前端。今天来说说事件冒泡和事件捕获。首先肯定是概念：什么是事件冒泡？什么是事件捕获？简单地说，事件冒泡和事件捕获都是一种事件传递的机制。这种机制可以使事件在不同级的元素间传递。事件冒泡是从事件触发的源节点，向父节点传递，直到到达最顶节点
                    
                    pear-admin-boot开发框架使用记录（三）
                        后青春期的诗go
经验分享javaspringbootspringlog4jmybatis
                        一、实现部门选择操作用于从组织架构里选择出部门的操作，如开发日志管理模块，创建人新增日志时可以通过选择框选择相应共享的部门。数据库表调整在数据表添加2个字段：sharedeptid共享部门idvarcharsharedeptname共享部门名称varchar前端html页面调整页面添加如下代码：共享部门前端JS调整添加如下代码：letdtree=layui.dtree;dtree.renderSe
                    
                    基于koajsAdmin+mongodb的后台管理快速开发框架安装运行记录
                        后青春期的诗go
经验分享mongodb数据库node.jsvue.jselementui
                        前置操作下载源码源码地址：https://gitee.com/zhoushuigui/koajs-admin安装mongodb数据库并连接安装yarnnpminstallyarn-g安装nodemonnpminstallnodemon-g前端运行安装依赖进入项目根目录，在命令行执行如下命令安装依赖：yarn--registry=https://registry.npmmirror.com启动服务y
                    
                    【微信小程序（云开发模式）变通实现DeepSeek支持语音】
                        技术与健康
微信小程序notepad++小程序
                        整体架构前端（微信小程序）：使用微信小程序云开发能力，实现录音功能。将录音文件上传到云存储。调用云函数进行语音识别和DeepSeek处理。界面模仿DeepSeek，支持文本编辑。后端（云函数+Node.js）：使用云函数调用腾讯云语音识别（ASR）服务。调用DeepSeekAPI处理文本。步骤1：初始化云开发环境在微信开发者工具中创建小程序项目，并开通云开发。在project.config.jso
                    
                    Web Component 教程（六）：基于 Stencil 脚手架开发 Web Component
                        乐闻x
WebComponent学习记录前端webcomponentstencli
                        前言在现代前端开发中，WebComponent是一种逐渐受到关注的技术，它允许我们创建可以在任何框架或库（如React,Angular,Vue等）中使用的可重用组件。而Stencil是一个强大的开发工具，它帮助我们轻松构建这些WebComponent，使开发过程更高效、更简洁。那么，究竟如何使用Stencil来开发WebComponent呢？今天，我们就来探索这一主题，从安装和设置，到创建和使用组
                    
                    Angular Material表格的动态列宽设置
                        t0_54program
编程问题解决手册angular.js前端javascript个人开发
                        在前端开发中，AngularMaterial表格（mat-table）是非常流行的组件之一。它提供了丰富的功能，如排序、分页和过滤等。然而，有时我们需要动态调整表格列的宽度，以适应不同的数据和用户需求。本文将介绍如何在TypeScript中获取mat-table的列宽，并据此设置相应的过滤器宽度。问题描述在使用AngularMaterial表格时，如何获取每个列的宽度？例如，我们希望为每一列设置一
                    
                    HTML 教程：从零开始掌握常用语法
                        LoveYa!
前端html前端笔记学习
                        免费无广纯净版微信小程序测mbti很有趣，不需要任何授权，也不需要登录，直接就是测，几分钟了解自己的人格mbti，快来试试吧。可以微信直接搜索小程序名“一秒MBTI”HTML教程：从零开始掌握常用语法欢迎来到HTML的世界！HTML（HyperTextMarkupLanguage，超文本标记语言）是网页开发的基石，它负责定义网页的结构和内容。无论你是想成为一名前端开发者，还是仅仅想了解网页背后的魔
                    
                    解决npm run dev运行后报错：”Could not read package.json: Error: ENOENT: no such file or directory“
                        moz与京
实训期间报错整理npmjson前端
                        在启动一个项目的前端时，执行npmrundev命令，结果报错如下：根据报错提示："npmerrorerrno-4058"通常是由于文件系统权限问题或文件路径问题导致的。这个错误码表示在执行某个操作时，npm无法访问或修改某个文件或目录。在这个情境下，想到是因为没有指定项目文件就在终端执行了命令。先cd到目标文件夹中：cdclient进入到前端文件夹目录，再执行原命令，发现项目启动成功。这一报错解决
                    
                    【CSS】实现三栏布局的方式
                        儒rs
CSScsscss3html三栏布局前端
                        【CSS】实现三栏布局的方式三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现如下：①利用浮动利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值。注意这种方式，中间一栏必须放到最后。.container{overflow:hidden;}.left{float:left;width:100px;background
                    
                    六十天前端强化训练之第二十一天大师级详解 React Context API：从原理到实战
                        编程星辰海
#前端前端react.jsjavascriptReactContextAPI
                        =====欢迎来到编程星辰海的博客讲解======看完可以给一个免费的三连吗，谢谢大佬！目录一、庖丁解牛：深入理解ContextAPI1.1设计哲学与运转机制工作原理三步曲：1.2核心三剑客详解1.3性能优化要诀二、手把手实现主题切换系统2.1完整代码实现（逐行注释版）2.2配套CSS样式设计三、关键知识点拆解3.1状态初始化策略3.2CSS变量注入原理3.3性能优化实践3.4可访问性最佳实践四、
                    
                    【Vue3笔记01】如何使用Vue3和Vite搭建前端项目的基础开发环境
                        Mr.小朱同学
Web前端笔记前端笔记vue.jsVue3Vite搭建项目环境
                        这篇文章，主要介绍如何使用Vue3和Vite搭建前端项目的基础开发环境【知识星球】。目录一、搭建项目环境1.1、前提条件1.2、开始搭建1.3、下载依赖1.4、启动工程一、搭建项目环境目前前端开发中，使用最多的就是Vue.js框架，目前Vue.js框架常用的有Vue2、Vue3两个版本，Vue3和Vue2在语法上还是存在很大的差异的，这里我将介绍如何搭建Vue3开发环境。1.1、前提条件在创建Vu
                    
                    12.12【java exp4】react table全局搜索tailwindcss 布局 (Layout) css美化 3. (rowId: number
                        CQU_JIAKE
CQUCSjavascript前端react.js
                        reacttable创建一个下拉菜单，允许用户选择要搜索的列。创建一个输入框，用于输入搜索关键词。根据用户的选择，动态地应用过滤器到指定的列全局搜索importReactfrom'react';import{useTable,useFilters,useGlobalFilter,useSortBy,usePagination}from'react-table';//自定义过滤组件functionC
                    
                    css实现标题跑马灯效果
                        爱吃羊的狗
css前端
                        css实现标题跑马灯效果滚动字幕@keyframesmarquee{0%{transform:translateX(300%);}100%{transform:translateX(-300%);}}.topBar{width:100%;height:45px;line-height:45px;background:#FFE6CC;text-align:center;font-weight:500
                    
                    Postman 从入门到精通的详细图文教程指南
                        清尘沐歌
postman测试工具
                        API已经成为连接不同系统和服务的重要桥梁，无论你是前端开发者、后端工程师还是测试人员，掌握API的开发和测试技能都是非常重要的。Postman是一个广受欢迎的API开发工具，它不仅能够帮助你轻松发送HTTP请求，还提供了强大的测试、调试和协作功能。本系列教程旨在帮助你从零开始，逐步掌握Postman的各项功能，从基础的请求发送到高级的自动化测试和团队协作。无论你是初学者还是有一定经验的开发者，都
                    
                    Postman高级功能深度解析：Mock Server与自动化监控——构建高效API测试与监控体系
                        测试渣
测试工具postman
                        引言：Postman在API开发中的核心价值在数字化时代，API（应用程序编程接口）已成为系统间交互的“神经网络”，其质量直接影响用户体验与业务连续性。然而，传统API测试面临两大挑战：开发阶段依赖：前端与后端团队需同步开发，导致进度延迟；测试环境复杂：生产数据敏感、测试场景覆盖不全、性能压力模拟困难。Postman作为全球领先的API开发与测试工具，通过其MockServer与自动化监控两大核心
                    
                    框架基本知识总结 Day17
                        小斌的Debug日记
框架学习日记vueredisgitee
                        token续命每一次操作后都要延长token的过期时间，长时间不操作token才会过期登录延长时间应该是在拦截器中做的，因为它会拦截所有请求前端的拦截需要用到路由守卫响应式“响应式”指的是系统能根据数据变化做出响应，并自动更新相关部分的视图。Vue.js通过数据的变化来响应用户的操作或者应用的状态变化，自动触发视图更新。响应式的核心思想是：当数据发生变化时，视图会自动更新组合式api的响应是数据用
                    
                    TypeScript语言的计算机视觉
                        苏墨瀚
包罗万象golang开发语言后端
                        使用TypeScript进行计算机视觉：一个现代化的探索引言随着人工智能和机器学习的快速发展，计算机视觉（ComputerVision）成为了一个极具活力的研究领域。计算机视觉旨在使计算机能够“看”和“理解”数字图像或视频中的内容。近年来，TypeScript作为一种现代化的编程语言，因其类型安全和更好的开发体验，逐渐在前端和后端开发中得到了广泛应用。本文将探讨如何使用TypeScript进行计算
                    
                    抖音用户视频批量下载工具开发全解析
                        木觞清
音视频python
                        一、逆向工程原理剖析1.1抖音Web端防护体系抖音采用五层防御机制保护数据接口：graphLRA[浏览器指纹检测]-->B[请求参数签名]B-->C[Cookie动态验证]C-->D[请求频率限制]D-->E[IP信誉评级]1.2核心参数解密参数名称作用原理生成方式有效期x-bogus请求签名防篡改前端JS生成（需反混淆）5分钟msToken设备会话标识首次访问自动生成30分钟__ac_signa
                    
                    01.AJAX 概念和 axios 使用
                        Lv547
#AJAXajax前端javascript
                        01.AJAX概念和axios使用1.什么是AJAX?使用浏览器的XMLHttpRequest对象与服务器通信浏览器网页中，使用AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页2.什么是服务器？可以暂时理解为提供数据的一台电脑3.为何学AJAX?以前我们的数据都是写在代码里固定的,无法随时变化现在我们的数据可以从服务器
                    
                    TypeScript模块 vs JavaScript模块：现代化开发的模块化之道
                        念九_ysl
typescript前端typescript
                        一、模块化开发的重要性在当今前端开发领域，模块化已成为构建可维护、可扩展应用程序的基石。无论是小型项目还是企业级应用，良好的模块化设计都能显著提升代码的可读性和复用性。让我们通过一个简单对比示例开始：JavaScript实现：//math.jsexportfunctionadd(a,b){returna+b}//app.jsimport{add}from'./math.js';console.lo
                    
                    SvelteKit 最新中文文档教程（7）—— 构建和部署
                        

                        前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我
                    
                    暗链威胁与检测方法之Screaming Frog SEO Spider
                        qq_39541626
黑帽研究windows
                        尖叫青蛙，网站暗链检测方法网站暗链是指那些隐藏在网页上，对普通用户不可见或难以察觉的超链接。这些链接可能被故意设置为与背景颜色相同、使用极小的字体、或通过CSS技巧使其隐藏，从而在视觉上对用户隐藏。暗链通常用于不良的SEO实践，如操纵搜索引擎排名，或链接到恶意网站。这种做法可能导致网站在搜索引擎中被降级或罚款，损害网站的可信度和用户体验为了解决网站暗链，一次性筛选所有暗链买了一个软件Screami
                    
                    前端性能优化之SSR优化
                        xiangzhihong8
前端前端
                        我们常说的SSR是指Server-SideRendering，即服务端渲染，属于首屏直出渲染的一种方案。SSR也是前端性能优化中最常用的技术方案了，能有效地缩短页面的可见时间，给用户带来很好的体验。SSR渲染方案一般来说，我们页面加载会分为好几个步骤：请求域名，服务器返回HTML资源。浏览器加载HTML片段，识别到有CSS/JavaScript资源时，获取资源并加载。现在大多数前端页面都是单页面应
                    
                    使用CSS3实现炫酷的3D翻转卡片效果
                        木木黄木木
css33d前端
                        使用CSS3实现炫酷的3D翻转卡片效果这里写目录标题使用CSS3实现炫酷的3D翻转卡片效果项目介绍技术要点分析1.3D空间设置2.核心CSS属性3.布局和定位实现难点和解决方案1.3D效果的流畅性2.卡片内容布局3.响应式设计性能优化建议浏览器兼容性总结项目介绍在这个项目中，我们使用纯CSS3技术实现了一个具有3D翻转效果的交互卡片。当用户将鼠标悬停在卡片上时，卡片会沿Y轴优雅地旋转180度，展示
                    
                    前端面经分享（25/03/18）
                        CreatorRay
react面试前端前端面试react
                        北京一家做边缘云服务提供商公司，技术一面，15k-20k，要求3-5年上家公司的项目为什么会选择MQTT进行通信React常用Hook为什么React不能在条件语句里用Hook前端常见的优化策略React如何捕获子组件的错误React给节点加key会有什么效果最近俩家公司都用WebSocket做了什么HTTP各个版本的区别跨域的常见解决方案前端常见布局WebSocket和SSE的区别A页面滚动到一
                    
                    智慧物流数字管理系统设计案例分析
                        UI设计开发服务商
数据分析数据挖掘
                        你好，宝子们！艾斯视觉团队在此，我们专注于UI设计和前端开发领域10年有余。非常高兴能与您分享我们的经验和见解。如果您觉得有所帮助，请给予我们支持和关注，并随时私信我们，共同探讨进步！谢谢您的鼓励！随着科技的飞速发展，数字化已经成为现代物流业的重要发展趋势。智慧物流数字管理系统旨在通过先进的技术手段，实现物流信息的实时共享、智能分析和优化决策，从而提高物流效率、降低成本并提升客户满意度。本文将以一
                    
                    前端面经真题解析10-字节/抖音电商/前端/超详细记录
                        浪里个浪zxf
前端面试前端
                        文章目录1.自我介绍2.介绍下自己的项目3.看你项目里面用了axios,说下请求拦截和响应拦截怎么做？4.说下项目里面前后端交互过程及设计？5.怎么处理切换分页请求数据的，优化手段？6.说下你爬取别人网站数据的时候，别人如果设置了拦截，你的解决方案是？7.你说下http请求的refer字段？**Origin字段：****Referer字段：****Host字段****区别：**8.看你做了路由懒加
                    
                    【网易雷火秋招】前端面经分享
                        编程自学-领绿学长
前端求职招聘面试
                        网易网易雷火是国内一流且最有创新力的游戏研发团队，是网易杭州的第一个游戏工作室。雷火开创性的打造了《逆水寒》、《永劫无间》、《倩女幽魂》、《全明星街球派对》等一众爆款游戏；并在二次元、FPS、主机游戏等方向上持续探索，《代号：无限大》等在研项目收到玩家广泛关注。与此同时，我们与全球合作伙伴一起共同构建开放、协同、共荣共生的产业生态，致力于让中国游戏走出去，让世界听见雷火声音。雷火还拥有国内专业从事
                    
                    【万字总结】前端全方位性能优化指南（四）——虚拟DOM批处理、文档碎片池、重排规避
                        庸俗今天不摸鱼
Web性能优化合集前端性能优化
                        前言在浏览器宇宙中，DOM操作如同「时空裂缝」——一次不当的节点更新可能引发连锁重排，吞噬整条渲染流水线的性能。本章直面这一核心矛盾，以原子级操作合并、节点记忆重组、排版禁忌破解为三重武器，重构DOM更新的物理法则。通过虚拟DOM的批处理引擎将千次操作坍缩为单次提交，借助文档碎片池实现90%节点的跨时空复用，再以transform替代top等20项反重排铁律，我们将彻底终结「JavaScript线
                    
                    前端面经分享（25/03/19）
                        CreatorRay
前端面试前端面试
                        北京一家做协同办公软件出海的公司，技术一面，20k-40k，要求3-5年详细聊了一下上家公司的项目上家公司的项目是不做了吗，离职原因是什么，你觉得公司的这个产品怎么样在做AI类的业务时，作为前端感觉跟常规业务有什么区别详细聊了一下上上家公司的项目细节讲一下项目里用编辑器做了什么事遇到过什么难解决的问题项目里提供的UI自动化的功能是怎么做的聊了一下写博客的事情有没有了解过浏览器底层的东西最近在研究或
                    
                                对股票分析时要注意哪些主要因素？
                                    会飞的奇葩猪
股票 分析 云掌股吧
                                     
　　众所周知，对散户投资者来说，股票技术分析是应战股市的核心武器，想学好股票的技术分析一定要知道哪些是重点学习的，其实非常简单，我们只要记住三个要素：成交量、价格趋势、振荡指标。 
 
    一、成交量 
 
　　大盘的成交量状态。成交量大说明市场的获利机会较多，成交量小说明市场的获利机会较少。当沪市的成交量超过150亿时是强市市场状态，运用技术找综合买点较准；
                                
                                【Scala十八】视图界定与上下文界定
                                    bit1129
scala
                                    Context Bound，上下文界定，是Scala为隐式参数引入的一种语法糖，使得隐式转换的编码更加简洁。 
  
隐式参数 
首先引入一个泛型函数max，用于取a和b的最大值 
  def max[T](a: T, b: T) = {
    if (a > b) a else b
  } 
 因为T是未知类型，只有运行时才会代入真正的类型，因此调用a > 
                                
                                C语言的分支——Object-C程序设计阅读有感
                                    darkblue086
applec框架cocoa
                                    自从1972年贝尔实验室Dennis Ritchie开发了C语言，C语言已经有了很多版本和实现，从Borland到microsoft还是GNU、Apple都提供了不同时代的多种选择，我们知道C语言是基于Thompson开发的B语言的，Object-C是以SmallTalk-80为基础的。和C++不同的是，Object C并不是C的超集，因为有很多特性与C是不同的。 
Object-C程序设计这本书
                                
                                去除浏览器对表单值的记忆
                                    周凡杨
html记忆autocompleteform浏览
                                      
                                   &n
                                
                                java的树形通讯录
                                    g21121
java
                                    最近用到企业通讯录，虽然以前也开发过，但是用的是jsf，拼成的树形，及其笨重和难维护。后来就想到直接生成json格式字符串，页面上也好展现。 
	// 首先取出每个部门的联系人
			for (int i = 0; i < depList.size(); i++) {
				List<Contacts> list = getContactList(depList.get(i
                                
                                Nginx安装部署
                                    510888780
nginxlinux
                                    Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源
                                
                                java servelet异步处理请求
                                    墙头上一根草
ｊａｖａ异步返回ｓｅｒｖｌｅｔ
                                    servlet3.0以后支持异步处理请求，具体是使用AsyncContext ，包装httpservletRequest以及httpservletResponse具有异步的功能， 
   
  
  final AsyncContext ac = request.startAsync(request, response); 
  ac.s
                                
                                我的spring学习笔记8-Spring中Bean的实例化
                                    aijuans
Spring 3
                                    在Spring中要实例化一个Bean有几种方法： 
 
1、最常用的（普通方法） 
 
 
<bean id="myBean" class="www.6e6.org.MyBean" /> 
 
使用这样方法，按Spring就会使用Bean的默认构造方法，也就是把没有参数的构造方法来建立Bean实例。 
 
（有构造方法的下个文细说） 
 
2、还
                                
                                为Mysql创建最优的索引
                                    annan211
mysql索引
                                    


	索引对于良好的性能非常关键，尤其是当数据规模越来越大的时候，索引的对性能的影响越发重要。
	索引经常会被误解甚至忽略，而且经常被糟糕的设计。
	索引优化应该是对查询性能优化最有效的手段了，索引能够轻易将查询性能提高几个数量级，最优的索引会比
	较好的索引性能要好2个数量级。
	
	1 索引的类型
	  (1) B-Tree
	    不出意外，这里提到的索引都是指 B-
                                
                                日期函数
                                    百合不是茶
oraclesql日期函数查询
                                      
ORACLE日期时间函数大全

   TO_DATE格式(以时间:2007-11-02   13:45:25为例)
   
        Year:      
        yy two digits 两位年                显示值:07
        yyy three digits 三位年                显示值:007
   
                                
                                线程优先级
                                    bijian1013
javathread多线程java多线程
                                    多线程运行时需要定义线程运行的先后顺序。 
线程优先级是用数字表示，数字越大线程优先级越高，取值在1到10，默认优先级为5。 
实例： 
package com.bijian.study;

/**
 * 因为在代码段当中把线程B的优先级设置高于线程A,所以运行结果先执行线程B的run()方法后再执行线程A的run()方法
 * 但在实际中，JAVA的优先级不准，强烈不建议用此方法来控制执
                                
                                适配器模式和代理模式的区别
                                    bijian1013
java设计模式
                                    一.简介        适配器模式：适配器模式（英语：adapter pattern）有时候也称包装样式或者包装。将一个类的接口转接成用户所期待的。一个适配使得因接口不兼容而不能在一起工作的类工作在一起，做法是将类别自己的接口包裹在一个已存在的类中。      &nbs
                                
                                【持久化框架MyBatis3三】MyBatis3 SQL映射配置文件
                                    bit1129
Mybatis3
                                     SQL映射配置文件一方面类似于Hibernate的映射配置文件，通过定义实体与关系表的列之间的对应关系。另一方面使用<select>,<insert>,<delete>，<update>元素定义增删改查的SQL语句， 
这些元素包含三方面内容 
1. 要执行的SQL语句 
2. SQL语句的入参，比如查询条件 
3. SQL语句的返回结果
                                
                                oracle大数据表复制备份个人经验
                                    bitcarter
oracle大表备份大表数据复制
                                    前提： 
   数据库仓库A（就拿oracle11g为例）中有两个用户user1和user2,现在有user1中有表ldm_table1,且表ldm_table1有数据5千万以上，ldm_table1中的数据是从其他库B（数据源）中抽取过来的，前期业务理解不够或者需求有变，数据有变动需要重新从B中抽取数据到A库表ldm_table1中。 
    
                                
                                HTTP加速器varnish安装小记
                                    ronin47
http varnish 加速
                                    上午共享的那个varnish安装手册，个人看了下，有点不知所云，好吧~看来还是先安装玩玩！ 
苦逼公司服务器没法连外网，不能用什么wget或yum命令直接下载安装，每每看到别人博客贴出的在线安装代码时，总有一股羡慕嫉妒“恨”冒了出来。。。好吧，既然没法上外网，那只能麻烦点通过下载源码来编译安装了！ 
Varnish 3.0.4下载地址： http://repo.varnish-cache.org/
                                
                                java-73-输入一个字符串，输出该字符串中对称的子字符串的最大长度
                                    bylijinnan
java
                                    

public class LongestSymmtricalLength {

	/*
	 * Q75题目：输入一个字符串，输出该字符串中对称的子字符串的最大长度。
	 * 比如输入字符串“google”，由于该字符串里最长的对称子字符串是“goog”，因此输出4。
	 */
	
	public static void main(String[] args) {
		Str
                                
                                学习编程的一点感想
                                    Cb123456
编程感想Gis
                                           写点感想，总结一些，也顺便激励一些自己.现在就是复习阶段，也做做项目. 
  
   本专业是GIS专业，当初觉得本专业太水，靠这个会活不下去的，所以就报了培训班。学习的时候，进入状态很慢，而且当初进去的时候，已经上到Java高级阶段了，所以.....，呵呵，之后有点感觉了，不过，还是不好好写代码，还眼高手低的，有
                                
                                [能源与安全]美国与中国
                                    comsci
能源
                                     
 
     现在有一个局面：地球上的石油只剩下N桶，这些油只够让中国和美国这两个国家中的一个顺利过渡到宇宙时代，但是如果这两个国家为争夺这些石油而发生战争，其结果是两个国家都无法平稳过渡到宇宙时代。。。。而且在战争中，剩下的石油也会被快速消耗在战争中，结果是两败俱伤。。。 
 
 
      在这个大
                                
                                SEMI-JOIN执行计划突然变成HASH JOIN了 的原因分析
                                    cwqcwqmax9
oracle
                                    甲说： 
A B两个表总数据量都很大，在百万以上。 
idx1  idx2字段表示是索引字段 
A B 两表上都有 
col1字段表示普通字段 
 
select xxx from A 
where A.idx1 between mmm and nnn 
     and exists (select 1 from B where B.idx2 =
                                
                                SpringMVC-ajax返回值乱码解决方案
                                    dashuaifu
AjaxspringMVCresponse中文乱码
                                      
SpringMVC-ajax返回值乱码解决方案 
  
一：（自己总结，测试过可行） 
ajax返回如果含有中文汉字，则使用：（如下例：） 
@RequestMapping(value="/xxx.do")       public @ResponseBody void getPunishReasonB
                                
                                Linux系统中查看日志的常用命令
                                    dcj3sjt126com
OS
                                    因为在日常的工作中，出问题的时候查看日志是每个管理员的习惯，作为初学者，为了以后的需要，我今天将下面这些查看命令共享给各位 
cat 
tail -f 
日 志 文 件 说 明 
/var/log/message 系统启动后的信息和错误日志，是Red Hat Linux中最常用的日志之一 
/var/log/secure 与安全相关的日志信息 
/var/log/maillog 与邮件相关的日志信
                                
                                [应用结构]应用
                                    dcj3sjt126com
PHPyii2
                                    应用主体 
应用主体是管理 Yii 应用系统整体结构和生命周期的对象。 每个Yii应用系统只能包含一个应用主体，应用主体在 入口脚本中创建并能通过表达式 \Yii::$app 全局范围内访问。 
 
 补充: 当我们说"一个应用"，它可能是一个应用主体对象，也可能是一个应用系统，是根据上下文来决定[译：中文为避免歧义，Application翻译为应
                                
                                assertThat用法
                                    eksliang
JUnitassertThat
                                    junit4.0  assertThat用法 
一般匹配符1、assertThat( testedNumber, allOf( greaterThan(8), lessThan(16) ) ); 
注释： allOf匹配符表明如果接下来的所有条件必须都成立测试才通过，相当于“与”（&&） 
2、assertThat( testedNumber, anyOf( g
                                
                                android点滴2
                                    gundumw100
应用服务器android网络应用OSHTC
                                    如何让Drawable绕着中心旋转？ 
 

Animation a = new RotateAnimation(0.0f, 360.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
a.setRepeatCount(-1);
a.setDuration(1000);
 
 
如何控制Andro
                                
                                超简洁的CSS下拉菜单
                                    ini
htmlWeb工作html5css
                                    效果体验：http://hovertree.com/texiao/css/3.htmHTML文件： 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁的HTML+CSS下拉菜单-HoverTree</title>
                                
                                kafka consumer防止数据丢失
                                    kane_xie
kafkaoffset commit
                                    kafka最初是被LinkedIn设计用来处理log的分布式消息系统，因此它的着眼点不在数据的安全性（log偶尔丢几条无所谓），换句话说kafka并不能完全保证数据不丢失。 
  
尽管kafka官网声称能够保证at-least-once，但如果consumer进程数小于partition_num，这个结论不一定成立。 
  
考虑这样一个case，partiton_num=2
                                
                                @Repository、@Service、@Controller 和 @Component
                                    mhtbbx
DAOspringbeanprototype
                                    @Repository、@Service、@Controller 和 @Component 将类标识为Bean 
Spring 自 2.0 版本开始，陆续引入了一些注解用于简化 Spring 的开发。@Repository注解便属于最先引入的一批，它用于将数据访问层 (DAO 层 ) 的类标识为 Spring Bean。具体只需将该注解标注在 DAO类上即可。同时，为了让 Spring 能够扫描类
                                
                                java 多线程高并发读写控制 误区
                                    qifeifei
java thread
                                    先看一下下面的错误代码，对写加了synchronized控制，保证了写的安全，但是问题在哪里呢？ 
public class testTh7 {
	private String data;
	public String read(){
		System.out.println(Thread.currentThread().getName() + "read data " 
                                
                                mongodb replica set(副本集)设置步骤
                                    tcrct
javamongodb
                                    网上已经有一大堆的设置步骤的了，根据我遇到的问题，整理一下，如下： 
 
首先先去下载一个mongodb最新版，目前最新版应该是2.6 
 

cd /usr/local/bin
wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.0.tgz
tar -zxvf  mongodb-linux-x86_64-2.6.0.t
                                
                                rust学习笔记
                                    wudixiaotie
学习笔记
                                    1.rust里绑定变量是let，默认绑定了的变量是不可更改的，所以如果想让变量可变就要加上mut。 
let x = 1; let mut y = 2; 
2.match 相当于erlang中的case，但是case的每一项后都是分号，但是rust的match却是逗号。 
3.match 的每一项最后都要加逗号，但是最后一项不加也不会报错，所有结尾加逗号的用法都是类似。 
4.每个语句结尾都要加分
                                
                
            
        
    

    
        
            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    

    
        
            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

        
    
（CSS2） 
table-cell： 指定对象作为表格单元格。类同于html标签（CSS2） 
table-row： 指定对象作为表格行。类同于html标签
CSS页面基本布局

前提回顾

CSS 布局

display属性：讨论布局的时候重要的两个值是 display: flex 和 display: grid

你可能感兴趣的:(css,前端)

display属性：讨论布局的时候重要的两个值是 `display: flex` 和 `display: grid`
