css 响应式
This commit is contained in:
parent
0879393caf
commit
c05d061e82
BIN
css/定位.assets/image-20201221095702906.png
Normal file
BIN
css/定位.assets/image-20201221095702906.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
css/定位.assets/image-20201221102916077.png
Normal file
BIN
css/定位.assets/image-20201221102916077.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
css/定位.assets/image-20201221103043181.png
Normal file
BIN
css/定位.assets/image-20201221103043181.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
css/定位.assets/image-20201221103321675.png
Normal file
BIN
css/定位.assets/image-20201221103321675.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
css/定位.assets/image-20201221104140216.png
Normal file
BIN
css/定位.assets/image-20201221104140216.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
316
css/定位.md
Normal file
316
css/定位.md
Normal file
@ -0,0 +1,316 @@
|
||||
# 定位
|
||||
|
||||
### 文档流
|
||||
|
||||
文档流就是HTML文档内所有元素按照一定规律排列并显示的形式。
|
||||
|
||||
CSS文档流大致可以分为3种：标准流，浮动流，定位流。
|
||||
|
||||
- 标准流
|
||||
|
||||
- 默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。
|
||||
|
||||
- 浮动流
|
||||
|
||||
- 浮动流只有一种排版方式, 就是水平排版。 它只能设置某个元素在父元素内左对齐或者右对齐。设置了浮动的元素，**将脱离标准流**，之后它将无视元素的display属性，并且都被当做块级元素处理。
|
||||
|
||||
- 定位流
|
||||
|
||||
标准流和浮动流都只能在水平或垂直方向布局元素，但现实是，我们可能需要在上下左右几个方向上同时偏移元素，定位流正是为了解决这一问题而设计的。通过设置元素的position属性，可以让元素处于定为流中，并通过left、right、top、bottom属性设置元素具体的偏移量。
|
||||
|
||||
定为流分为四种：
|
||||
|
||||
a) static 静态定位，实际上所有元素默认都是静态定位的，即处于标准流中。
|
||||
|
||||
b) relative 相对定位，元素保留在标准流中所占用的位置，但实际是**边框及以内的部分将显示在偏移之后的位置**。即虽然元素已经不再原来的位置了，`但之前所占用的空间并不会被释放给其他标准流中的元素`。
|
||||
|
||||
c) absolute 绝对定位，元素脱离标准流，浏览器把它视作块级元素，不论定位之前它是何种元素，其他元素也将无视它。绝对定位的偏移量是相对于其**有定位属性的第一个祖先元素的**。
|
||||
|
||||
d) fixed 固定定位，固定定位和绝对定位相似，但它的偏移量固定的相对于浏览器窗口。
|
||||
|
||||
|
||||
|
||||
### position 应用
|
||||
|
||||
> position 属性用来指定一个元素在网页上的位置 ，一共有5种定位方式
|
||||
|
||||
- **static (默认)**
|
||||
- **relative**
|
||||
- **fixed**
|
||||
- **absolute**
|
||||
- sticky
|
||||
|
||||
|
||||
|
||||
#### 属性详解
|
||||
|
||||
#### static
|
||||
|
||||
------
|
||||
|
||||
static 是position 属性的默认值，这个值使指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置，此时top, right, bottom, left和z-index 都无效
|
||||
|
||||
示例：
|
||||
|
||||
html
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="box" id="one">One</div>
|
||||
<div class="box" id="two">Two</div>
|
||||
<div class="box" id="three">Three</div>
|
||||
<div class="box" id="four">Four</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
css
|
||||
|
||||
```
|
||||
.box {
|
||||
display: inline-block; // 容器内的元素水平排列
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#two {
|
||||
position: static;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: blue;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
##### **position:static**
|
||||
|
||||
<font color="red" size=5>**top,left,right,bottom无效**</font>
|
||||
|
||||
|
||||
|
||||
#### relative
|
||||
|
||||
------
|
||||
|
||||
relative 表示，相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置。 它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离。
|
||||
|
||||
示例：
|
||||
|
||||
html不变
|
||||
|
||||
css改为：
|
||||
|
||||
```
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#two {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### absolute
|
||||
|
||||
------
|
||||
|
||||
absolute 表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
|
||||
|
||||
**它有一个重要的限制条件：定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html。**
|
||||
|
||||
另外，absolute 定位也必须搭配 top、bottom、left、right 这四个属性一起使用。
|
||||
|
||||
示例：
|
||||
|
||||
html 不变 css 改为：
|
||||
|
||||
父元素static定位 子元素 absolute定位
|
||||
|
||||
```
|
||||
.content {
|
||||
margin-left: 100px;
|
||||
border: 2px solid blue;
|
||||
}
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#two {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
<font color="red">**此时 子元素相对于body定位**</font>
|
||||
|
||||
|
||||
|
||||
父元素relative 定位 子元素absolute定位
|
||||
|
||||
css 改为：
|
||||
|
||||
```
|
||||
.content {
|
||||
margin-left: 100px;
|
||||
border: 2px solid blue;
|
||||
}
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#two {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
<font color="red">**此时子元素根据父元素定位**</font>
|
||||
|
||||
|
||||
|
||||
#### fixed
|
||||
|
||||
------
|
||||
|
||||
fixed 表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。
|
||||
|
||||
元素的位置通过 left、top、right 以及 bottom 属性进行规定。
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="header">Header</div>
|
||||
<div class="blank"></div>
|
||||
<p>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
我是内容~ <br/>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
css:
|
||||
|
||||
```
|
||||
.content {
|
||||
width: 500px;
|
||||
height: 200px;
|
||||
overflow: scroll;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: red;
|
||||
color: white;
|
||||
position: fixed;
|
||||
}
|
||||
p {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### sticky
|
||||
|
||||
------
|
||||
|
||||
sticky 跟前面四个属性值都不一样，它会产生动态效果，很像 relative 和 fixed 的结合：一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口）。比如型表格滚动的时候，表头始终固定。
|
||||
|
||||
sticky 生效的前提是，必须搭配 top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于 relative 定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效门槛
|
||||
|
||||
|
||||
|
||||
## 常用的display属性
|
||||
|
||||
1. block 指定元素为块级元素 块级元素（如div）的display属性的默认值
|
||||
|
||||
2. inline 指定元素为行内元素 内联元素（如span,a...able）的display的默认值
|
||||
|
||||
> 在块级元素中指定display:inline 能将此元素转换成内联元素
|
||||
>
|
||||
> 在内联元素中指定 display:block 能将此元素转换成块级元素
|
||||
|
||||
3. flex 详情至弹性盒子 指定元素为弹性盒子
|
||||
|
||||
4. grid 详情自行探索网格布局（grid）
|
||||
|
||||
5. table 指定元素为table
|
||||
@ -140,3 +140,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
|
||||
|
||||
|
||||
|
||||
#### align-self
|
||||
|
||||
允许单个容器成员拥有与其他成员不一样的对齐方式，可以覆盖align-items属性，默认值为auto
|
||||
|
||||
|
||||
BIN
css/自适应和响应式.assets/image-20201221112132098.png
Normal file
BIN
css/自适应和响应式.assets/image-20201221112132098.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
BIN
css/自适应和响应式.assets/image-20201221112409483.png
Normal file
BIN
css/自适应和响应式.assets/image-20201221112409483.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
BIN
css/自适应和响应式.assets/image-20201221143946222.png
Normal file
BIN
css/自适应和响应式.assets/image-20201221143946222.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
221
css/自适应和响应式.md
Normal file
221
css/自适应和响应式.md
Normal file
@ -0,0 +1,221 @@
|
||||
# 自适应和响应式（移动端适配）
|
||||
|
||||
### 是什么
|
||||
|
||||
什么是自适应布局：同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小。
|
||||
|
||||
什么是响应式布局：可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。
|
||||
|
||||
区别：如果网页内容过多，整体会显得拥挤。所以响应式布局是自适应布局的改进，布局和展示的内容可能会有所变动。
|
||||
|
||||
|
||||
|
||||
### 为什么
|
||||
|
||||
- 屏幕显示器的分辨率越来越多样化，在pc端和手机端需要做样式上的平衡，如果每个屏显都需要一套独立的网页或者样式，会加大工作量
|
||||
- 单纯使用meta-viewport虽然可以解决部分问题，但是单纯的进行缩放，达到的平衡点，用户体验不佳
|
||||
|
||||
如携程的pc 和手机版效果
|
||||
|
||||
|
||||
|
||||
segmentfault网站的响应式布局：
|
||||
|
||||
|
||||
|
||||
如果想要更好的用户体验，建议使用响应式布局
|
||||
|
||||
|
||||
|
||||
### 怎么做
|
||||
|
||||
1. 媒体查询（media query）
|
||||
|
||||
媒体查询就是对设备按照某些条件进行查询，使符合条件的设备显示对应的样式 从而实现不同设备样式不同的效果
|
||||
语法：
|
||||
|
||||
@media (max-width: 屏幕最大宽度){
|
||||
|
||||
... 符合条件的样式 跟style样式表一样 含多个元素样式
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
@media (max-width: 960px){ /*屏幕宽度为0~960的样式*/
|
||||
body{
|
||||
background: gold;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 760px){ /*屏幕宽度为0~760的样式*/
|
||||
body{
|
||||
background: pink;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 640px){ /*屏幕宽度为0~640的样式*/
|
||||
body{
|
||||
background: pink;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 520px){ /*屏幕宽度为0~520的样式*/
|
||||
body{
|
||||
background: blue;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 480px){ /*屏幕宽度为0~480的样式*/
|
||||
body{
|
||||
background:gray
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
效果参考b.html 运行
|
||||
|
||||
|
||||
|
||||
2. 百分比布局
|
||||
|
||||
通过百分比单位 " % " 来实现响应式的效果。 比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<!-- -->
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.box{
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
background:orange;
|
||||
}
|
||||
.item1{
|
||||
width: 40%;
|
||||
height:80%;
|
||||
background: paleturquoise;
|
||||
float: left;
|
||||
}
|
||||
.item2{
|
||||
width:40%;
|
||||
height: 80%;
|
||||
background: blue;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item1"></div>
|
||||
<div class="item2"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
3. rem
|
||||
|
||||
rem是一个相对单位，1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小，就可以改变rem所代表的大小。**其实rem布局的本质是等比缩放，一般是基于宽度**.
|
||||
|
||||
这样我们就有了一个可控的统一参考系。我们现在有两个目标：
|
||||
|
||||
- rem单位所代表的尺寸大小和屏幕宽度成正比，也就是设置html元素的font-size和屏幕宽度成正比
|
||||
- rem单位和px单位很容易进行换算，方便我们按照标注稿写css
|
||||
|
||||
|
||||
|
||||
使用：
|
||||
|
||||
借助js
|
||||
|
||||
```
|
||||
//designWidth:设计稿的实际宽度值，需要根据实际设置
|
||||
//maxWidth:制作稿的最大宽度值，需要根据实际设置
|
||||
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
|
||||
;(function(designWidth, maxWidth) {
|
||||
var doc = document,
|
||||
win = window,
|
||||
docEl = doc.documentElement,
|
||||
remStyle = document.createElement("style"),
|
||||
tid;
|
||||
|
||||
function refreshRem() {
|
||||
var width = docEl.getBoundingClientRect().width;
|
||||
maxWidth = maxWidth || 540;
|
||||
width>maxWidth && (width=maxWidth);
|
||||
var rem = width * 100 / designWidth;
|
||||
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
||||
}
|
||||
|
||||
if (docEl.firstElementChild) {
|
||||
docEl.firstElementChild.appendChild(remStyle);
|
||||
} else {
|
||||
var wrap = doc.createElement("div");
|
||||
wrap.appendChild(remStyle);
|
||||
doc.write(wrap.innerHTML);
|
||||
wrap = null;
|
||||
}
|
||||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||||
refreshRem();
|
||||
|
||||
win.addEventListener("resize", function() {
|
||||
clearTimeout(tid); //防止执行两次
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}, false);
|
||||
|
||||
win.addEventListener("pageshow", function(e) {
|
||||
if (e.persisted) { // 浏览器后退的时候重新计算
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}
|
||||
}, false);
|
||||
|
||||
if (doc.readyState === "complete") {
|
||||
doc.body.style.fontSize = "16px";
|
||||
} else {
|
||||
doc.addEventListener("DOMContentLoaded", function(e) {
|
||||
doc.body.style.fontSize = "16px";
|
||||
}, false);
|
||||
}
|
||||
})(750, 750);
|
||||
/*
|
||||
第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
|
||||
第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
|
||||
*/
|
||||
```
|
||||
|
||||
1.复制上面这段代码到你的页面的头部的script标签的最前面。
|
||||
|
||||
2.根据设计稿大小，调整里面的最后两个参数值。
|
||||
|
||||
3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。
|
||||
Loading…
Reference in New Issue
Block a user