CSS学习（二十）-flexbox模型

一、理论：

1.混合版本flexbox模型

a.display

1)flexbox 设置元素为块级容器

2)inline-flexbox 设置元素为内联块伸缩容器

b.display容器的基本使用

1)主要用于IE10浏览器

2.伸缩流方向flex-direction

a.flex-direction

1)row ltr-->自左向右排列，rtl-->自右向左排列

2)row-reverse ltr-->自右向左排列，rtl-->自左向右排列

3)column 按出现顺序从上到下排列

4)column-reverse 伸缩项目从下到上排列

二、实践：

(注：1，2，3是伸缩布局盒，4，5是flexbox模型)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin : 0 10px;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #sidebar-right{
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin : 0 10px;
            -moz-box-flex:1;
            -webkit-box-flex:1;
            box-flex:1;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            box-ordinal-group:2;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        body{
            height: 100%;
            display: -webkit-box;
            display:-moz-box;
            display:box;
            -moz-box-orient: vertical;
            -webkit-box-orient:vertical;
            box-orient:vertical;
            width:100%;
        }
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-box-sizing:border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #sidebar-right{
            -moz-box-ordinal-group: 3;
            -webkit-box-ordinal-group: 3;
            box-ordinal-group: 3;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin:0 10px;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            -moz-box-group: 2;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding: 0;
        }
        .flexbox-container{
            padding:10px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin:50px;
            background-color: hsla(10,80%,10%,0.2);
        }
        .flexbox-container >div{
            width: 100%;
            height: 100px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin: 5px;
            font-size:20px;
            text-align: center;
            line-height: 100px;
            color:#fff;
            font-weight: bold;
        }
        .flexbox-container > div:nth-child(1){
            background-color: hsla(120,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(2){
            background-color: hsla(120,30%,10%,0.8);
        }
        .flexbox-container > div:nth-child(3){
            background-color: hsla(20,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(4){
            background-color: hsla(20,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(5){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(6){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container{
            display: ms-flexbox;
            -ms-flex-direction: row;
        }
    </style>
</head>
<body>
    <div class="flexbox-container">
        <div>Box1</div>
        <div>Box2</div>
        <div>Box3</div>
        <div>Box4</div>
        <div>Box5</div>
        <div>Box6</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding: 0;
        }
        .flexbox-container{
            padding:10px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin:50px;
            background-color: hsla(10,80%,10%,0.2);
        }
        .flexbox-container >div{
            width: 100%;
            height: 100px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin: 5px;
            font-size:20px;
            text-align: center;
            line-height: 100px;
            color:#fff;
            font-weight: bold;
        }
        .flexbox-container > div:nth-child(1){
            background-color: hsla(120,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(2){
            background-color: hsla(120,30%,10%,0.8);
        }
        .flexbox-container > div:nth-child(3){
            background-color: hsla(20,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(4){
            background-color: hsla(20,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(5){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(6){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container{
            display:-ms-flexbox;
            -ms-flex-direction:column;
        }
    </style>
</head>
<body>
    <div class="flexbox-container">
        <div>Box1</div>
        <div>Box2</div>
        <div>Box3</div>
        <div>Box4</div>
        <div>Box5</div>
        <div>Box6</div>
    </div>
</body>
</html>

时间： 2024-11-08 19:17:42

CSS学习（二十）-flexbox模型的相关文章

CSS学习（十二）-文本换行符

一.理论: 1.word-wrap: a.normal 在半角空格或连字符的地方进行换行 b.break-word 不截断英文单词换行 2.word-break: a.normal 中文到边界上的汉字换行,英文从整个单词换行 b.break-all 强行截断英文单词换行 c.keep-all 不允许字断开 3.while-space: a.normal 默认值 b.pre 文本空白处会被浏览器扣留 c.nowrap 文本会在同行上直到遇到换行符 d.pre-line 合并空白符序列,保留换行符

CSS学习（十八）-滚动条、拖动元素、轮廓线

一.理论: 1.overflow-x/overflow-y a.visible 默认值,不添加滚动条 b.auto 添加滚动条 c.hidden 内容溢出容器时,所有内容都将隐藏,不显示滚动条 d.scroll 不论有无溢出,都显示滚动条 e.no-display 当内容溢出容器时不显示元素 f.no-content 当内容溢出容器时不显示内容 2.resize a.none 用户不能拖动元素修改尺寸大小 b.both 用户可以拖动元素,同时修改元素的宽度和高度 c.horizontal 用户可

CSS学习（十五）-CSS颜色模式、CSS颜色透明度

一.理论: 1.CSS3颜色模式 a.RGBA颜色模式,在RGB基础上加了控制alpha透明度的参数 b.HSL颜色模式:色调饱和度亮度 c.HSLA颜色模式:A值取于0-1之间,值越大,透明度越低 2.RGBA/HSLA滤镜格式 a.需要用转换工具才能在ie8及以下版本中使用RGBA/HSLA颜色模式相同的透明度,需要将RGBA/HSLA中的透明值乘以255,然后将其转换成十六进制值二.实践: 1. <!DOCTYPE html> <html lang="en"

CSS学习笔记06 盒子模型

1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. 用公式表示就是:盒子=边框+内边距+内容区域+外边距元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 注意:背景应用于由内容和内边距.边框组成的区域. 可以看到背景色穿

HTML/CSS学习(二)

续...... ============================================================================================= 浮动的样式和特性浮动:就是使元素脱离文档流,按照一定的方式排列,遇到相邻的浮动元素或者父级的边界就停下来浮动的特性 1.浮动的元素排在同一排 2.浮动的元素内容撑开宽度 3.浮动的元素支持所有css样式 4.浮动的元素脱离文档流 5.浮动的元素提升层级半级(属性盖住内容溢出,可做文字环绕di

CSS学习（十四）-CSS颜色之中的一个

一.理论: 1.RGB色彩模式 a.CMYK色彩模式 b.索引色彩模式 (主要用于web) c.灰度模式 d.双色调模式 2.opacity: a.alphavalue:透明度 b.inherit:继承父元素的不透明性二.实践: 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&

Python3.5 学习二十四

本节课程大纲: ----------------------------------------------------------------------------------------------------------- Model: -数据库操作 -验证 Form: class LoginForm(): email = fields.EmailField() -is_valid ->每一个字段进行正则(字段内置正则) + clean_字段 -> clean(__all__) -&g

JavaWeb学习 (二十四)————Filter(过滤器)常见应用

一.统一全站字符编码通过配置参数charset指明使用何种字符编码,以处理Html Form请求参数的中文问题 1 package me.gacl.web.filter; 2 3 import java.io.IOException; 4 import javax.servlet.Filter; 5 import javax.servlet.FilterChain; 6 import javax.servlet.FilterConfig; 7 import javax.servlet.Serv

JavaWeb学习 (二十五)————监听器(Listener)

一.监听器介绍 1.1.监听器的概念监听器是一个专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象,当被监视的对象发生情况时,立即采取相应的行动.监听器其实就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法立即被执行. 1.2.监听器案例--监听window窗口的事件监听器 1 package me.gacl.listener.demo; 2 3 import java.awt.Fram

android学习二十（使用HTTP协议访问网络）

使用HttpURLConnection 在Android上发送HTTP请求的方式一般有两种,HttpURLConnection和HttpClient,现在先学习下 HttpURLConnection的用法. 首先需要获取到HttpURLConnection的实例,一般只需new 出一个URL对象,并传入目标网络的地址,然后调用一下openConnection()方法即可,如下所示: URL URL=new URL("http://www.baidu.com"); HttpURLCon