CSS#Flex-box, border-size, onresize() event, Media Queries
-
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;
方法:
先定义根元素特性
- 定义一个根元素,作为容器<div class='flex-container'>
- 根元素: display: flex; 让这个元素使用a block-level flex的模式
- 如果一个元素成为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;
}
}
返回 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">
⚠️:
- 不要使用固定宽度的元素。比如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
块级别元素如<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>