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

  • 水平垂直居中的几种方法（总结） LJ小番茄 CSS_玄学语言htmljavascript前端csscss3
    1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • ARM驱动学习之基础小知识 JT灬新一 ARM嵌入式arm开发学习
    ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
  • TDengine 签约前晨汽车，解锁智能出行的无限潜力 涛思数据（TDengine） tdengine汽车大数据
    在全球汽车产业转型升级的背景下，智能网联和新能源技术正迅速成为商用车行业的重要发展方向。随着市场对环保和智能化需求的日益增强，企业必须在技术创新和数据管理上不断突破，以满足客户对高效、安全和智能出行的期待。在这一背景下，前晨汽车凭借其在新能源智能商用车领域的前瞻性布局和技术实力，成为行业中的佼佼者。前晨汽车采用整车数据采集和全车数据打通策略，能够实时将数据推送至APP端客户。然而，这导致整体写入和
  • Android实现监听事件的方法 Amy木婉清
    1.通过内部类实现2.通过匿名内部类实现3.通过事件源所在类实现4.通过外部类实现5.布局文件中onclick属性(针对点击事件)1.通过内部类实现代码:privateButtonmBtnEvent;//oncreate中mBtnEvent.setOnClickListener(newOnClick());//内部类实现监听classOnClickimplementsView.OnClickLis
  • 高仿一个echarts饼图 街角小林2
    开头饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。用canvas实现一个饼图很简单，所以
  • python之pyecharts制作可视化数据大屏 cesske 大数据
    文章目录前言一、安装Pyecharts二、创建Pyecharts图表三、设计大屏布局四、实时数据更新五、部署和展示总结前言使用Pyecharts制作可视化数据大屏是一个复杂但有趣的过程，因为Pyecharts本身是一个用于生成Echarts图表的Python库，而Echarts是由百度开发的一个开源可视化库，支持丰富的图表类型和高度自定义。然而，Pyecharts本身并不直接提供“大屏”的解决方案
  • 基于高通主板的ARM架构服务器 问就是想睡觉 arm开发服务器运维
    一、ARM架构服务器的崛起（一）市场需求推动消费市场寒冬，全球消费电子需求下行，服务器成半导体核心动力之一。Arm加速布局服务器领域，如9月推出NeoverseV2。长久以来，x86架构主导服务器市场，现面临挑战。Arm2008年入服务器领域，虽因性能与生态问题未大突破，但近几年重新冲刺。（二）技术创新引领Arm的Neoverse平台不断发展。2018年推出参考架构，2020年衍生出E、N、V系列
  • LVGL 控件之列表（lv_list） Projectsauron #LVGlLVGL嵌入式
    目录一、概述二、列表1、添加列表按钮2、设置列表文本3、API函数一、概述List（列表）基本上是一个垂直布局的矩形，按钮指向该矩形并且可以添加文本。列表部件由两个部分组成：LV_PART_MAIN使用所有典型背景属性的列表的主要部分LV_PART_SCROLLBAR滚动条。二、列表1、添加列表按钮在默认的情况下，列表部件被创建出来后，只有一个矩形背景框，并没有任何的文本和按钮，用户需要自行往列表
  • FlexibleBI系统是现代制造企业提升生产质量和效率的重要工具 三坐标CMM质量数据系统 制造
    SPC（统计过程控制）系统是现代制造企业提升生产质量和效率的重要工具。我们的SPC系统通过一键生成全面的SPC分析报告，帮助企业快速、精准地完成质量分析，并大大减少了手动处理数据的复杂性。FlexibleBI实时更新的控制图在生产过程中，控制图可以实时自动更新，确保企业能够随时掌握生产状态，及时发现并处理潜在问题。系统支持多种标准SPC控制图，如X-bar、R、P等图表，全面覆盖所有常见生产场景。
  • Linux删除监听端口进程,linux只端口监听及杀死进程 探旅 Linux删除监听端口进程
    itextpdf生成pdf文件一.简介itextpdf是一个开源的允许你去创建和操作PDF文档的库.它使的开发者可以提高web和其他应用来动态地生成或操作PDF文档.通过iText中的Document和PdfWriter类,...QtSizePolicy属性控件的sizePolicy说明控件在布局管理中的缩放方式.Qt提供的控件都有一个合理的缺省sizePolicy,但是这个缺省值有时不能适合所有
  • WPF绘图(基础图形：直线、矩形和椭圆) 未来无限 C#WPF程序设计wpf绘图直线矩形椭圆
    目录一、概述二、基本图形绘制2.1直线2.2矩形2.3椭圆一、概述与传统的.NET开发使用GDI+进行绘图不同，WPF拥有自己的一套图形API，绘图为矢量图。绘图可以在任何一种布局控件中完成，wpf会根据容器计算相应坐标。最常用的是Canvas和Grid。基本图形包括以下几个，都是Shaper类的派生类。1、Line，直线段，可以设置Stroke2、Rectangle，有Stroke也有Fill3
  • 【十八】【QT开发应用】标签页QTabWidget的常见用法 妖精七七_ QT开发应用qt开发语言
    #include"widget.h"//包含自定义的widget头文件#include//包含QHBoxLayout头文件，用于水平布局#include//包含QTabWidget头文件，用于创建标签页控件#include//包含QDebug头文件，用于调试输出widget::widget(QWidget*parent)//widget类的构造函数:QWidget(parent)//调用基类QWi
  • 释放“AI+”新质生产力，深算院如何“把大数据变小”？ YashanDB YashanDB国产数据库数据库数据库大数据
    近期，南都·湾财社推出《新质·中国造》栏目，深入千行百业，遍访湾区企业，解锁湾区新质生产力，共探高质量发展之道。本期对话深圳计算科学研究院YashanDB首席技术官陈志标，探讨国产数据库如何实现创新突围，抢抓数字经济时代的新机遇。以下是专访内容：如何应对AI时代所面临的算力挑战？南都·湾财社：数据、算力和算法是发展人工智能的三要素，深算院做了怎样的前瞻性布局？陈志标：今年，政府工作报告中首次提及开
  • js的书写位置和css的书写位置的区别？为什么要这样写？ 李是啥也不会 javascriptcss开发语言
    JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）
  • 学习成为会布局的人 弘毅聊财商
    世界上99%的人都是赌徒，剩下的1%是庄家，1%中的1%是布局的人。我先举个例子，开拓一下你的思维：比如某个大山里发现了金矿，大家都一窝蜂的跑去挖金子，这时候，你也跟着去挖，基本已经挖不到了你要做的不是加入淘金大军，而是应该在通往挖金子路上卖水，卖干粮，卖工具，卖挖金子技巧的书，赚那些挖金子的人的钱这个时代，赚钱最核心的本质是：去赚那些想赚钱的人的钱你看微商为啥能做那么大，就是因为他们在赚，想赚钱
  • 专访AMD：AMD 正式加入龙蜥社区首秀：开源协作与 AI 创新的交汇点 OpenAnolis小助手 开源龙蜥社区操作系统龙蜥操作系统大会AI
    编者按：近日，2024龙蜥操作系统大会已于北京圆满举办。会上，龙蜥社区发布了“AnolisOS23生态衍生计划”、“CentOS替代计划”及“AI应用推广计划”三大计划，从产品、生态及应用维度为AI需求爆发主动布局，打造面向“云+AI”的下一代服务器操作系统。大会另一个重要的信息是今年龙蜥社区又迎来了一个重量级选手——AMD公司，展示其在开源、AI等领域的最新进展和合作成果。AMD公司大型数据中心
  • 【H2O2|全栈】关于CSS（3）CSS基础（三） 过期的H2O2 【H2O2】CSS入门css前端
    目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：
  • QT 自定义组件 界面跳转 子座 qt数据库开发语言
    一、引用组件需要的类（头文件）1、按钮类QPushButton:普通按钮;QToolButton:工具按钮;QRadioButton:单选按钮;QCheckBox:复选按钮;QCommandLinkButton:命令连接按钮;2、布局类QHBoxLayout水平QVBoxLayout垂直QGridLayout网格QFormLayout表单QSrackedLayout.堆栈3、输出类QLabel:标
  • 软件测试面试题 爱学习的执念 面试软件测试面试软件测试服务器软件测试面试软件测试面试
    1、测试矿泉水瓶外观界面测试：瓶子外观界面测试主要是测试瓶子的大小、瓶身所体现的各种信息（如字体、颜色）等瓶子的外观特征是否满足公司的最初对瓶子的设计要求。1.瓶身广告和图案的背景颜色是否符合公司设计要求。2.瓶身上所有字体、颜色是否符合公司的设计要求，是否有错别字。3.带广告的图案遇水后是否会掉色或变模糊，广告与图案内容是否合法。4.瓶身是否有防止烫伤、垃圾回收、年龄限制等提示。5.瓶身图标布局
  • css鼠标移上去向上移动,css3鼠标移动图片上移效果 yo xiba css鼠标移上去向上移动
    css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
  • css3实现鼠标放到图标上自动切换图标 黄丫丫07 csscss3html
    作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
  • CSS实现鼠标移动到购物车显示详情 AsiaFT. csscss3html
    需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
  • 面试总结1 Xl_Lee
    性能优化1.造成tableView卡顿的原因有哪些？1.最常用的就是cell的重用，注册重用标识符如果不重用cell时，每当一个cell显示到屏幕上时，就会重新创建一个新的cell如果有很多数据的时候，就会堆积很多cell。如果重用cell，为cell创建一个ID，每当需要显示cell的时候，都会先去缓冲池中寻找可循环利用的cell，如果没有再重新创建cell2.避免cell的重新布局cell的布
  • VLSI电路单元的自动布局：全局布局基础介绍 Jaaiko 数学建模算法开源图论matlab
    2024年华数杯全国大学生数学建模竞赛B题为：VLSI电路单元的自动布局。本题主要关注的是全局布局问题。学术界针对全局布局的评估模型和优化方法的研究历史悠久。本文借题顺势介绍全局布局的一些重点基础内容和相关工具/资料，以期为对EDA算法设计领域感兴趣、对数学建模感兴趣的人降低研究门槛。VLSI是超大规模集成电路的简称。完成一个VLSI设计的流程十分复杂，包含多种数据格式的转化，其中将逻辑网表转变为
  • VLSI 电路单元的自动布局-2024华数杯B题 2401_84314384 算法python数学建模
    摘要超大规模集成电路设计通常采用电子设计自动化(EDA)的方式进行，布局是EDA工具的核心的核心。本文通过构建的线长评估模型及网格密度评估模型，并在此基础上对模型进行优化，最后利用模型实现VLSI电路单元的自动布局。问题一：基于结合直线型斯坦纳最小树思想的优化HPWL模型评估与电路单元连线接口坐标相关的线长。本题需要建立与电路单元连线接口坐标相关的线长评估模型，最小化每组估计线长与对应RSMT的差
  • FloatActionButton 使用 yuzhiyi_宇
    FloatActionButton(简称FAB)是负责显示界面基本操作的圆形按钮，其提供的最好是高频率的操作。使用FloatActionButton继承自ImageView，具备ImageView的全部属性。xml布局代码属性作用android:srcFAB中显示的图标app:layout_anchor设置FAB的锚点，即以该控件为参考app:layout_anchorGravityFAB相对锚点
  • 《密室逃生》观后感 童心麻麻
    图片发自App最近看了电影《密室逃生》，非常的惊险、刺激，比《饥饿游戏》还让人心跳加速。六位身份各异的陌生人，为赢取高额奖金，在神秘盒子的指引下受邀参与世界顶级密室逃脱游戏。谁知密室内布局精良机关重重，陷阱遍布杀机暗藏。是刺激游戏，还是博命赌局？谁在背后操控这一切？谁能够成功破解谜局，逃出生天？电影的开篇是几位年轻人不约而同地收到了一个快递，快递盒子里是一个正方形的黑色盒子。当他们千方百计地利用各
  • 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其他