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,布局)

  • Unity学习笔记1 zy_777
    通过一个星期的简单学习，初步了解了下unity，unity的使用，以及场景的布局，UI，以及用C#做一些简单的逻辑。好记性不如烂笔头，一些关键帧还是记起来比较好，哈哈，不然可能转瞬即逝了，（PS:纯小白观点，unity大神可以直接忽略了）一：MonoBehaviour类的初始化1，Instantiate()创建GameObject2，通过Awake()和Start()来做初始化3，Update、L
  • 非欧空间计算加速：图神经网络与微分几何计算的GPU优化（流形数据的内存布局优化策略） 九章云极AladdinEdu 空间计算神经网络人工智能gpu算力算法java开发语言
    一、非欧空间计算的革命性意义与核心挑战在三维形状分析、社交网络建模、分子动力学模拟等领域，非欧几里得空间数据（流形数据）的处理正推动人工智能技术向更复杂的几何结构迈进。传统欧式空间优化方法在处理流形数据时面临根本性局限：黎曼度量导致距离计算失效、局部坐标系动态变化引发内存访问模式混乱、曲率变化影响并行计算效率。本文提出基于分块流形存储（BlockedManifoldStorage,BMS）与层次化
  • H5UI微信小程序前端框架实战指南 ai
    本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
  • 《河北雄安新区规划纲要》 郭强GQ
    世界眼光、国际标准、中国特色、高点定位，生态优先、绿色发展，以人民为中心、保障和改善民生，保护弘扬中华优秀传统文化、延续历史文脉，符合党中央、国务院对雄安新区的战略定位和发展要求。科学构建城市空间布局雄安新区实行组团式发展，选择容城、安新两县交界区域作为起步区，先行开发建设启动区，稳步有序推进中期发展区建设，划定远期控制区为未来发展预留空间。城乡统筹、均衡发展、宜居宜业，形成“一主、五辅、多节点”
  • Could not extract GUID in text file UserSettings\Layouts\CurrentMaximizeLayout.dwlt at line 924. zhannghong2003 Unityunity游戏引擎
    错误提示：无法在文本文件UserSettings\Layouts\CurrentMaximizeLayout.dwlt的第924行提取GUID。UnityEngine.GUIUtility:ProcessEvent(int,intptr,bool&)这个错误发生在Unity无法解析一个损坏或格式错误的布局文件(CurrentMaximizeLayout.dwlt)时。以下是解决方法：解决方案：关闭
  • Grid布局参考资料 kiterumer
    Grid布局张鑫旭-写给自己看的display:grid布局教程阮一峰-CSSGrid网格布局教程在Grid布局中，float，display:inline-block，display:table-cell，vertical-align以及column-*这些属性和声明对grid子项是没有任何作用的。这个可以说是Grid布局中的常识，面试经常会问的，一定要记得。Grid布局则适用于更大规模的布局（
  • 页面开发样式和布局入门：Vite + Vue 3 + Less
    页面开发样式和布局入门：Vite+Vue3+Less引言在现代前端开发中，样式和布局是页面开发的核心部分。随着技术的不断发展，Vite、Vue3和Less等工具和框架的出现，使得前端开发变得更加高效和灵活。然而，尽管这些工具和框架提供了强大的功能，但在实际开发中仍然会遇到各种样式和布局的问题。本文将结合Vite、Vue3和Less，详细介绍在页面开发中常见的样式和布局问题，并提供解决方案和最佳实践
  • 《博客园精华集》web标准分册第2论筛选结果文章列表
    《博客园精华集》web标准部分筛选结果（共55篇）一个喜欢网页设计的程序员作者：Awen根本不存在DIV+CSS布局这回事作者：CatChen欲练CSS，必先宫IE作者：CatChen你有强迫症吗？作者：CatChenSPAN元素和DIV元素的区别作者：ChrisLiudiv的认识作者：ChrisLiu实时检验您的页面是否符合XHTML标准——使用ValidatorModule作者：Dflying
  • 移动端布局 小唱同学
    viewport详解viewport:视口,指的是浏览器中放网页内容的区域移动端的viewport不会自动随着设备的变化而变化,被设定为一个固定值980或者1024,为了能够在移动端正常查看pc端页面.做移动端布局时,需要把viewport设置为随着设备的变化而变化参数说明:width:设置视口的宽度device-width设备宽度initial-scale:页面的初始缩放比例1.0原始大小max
  • UE5 自动生成插件汇总：提升创作效率的得力助手 阿贾克斯的黎明 游戏开发ue5
    目录UE5自动生成插件汇总：提升创作效率的得力助手目录一、地形生成插件1.Polycam2.M4电影级地形工具包3.WorldCreatortoUnrealEngine插件二、场景生成插件1.PrometheanAI2.physicallayout（物理布局）三、动画生成插件1.CasterAI2.blender骨骼绑定模型一键导入UE5场景插件MagicBoneUE5RigCreator四、特效
  • AI 时代，程序员如何从代码工人进化为技术战略家？
    在AI技术迅猛发展的时代，传统程序员若想突破“代码工人”的局限，进化为技术战略家，需从多维度实现能力跃迁。这不仅要求深化技术深度，更要拓展行业认知、培养战略思维、强化跨界协作能力，并保持持续进化的动力。本文将从技术深耕、行业洞察、战略布局、协作整合、终身学习五个关键方面，详细探讨程序员实现这一进化的具体路径，为其指明在AI浪潮中从执行者向决策者转变的方向。一、深耕技术内核，筑牢战略根基技术是程序员
  • Android布局文件中的xmlns:tools Huang兄 androidandroid
    2018-01-04文章目录androidapptoolstools可以干什么ErrorhandlingattributesDesign-timeviewattributes(设计时试图属性)tools:insteadofandroidtools:contexttools:itemCounttools:layouttools:listitem/tools:listheader/tools:list
  • 布局管理器android,Android课程---布局管理器之相对布局（一）
    下面示例的是在父容器里如何设置按钮的位置，难度：***，重点是找到一个主按钮，设置它的id，然后根据它来设置其他按钮在父容器的位置。代码示例：android:layout_width="match_parent"android:layout_height="match_parent">android:layout_width="wrap_content"android:layout_height=
  • AE音乐可视化模板：制作快速音乐视频
    本文还有配套的精品资源，点击获取简介：AE音乐可视化模板旨在将音乐数据转化为视觉效果，包含预设动画和布局设计，使用户能够轻松制作节奏同步的音乐视频。关键编辑区包括音乐编辑、歌名、歌手、背景图片和专辑图片编辑区，以及用于总成预览的区域。这类模板通常适用于新手用户，通过简洁的编辑流程，用户可以利用丰富的视觉元素和动画效果快速创作。包含的项目文件、预设动画、图像和音频素材，以及使用指南，帮助用户顺利完成
  • android开发------编写用户界面之相对布局 cc-Cocos2D-X Android基础
    元素之间总是相对于它们的同级元素或父元素进行排列布局。http://www.cnblogs.com/ai-developers/p/android_relativelayout.html
  • Android 五大布局之线性布局和相对布局 qq_41437225 Android五大布局之（一）线性布局和相对布局android布局线性布局相对布局
    Android五大布局之线性布局和相对布局RelativeLayout的相关的属性相对布局第一类：属性值为true和false的：android:layout_centerHrizontal水平居中android:layout_centerVertial垂直居中android:layout_centerInparent相对于父元素完全居中android:layout_alignParentBott
  • 智能合约从入门到精通：Solidity语法之内存变量的布局和状态变量的存储模型... Mathilda91 区块链
    简介：在前面我们已经讲过Solidity语言的一些语法内容，在矩阵元JUICE开放平台的JIDE开发时，一定要注意LayoutinMemory和LayoutofStateVariablesinStorage，即内存变量的布局和状态变量的存储模型。内存变量的布局（LayoutinMemory）Solidity预留了3个32字节大小的槽位：0-64：哈希方法的暂存空间(scratchspace)64-
  • Android操作系统的UI适配方案研究 操作系统内核探秘 操作系统内核揭秘androiduiai
    Android操作系统的UI适配方案研究关键词：AndroidUI适配、屏幕密度、分辨率适配、约束布局、多屏幕支持、响应式设计、dp/sp单位摘要：本文深入探讨Android操作系统中的UI适配问题及其解决方案。文章从基础概念入手，分析Android碎片化带来的适配挑战，详细介绍多种适配方案的技术原理和实现方法，包括尺寸单位、布局技术、资源限定符等。通过实际代码示例和数学模型，展示如何构建适应不同
  • 前端面试题 大大。 前端vue.jsjavascript
    HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种
  • 2018-06-24 梁启佳o格格
    无锡自古就是鱼米之乡，素有布码头、钱码头、窑码头、丝都、米市之称，是中国国家历史文化名城。梅园，在无锡市西南浒山上。以园内遍植梅树，故名。占地150亩。原是清末进士徐殿一“小桃园”旧址。192017年成为荣氏私园，植梅数千株。1960年扩至横山，面积500多亩。园林布局，以梅饰山，倚山饰梅，别具一格。惠山在无锡市西郊。江南名山之一。山有9峰，蜿蜒若龙，又称九龙山。主峰三茅峰，海拔328米，周约20
  • Tailwind CSS 响应式设计实战指南 qcidyu 用户体验代码优化移动优先网站布局前端开发TailwindCSS响应式设计
    title:TailwindCSS响应式设计实战指南date:2024/6/13updated:2024/6/13author:cmdragonexcerpt:这篇文章介绍了如何运用TailwindCSS框架创建响应式网页设计，涵盖博客、电商网站及企业官网的布局实例，包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时，探讨了与JavaScript框架集成、CSS预处理器配合、设计
  • 揭秘前端 CSS3 字体特效的实现方法
    #揭秘前端CSS3字体特效的实现方法>关键词：CSS3、字体特效、text-shadow、@font-face、font-feature-settings、动画效果、Web字体>摘要：本文通过生活化的比喻和实战案例，深入解析CSS3实现字体特效的核心技术。从基础文字阴影到高级字体动画，揭秘7种酷炫效果实现原理，并提供可直接复用的代码模板。##背景介绍###目的和范围本文系统讲解CSS3实现字体特效
  • QCustomPlot绘图保存成PDF文件 Qt历险记 Qt高级开发工程师pdfqtc++20visualstudio
    点击上方"蓝字"关注我们01、QTextDocument>>>QTextDocument是Qt框架中的一个类，用于处理和显示富文本内容。它提供了文本编辑、格式化、布局和渲染等功能。QTextDocument可以包含文本、图像、表格、列表等多种元素，并且可以处理复杂的文本布局和格式。02、QTextObjectInterface>>>QTextObjectInterface是Qt框架中的一个接口，用
  • TTT训练营培训总结 兜_c722
    首先非常感谢，各位老师三天三夜的辛勤付出并将在演讲中压箱底的知识与亮点，无私授教给辛勤学子们，也很荣幸能参与到这三天三夜的培训中，在培训期间学到了很多的，丰富的知识点，并对演讲获得了一个重新的认知。本次TTT训练中，通过尤立现老师分享的DISC高效识人的详细介绍与讲解，让我通过DISC的四种方法，多方分析了解客户的性格与脾气，对于营销技能提供了很大的帮助，通过尤老师对课程，张弛有度的布局，DISC
  • html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签 zhangjunzongque 个人html常用标签
    typora-copy-images-to:media第01阶段.web基础：html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签一、前言1.基础班学习目标目标：能根据psd文件（psd文件，其实就是一张类似于图片的格式，这个呢是用ps做的，也就叫做源文件），用HTML+CSS布局出符合W3C规范的网页（也就是说，我们写的代码，要符合标准）。简单的说，能根据美工给的图，
  • 汪小菲食通达公司成立新零售公司，布局餐饮零售新赛道
    在竞争激烈的餐饮与零售行业，每一个新动向都可能引发市场的波澜。近日，一则消息引起了广泛关注：天眼查App显示，7月22日，北京食通达新零售有限公司正式成立。这家新公司的法定代表人为李小娟，注册资本100万人民币，经营范围涵盖食品销售、互联网销售、组织文化艺术交流活动、供应链管理服务等多个领域。而其背后的控股公司——北京食通达科技发展有限公司，董事长正是汪小菲，这无疑让该事件成为了舆论焦点。小菲在餐
  • 零基础也能看懂的 Tkinter 完全指南：从“Hello, World!” 到“桌面级应用”全流程实战
    目录前言一、为什么选择Tkinter？二、5分钟跑通“Hello,Tkinter”三、核心概念一张图四、控件速查表（常用10个）五、布局管理器：packvsgridvsplace1.pack（适合纵向/横向堆叠）2.grid（表格，最常用）3.place（绝对坐标，极少用）六、事件处理3种写法七、完整实战：To-DoList（100行以内）八、进阶：ttk与主题美化九、打包成exe（PyInsta
  • CSS3文本阴影特效全攻略
    CSS3文本阴影效果实现下面我将创建一个展示各种CSS3文本阴影效果的页面，包含多种样式示例和代码实现。设计思路创建具有视觉吸引力的标题区域提供多种文本阴影效果实例显示对应的CSS代码以供参考添加交互元素让用户自定义效果实现代码CSS3文本阴影效果大全*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'OpenSans',sa
  • Java PDF工具包：生成与优化中文PDF文档 Xi Zi
    本文还有配套的精品资源，点击获取简介：Java生成PDF工具包是Java开发者在开发环境中使用的库，用于创建和编辑PDF文件，并特别优化了中文显示与自动换行。工具包解决了中文字符和英文文本在PDF文档中布局的挑战，通过智能换行算法确保了阅读流畅性，并提高了排版质量。开发者可以通过API实现复杂PDF文档的自定义设计，并在处理大量中文内容时保持性能。该工具包可应用于生成PDF报告、合同等，并支持字体
  • Windows 窗体应用(.NET Framework)全部控件大全 Ro小陌 C#Windowswindows.netc#
    在.NETFramework的Windows窗体应用（WinForms）中，控件是构建用户界面的基础。以下是常见控件的分类及说明，涵盖官方控件和扩展方式：一、官方控件分类1.容器控件Panel：用于分组和布局其他控件，支持滚动条。GroupBox：带标题的容器，用于逻辑分组。TabControl：多标签页容器，切换不同内容区域。SplitContainer：可调整大小的分隔窗格，用于分栏布局。Fl
  • 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其他