niko_sch
niko_sch

CSS3 flex布局的妙用


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>flex布局title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="components/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js">script>
    <script src="components/bootstrap.min.js">script>
    <script src="components/jquery.vide.js">script>
head>
<body>
<style>
    .father-container {
        background-color: #a8e4ff;
        padding: 50px 0;
    }

    /*dislpay:flex使父容器表现为块盒子;display:inline-flex使容器表现为行盒子*/
    .flex-container {
        display: flex;
    }

    .inline-flex-container {
        display: inline-flex;
    }

    .align-items-stretch {
        -webkit-align-items: stretch;
        align-items: stretch;
    }

    .align-items-baseline {
        -webkit-align-items: baseline;
        align-items: baseline;
    }

    .align-items-center {
        -webkit-align-items: center;
        align-items: center;
    }

    .align-items-flex-start {
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    .align-items-flex-end {
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    .justify-content-flex-start {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .justify-content-flex-end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .justify-content-center {
        -webkit-justify-content: center;
        justify-content: center;
    }

    .justify-content-space-between {
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .justify-content-space-around {
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    .center-container {
        display: inline-flex;
        justify-content: center;
        align-items: center;

    }

    .element-autoheight {
        width: 50px;
        padding: 5px;
        margin: 5px;
        background-color: tomato;

    }

    .element-fixedsize {
        width: 50px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        background-color: tomato;
        text-align: center;
        line-height: 50px;
        color: white;
        font-weight: bold;
        font-size: 2em;
    }

    .center-item {
        width: 50px;
        height: 50px;
        background: tomato;

    }

    .flex-container1 {
        padding: 0;
        margin: 5px;
        float: left;
        list-style: none;
        width: 160px;
        height: 300px;
        display: flex;
        flex-flow: row wrap;
        background-color: #a8e4ff;
        /*flex-direction:row;
        flex-wrap:wrap;*/
    }

    .flex-start {
        -webkit-align-content: flex-start;
        align-content: flex-start;
    }

    .flex-end {
        -webkit-align-content: flex-end;
        align-content: flex-end;
    }

    .flex-end li {
        background: gold;

    }

    .flex-end li:nth-child(3) {
        margin-bottom: 0;
    }

    .center {
        -webkit-align-content: center;
        align-content: center;
    }

    .center li {
        background: deepskyblue;
    }

    .space-between {
        -webkit-align-content: space-between;
        align-content: space-between;
    }

    .space-between li {
        background: lightgreen;
    }

    .space-between li:nth-child(3) {
        margin-bottom: 0;
    }

    .space-around {
        -webkit-align-content: space-around;
        align-content: space-around;
    }

    .space-around li {
        background: hotpink;
    }

    .stretch {
        -webkit-align-content: stretch;
        align-content: stretch;
    }

    .stretch li {
        background: chocolate;
        margin-bottom: 4px;
        height: auto;
    }

    .stretch li:nth-child(3) {
        margin-bottom: 0;
    }

    .flex-item {
        background: tomato;
        margin-bottom: 5px;
        width: 160px;
        height: 80px;

        line-height: 80px;
        color: white;
        font-weight: bold;
        font-size: 1em;
        text-align: center;
    }
style>
<div class="container">
    <h3>align-itemsh3>
    <div class="col-md-12">
        <div class="col-md-4">
            <h4>stretch（拉升至等高）h4>
            <div class="inline-flex-container align-items-stretch" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 100px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 70px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 90px;">div>
                div>

            div>
        div>
        <div class="col-md-4">
            <h4>baseline（子元素基线对齐）h4>
            <div class=" inline-flex-container align-items-baseline" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 100px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 70px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 90px;">div>
                div>
            div>
        div>
        <div class="col-md-4">
            <h4>center（子元素垂直居中对齐）h4>
            <div class="inline-flex-container align-items-center" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 100px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 70px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 90px;">div>
                div>
            div>
        div>
        <div class="col-md-4">
            <h4>flex-end（子元素对齐下边缘）h4>
            <div class="inline-flex-container align-items-flex-end" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 100px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 70px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 90px;">div>
                div>
            div>
        div>
        <div class="col-md-4">
            <h4>flex-start（子元素对齐上边缘）h4>
            <div class="inline-flex-container align-items-flex-start" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 100px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 70px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 90px;">div>
                div>
            div>
        div>
    div>
    <hr class="col-md-12">

    <h3>align-selfh3>
    <h4>和align-item一样，只不过是应用在子元素上（下面例子：改变align-item样式）h4>
    <div class="inline-flex-container align-items-stretch" style="background-color: #a8e4ff;">
        <div class="element-autoheight">
            <div style="height: 50px;">div>
        div>
        <div class="element-autoheight">
            <div style="height: 140px;">div>
        div>
        <div class="element-autoheight">
            <div style="height: 70px;">div>
        div>
        <div class="element-autoheight" style=" -webkit-align-self: flex-end;align-self: flex-end;">
            <div style="height: 100px;font-size: 12px;">我本来是拉伸的，现在我和下边缘对齐了div>
        div>

    div>
    <hr class="col-md-12">

    <h3>align-contenth3>
    <div style="float: left;padding-bottom: 20px;">
        <div class="flex-container1 flex-start">
            <div class="flex-item">flex-startdiv>
            <div class="flex-item">flex-startdiv>
            <div class="flex-item">flex-startdiv>
        div>

        <div class="flex-container1 flex-end">
            <li class="flex-item">flex-endli>
            <li class="flex-item">flex-endli>
            <li class="flex-item">flex-endli>
        div>

        <div class="flex-container1 center">
            <li class="flex-item">centerli>
            <li class="flex-item">centerli>
            <li class="flex-item">centerli>
        div>

        <div class="flex-container1 space-between">
            <li class="flex-item">space-betweenli>
            <li class="flex-item">space-betweenli>
            <li class="flex-item">space-betweenli>
        div>

        <div class="flex-container1 space-around">
            <li class="flex-item">space-aroundli>
            <li class="flex-item">space-aroundli>
            <li class="flex-item">space-aroundli>
        div>

        <div class="flex-container1 stretch">
            <li class="flex-item">stretchli>
            <li class="flex-item">stretchli>
            <li class="flex-item">stretchli>
        div>
    div>
    <hr  style="clear: both;">

    <h3>justify-contenth3>
    <div class="col-md-12">

        <h4>flex-start（左边缘对齐）h4>
        <div class="flex-container justify-content-flex-start" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1div>
            <div class="element-fixedsize">2div>
            <div class="element-fixedsize">3div>
            <div class="element-fixedsize">4div>

        div>
        <h4>flex-end（右边缘对齐）h4>
        <div class="flex-container justify-content-flex-end" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1div>
            <div class="element-fixedsize">2div>
            <div class="element-fixedsize">3div>
            <div class="element-fixedsize">4div>
        div>
        <h4>center（居中对齐）h4>
        <div class="flex-container justify-content-center" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1div>
            <div class="element-fixedsize">2div>
            <div class="element-fixedsize">3div>
            <div class="element-fixedsize">4div>
        div>
        <h4>space-between（等间距对齐，左右无间距）h4>
        <div class="flex-container justify-content-space-between" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1div>
            <div class="element-fixedsize">2div>
            <div class="element-fixedsize">3div>
            <div class="element-fixedsize">4div>
        div>
        <h4>space-around（等间距对齐，左右有间距）h4>
        <div class="flex-container justify-content-space-around" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1div>
            <div class="element-fixedsize">2div>
            <div class="element-fixedsize">3div>
            <div class="element-fixedsize">4div>
        div>
    div>

    <hr class="col-md-12">








    <h3>子块完全置中(justify-content,align-items)h3>
    <div class="father-container center-container col-md-6">
        <div class="center-item">div>
    div>
    <hr class="col-md-12">
div>

body>
html>

你可能感兴趣的:(CSS3,flex,css3,布局)

  • kkfilwview私有化接入方式（k8s） qq_41369135 kubernetes容器云原生
    dev--环境//要预览文件的访问地址(灵活用工举例)varurl='http://xxx.cn/flex-employ-static-dev/enterprise/avatar/1858353535553372160/xxx.png';window.open('http://xxx.com/api/wiat-online-preview/onlinePreview?url='+encodeURI
  • android listpreference 自定义,android – 自定义布局ListPreference 呼呼啦啦就瘸了 androidlistpreference自定义
    在您的preference.xml文件中,您可以通过类的全名来引用自定义ListPreference,即com.example.MyPreferenceandroid:key="pref_wifi_key"android:title="@string/settings">android:key="pref_wifi_remove"android:title="@string/remove_wifi
  • Qt中多ui使用及简单布局实现交互界面 liangyunshan123 Qt开发技巧1024程序员节qtuic++
    系列文章目录第一章Qt中C++代码搭配UI文件实现交互界面第二章Qt中多ui使用及简单布局实现交互界面文章目录前言一、新增两个新UI文件二、使用这两个新增的UI及简单布局三.添加简单联动逻辑四.编译运行及动态效果展示总结前言前一段时间，写了一篇关于Qt中C++代码搭配UI文件实现简单的交互界面的文章，当时是计划作为一个系列来写的，希望交流一下循序渐进的学习和使用Qt心得。前几天评论中有人催更了，所
  • 鸿蒙HarmonyOS NEXT开发：位置设置（ArkTS组件事件） 「已注销」 鸿蒙ArkTSharmonyos华为鸿蒙android驱动开发
    位置设置设置组件的对齐方式、布局方向和显示位置。说明：从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。alignalign(value:Alignment)设置容器元素绘制区域内的子元素的对齐方式。卡片能力：从APIversion9开始，该接口支持在ArkTS卡片中使用。原子化服务API：从APIversion11开始，该接口支持在原子化服务中使用。系
  • 鸿蒙Next开发-添加水印以及点击穿透设置 Android技术之家
    在鸿蒙Next中，为App全局添加水印可以通过以下方式实现，其中通过窗口添加水印是一种常见且高效的方式。以下是具体方案和实现细节：一、全局水印的实现方式1.窗口叠加水印（首选、推荐）原理：在应用的主窗口（Window）上叠加一个半透明的水印层，覆盖所有页面内容。优势：实现简单、性能较好，无需侵入业务逻辑。实现步骤：(1)创建全局水印组件通过Stack布局在主页面内容上叠加水印层，通过设置hitTe
  • 【WPS&Office】汇总 YvesHe 【Office】WPSOffice
    写在前面PPT篇幻灯片母版通过母版功能统一幻灯片的样式、字体、颜色等，提高整体一致性。统一设置模板样式字体安装查找到字体并安装。在WPSPPT（WPS演示）中，以下是最常用的十个功能，能够帮助用户高效制作和编辑演示文稿：1.幻灯片模板与主题提供多种内置模板和主题，用户可以快速选择合适的风格，提高幻灯片的美观度和专业性。2.幻灯片版式与布局可调整幻灯片的布局，如标题、文本、图片和图表的排列方式，以适
  • Word文档如何让文字填满整页详细操作指南 mmoo_python wordwindows
    Word文档如何让文字填满整页详细操作指南在使用Word文档进行文字编辑时，很多用户希望文字能够填满整个页面，以提升文档的美观度和阅读体验。然而，不少用户并不清楚如何实现这一效果。本文将详细介绍如何通过设置页边距，让Word文档中的文字铺满整个页面。一、打开Word文档并定位布局工具首先，我们需要打开需要调整的Word文档。在Word界面的顶部菜单栏中，找到并点击“布局”工具。这一步骤是后续设置的
  • 非标准纸张Word文件无损转换为A4标准纸张的完整教程 huluang 文档优化格式
    在日常办公中，常会遇到需要将非标准纸张大小的Word文档（如A3、B5等）调整为A4标准尺寸的需求。直接修改Word页面设置可能导致排版错乱，而通过AdobeAcrobat的印前检查功能可实现内容格式无损缩放。以下是详细操作流程：一、Word转PDF：保留原始布局保存为PDF格式在Word中打开文档，点击「文件」→「另存为」→选择保存类型为PDF（.pdf）。关键点：确保不调整Word原有页面设置
  • word分栏使得最后一页内容自动平衡 bu_shuo word分栏
    word分栏使得最后一页内容自动平衡Word中的分页符分节符Word中的分页符与分节符统称为分隔符【分页符】是将一页内容分成两页,但分离后的两页属于同一节;分页符用于强制在当前位置分页,后续内容从下一页开始;分页符对应快捷键Ctrl+Enter;【分节符】分节符用于将文档分成不同的节,每个节可以设置独立的页面布局和格式;类型下一页分节符:新节从下一页开始连续分节符:新节从当前页开始,不强制分页偶数
  • 详解云桌面3种主流架构 黑客KKKing 网络工程师网络安全架构web安全安全
    本文简要介绍下云桌面（云电脑）的3种主流架构：VDI、IDV和VOI，概念、原理和区别，欢迎阅读。云桌面作为桌面办公和云计算融合发展的产物，在一定程度上替代了传统的办公形式。目前阿里云、华为云、移动云、电信云，还有华三、锐捷、中兴等互联网大厂都在积极布局该领域。云桌面的技术原理总体来讲，云桌面和云主机、云手机、云游戏等其他形式的云产品类型是一样的，都是采用虚拟化技术。首先，我们会采购一大批的计算资
  • flex 布局：实现一行固定个数，超出强制换行（流式布局） 艾米栗写代码 下班一小时打卡每日复习前端css前端javascript
    一、flex布局基础知识flex布局的知识想必不用多说，一些常用的属性如下：设置在父容器上的属性：display：flex，align-items,justify-content,flex-wrap。设置在子容器上的属性，通过flex:1，简写了flex-grow、flex-shrink、flex-basis三个属性。基础知识部分可参考阮大的：二、flex布局常用应用1、垂直居中通过align-i
  • Python pdfplumber库：轻松解析PDF文件 engchina LINUXpythonpdfpdfplumber开发语言
    Pythonpdfplumber库：轻松解析PDF文件1.安装2.基本概念3.使用场景和示例代码3.1提取文本3.2提取表格数据3.3获取图像信息3.4分析页面布局3.5搜索特定文本4.总结在处理PDF文件时,我们经常需要提取文本、图像或表格数据。Python的pdfplumber库为这些任务提供了强大而灵活的解决方案。本文将介绍pdfplumber的基本概念和常见使用场景,并通过示例代码展示如何
  • qt的QSizePolicy的使用 qq_43361844 QTQSizePolicy
    使用QSizePolicy设置控件的伸缩因子在Qt中，QSizePolicy控制控件如何在布局中伸缩。如果想要影响控件的大小调整行为，可以通过QSizePolicy::setHorizontalStretch()和QSizePolicy::setVerticalStretch()设置伸缩因子。基本用法假设我们有一个QWidget或者QLabel需要在QHBoxLayout或QVBoxLayout里
  • C++智能指针的内存布局 江同学_ c++开发语言
    1.智能指针的内存布局概述C++中的智能指针如std::shared_ptr、std::unique_ptr和std::weak_ptr，都是为了自动化内存管理，减少手动管理内存的负担。它们各自的内存布局在管理对象时有所不同，特别是涉及到多态和继承时，布局会变得更为复杂。1.1std::shared_ptr的内存布局std::shared_ptr是引用计数智能指针，它在管理对象时会包含：控制块指针
  • Spring Boot 整合 log4j2 日志配置教程 m0_74824517 面试学习路线阿里巴巴springbootlog4j单元测试
    文章目录前言一、常用日志框架二、配置参数介绍1.日志级别2.输出形式3.日志格式3.1PatternLayout自定义日志布局三、Log4j2配置详解1.根节点Configuration2.Appenders节点2.1Console节点2.2File节点2.3RollingFile节点2.3.1ThresholdFilter节点2.3.2Policies节点2.3.3ThresholdFilter
  • css块级元素和行内元素区别 serve the people 日常琐问css前端
    在CSS中，元素可以分为两大类：块级元素（Block-levelelements）和行内元素（Inlineelements）。这两种元素在网页布局中起着不同的作用，主要体现在它们的显示方式、尺寸控制、以及与其他元素的交互方式上。块级元素（Block-levelelements）特点：独占一行：块级元素会独占一行，在其前后会自动添加换行符。可设置宽度和高度：可以设置width和height属性来改变
  • CSS 核心技术知识点详解：从基础到进阶 秋水为渡 前端css
    本文基于图中提供的17个CSS核心知识点展开讲解，涵盖基础概念、布局原理、实战技巧及性能优化等内容。每个知识点均附代码示例和原理分析，帮助读者系统性掌握CSS核心能力。1.选择器作用：定位HTML元素并应用样式。常见类型：类选择器：.class-name{...}ID选择器：#id-name{...}属性选择器：[type="text"]{...}代码示例：.button{color:red;}/
  • 如何使用Three.js制作3D月球与星空效果 软件工程师文艺 前端javascript3dhtml
    目录1.基本设置2.创建星空效果3.创建月球模型4.添加中文3D文字5.光照与相机配置6.动画与控制7.响应式布局8.结语在本文中，我们将一起学习如何利用Three.js实现一个3D月球与星空的效果，并添加一些有趣的元素，比如中文3D文字和互动功能。Three.js是一个强大的JavaScript库，它简化了WebGL的使用，使得在网页上进行3D图形渲染变得更加容易。我们将逐步分析代码，帮助大家理
  • 【CSS进阶】CSS元素的水平、垂直居中方法 Bl_a_ck html与css进阶css前端javascripthtml5bootstrapcss3less
    在前端开发中，实现水平居中和垂直居中是常见的需求。不同的HTML元素（块级元素、行内元素、行内块元素）以及不同的布局方式（传统布局、Flexbox、Grid、绝对定位）会有不同的居中方法。以下是各类居中方式的总结：1.水平居中（HorizontalCentering）1.1图片水平居中方法1：background-position当使用background-image设置背景图片时，可以通过bac
  • Timeline 时间线基础用法 AiGarry vue.jsjavascriptelementui
    1、html内容Timeline可拆分成多个按照时间戳排列的活动，时间戳是其区分于其他控件的重要特征{{activity.updateBy}}{{activity.updateTime}}<divstyle="color:#999;display:flex"v-for=
  • 教育定制开发中，如何通过代码实现多终端适配？ 万岳科技系统开发 外卖系统外卖系统开发小程序android开源
    随着移动设备、平板电脑和PC的普及，教育平台的用户往往使用多种终端访问系统。为了提供一致的用户体验，教育定制开发必须考虑多终端适配问题。本文将探讨在教育系统开发中，如何通过代码实现多终端适配，并提供一些核心技术和代码示例。一、多终端适配的关键技术响应式设计（ResponsiveDesign）使用CSS媒体查询，根据屏幕大小动态调整页面布局。前端框架支持借助前端框架如Bootstrap、Tailwi
  • CP AUTOSAR标准之FlexRayStateManager(AUTOSAR_CP_SWS_FlexRayStateManager)（更新中……） 瑟寒凌风 经典autosar(CP)平台汽车车载系统
    1简介和功能概述  该规范描述了AUTOSAR基础软件模块FlexRay状态管理器(FrSM)的功能、API和配置。  AUTOSARBSW堆栈为每条通信总线指定一个总线特定状态管理器。该模块应实现相应总线的控制流。FrSM是通信服务层的成员。它与通信硬件抽象层和系统服务层交互。3相关文献3.1输入文件及相关标准、规范  [1]词汇表AUTOSAR_FO_TR_Glossary  [2]基础软件模
  • 【笔记】从华为云看4P理论的卓越践行者 通信_楠木 笔记华为云系统架构用户运营产品运营产品经理
    在当今竞争激烈的云计算市场中，华为云犹如一颗明星取得了令人瞩目的成绩。其成功的背后，离不开对4P营销理论——产品（Product）、价格（Price）、渠道（Place）、促销（Promotion）的巧妙运用与深度融合。这一经典的营销理论框架，在华为云的市场战略布局中被赋予了新的活力与内涵，下面就结合最近的学习总结，让我们深入探究华为云是如何运用4P营销理论书写其辉煌篇章的。学习是一种愉悦，一种收
  • js考核第三题 2401_88560642 javascript前端java
    题三：随机点名要求：分为上下两个部分，上方为显示区域，下方为控制区域。显示区域显示五十位群成员的学号和姓名，控制区域由开始和结束两个按钮组成。点击开始按钮，显示区域里的内容开始滚动，点击结束按钮，内容滚动停止，随机显示一位成员的学号和姓名。html部分开始结束css部分body{margin:0;padding:0;display:flex;flex-direction:column;height
  • 基于 Vue +three.js +Photo Sphere Viewer + 高德地图实现 VR 效果 VueVirtuoso 我的学习之路前端vue.js前端框架github交互信息可视化3d
    需求背景随着科技的进步，虚拟现实（VR）技术在家居行业的应用越来越普遍。我们项目的目标是通过结合VR看房和实时场景展示，提升用户的体验，用户可以在家中便能身临其境地感受房屋的空间布局和氛围。此外，我们希望通过高德地图提供的标记点功能，帮助用户快速定位感兴趣的区域。业务这边想要实现右边链接的效果阿里云付费全景图，类似VR看房，支持360°x360°任意旋转，支持自定义添加标注，支持切换场景等功能，效
  • ZCC6507: A Superior Isolated Power Solution Outperforming SN6507 zhichengwei 其他
    Inthefieldofisolatedpowerdesign,engineersareconstantlyseekingmoreefficient,flexible,andcost-effectivesolutions.TheZCC6507,ahigh-performancepush-pulltransformerdriver,standsoutwithitsuniquedesignandsig
  • 支持ajax的移动webui,Vue移动端项目配合第三方ui库快速搭建开发环境 七月的流浪猫 支持ajax的移动webui
    //copycnpminstall--savees6-promisecnpminstall--savebabel-polyfillcnpminstallfastclick-Scnpmilib-flexible-Scnpminstallpx2rem-loader-S-dcnpminstallvuex-Scnpminstallaxios--savecnpminstallstylus--save-dev
  • 《必知！G1 堆结构全揭秘，性能优化从这里开始》 @孤随 JAVA性能优化
    G1垃圾收集器原理与调优实践目录G1垃圾收集器简介核心设计原理2.1区域化堆内存布局2.2分代收集与混合GC2.3并发标记与SATB算法G1工作流程详解3.1YoungGC3.2MixedGC3.3FullGC调优参数与实战案例4.1关键JVM参数4.2电商系统调优案例4.3日志分析与工具使用避坑指南总结1.G1垃圾收集器简介G1（Garbage-First）是JDK9及以后版本的默认垃圾收集器，
  • 商家必看！为什么现在必须布局商业付费流量？这4个原因告诉你答案 会飞的程序猿丫 人工智能大数据
    在本地生意竞争白热化的今天，商家如果还依赖“自然流量躺赢”，很可能会被时代淘汰。巨量本地推在产品升级计划，用一组数据揭示了真相：过去一年，使用付费流量的商家成交额增长397%，经营效率提升超50%。这背后传递了一个明确的信号——商业付费流量不再是“可选项”，而是本地商家生存与增长的“必选项”。为什么？我们从运营角度拆解4大核心原因。一、流量红利期稍纵即逝，抢先入局者收割市场抖音生态的本地生活服务正
  • Ubuntu22.04系统安装及配置 乌托邦的逃亡者 Ubuntulinux运维服务器ubuntu
    文章目录一、选择“安装”二、选择“语言”三、安装器更新四、键盘布局五、选择安装类型六、网络配置七、代理设置八、镜像地址九、磁盘划分十、设置用户名、主机名、登录密码十一、升级到UbuntuPro十二、SSH设置十三、选装软件包十四、开始安装进程十五、配置静态IP十六、设置时区十七、包管理工具十八、防火墙设置十九、修改linux参数（调大最大文件句柄数）二十、如何使用root账号二十一、安装JDK二十
  • JAVA基础 灵静志远 位运算加载Date字符串池覆盖
    一、类的初始化顺序 1 （静态变量，静态代码块）-->（变量，初始化块）--> 构造器 同一括号里的，根据它们在程序中的顺序来决定。上面所述是同一类中。如果是继承的情况，那就在父类到子类交替初始化。 二、String 1 String a = "abc"; JAVA虚拟机首先在字符串池中查找是否已经存在了值为"abc"的对象，根
  • keepalived实现redis主从高可用 bylijinnan redis
    方案说明 两台机器（称为A和B），以统一的VIP对外提供服务 1.正常情况下，A和B都启动，B会把A的数据同步过来（B is slave of A） 2.当A挂了后，VIP漂移到B；B的keepalived 通知redis 执行：slaveof no one，由B提供服务 3.当A起来后，VIP不切换，仍在B上面；而A的keepalived 通知redis 执行slaveof B，开始
  • java文件操作大全 0624chenhong java
    最近在博客园看到一篇比较全面的文件操作文章，转过来留着。 http://www.cnblogs.com/zhuocheng/archive/2011/12/12/2285290.html 转自http://blog.sina.com.cn/s/blog_4a9f789a0100ik3p.html 一.获得控制台用户输入的信息    &nbs
  • android学习任务 不懂事的小屁孩 工作
    任务 完成情况 搞清楚带箭头的pupupwindows和不带的使用 已完成 熟练使用pupupwindows和alertdialog，并搞清楚两者的区别 已完成 熟练使用android的线程handler,并敲示例代码 进行中 了解游戏2048的流程，并完成其代码工作 进行中-差几个actionbar 研究一下android的动画效果，写一个实例 已完成 复习fragem
  • zoom.js 换个号韩国红果果 oom
    它的基于bootstrap 的 https://raw.github.com/twbs/bootstrap/master/js/transition.js  transition.js模块引用顺序 <link rel="stylesheet" href="style/zoom.css"> <script src=&q
  • 详解Oracle云操作系统Solaris 11.2 蓝儿唯美 Solaris
    当Oracle发布Solaris 11时，它将自己的操作系统称为第一个面向云的操作系统。Oracle在发布Solaris 11.2时继续它以云为中心的基调。但是，这些说法没有告诉我们为什么Solaris是配得上云的。幸好，我们不需要等太久。Solaris11.2有4个重要的技术可以在一个有效的云实现中发挥重要作用：OpenStack、内核域、统一存档（UA）和弹性虚拟交换（EVS）。 
  • spring学习——springmvc（一） a-john springMVC
    Spring MVC基于模型-视图-控制器（Model-View-Controller，MVC）实现，能够帮助我们构建像Spring框架那样灵活和松耦合的Web应用程序。   1，跟踪Spring MVC的请求 请求的第一站是Spring的DispatcherServlet。与大多数基于Java的Web框架一样，Spring MVC所有的请求都会通过一个前端控制器Servlet。前
  • hdu4342 History repeat itself-------多校联合五 aijuans 数论
    水题就不多说什么了。 #include<iostream>#include<cstdlib>#include<stdio.h>#define ll __int64using namespace std;int main(){ int t; ll n; scanf("%d",&t); while(t--)
  • EJB和javabean的区别 asia007 beanejb
    EJB不是一般的JavaBean,EJB是企业级JavaBean,EJB一共分为3种,实体Bean,消息Bean,会话Bean,书写EJB是需要遵循一定的规范的,具体规范你可以参考相关的资料.另外,要运行EJB,你需要相应的EJB容器,比如Weblogic,Jboss等,而JavaBean不需要,只需要安装Tomcat就可以了   1.EJB用于服务端应用开发, 而JavaBeans
  • Struts的action和Result总结 百合不是茶 strutsAction配置Result配置
        一:Action的配置详解:      下面是一个Struts中一个空的Struts.xml的配置文件     <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &quo
  • 如何带好自已的团队 bijian1013 项目管理团队管理团队
    在网上看到博客" 怎么才能让团队成员好好干活"的评论，觉得写的比较好。 原文如下： 我做团队管理有几年了吧，我和你分享一下我认为带好团队的几点： 1.诚信         对团队内成员，无论是技术研究、交流、问题探讨，要尽可能的保持一种诚信的态度，用心去做好，你的团队会感觉得到。 2.努力提
  • Java代码混淆工具 sunjing ProGuard
    Open Source Obfuscators ProGuard http://java-source.net/open-source/obfuscators/proguardProGuard is a free Java class file shrinker and obfuscator. It can detect and remove unused classes, fields, m
  • 【Redis三】基于Redis sentinel的自动failover主从复制 bit1129 redis
    在第二篇中使用2.8.17搭建了主从复制，但是它存在Master单点问题，为了解决这个问题，Redis从2.6开始引入sentinel，用于监控和管理Redis的主从复制环境，进行自动failover，即Master挂了后，sentinel自动从从服务器选出一个Master使主从复制集群仍然可以工作，如果Master醒来再次加入集群，只能以从服务器的形式工作。   什么是Sentine
  • 使用代理实现Hibernate Dao层自动事务 白糖_ DAOspringAOP框架Hibernate
    都说spring利用AOP实现自动事务处理机制非常好，但在只有hibernate这个框架情况下，我们开启session、管理事务就往往很麻烦。 public void save(Object obj){ Session session = this.getSession(); Transaction tran = session.beginTransaction(); try
  • maven3实战读书笔记 braveCS maven3
    Maven简介 是什么？ Is a software project management and comprehension tool.项目管理工具 是基于POM概念(工程对象模型) [设计重复、编码重复、文档重复、构建重复，maven最大化消除了构建的重复] [与XP：简单、交流与反馈；测试驱动开发、十分钟构建、持续集成、富有信息的工作区]     功能：
  • 编程之美-子数组的最大乘积 bylijinnan 编程之美
    public class MaxProduct { /** * 编程之美 子数组的最大乘积 * 题目: 给定一个长度为N的整数数组，只允许使用乘法，不能用除法，计算任意N-1个数的组合中乘积中最大的一组，并写出算法的时间复杂度。 * 以下程序对应书上两种方法，求得“乘积中最大的一组”的乘积——都是有溢出的可能的。 * 但按题目的意思，是要求得这个子数组，而不
  • 读书笔记-2 chengxuyuancsdn 读书笔记
    1、反射 2、oracle年-月-日 时-分-秒 3、oracle创建有参、无参函数 4、oracle行转列 5、Struts2拦截器 6、Filter过滤器(web.xml) 1、反射 (1)检查类的结构 在java.lang.reflect包里有3个类Field,Method,Constructor分别用于描述类的域、方法和构造器。 2、oracle年月日时分秒 s
  • [求学与房地产]慎重选择IT培训学校 comsci it
          关于培训学校的教学和教师的问题,我们就不讨论了,我主要关心的是这个问题       培训学校的教学楼和宿舍的环境和稳定性问题       我们大家都知道，房子是一个比较昂贵的东西，特别是那种能够当教室的房子... &nb
  • RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 daizj oraclermanfilespersetPARALLELISM
    RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 转 PARALLELISM --- 我们还可以通过parallelism参数来指定同时"自动"创建多少个通道： RMAN > configure device type disk parallelism 3 ; 表示启动三个通道，可以加快备份恢复的速度。
  • 简单排序:冒泡排序 dieslrae 冒泡排序
    public void bubbleSort(int[] array){ for(int i=1;i<array.length;i++){ for(int k=0;k<array.length-i;k++){ if(array[k] > array[k+1]){
  • 初二上学期难记单词三 dcj3sjt126com sciet
    concert 音乐会 tonight 今晚 famous 有名的；著名的 song 歌曲 thousand 千 accident 事故；灾难 careless 粗心的，大意的 break 折断；断裂；破碎 heart 心（脏） happen  偶尔发生，碰巧 tourist 旅游者；观光者 science （自然）科学 marry 结婚 subject 题目；
  • I.安装Memcahce 1. 安装依赖包libevent Memcache需要安装libevent,所以安装前可能需要执行 Shell代码 收藏代码 dcj3sjt126com redis
    wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-stable make   前面3步应该没有问题，主要的问题是执行make的时候，出现了异常。 异常一： make[2]: cc: Command not found 异常原因：没有安装g
  • 并发容器 shuizhaosi888 并发容器
       通过并发容器来改善同步容器的性能，同步容器将所有对容器状态的访问都串行化，来实现线程安全，这种方式严重降低并发性，当多个线程访问时，吞吐量严重降低。    并发容器ConcurrentHashMap       替代同步基于散列的Map，通过Lock控制。   &nb
  • Spring Security（12）——Remember-Me功能 234390216 Spring SecurityRemember Me记住我
    Remember-Me功能   目录   1.1     概述 1.2     基于简单加密token的方法 1.3     基于持久化token的方法 1.4     Remember-Me相关接口和实现
  • 位运算 焦志广 位运算
    一、位运算符Ｃ语言提供了六种位运算符： & 按位与 | 按位或 ^ 按位异或 ~ 取反 << 左移 >> 右移 1. 按位与运算 按位与运算符"&"是双目运算符。其功能是参与运算的两数各对应的二进位相与。只有对应的两个二进位均为1时，结果位才为1 ，否则为0。参与运算的数以补码方式出现。 例如：9&am
  • nodejs 数据库连接 mongodb mysql liguangsong mongodbmysqlnode数据库连接
    1.mysql 连接    package.json中dependencies加入     "mysql":"~2.7.0"    执行 npm install      在config 下创建文件 database.js    
  • java动态编译 olive6615 javaHotSpotjvm动态编译
        在HotSpot虚拟机中，有两个技术是至关重要的，即动态编译(Dynamic compilation)和Profiling。     HotSpot是如何动态编译Javad的bytecode呢？Java bytecode是以解释方式被load到虚拟机的。HotSpot里有一个运行监视器，即Profile Monitor,专门监视
  • Storm0.9.5的集群部署配置优化 roadrunners 优化storm.yaml
    nimbus结点配置（storm.yaml）信息： # Licensed to the Apache Software Foundation (ASF) under one # or more contributor license agreements. See the NOTICE file # distributed with this work for additional inf
  • 101个MySQL 的调节和优化的提示 tomcat_oracle mysql
    　1. 拥有足够的物理内存来把整个InnoDB文件加载到内存中——在内存中访问文件时的速度要比在硬盘中访问时快的多。 　　2. 不惜一切代价避免使用Swap交换分区 – 交换时是从硬盘读取的，它的速度很慢。 　　3. 使用电池供电的RAM（注：RAM即随机存储器）。 　　4. 使用高级的RAID（注：Redundant Arrays of Inexpensive Disks，即磁盘阵列
  • zoj 3829 Known Notation(贪心) 阿尔萨斯 ZOJ
    题目链接：zoj 3829 Known Notation 题目大意：给定一个不完整的后缀表达式，要求有2种不同操作，用尽量少的操作使得表达式完整。 解题思路：贪心，数字的个数要要保证比∗的个数多1，不够的话优先补在开头是最优的。然后遍历一遍字符串，碰到数字+1，碰到∗-1,保证数字的个数大于等1，如果不够减的话，可以和最后面的一个数字交换位置（用栈维护十分方便），因为添加和交换代价都是1
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他