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

时间  2019-11-13
标签 css#flex css flex box border size onresize event media queries 栏目 CSS 繁體版
原文   原文链接

  • Flexboxjavascript

  • Pseudo-classescss

  • box-sizing: border-boxhtml

  • HTML DOM event  resize()java

  • @media Queries： 根据一些css条件，触发一些css的变化。（无需javascript）
  • Responsive CSS ： 网格Gird就是模拟了Bootstrap，配合@media，能够激发不一样的类。

 

Knowledge: Flexbox Layout Module 

我的感受能够替代Bootstrap4的布局了。固然仍是Bootstrap4用起来更方便一些。 css3

传统的布局：web

  1. Block
  2. Inline
  3. Table
  4. Positioned, 用于指定元素位置。

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

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

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

 

方法：bootstrap

先定义根元素特性

    1. 定义一个根元素，做为容器<div class='flex-container'>
    2. 根元素:  display: flex;  让这个元素使用a block-level flex的模式
    3. 若是一个元素成为flex container, 它可使用相关的6个特性(点击)：
        • 用这个调整导航栏按钮靠右， 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种选项。ide

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

 

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

技巧：

  1. 使用4组<div>，每组是一列column, 占flex: 25%。<div>添加max-width:25%特性。
  2. 再根据@media (max-width: xxxpx) { ... } 对子元素设置flex-basis，并添加max-width: XX%。
  3. 若是屏幕最小，子元素独占能够改为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;    
　}  
}

 

 

相关： window.matchMedia()方法，

返回 a MediaQueryList object representing the results of the specified CSS media query string.

The value of the matchMedia() method can be any of the media features of the CSS @media rule, like min-height, min-width, orientation, etc.

 

CSS Responsive Web Design

让网页使用各种设备。

只使用HTML , CSS。无需JavaScript

 

前置<head>内。

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

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

 

⚠️：

  1. 不要使用固定宽度的元素。好比image。
  2. 不要让内容依赖一个固定的视窗。不一样的设备width也不一样。
  3. 使用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>
 



        

            

        	





    

		

            
相关文章

            

                

                

                    

                

            


            
相关标签/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公众号
    

    

           欢迎关注本站公众号,获取更多信息

        
    




    

    




	


	







    

        联系我们
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程