CSS#Flex-box, border-size, onresize() event, Media Queries

最新推荐文章于 2024-05-23 19:41:25 发布

weixin_30488085

最新推荐文章于 2024-05-23 19:41:25 发布

阅读量261

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chentianwei/p/9696585.html

版权

Flexbox
Pseudo-classes
box-sizing: border-box
HTML DOM event resize()
@media Queries：根据一些css条件，触发一些css的变化。（无需javascript）
Responsive CSS ：网格Gird就是模拟了Bootstrap，配合@media，可以激发不同的类。

Knowledge: Flexbox Layout Module

个人感觉可以替代Bootstrap4的布局了。当然还是Bootstrap4用起来更方便一些。

传统的布局：

Block
Inline
Table
Positioned, 用于指定元素位置。

新的Flexbox. 用于响应式布局，无需使用float 或 positioning.

父元素设置:
display: flex | inline-flex

子元素布局：
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

方法：

先定义根元素特性

1. 定义一个根元素，作为容器<div class='flex-container'>
2. 根元素: display: flex; 让这个元素使用a block-level flex的模式
3. 如果一个元素成为flex container, 它可以使用相关的6个特性(点击)：

flex-direction: row | row-reverse | column | column-reverse | initial |inherit
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow 就是?两个特性的方便写法。
justify-content：文本对齐 flex-start|flex-end|center|space-between|space-around

- 用这个调整导航栏按钮靠右， flex-end。不要用flex-derection: row-reverse
align-items: flex-start|flex-end|center| stretch(默认：拉伸填满container)
- 垂直方向上的一行元素靠上，靠下，还是居中,
align-content: 排列flex lines, 而不是items。用于修改flex-wrap的行为。
完美的居中的一个元素：同时使用justify-content: center和align-items: center

再定义子元素特性：

order : 当父元素定义flex后，子元素根据order：number特性来进行排序
flex-grow: number; 设置子元素相对其他子元素的grow相对大小，数字是倍数。
flex-shrink: number; 这个特性可以用于animatiable ，相当于其他的子元素，压缩多少。
flex-basis：number | auto | inherit | initial ;
- 指定最初的子元素的length; 例子：flex-basis: 200px;
- flex-basis: auto; 默认值。可以不写；代表长度等于flexible item的长度。如item没有指定长度，使用item的content的长度。
flex: flex-grow, flex-shrink, flex-basis;
- flex特性指定一个flem item如何grow/shrink以便适应container中可利用的空间。
- 三合一。例子：flex: 0 0 200px;
- 三个特性都是可以配合animation
align-self特性重写alignment设置，不再使用container的align-items特性。
- flex-start | flex-end | center

object.style.flexGrow = "number|initial|inherit"
document.getElementById("myBlueDiv".style.flexGrow = "5";

网站完整的页面布局案例

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website2

flex有auto, initial, none， <positive-number>4种选项。

flex: auto;

根据item的width,height特性。为了适应container, 既可以放大也可以缩小。相当于flex: 1 1 auto;

flex:initial;

这是默认值。根据item的width/height特性。只能缩小，来适应container，不能放大。相当于flex: 0 1 auto;

⚠️子元素不会缩小到小于minimum content size。

flex: none;

根据item的width/height特性。完全不能弯曲inflexible。不会根据container，改变自身。相当于flex: 0 0 auto;

左右的布局：

side位于左边，main位于右边。处于同一个<div>内。比较固定布局的写法。

bootstrap4，可以通过设置适应不同的设备大小，有不同的布局。在较小的屏幕, main全占，并隐藏side。


.side {
// 带单位的。是flex-basis;
    flex: 20%;
    background-color: #f1f1f1;
    padding: 20px;
}

/* Main column */
.main {
    flex: 70%;
    background-color: white;
    padding: 20px;
}

子元素在垂直排列时，如何全占一行：

垂直需要容器元素设置flex-direction: column;

然后，在子元素，使用text-align: center即可。无需使用align-items

另一个案例：图片的不规则排序 (伪)

技巧：

使用4组<div>，每组是一列column, 占flex: 25%。<div>添加max-width:25%特性。
再根据@media (max-width: xxxpx) { ... } 对子元素设置flex-basis，并添加max-width: XX%。
如果屏幕最小，子元素独占可以改成flex-direction: column.

⚠️：根元素需要添加flex-wrap: wrap。

Pseudo-classes

:nth-of-type(n) 选择满足某种类型的元素。或者同nth-child(n)

<style> 
p:nth-of-type(odd) {
    background: red;
}

p:nth-of-type(even) {
    background: blue;
}
</style>

<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>

</body>
</html>

:nth-child(n) 　　选择是父元素的第n个子元素的所有某元素。

知识点css#boxSizing

用于如何计算width| height。

设置为border-box，width = contentwidth + padding + border

设置为content-box, width - content-width

目的：布景的调整。

个人理解，把content的宽／高缩减一点，留给padding+border，让总和等于width/height

例子：https://www.w3schools.com/CSSref/tryit.asp?filename=trycss3_js_box-sizing

知识点 HTML DOM event resize()

when the browser window has been resized。

`@media` rule

类似Bootstrap4中对不同设备宽度的设置。*-sm, *-lg

针对不同的types/devices的宽／高特性，使用不同的web style。

Media queries can be used to check many things, such as:

width and height of the viewport（屏幕宽／高）
width and height of the device（设备宽／高）
orientation (is the tablet/phone in landscape or portrait mode?)平板\手机的方向：屏幕横过来或者竖立。
resolution(clear picture)清晰度／分辨率

格式：

@media not|only mediatype and (expressions) {
    CSS-Code;
}
或者其他
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

例子：

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

mediatype: all | print | screen | speech (屏幕阅读器)

一般使用screen，包括电脑，平板，手机。

expressions: 就是触发点。

大量案例：

可以看?的flex的案例：https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media3

对.row,.navbar改变了flex-direction布局。
／／省略了mediatype。

@media (max-width: 700px) {
    .row, .navbar {   
        flex-direction: column;　　／／从row变为column
    }
　　 .side {
　　　　 display: none; //隐藏边栏。 
　　}
}

还可以根据浏览器的orientation布局：（横屏landscape：宽 > 高；竖屏 portrait: 宽 < 高）

//当宽 > 高时， body元素的背景色改变。
@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

使用逗号，多个and来联合:

// 当屏幕宽度在600到900之间，或者屏幕宽度大于1100px时：

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
     font-size: 50px;
  　　background: yellow;    
　}  
}

