Web Frontend Development (3) - css layout

Week Two: Web Frontend Development(3)—css layout

3. CSS布局

3.1 CSS布局概述和示例

3.2 浮动与清除

`float: left;right`

定义元素在哪个方向浮动

浮动元素会生成一个块级框，而不论它本身是何种元素。

<html>
<head>
<style type="text/css">
ul
{
float:right;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
    
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
    
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>
    
</body>
</html>
    

clear:left;right;both;none
- 定义忽略元素在哪个方向的浮动

3.3 让父元素围住浮动的子元素

`Overflow`

定义溢出元素内容区的内容会如何处理

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow: hidden
父元素有float属性(改变父元素属性布局，不建议使用。)

<div style = "float:left;">
- (改变父元素属性布局，不建议使用。)
添加空的元素
- ```
<p style="clear:both; display:block"></p>
```
- 如果想让子元素清除父元素浮动，子元素不能为行内元素

围住浮动样式集

        <style>
        #p1{
            width: 100px;
            height: 200px;
            margin: 0%;
            background-color: red;
            float: left;
        }
        #p2{
            width:200px;
            height: 100px;
            margin:0%;
            background-color: aqua;
            float:right;
        }
        }
        #div2{
           background-color: blue; 
        }
        .clearfix::after{
            content: '.';
            clear:both;
            display:block;
            visibility: hidden;
            height: 0px;
        } /*样式集*/
        </style>
    </head>
    <body>
        <div class="clearfix" id="div1">
            <p id="p1"> p1 </p>
            <p id="p2"> p2 </p>
        </div>
        <div id="div2">
            abcd
        </div>

.clearfix::after{}样式集

3.4 基于浮动的布局demo

微博三栏布局

<!doctype html>
<html>
    <head>
        <style>
        *{margin: 0;padding: 0;}
        #div1{
            width: 1000px;
            background-color: aliceblue;
            margin:0 auto;
        }
        .clearfix::after{
            content: '.';
            clear:both;
            display:block;
            visibility: hidden;
            height: 0px;
        }
        #p1{
            width: 150px;
            height: 800px;
            margin: 0%;
            background-color: red;
            float: left;
        }
        #p2{
            width:600px;
            height: 800px;
            margin-right:10px;
            background-color: aqua;
            float:left;
        }
        #p3{
            width:230px;
            height: 800px;
            margin:0%;
            background-color: rgb(252, 10, 159);
            float:left;
            margin-right:10px;
        }        
  
        </style>
    </head>
    <body>
        <div class="clearfix" id="div1">
            <p id="p1"> p1 </p>
            <p id="p2"> p2 </p>
            <p id="p3"> p3 </p>
        </div>
  
  
    </body>
</html>

google drive三栏布局,中间栏自适应

<!doctype html>
<html>
    <head>
        <style>
        *{margin: 0;padding: 0;}
        #div1{
            width:100%;
            background-color: aliceblue;
            margin:0 auto;
        }
        .clearfix::after{
            content: '.';
            clear:both;
            display:block;
            visibility: hidden;
            height: 0px;
        }
        #p1{
            width: 150px;
            height: 800px;
            margin: 0%;
            background-color: red;
            float: left;
        }
        #p2{
            height: 800px;
            margin-left: 160px;
            margin-right:240px;
            background-color: aqua;
  
        }
        #p3{
            width: 230px;
            height: 800px;
            margin:0%;
            background-color: rgb(252, 10, 159);
            float:right;
        }        
  
        </style>
    </head>
    <body>
        <div class="clearfix" id="div1">
            <p id="p1"> p1 </p>
            <p id="p3"> p3 </p>
            <p id="p2"> p2 </p>
  
        </div>
    </body>
</html>

3.5 定位详解 `position`

建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型

`relative`相对定位

作用：
- 自身作为绝对定位参照物
- 提升自己的层级
- 设置z-index坐标值

相对于其正常位置进行定位。

        #p2{
            width:200px;
            height: 100px;
            margin:0%;
            background-color: aqua;
            position: relative;
            left:20px;
            bottom:30px;
        }

absolute绝对定位
- 作用：
  - 从元素中脱离出来
  - 以祖先元素为定位元素作为参照物
    - 如果祖先元素没有定位元素，以浏览器视口作为参照物
- 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
```
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
```

`fixed`固定定位

作用：
- 固定在浏览器窗口固定位置
- 同background-attachment:fixed

