flex 布局示例
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>flex实例</title>
<style>
* {
font-family: "微软雅黑";
} html,
body {
margin: 0;
padding: 0;
} h2 {
font-size: 20px;
} h3 {
font-size: 18px;
font-weight: normal;
} .box {
padding: 20px;
border-bottom: 1px dashed #aaa;
} .box:after {
content: "";
display: block;
width: 100%;
line-height: 1px;
clear: both;
} .demo {
background: #f1f1f1;
padding: 5px;
box-sizing: border-box;
box-shadow: 5px 5px 10px #ddd;
margin-right: 5%;
margin-bottom: 10px;
width: 45%;
float: left;
} .container {
display: -webkit-flex;
display: flex;
} .container div:nth-child(1) {
background: #D8614C;
} .container div:nth-child(2) {
background: #43BBD2;
} .container div:nth-child(3) {
background: #6EC342;
} .container div {
min-height: 50px;
color: #fff;
text-align: center;
line-height: 50px;
background: #006699;
} .item {
width: 100px;
margin: 0 10px 10px 0;
}
</style>
</head> <body> <div class="box">
<h2>[flex] 弹性盒模型布局</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container" style="flex-direction:row;">
<div style="width: 100px;">100px</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container">
<div style="width: 150px;margin-right:10px;">150px,mright=10</div>
<div style="flex: 1;">flex: 1;</div>
<div style="width: 150px;margin-left:10px;">150px,mleft=10</div>
</div>
</div>
</div> <div class="box">
<h2>[ flex-direction ] 元素开始方向</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:row /* defalut */;</h3>
<div class="container" style="flex-direction:row;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:row-reverse;</h3>
<div class="container" style="flex-direction:row-reverse;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:column;</h3>
<div class="container" style="flex-direction:column;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:column-reverse;</h3>
<div class="container" style="flex-direction:column-reverse;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
</div> <!-- 是否换行 -->
<div class="box">
<h2>[ flex-wrap ] 元素是否换行</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-wrap:nowrap; /* default */</h3>
<div class="container" style="-webkit-flex-wrap:nowrap; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
<div style="width: 300px;">300px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-wrap:wrap; </h3>
<div class="container" style="-webkit-flex-wrap:wrap;border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
<div style="width: 300px;">300px</div>
</div>
</div>
</div> <!-- 横向排版 -->
<div class="box">
<h2>[ justify-content ] 元素横向排版</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:flex-start; /* default */</h3>
<div class="container" style="justify-content:flex-start; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:flex-end; </h3>
<div class="container" style="justify-content:flex-end; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:center; </h3>
<div class="container" style="justify-content:center; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:space-between; /* default */</h3>
<div class="container" style="justify-content:space-between; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:space-around; /* default */</h3>
<div class="container" style="justify-content:space-around; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
</div> <!-- 纵向排版 -->
<div class="box">
<h2>[ align-self ] 元素纵向排版，用在子元素上</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div style="flex:1;align-self: flex-start;">align-self: flex-start;</div>
<div style="flex:1;align-self: center;">align-self: center;</div>
<div style="flex:1;align-self: flex-end;">align-self: flex-end;</div>
</div>
</div>
<div class="demo">
<h3> </h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div style="flex:1;align-self:auto;">align-self:auto; /*default*/</div>
<div style="flex:1;align-self: baseline;">align-self: baseline;</div>
<div style="flex:1;align-self: stretch;">align-self: stretch;</div>
</div>
</div>
</div> <div class="box">
<h2>[ align-items ] 元素纵向排版，用在父元素上</h2>
<div class="demo">
<h3>align-items:flex-start;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-start">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>align-items:center;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:center">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>align-items:flex-end;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>混合使用</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
<div style="flex:1;">1</div>
<div style="flex:1; align-self:center">2 align-self:center</div>
<div style="flex:1;">3</div>
</div>
</div>
</div> <div class="box">
<h2>[ align-content ] 元素分布排版</h2>
<div class="demo">
<h3 style="color:red">与 align-items:flex-start; 对比</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-items:flex-start; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:flex-start;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:flex-start; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:center;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:center; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:flex-end;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:flex-end; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div> <div class="demo">
<h3>align-content:stretch;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:stretch; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
</div> <!-- 排序 -->
<div class="box">
<h2>[ order ] 元素排序控制,值越小越靠前</h2>
<div class="demo">
<h3>order:num;</h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div class="item" style="order: 1;">1 order:1;</div>
<div class="item" style="order: 0;">2 order:0;</div>
<div class="item" style="order: -1;">3 order:-1;</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex实例</title>
<style>
* {
font-family: "微软雅黑";
}
html,
body {
margin: ;
padding: ;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
font-weight: normal;
}
.box {
padding: 20px;
border-bottom: 1px dashed #aaa;
}
.box:after {
content: "";
display: block;
width: 100%;
line-height: 1px;
clear: both;
}
.demo {
background: #f1f1f1;
padding: 5px;
box-sizing: border-box;
box-shadow: 5px 5px 10px #ddd;
margin-right: 5%;
margin-bottom: 10px;
width: 45%;
float: left;
}
.container {
display: -webkit-flex;
display: flex;
}
.container div:nth-child() {
background: #D8614C;
}
.container div:nth-child() {
background: #43BBD2;
}
.container div:nth-child() {
background: #6EC342;
}
.container div {
min-height: 50px;
color: #fff;
text-align: center;
line-height: 50px;
background: #006699;
}
.item {
width: 100px;
margin: 10px 10px ;
}
</style>
</head>
<body>
<div class="box">
<h2>[flex] 弹性盒模型布局</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container" style="flex-direction:row;">
<div style="width: 100px;">100px</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container">
<div style="width: 150px;margin-right:10px;">150px,mright=10</div>
<div style="flex: 1;">flex: 1;</div>
<div style="width: 150px;margin-left:10px;">150px,mleft=10</div>
</div>
</div>
</div>
<div class="box">
<h2>[ flex-direction ] 元素开始方向</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:row /* defalut */;</h3>
<div class="container" style="flex-direction:row;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:row-reverse;</h3>
<div class="container" style="flex-direction:row-reverse;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:column;</h3>
<div class="container" style="flex-direction:column;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:column-reverse;</h3>
<div class="container" style="flex-direction:column-reverse;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
</div>
<!-- 是否换行 -->
<div class="box">
<h2>[ flex-wrap ] 元素是否换行</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-wrap:nowrap; /* default */</h3>
<div class="container" style="-webkit-flex-wrap:nowrap; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
<div style="width: 300px;">300px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-wrap:wrap; </h3>
<div class="container" style="-webkit-flex-wrap:wrap;border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
<div style="width: 300px;">300px</div>
</div>
</div>
</div>
<!-- 横向排版 -->
<div class="box">
<h2>[ justify-content ] 元素横向排版</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:flex-start; /* default */</h3>
<div class="container" style="justify-content:flex-start; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:flex-end; </h3>
<div class="container" style="justify-content:flex-end; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:center; </h3>
<div class="container" style="justify-content:center; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:space-between; /* default */</h3>
<div class="container" style="justify-content:space-between; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:space-around; /* default */</h3>
<div class="container" style="justify-content:space-around; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
</div>
<!-- 纵向排版 -->
<div class="box">
<h2>[ align-self ] 元素纵向排版，用在子元素上</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div style="flex:1;align-self: flex-start;">align-self: flex-start;</div>
<div style="flex:1;align-self: center;">align-self: center;</div>
<div style="flex:1;align-self: flex-end;">align-self: flex-end;</div>
</div>
</div>
<div class="demo">
<h3> </h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div style="flex:1;align-self:auto;">align-self:auto; /*default*/</div>
<div style="flex:1;align-self: baseline;">align-self: baseline;</div>
<div style="flex:1;align-self: stretch;">align-self: stretch;</div>
</div>
</div>
</div>
<div class="box">
<h2>[ align-items ] 元素纵向排版，用在父元素上</h2>
<div class="demo">
<h3>align-items:flex-start;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-start">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>align-items:center;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:center">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>align-items:flex-end;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>混合使用</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
<div style="flex:1;">1</div>
<div style="flex:1; align-self:center">2 align-self:center</div>
<div style="flex:1;">3</div>
</div>
</div>
</div>
<div class="box">
<h2>[ align-content ] 元素分布排版</h2>
<div class="demo">
<h3 style="color:red">与 align-items:flex-start; 对比</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-items:flex-start; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:flex-start;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:flex-start; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:center;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:center; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:flex-end;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:flex-end; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:stretch;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:stretch; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
</div>
<!-- 排序 -->
<div class="box">
<h2>[ order ] 元素排序控制,值越小越靠前</h2>
<div class="demo">
<h3>order:num;</h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div class="item" style="order: 1;">1 order:1;</div>
<div class="item" style="order: 0;">2 order:0;</div>
<div class="item" style="order: -1;">3 order:-1;</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
flex 布局示例的更多相关文章
- Flex 项目属性：flex 布局示例
flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- CSS3的flex布局
flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的flo ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- flex基础示例
flex的一些基础用法: <!-- Flex布局已经得到了所有浏览器的支持:chrome21+.Opera12.1+.Firefox22+.safari6.1+.IE10+ Webkit内核浏览 ...
- css3 flex 布局
今天做一个小实战,需要让一个登录框始终保持水平和垂直居中,第一个想到的就是通过定位(要想让一个div居中,采用定位可以解决,示例), 然后开始接触flex布局,学完感觉真的好用,现把知识点记录一下,以 ...
- 写给 Android 开发的小程序布局指南，Flex 布局！
一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需 ...
- 阮一峰：Flex 布局教程
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex ...
随机推荐
- websocket初步了解
https://www.cnblogs.com/fuqiang88/p/5956363.html websocket是一种新型的协议,协议标识符为ws,加密即为wss 简单说来就是一种持续的http服 ...
- JTree 常用方法
package com.swing.demo; import java.awt.Component; import java.awt.event.MouseAdapter; import java.a ...
- Git Bash 将本地代码提交到Github
前提:已拥有Token,并且把本地的Token配置到了自己的Github里面(没有Token的自行去百度如何配置Token) 测试一下自己的连接 ssh -T git@github.com 本地操作: ...
- 【最短路】【位运算】It's not a Bug, it's a Feature!
[Uva658] It's not a Bug, it's a Feature! 题目略 UVA658 Problem PDF上有 试题分析: 本题可以看到:有<=20个潜在的BUG,那 ...
- BZOJ 4756 [Usaco2017 Jan]Promotion Counting（线段树合并）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4756 [题目大意] 给出一棵树,对于每个节点,求其子树中比父节点大的点个数 [题解] ...
- BZOJ 2152 聪聪可可（点分治）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2152 [题目大意] 给出一棵树,问任取两点之间距离为3的倍数的概率是多少 [题解] 树 ...
- 【二分】Codeforces Round #435 (Div. 2) D. Mahmoud and Ehab and the binary string
题意:交互题:存在一个至少有一个0和一个1的长度为n的二进制串,你可以进行最多15次询问,每次给出一个长度为n的二进制串,系统返回你此串和原串的海明距离(两串不同的位数).最后要你找到任意一个0的位置 ...
- 【dfs序+AC自动机+树状数组】BZOJ2434-[Noi2011]阿狸的打字机
[题目大意] 输入一个字符串,其中:(1)a..z:在字符串末尾添加当前字符(2)P:输出当前字符串(3)B:从当前字符串末尾删去一个字符. 给出m组查询,输出第i个输出的字符串在第j个输出的字符串内 ...
- [BalkanOI2016]Cruise
题目大意: 平面直角坐标系内有n个点,每个点有一个点权. 你从原点p出发,走若干个点然后回到原点. 两个点之间只能笔直走,你的收获为你的路径围起来的区域内的所有店权和除以路径长度. 问最大收益. 思路 ...
- 广义线性模型(logistic和softmax)
再谈广义线性模型之前,先来看一下普通线性模型: 普通线性模型的假设主要有以下几点: 1.响应变量Y和误差项ϵ正态性:响应变量Y和误差项ϵ服从正态分布,且ϵ是一个白噪声过程,因而具有零均值,同方差的特性 ...