CSS Responsive Web Design

让网页使用各类设备。

只使用HTML , CSS。无需JavaScript

前置<head>内。

设置Viewport! 用户的可用区域。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

⚠️：

不要使用固定宽度的元素。比如image。
不要让内容依赖一个固定的视窗。不同的设备width也不同。
使用CSS#media查询，从小到大的屏幕设计。

Grid-View

就是bootstrap的col-*的用法。一行12列。全width是100%

第一步：建立响应网格：

／／所有元素自动规范border, padding, content的和等于 width | height。
* {
    box-sizing: border-box;
}

第二步：使用col-*分列。

col-(1~12) ： 1列占width的8.33%。

col-3的意思就是占3列的宽度，col-10就是占10列的宽度。注意兄弟元素的宽度总和是12列。

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


[class*= "col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Media Query

必须先要考虑的就是移动设备。

Bootstrap4就是封装了CSS#Gird的功能。

案例：

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s

这个例子，使用@media设计了2套适合平板和台式机的样式。

col-s-*用于平板，col-*用于台式机。

使用@media触发效果。

/* For 手机 phones: */
[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 600px) {
/* For 平板tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
。。。
}
@media only screen and (min-width: 768px) {
/* For 台式机: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
。。。
}

<div class="row">
    <div class="col-3 col-s-3 menu">。。。</div>
    <div class="col-6 col-s-9">。。。</div>
    <div class="col-3 col-s-12">。。。</div>
</div>

响应 image

width, max-width 区别

块级别元素如<p>，通过设定它的width=“500px”,会固定宽度，

如果content的单行超过window宽度，会增加横轴scroll bar。
如果小于window宽度，会正常显示

块级别元素<p>，通过设定它的max-width=“500px”,

如果content的单行超过window宽度，会wrap 换行。
如果content的单行，超过max-width，会wrap换行。
最大是多大，适应窗口。

块级别元素<p>, 设定max-width= 50%;

如果content单行超过窗口宽度的一半，wrap换行。永远占窗口宽度的一半。

非块元素<img>, 设定max-width="100%"

如果它的默认宽度 < window.innerWidth，则正常显示, 右侧留margin。
如果它的默认宽度 > window.innerwidth, 会<img>的width会缩小。并全占一行宽度。

非块元素<img>, 设定width=100%

始终全占一行。

案例：https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image3

img {
    width: 100%;
    height: auto;
}

当屏幕在600px到768px之间时：<img>所处<div clas='col-6 col-s-9'>, 适应col-s-9，占全宽的9份。

当屏幕大于768px时， <img>所处<div clas='col-3 col-s-9'>, 适应col-6，占全宽的3份。

当屏幕小于600px时，全部元素都是占全单行显示。

背景图：

background-size： contain | 100% 100% | cover

图片会去适应容器。容器宽度 > 图片默认宽度时，图片使用自身宽度。

<style>
div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}
</style>

the background image will stretch to cover the entire content area:
横向拉伸到整个容器。图片如果默认小于窗口，图片会变形。

<style>
div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}
</style>

background-size: cover，全占上容器，横竖都会拉伸。

利用@media 可以在不同的devise上使用, 大小不同但内容相似的图标。也可以使用<picture>标签设置。

@media 的min-device-width可以替代min-width。

HTML5新的<picture>标签

设置不同的srcset='xxx.jpg'

使用特性srcset, media

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

转载于:https://www.cnblogs.com/chentianwei/p/9696585.html

weixin_30488085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS#Flex-box, border-size, onresize() event, Media Queries

FlexboxPseudo-classesbox-sizing: border-boxHTML DOM event resize()@media Queries：根据一些css条件，触发一些css的变化。（无需javascript）Responsive CSS ：网格Gird就是模拟了Bootstrap，配合@media，可以激发不同的...
复制链接

扫一扫