相对于浏览器窗口进行定位。

        #p2{
            width:200px;
            height: 100px;
            margin:0%;
            background-color: aqua;
            position: fixed;
            left:20px;
            bottom:30px;
        }

z-index层叠
- 屏幕到用户坐标系
- z-index只对定位元素有作用。要设置非static的定位属性，z-index才会生效。
- 层叠规则 stacking order：
  1. 后来者居上的准则
  2. z-index哪个大哪个上
- 层叠
  - 规范元素呈现规则

3.6 绝对定位的应用demo

checkbox效果

<!doctype html>
<html>
    <head>
        <style>
            li {
                background:blueviolet;
                color: aliceblue;
                height:60px;
                margin-bottom: 10px;
                line-height: 60px;
                position:relative;
            }
            input{
                position:absolute;
                margin-right:80px;
                height:20px;
                width:20px;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <h2>check you have read:</h2>
        <ul>
            <li>Hello Code <input type = "checkbox"/></li>
            <li>master javascript <input type = "checkbox"/></li>
            <li>js fullstack path <input type = "checkbox"/></li>
        </ul>
    </body>
</html>

3.7 固定定位的应用demo

navigation button

<!doctype html>
<html>
    <head>
        <style>
            body{
                height:900px;
            }
            li {
                background:blueviolet;
                color: aliceblue;
                height:60px;
                margin-bottom: 10px;
                line-height: 60px;
                position:relative;
            }
            input{
                position:absolute;
                right:80px;
                height:20px;
                width:20px;
                top: 20px;
            }
            button{
                width:60px;
                height:60px;
                position:fixed;
                right:50%;
                top:50%;

            }
        </style>
    </head>
    <body>
        <h2>check you have read:</h2>
        <ul>
            <li>Hello Code <input type = "checkbox"/></li>
            <li>master javascript <input type = "checkbox"/></li>
            <li>js fullstack path <input type = "checkbox"/></li>
            <button> 我要反馈</button> /*随窗口移动导航栏*/

        </ul>
    </body>
</html>

3.8 Flexbox布局介绍

用于改善在容器中列表排列，方向和顺序
应用于小的应用程序组件
flex-container and flex-item
- 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
- 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
  
  项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

`display:flex`

想要使用弹性盒布局只需要在父HTML元素设置display属性

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

flex-direction
- 主轴方向，展示方向
- row/row-reverse:水平方向
- column/column-reverse:垂直方向
flex-wrap
- 是否换行
- nowrap:flex项目在同一行显示，默认它们会伸缩以适应flex容器的宽度
- wrap：flex项目在多行显示，从左向右，从上到下依次显示
- wrap-reverse:flex项目在多行显示，从左向右，从下到上
flex-flow简写属性
- 这个属性是flex-direction和flex-wrap属性的简写。
justify-content
- 沿flex容器当前行的主轴对齐flex项目
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
align-items
- 适用于所有的flex容器，它是用来设置每个flex元素在 侧轴上的默认对齐方式。
- stretch:填充整个高度（宽度）
- flex-start:flex容器侧轴开始处
- flex-end:flex容器侧轴结束处
- center:flex容器交叉轴中间
- baseline:基线对齐
align-content
- 适用于所有的flex容器，它是用来设置多行flex元素在 侧轴上的默认对齐方式。
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
order
- 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
```
.item {
  order: <integer>;
}
```
flex-grow
- 定义项目的放大比例，默认为0
- 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
```
.item {
  flex-grow: <number>; /* default 0 */
}
```
flex-shrink
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
```
.item {
  flex-shrink: <number>; /* default 1 */
}
```
flex-basis
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
- 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
```
.item {
  flex-basis: <length> | auto; /* default auto */
}
```
flex简写属性
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
- 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
  
  建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
```
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
```
align-self
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
```
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
```

3.9 Flexbox相关属性详解

元素居中显示

利用flexbox居中，代码可维护性高。

<!doctype html>
<html>
    <style>
        *{margin:0; padding:0}
        .container{
            width:1200px;
            background-color: hotpink;
            height:100vh;
            display:flex;
            justify-content: center; /*水平居中*/
            align-items:center; /*垂直居中*/
        }
        .box{
            height:200px;
            font-size:50px;
            width:300px;
            background:gray;
        }
    </style>
    <body>
        <div class= "container">
            <div class="box box1">1</div>
        </div>
    </body>
</html>

自适应布局

3.10 Flexbox应用demo

3.11 Flexbox兼容性

3.12 Grid布局简介–实现一个简单的Grid系统

网格系统（Grid System）：

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved lines (grid lines) used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner. A grid can be used to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.

<! doctype html>
<html>
    <style>
        .wrapper{
            width: 1100px;
            margin:0 auto;
            background-color:beige;
        }   

        .row1{
            display: flex;
            flex-flow: row wrap;
            justify-content:space-around;
        }
        .row2{
            display: flex;
            flex-flow: row wrap;
        }
        .col{
            font-size: 50px;
            width:70px;
            text-align:center;
            background-color:wheat;
        }
    </style>
    <body>
        <div class = "wrapper">
            <div class = "row1">
                <div class = "col"> 1</div>
                <div class = "col"> 2</div>
                <div class = "col"> 3</div>
                <div class = "col"> 4</div>
                <div class = "col"> 5</div>
                <div class = "col"> 6</div>
                <div class = "col"> 7</div>
                <div class = "col"> 8</div>
                <div class = "col"> 9</div>
                <div class = "col"> 10</div>
                <div class = "col"> 11</div>
                <div class = "col"> 12</div>
            </div>
            <div class = "row2">
                    <div class = "col" id="1" style = "flex-grow:1"> A</div>
                    <div class = "col" id="2" style = "flex-grow:2">B</div>
                    <div class = "col" id="3" style = "flex-grow:3">C</div>
                    <div class = "col" id="4" style = "flex-grow:4">D</div>
                </div>
        </div>

    </body>
</html>

3.13 Booostrap Grid 系统应用demo

Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.
- 响应式网页设计(responsive web design)：an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.[2][3][4][5]
- A site designed with RWD[2][6] adapts the layout to the viewing environment by using fluid, proportion-based grids,[7][8] flexible images,[9][10][11] and CSS3 media queries,[4][12][13] an extension of the @media rule, in the following ways:[14]
  - The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.[8]
  - Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.[9]
  - Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, e.g. width of the rendering surface (browser window width or a physical display size).

PREVIOUSIntroduction to Computational Thinking and Data Science(2)

NEXTIntroduction to Computational Thinking and Data Science(1)

Web Frontend Development (3) - css layout

Week Two: Web Frontend Development(3)—css layout

3. CSS布局

3.1 CSS布局概述和示例

3.2 浮动与清除

`float: left;right`

`clear:left;right;both;none`

3.3 让父元素围住浮动的子元素

`Overflow`

围住浮动样式集

3.4 基于浮动的布局demo

3.5 定位详解 `position`

`relative`相对定位

`absolute`绝对定位

`fixed`固定定位

`z-index`层叠

3.6 绝对定位的应用demo

3.7 固定定位的应用demo

3.8 Flexbox布局介绍

flex-container and flex-item

`display:flex`

`flex-direction`

`flex-wrap`

`flex-flow`简写属性

`justify-content`

`align-items`

`align-content`

`order`

`flex-grow`

`flex-shrink`

`flex-basis`

`flex`简写属性

`align-self`

3.9 Flexbox相关属性详解

元素居中显示

3.10 Flexbox应用demo

3.11 Flexbox兼容性

3.12 Grid布局简介–实现一个简单的Grid系统

3.13 Booostrap Grid 系统应用demo

Week Two: Web Frontend Development(3)—css layout

3. CSS布局

3.1 CSS布局概述和示例

3.2 浮动与清除

float: left;right

clear:left;right;both;none

3.3 让父元素围住浮动的子元素

Overflow

围住浮动样式集

3.4 基于浮动的布局demo

3.5 定位详解 position

relative相对定位

absolute绝对定位

fixed固定定位

z-index层叠

3.6 绝对定位的应用demo

3.7 固定定位的应用demo

3.8 Flexbox布局介绍

flex-container and flex-item

display:flex

flex-direction

flex-wrap

flex-flow简写属性

justify-content

align-items

align-content

order

flex-grow

flex-shrink

flex-basis

flex简写属性

align-self

3.9 Flexbox相关属性详解

元素居中显示

3.10 Flexbox应用demo

3.11 Flexbox兼容性

3.12 Grid布局简介–实现一个简单的Grid系统

3.13 Booostrap Grid 系统应用demo

`float: left;right`

`clear:left;right;both;none`

`Overflow`

3.5 定位详解 `position`

`relative`相对定位

`absolute`绝对定位

`fixed`固定定位

`z-index`层叠

`display:flex`

`flex-direction`

`flex-wrap`

`flex-flow`简写属性

`justify-content`

`align-items`

`align-content`

`order`

`flex-grow`

`flex-shrink`

`flex-basis`

`flex`简写属性

`align-self`