Compare commits
49 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 907511778b | |||
| c5f18c6051 | |||
| 011d9328b0 | |||
| f18f1cb9a5 | |||
| 55c598cdb1 | |||
| 73467822cb | |||
| 812be57880 | |||
| 71190d870d | |||
| 9bf8e8d020 | |||
| eca64f86c0 | |||
| 5d39890424 | |||
| f230cfc37f | |||
| 6dacee749f | |||
| b8df71627e | |||
| 9853dbdd91 | |||
| 1c003714c3 | |||
| dd41f144fc | |||
| 9c626405fd | |||
cb53e8f37d
|
|||
|
311192c54c
|
|||
|
bc0fdce976
|
|||
| f9cc8781cc | |||
|
46170ef23d
|
|||
|
97a4f337d6
|
|||
|
de877bd04f
|
|||
|
56dd06fae1
|
|||
|
2ac1c5b5b9
|
|||
|
b102698d90
|
|||
|
beacca0952
|
|||
| 7bc1ee59ee | |||
|
63638fff16
|
|||
|
7836f1f7de
|
|||
|
6231dbaeda
|
|||
| ab28a5032b | |||
|
74e6f8295e
|
|||
|
6fb32aa856
|
|||
| 704a4b02b2 | |||
| 19ba3b009e | |||
|
d25956be08
|
|||
|
54f0573948
|
|||
|
d39715f110
|
|||
| c05d061e82 | |||
|
0879393caf
|
|||
|
58632cc952
|
|||
|
cf0ffb3672
|
|||
| 1e78ce19f9 | |||
|
04ea9eecd7
|
|||
| d16db840ea | |||
| 865bb0bcb5 |
12
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
12
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||||
|
<option name="ignoredErrors">
|
||||||
|
<list>
|
||||||
|
<option value="N802" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</inspection_tool>
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
6
.idea/inspectionProfiles/profiles_settings.xml
generated
Normal file
6
.idea/inspectionProfiles/profiles_settings.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<settings>
|
||||||
|
<option name="USE_PROJECT_PROFILE" value="false" />
|
||||||
|
<version value="1.0" />
|
||||||
|
</settings>
|
||||||
|
</component>
|
||||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/课件.iml" filepath="$PROJECT_DIR$/.idea/课件.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
33
.idea/workspace.xml
generated
Normal file
33
.idea/workspace.xml
generated
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ChangeListManager">
|
||||||
|
<list default="true" id="7562293e-4f6e-4efe-9f55-2c2b789e6836" name="Default Changelist" comment="" />
|
||||||
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
|
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||||
|
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||||
|
</component>
|
||||||
|
<component name="Git.Settings">
|
||||||
|
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectId" id="1mxNVxsC6UEcXEtHROKSTbybAwC" />
|
||||||
|
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
|
||||||
|
<component name="PropertiesComponent">
|
||||||
|
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
|
||||||
|
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
|
||||||
|
<property name="settings.editor.selected.configurable" value="configurable.group.appearance" />
|
||||||
|
</component>
|
||||||
|
<component name="SvnConfiguration">
|
||||||
|
<configuration />
|
||||||
|
</component>
|
||||||
|
<component name="TaskManager">
|
||||||
|
<task active="true" id="Default" summary="Default task">
|
||||||
|
<changelist id="7562293e-4f6e-4efe-9f55-2c2b789e6836" name="Default Changelist" comment="" />
|
||||||
|
<created>1610431311581</created>
|
||||||
|
<option name="number" value="Default" />
|
||||||
|
<option name="presentableId" value="Default" />
|
||||||
|
<updated>1610431311581</updated>
|
||||||
|
</task>
|
||||||
|
<servers />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
8
.idea/课件.iml
generated
Normal file
8
.idea/课件.iml
generated
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="PYTHON_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
111
css/css简介.md
Normal file
111
css/css简介.md
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
# css(层叠样式表)
|
||||||
|
|
||||||
|
### css 介绍
|
||||||
|
|
||||||
|
层叠样式表（**C**ascading **S**tyle **S**heet，简称：CSS）是为网页添加样式的代码。
|
||||||
|
|
||||||
|
css 和html 类似，不是真正的编程语言，甚至不是标记语言，它是一门样式表语言，也就是说我们可以用它来选择性的为HTML元素添加样式
|
||||||
|
|
||||||
|
### css 使用
|
||||||
|
|
||||||
|
##### 在html 中使用css
|
||||||
|
|
||||||
|
- 行内样式
|
||||||
|
|
||||||
|
在元素标签中写入<style> 属性，将样式写在属性中
|
||||||
|
|
||||||
|
格式为： style=" 属性1 : 值； 属性2 : 值；属性3 : 值；"多个属性用分号“ ; ”隔开。
|
||||||
|
|
||||||
|
- 内联样式
|
||||||
|
在<head>标签中加入<style>标签将CSS样式表写到该标签中。值后跟分号。
|
||||||
|
|
||||||
|
格式：
|
||||||
|
|
||||||
|
```
|
||||||
|
.class{
|
||||||
|
属性1 : 值；
|
||||||
|
属性2ytu : 值；
|
||||||
|
属性3 : 值 ；
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- 外联样式
|
||||||
|
|
||||||
|
在<head>标签中用<link>标签引入
|
||||||
|
|
||||||
|
```
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/layout.css" >
|
||||||
|
<!--href中写css样式表存放的路径-->
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### css 语法
|
||||||
|
|
||||||
|
示例：
|
||||||
|
|
||||||
|
```
|
||||||
|
p{
|
||||||
|
color:red
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
> p 是选择器，可以选择一个或多个html 元素
|
||||||
|
>
|
||||||
|
> color:red 整体是声明 。 一个单独的规则，用来指定添加样式元素的属性
|
||||||
|
>
|
||||||
|
> color 是属性（改 变HTML元素样式的途径），在等号左边 示例中的color 是p 元素的属性
|
||||||
|
>
|
||||||
|
> red 是属性值 在冒号右边
|
||||||
|
|
||||||
|
规则：
|
||||||
|
|
||||||
|
> - 每个规则集，除了选择器部分，都应该包含在成对的大括号（{}）里
|
||||||
|
> - 每个声明里要用冒号（:）将属性和属性值分隔开
|
||||||
|
> - 每个规则集里 要用分号（;）将各个声明分隔开
|
||||||
|
|
||||||
|
修改多个属性：
|
||||||
|
|
||||||
|
```
|
||||||
|
p {
|
||||||
|
color: red;
|
||||||
|
width: 500px;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### css 选择器
|
||||||
|
|
||||||
|
| 选择器名称 | 选择的内容 | 示例 |
|
||||||
|
| ------------------------ | ------------------------------------------------ | ------------------------------------------------------- |
|
||||||
|
| 标签选择器（元素选择器） | 所有是这个标签的HTML元素 | p 选择整个文件中的所有p 标签 |
|
||||||
|
| id选择器 | 具有特定id 的html元素 | #my 选择标签内id为‘my’的元素 |
|
||||||
|
| 类选择器 | 带有class=''特定类的元素 | .nav 选择标签内class="nav"的元素 |
|
||||||
|
| 属性选择器 | 拥有特定属性的元素 | img[src=‘../a.jpg’] 选择<img src="xxx"/> 而不是 <img /> |
|
||||||
|
| 伪类选择器 | 特殊状态下的特殊元素 | a:hover 鼠标悬停在链接上时的样式 |
|
||||||
|
| 通用选择器 | 所有元素 | * |
|
||||||
|
| E,F | 同时匹配所有的E和F元素，E，F之间用逗号分隔 | div , p{} |
|
||||||
|
| E F | 匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | div p |
|
||||||
|
| E>F | 匹配所有E元素的子元素F | div > p |
|
||||||
|
| E+F | 匹配所有紧跟E元素之后的同级元素F | div+p |
|
||||||
|
|
||||||
|
#### css 伪类
|
||||||
|
|
||||||
|
| 选择器 | 含义 |
|
||||||
|
| ------------- | ------------------------- |
|
||||||
|
| E:first-child | 匹配父元素的第一个子元素 |
|
||||||
|
| E:hover | 鼠标悬停 |
|
||||||
|
| E:focus | 获得焦点 |
|
||||||
|
| E:active | 鼠标按下还没释放的元素 |
|
||||||
|
| E:before | 在E元素之前插入生成的内容 |
|
||||||
|
| E:after | 在E元素之后插入生成的内容 |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
p :hover{
|
||||||
|
|
||||||
|
color:red;
|
||||||
|
|
||||||
|
}
|
||||||
278
css/flex.md
Normal file
278
css/flex.md
Normal file
@@ -0,0 +1,278 @@
|
|||||||
|
# flex
|
||||||
|
|
||||||
|
网页布局（layout）是 CSS 的一个重点应用。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
布局的传统解决方案，基于[盒状模型](https://developer.mozilla.org/en-US/docs/Web/CSS/box_model)，依赖 [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) 属性 + [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position)属性 + [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float)属性。它对于那些特殊布局非常不方便，比如，[垂直居中](https://css-tricks.com/centering-css-complete-guide/)就不容易实现。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Flex 布局将成为未来布局的首选方案。本文介绍它的语法，[下一篇文章](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)给出常见布局的 Flex 写法。网友 [JailBreak](http://vgee.cn/) 为本文的所有示例制作了 [Demo](http://static.vgee.cn/static/index.html)，也可以参考。
|
||||||
|
|
||||||
|
以下内容主要参考了下面两篇文章：[A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 和 [A Visual Guide to CSS3 Flexbox Properties](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)。
|
||||||
|
|
||||||
|
## 一、Flex 布局是什么？
|
||||||
|
|
||||||
|
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
|
||||||
|
|
||||||
|
任何一个容器都可以指定为 Flex 布局。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .box{
|
||||||
|
> display: flex;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
行内元素也可以使用 Flex 布局。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .box{
|
||||||
|
> display: inline-flex;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
Webkit 内核的浏览器，必须加上`-webkit`前缀。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .box{
|
||||||
|
> display: -webkit-flex; /* Safari */
|
||||||
|
> display: flex;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
注意，设为 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效。
|
||||||
|
|
||||||
|
## 二、基本概念
|
||||||
|
|
||||||
|
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。
|
||||||
|
|
||||||
|
项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。
|
||||||
|
|
||||||
|
## 三、容器的属性
|
||||||
|
|
||||||
|
以下6个属性设置在容器上。
|
||||||
|
|
||||||
|
> - flex-direction
|
||||||
|
> - flex-wrap
|
||||||
|
> - flex-flow
|
||||||
|
> - justify-content
|
||||||
|
> - align-items
|
||||||
|
> - align-content
|
||||||
|
|
||||||
|
### 3.1 flex-direction属性
|
||||||
|
|
||||||
|
`flex-direction`属性决定主轴的方向（即项目的排列方向）。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .box {
|
||||||
|
> flex-direction: row | row-reverse | column | column-reverse;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
它可能有4个值。
|
||||||
|
|
||||||
|
> - `row`（默认值）：主轴为水平方向，起点在左端。
|
||||||
|
> - `row-reverse`：主轴为水平方向，起点在右端。
|
||||||
|
> - `column`：主轴为垂直方向，起点在上沿。
|
||||||
|
> - `column-reverse`：主轴为垂直方向，起点在下沿。
|
||||||
|
|
||||||
|
### 3.2 flex-wrap属性
|
||||||
|
|
||||||
|
默认情况下，项目都排在一条线（又称"轴线"）上。`flex-wrap`属性定义，如果一条轴线排不下，如何换行。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .box{
|
||||||
|
> flex-wrap: nowrap | wrap | wrap-reverse;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
它可能取三个值。
|
||||||
|
|
||||||
|
（1）`nowrap`（默认）：不换行。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
（2）`wrap`：换行，第一行在上方。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
（3）`wrap-reverse`：换行，第一行在下方。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 3.3 flex-flow
|
||||||
|
|
||||||
|
`flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .box {
|
||||||
|
> flex-flow: <flex-direction> || <flex-wrap>;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
### 3.4 justify-content属性
|
||||||
|
|
||||||
|
`justify-content`属性定义了项目在主轴上的对齐方式。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .box {
|
||||||
|
> justify-content: flex-start | flex-end | center | space-between | space-around;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
|
||||||
|
|
||||||
|
> - `flex-start`（默认值）：左对齐
|
||||||
|
> - `flex-end`：右对齐
|
||||||
|
> - `center`： 居中
|
||||||
|
> - `space-between`：两端对齐，项目之间的间隔都相等。
|
||||||
|
> - `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
|
||||||
|
|
||||||
|
### 3.5 align-items属性
|
||||||
|
|
||||||
|
`align-items`属性定义项目在交叉轴上如何对齐。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .box {
|
||||||
|
> align-items: flex-start | flex-end | center | baseline | stretch;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
|
||||||
|
|
||||||
|
> - `flex-start`：交叉轴的起点对齐。
|
||||||
|
> - `flex-end`：交叉轴的终点对齐。
|
||||||
|
> - `center`：交叉轴的中点对齐。
|
||||||
|
> - `baseline`: 项目的第一行文字的基线对齐。
|
||||||
|
> - `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
|
||||||
|
|
||||||
|
### 3.6 align-content属性
|
||||||
|
|
||||||
|
`align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .box {
|
||||||
|
> align-content: flex-start | flex-end | center | space-between | space-around | stretch;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
该属性可能取6个值。
|
||||||
|
|
||||||
|
> - `flex-start`：与交叉轴的起点对齐。
|
||||||
|
> - `flex-end`：与交叉轴的终点对齐。
|
||||||
|
> - `center`：与交叉轴的中点对齐。
|
||||||
|
> - `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。
|
||||||
|
> - `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
|
||||||
|
> - `stretch`（默认值）：轴线占满整个交叉轴。
|
||||||
|
|
||||||
|
### 四、项目的属性
|
||||||
|
|
||||||
|
以下6个属性设置在项目上。
|
||||||
|
|
||||||
|
> - `order`
|
||||||
|
> - `flex-grow`
|
||||||
|
> - `flex-shrink`
|
||||||
|
> - `flex-basis`
|
||||||
|
> - `flex`
|
||||||
|
> - `align-self`
|
||||||
|
|
||||||
|
### 4.1 order属性
|
||||||
|
|
||||||
|
`order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .item {
|
||||||
|
> order: <integer>;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 4.2 flex-grow属性
|
||||||
|
|
||||||
|
`flex-grow`属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .item {
|
||||||
|
> flex-grow: <number>; /* default 0 */
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
|
||||||
|
|
||||||
|
### 4.3 flex-shrink属性
|
||||||
|
|
||||||
|
`flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .item {
|
||||||
|
> flex-shrink: <number>; /* default 1 */
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
如果所有项目的`flex-shrink`属性都为1，当空间不足时，都将等比例缩小。如果一个项目的`flex-shrink`属性为0，其他项目都为1，则空间不足时，前者不缩小。
|
||||||
|
|
||||||
|
负值对该属性无效。
|
||||||
|
|
||||||
|
### 4.4 flex-basis属性
|
||||||
|
|
||||||
|
`flex-basis`属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .item {
|
||||||
|
> flex-basis: <length> | auto; /* default auto */
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
它可以设为跟`width`或`height`属性一样的值（比如350px），则项目将占据固定空间。
|
||||||
|
|
||||||
|
### 4.5 flex属性
|
||||||
|
|
||||||
|
`flex`属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .item {
|
||||||
|
> flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
该属性有两个快捷值：`auto` (`1 1 auto`) 和 none (`0 0 auto`)。
|
||||||
|
|
||||||
|
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
|
||||||
|
|
||||||
|
### 4.6 align-self属性
|
||||||
|
|
||||||
|
`align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。
|
||||||
|
|
||||||
|
> ```css
|
||||||
|
> .item {
|
||||||
|
> align-self: auto | flex-start | flex-end | center | baseline | stretch;
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
|
||||||
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 |
318
css/定位.md
Normal file
318
css/定位.md
Normal file
@@ -0,0 +1,318 @@
|
|||||||
|
# 定位
|
||||||
|
|
||||||
|
### 文档流
|
||||||
|
|
||||||
|
文档流就是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;
|
||||||
|
bottom:1px;
|
||||||
|
right:9px
|
||||||
|
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
|
||||||
BIN
css/弹性盒子.assets/image-20201218164425451.png
Normal file
BIN
css/弹性盒子.assets/image-20201218164425451.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
css/弹性盒子.assets/image-20201218165134275.png
Normal file
BIN
css/弹性盒子.assets/image-20201218165134275.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
css/弹性盒子.assets/image-20201218165414077.png
Normal file
BIN
css/弹性盒子.assets/image-20201218165414077.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
css/弹性盒子.assets/image-20201218165546847.png
Normal file
BIN
css/弹性盒子.assets/image-20201218165546847.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
css/弹性盒子.assets/image-20201218165635626.png
Normal file
BIN
css/弹性盒子.assets/image-20201218165635626.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
css/弹性盒子.assets/image-20201218165726666.png
Normal file
BIN
css/弹性盒子.assets/image-20201218165726666.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
css/弹性盒子.assets/image-20201218170008166.png
Normal file
BIN
css/弹性盒子.assets/image-20201218170008166.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
146
css/弹性盒子.md
Normal file
146
css/弹性盒子.md
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
# 弹性盒子（flex）
|
||||||
|
|
||||||
|
### flex 简介
|
||||||
|
|
||||||
|
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
|
||||||
|
|
||||||
|
任一个容器都可以指定为 Flex 布局。
|
||||||
|
|
||||||
|
#### 将一个html元素定义为flex 元素
|
||||||
|
|
||||||
|
> 使用 display: flex;
|
||||||
|
>
|
||||||
|
> 内联元素使用 display: inline-flex;
|
||||||
|
|
||||||
|
示例：
|
||||||
|
|
||||||
|
```
|
||||||
|
.box{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
内联元素：
|
||||||
|
|
||||||
|
```
|
||||||
|
.box{
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 基本概念
|
||||||
|
|
||||||
|
> 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
|
||||||
|
|
||||||
|
容器内默认存在两根轴 分别是水平的主轴（main axis）和垂直的交叉轴(cross axis)
|
||||||
|
|
||||||
|
主轴的开始位置与容器边框的交叉点叫做main start 结束点叫做 main end
|
||||||
|
|
||||||
|
交叉轴的开始位置与容器边框的交叉点叫做 cross start 结束位置叫做 cross end
|
||||||
|
|
||||||
|
默认容器成员沿主轴排列，单个容器成员占据的空间叫做main-size
|
||||||
|
|
||||||
|
单个容器成员占据垂直交叉轴的控件叫做cross-size
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 常用属性
|
||||||
|
|
||||||
|
- flex-direction:row;/column
|
||||||
|
- flex-wrap
|
||||||
|
- flex-flow
|
||||||
|
- justify-content
|
||||||
|
- align-items
|
||||||
|
- align-content
|
||||||
|
|
||||||
|
### 常用属性详解
|
||||||
|
|
||||||
|
#### flex-direction
|
||||||
|
|
||||||
|
作用： 决定主轴方向
|
||||||
|
|
||||||
|
属性值：
|
||||||
|
|
||||||
|
- `row`（默认值）：主轴为水平方向，起点在左端。
|
||||||
|
- `row-reverse`：主轴为水平方向，起点在右端。
|
||||||
|
- `column`：主轴为垂直方向，起点在上沿。
|
||||||
|
- `column-reverse`：主轴为垂直方向，起点在下沿。
|
||||||
|
|
||||||
|
```
|
||||||
|
.box {
|
||||||
|
flex-direction: row | row-reverse | column | column-reverse;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### justify-content
|
||||||
|
|
||||||
|
作用： 定义了容器成员在主轴方向上的对齐方式
|
||||||
|
|
||||||
|
```
|
||||||
|
.box {
|
||||||
|
justify-content: flex-start | flex-end | center | space-between | space-around;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### flex-wrap
|
||||||
|
|
||||||
|
```css
|
||||||
|
.box{
|
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
属性值：
|
||||||
|
|
||||||
|
- nowrap 不换行
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- wrap 换行 第一行在上方
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- wrap-reverse ：换行，第一行在下方。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### align-item
|
||||||
|
|
||||||
|
作用：定义容器成员在交叉轴上的对齐方式
|
||||||
|
|
||||||
|
```css
|
||||||
|
.box {
|
||||||
|
align-items: flex-start | flex-end | center | baseline | stretch;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### align-self
|
||||||
|
|
||||||
|
允许单个容器成员拥有与其他成员不一样的对齐方式，可以覆盖align-items属性，默认值为auto
|
||||||
|
|
||||||
BIN
css/盒模型.assets/3EXWM8R]ILQ_Z_WU]KU%1SM-1608278714392.png
Normal file
BIN
css/盒模型.assets/3EXWM8R]ILQ_Z_WU]KU%1SM-1608278714392.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
css/盒模型.assets/image-20201218160440679.png
Normal file
BIN
css/盒模型.assets/image-20201218160440679.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
55
css/盒模型.md
Normal file
55
css/盒模型.md
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
# css盒模型
|
||||||
|
|
||||||
|
### 盒模型简介
|
||||||
|
|
||||||
|
CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> 图中的最内侧灰色的部分是元素的实际内容
|
||||||
|
>
|
||||||
|
> 紧挨着元素框外部的是内边距padding ,其次是边框
|
||||||
|
>
|
||||||
|
> 最外侧是外边距margin
|
||||||
|
>
|
||||||
|
> 通常设置背景色生效的部分是元素内容+padding的范围+边框
|
||||||
|
>
|
||||||
|
> 外边框margin 是透明的，不会遮挡周边元素
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
|
||||||
|
>
|
||||||
|
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 与盒模型相关的css属性
|
||||||
|
|
||||||
|
box-sizing
|
||||||
|
|
||||||
|
说明:允许您以特定的方式定义匹配某个区域的特定元素
|
||||||
|
|
||||||
|
语法：box-sizing:content-box|border-box
|
||||||
|
|
||||||
|
属性值：
|
||||||
|
|
||||||
|
- content-box:
|
||||||
|
|
||||||
|
padding值和border值不计算到内容（content）的宽度之内
|
||||||
|
|
||||||
|
即：一个盒子模型的总宽度=margin+padding+border+width;
|
||||||
|
|
||||||
|
- border-box:
|
||||||
|
|
||||||
|
content的值包含了padding值和border值
|
||||||
|
|
||||||
|
即：一个盒子的总宽度=margin+width.
|
||||||
|
|
||||||
|
- padding-box：将padding算入width范围
|
||||||
|
|
||||||
|
|
||||||
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 |
222
css/自适应和响应式.md
Normal file
222
css/自适应和响应式.md
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
# 自适应和响应式（移动端适配）
|
||||||
|
|
||||||
|
### 是什么
|
||||||
|
|
||||||
|
什么是自适应布局：同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小。
|
||||||
|
|
||||||
|
什么是响应式布局：可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。
|
||||||
|
|
||||||
|
区别：如果网页内容过多，整体会显得拥挤。所以响应式布局是自适应布局的改进，布局和展示的内容可能会有所变动。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 为什么
|
||||||
|
|
||||||
|
- 屏幕显示器的分辨率越来越多样化，在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。
|
||||||
|
|
||||||
198
csspress/1.css基础.md
Normal file
198
csspress/1.css基础.md
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
# css 基础
|
||||||
|
|
||||||
|
## 定义
|
||||||
|
|
||||||
|
css(层级样式表， Cascading Style Sheets) 是一种样式表语言，用来描述HTML或XML 文档的呈现，他和html一样都不是编程语言，他甚至不是标记语言，他是一门样式表语言 。我们用来给html的元素选择性的添加样式
|
||||||
|
|
||||||
|
## 在页面中使用css
|
||||||
|
|
||||||
|
方式1（行内样式）：
|
||||||
|
|
||||||
|
在html标签中 用style属性 给选中元素写入css样式
|
||||||
|
|
||||||
|
```
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body style="background:blue">
|
||||||
|
<p>hello world</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
方式2（内部样式表）：
|
||||||
|
|
||||||
|
在head 标签中写入 style标签，然后从style标签内写css的内容
|
||||||
|
|
||||||
|
```
|
||||||
|
<!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>
|
||||||
|
body{
|
||||||
|
background:blue
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>hello world</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
方式3 （外部样式表）
|
||||||
|
|
||||||
|
从head标签中 通过link 标签引入外部的css文件 从而建立html文件和css文件之间的连接
|
||||||
|
|
||||||
|
> <link rel="stylesheet" href="./css/index.css">
|
||||||
|
>
|
||||||
|
> link 标签中的rel=“stylesheet”必须加上
|
||||||
|
>
|
||||||
|
> href 为url地址
|
||||||
|
>
|
||||||
|
> type 链接文件的格式 可省略 省略的部分为：type="text/css"
|
||||||
|
>
|
||||||
|
> rel属性规定当前文档与被连接文档之间的关系，但是只有值为stylesheet的时候，能够得到浏览器的支持
|
||||||
|
|
||||||
|
```
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<link rel="stylesheet" href="./css/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>hello world</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
效果同上：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## css 语法
|
||||||
|
|
||||||
|
那让我们解读一下刚才写的css代码
|
||||||
|
|
||||||
|
```
|
||||||
|
body{
|
||||||
|
background:blue
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
其中 body 叫选择器，可以选中一个或多个需要添加此样式的元素，这个例子中是body 如果要给不同的元素添加样式，只需要更改选择器部分就可以了
|
||||||
|
|
||||||
|
{} 内部的内容为规则集，css中除了选择器部分，样式相关的所有内容全部要包括在成对的大括号里（{}）
|
||||||
|
|
||||||
|
{} 中的一行为一个声明，声明由 属性:属性值 组成，用来指定添加样式元素的属性 如本例的background:blue
|
||||||
|
|
||||||
|
声明中冒号左边的部分为属性，冒号右边的部分为属性值
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
重要的语法归纳：
|
||||||
|
|
||||||
|
- 除了选择器的部分都应该包含在成对的大括号里，即{} 里面
|
||||||
|
- 每个声明中要用 : 将属性名和属性值分割开
|
||||||
|
- 每个规则集中，要用 ; 把各个声明分割开
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## css选择器
|
||||||
|
|
||||||
|
基本选择器：
|
||||||
|
|
||||||
|
| 选择器名称 | 选中的内容 | 示例 |
|
||||||
|
| ----------------------- | -------------------------- | ------------------------------------------------------------ |
|
||||||
|
| 标签选择器 | 页面上所有该标签的html元素 | p 选中页面上所有的p标签 |
|
||||||
|
| id选择器 | 具有特定id的html元素 | #name 选中页面上所有<p id="name ">或<span id=“name"> ...这种id为name 的元素 |
|
||||||
|
| 类选择器 | 具有特定类的元素 | .box 选中页面上所有<p class="box">或<span class=“box">... 这种class 为box的元素 |
|
||||||
|
| 属性选择器 | 具有特定属性的元素 | a[title] 选中页面上所有存在title属性的<a>元素 并且可以通过a[title='xxx']来匹配特定的属性值 |
|
||||||
|
| 通配符 | 所有元素 | * |
|
||||||
|
| 多个元素 | 不同选择器用 , 连接 | div,span 同时匹配到页面中所有的div和span元素 |
|
||||||
|
| 选择后代元素 | 用空格连接 A B | div span 匹配所有div中的所有span元素 |
|
||||||
|
| 伪类 ：hover | a:hover | 匹配所有鼠标移入状态下的a标签 |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## css 优先级
|
||||||
|
|
||||||
|
优先级是分配给指定css声明的一个权重，只有多个样式规则赋给同一个元素而且定义的属性有冲突的时候，优先级才有意义
|
||||||
|
|
||||||
|
1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
|
||||||
|
2. 作为style属性写在元素内的样式
|
||||||
|
3. id选择器
|
||||||
|
4. 类选择器
|
||||||
|
5. 标签选择器
|
||||||
|
6. 通配符选择器
|
||||||
|
7. 浏览器自定义或继承
|
||||||
|
|
||||||
|
**总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### css 常用属性
|
||||||
|
|
||||||
|
width:数值 px （单位） 设置宽度
|
||||||
|
|
||||||
|
height:数值 px（单位） 设置高度
|
||||||
|
|
||||||
|
background: 英文颜色或者16进制颜色码（如\#ff0000）或者rgb颜色码（如rgb(255,0,0)）或者图片( url('文件路径') ) 设置背景颜色
|
||||||
|
|
||||||
|
color:英文颜色或者16进制颜色码（如\#ff0000）或者rgb颜色码（如rgb(255,0,0)） 设置字体颜色
|
||||||
|
|
||||||
|
border: 1px solid red 1px 是边框宽度 solid 是线条类型为直线 red 为边框颜色
|
||||||
|
|
||||||
|
border-radius：29px 边框圆角
|
||||||
|
|
||||||
|
font-size：13px 字体大小
|
||||||
|
|
||||||
|
font-weight:normal(正常默认) 或者 bold(加粗)
|
||||||
|
|
||||||
|
line-height:20px 设置行高
|
||||||
|
|
||||||
|
text-align:left( 左对齐) center (居中) right(右对齐) 文字对齐方式
|
||||||
|
|
||||||
|
overflow :auto（滚动条）/ hidden (隐藏) 横向和纵向内容溢出的表现
|
||||||
|
|
||||||
|
overflow-x:auto（滚动条）/ hidden (隐藏) 横向内容溢出的表现
|
||||||
|
|
||||||
|
overflow-y:auto（滚动条）/ hidden (隐藏) 纵向内容溢出的表现
|
||||||
|
|
||||||
|
verticle-align 设置元素的垂直对齐方式
|
||||||
|
属性值：
|
||||||
|
* baseline 默认值，元素放置在父元素的基线上
|
||||||
|
* text-top 元素顶端和父元素字体顶端对齐
|
||||||
|
* text-bottom 元素顶端和父元素字体底部对齐
|
||||||
|
* middle 元素位于父元素的中部
|
||||||
|
...
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
BIN
csspress/2.盒模型.assets/1072590-20161225165033198-1543996399.png
Normal file
BIN
csspress/2.盒模型.assets/1072590-20161225165033198-1543996399.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 365 KiB |
BIN
csspress/2.盒模型.assets/image-20201218160440679.png
Normal file
BIN
csspress/2.盒模型.assets/image-20201218160440679.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
csspress/2.盒模型.assets/image-20210104085742577.png
Normal file
BIN
csspress/2.盒模型.assets/image-20210104085742577.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
csspress/2.盒模型.assets/image-20210112113853593.png
Normal file
BIN
csspress/2.盒模型.assets/image-20210112113853593.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
csspress/2.盒模型.assets/image-20210112114420660.png
Normal file
BIN
csspress/2.盒模型.assets/image-20210112114420660.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
csspress/2.盒模型.assets/image-20210118112058180.png
Normal file
BIN
csspress/2.盒模型.assets/image-20210118112058180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
csspress/2.盒模型.assets/image-20210118112453705.png
Normal file
BIN
csspress/2.盒模型.assets/image-20210118112453705.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
277
csspress/2.盒模型.md
Normal file
277
csspress/2.盒模型.md
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
# css 基础（二）
|
||||||
|
|
||||||
|
## 块级元素和内联元素
|
||||||
|
|
||||||
|
- 块级元素
|
||||||
|
|
||||||
|
- 特点：
|
||||||
|
|
||||||
|
- 盒子横向会占据父元素所有的空间，默认情况下，盒子会和父元素一样宽
|
||||||
|
- 每个盒子都会换行
|
||||||
|
- width和height 都可以发挥作用
|
||||||
|
- padding , margin, border 会将其他元素从当前盒子周围推开
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- 内联元素
|
||||||
|
|
||||||
|
- 特点：
|
||||||
|
- 盒子不会换行
|
||||||
|
- width和height 不能发挥作用
|
||||||
|
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 `inline` 状态的盒子推开。
|
||||||
|
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于 `inline` 状态的盒子推开。
|
||||||
|
|
||||||
|
> 块级元素display默认属性值为 block
|
||||||
|
>
|
||||||
|
> 内联元素 dipslay的属性默认值为inline
|
||||||
|
>
|
||||||
|
> 块级元素和内联元素可以通过display="inline"/"block" 实现互相转换
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 盒模型 （box model）
|
||||||
|
|
||||||
|
css 盒模型包括如下要素
|
||||||
|
|
||||||
|
- 元素内容 （content）
|
||||||
|
- 内边距 （border）
|
||||||
|
- 边框（border）
|
||||||
|
- 外边距（margin）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> 上图中 最内层的蓝色色块是 元素内容（content）
|
||||||
|
>
|
||||||
|
> 蓝色外侧的 绿色的是内边距（padding）
|
||||||
|
>
|
||||||
|
> padding外侧的橙黄色的部分是边框（border）
|
||||||
|
>
|
||||||
|
> border 外侧 也就是最外侧的部分是外边框（margin）
|
||||||
|
|
||||||
|
盒模型计算元素的总宽度和总高度：
|
||||||
|
|
||||||
|
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
|
||||||
|
>
|
||||||
|
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## css外边距合并（叠加）
|
||||||
|
|
||||||
|
定义： 当两个元素垂直外边距相遇时，他们形成一个外边距，合并后的外边距等于两个发生合并的外边距较大的那个值，左右外边距不会合并
|
||||||
|
|
||||||
|
而且只在普通文档流中会发生外边距合并的状况。 行内，浮动，绝对定位的外边距不会合并
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
合并的结果计算：
|
||||||
|
|
||||||
|
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
|
||||||
|
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
|
||||||
|
两个外边距一正一负时，折叠结果是两者的相加的和。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
合并的原因：
|
||||||
|
|
||||||
|
而根据w3c规范，两个margin是邻接的必须满足以下条件
|
||||||
|
4.1、必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
|
||||||
|
4.2、没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
|
||||||
|
4.3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
|
||||||
|
a:元素的margin-top与其第一个常规文档流的子元素的margin-top
|
||||||
|
b:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
|
||||||
|
c:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
|
||||||
|
d:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
出现的情况：
|
||||||
|
|
||||||
|
(一）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style type="text/css">
|
||||||
|
* {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
border:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#outer {
|
||||||
|
width:300px;
|
||||||
|
height:300px;
|
||||||
|
background-color:red;
|
||||||
|
margin-bottom:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inner {
|
||||||
|
width:50px;
|
||||||
|
height:50px;
|
||||||
|
background-color:blue;
|
||||||
|
margin-top:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="outer">
|
||||||
|
<div id="inner">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部
|
||||||
|
div 的上外边距合并（叠加）。</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
（二）
|
||||||
|
|
||||||
|
多个子元素外边距合并：
|
||||||
|
|
||||||
|
div11的高度为0 的时候，div1的margin值由 div1,div11,div12的margin合并结果决定
|
||||||
|
|
||||||
|
如此例中，div1的margin 值为30
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>
|
||||||
|
盒子模型
|
||||||
|
</title>
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
width:200px;
|
||||||
|
height:200px;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
#div1{
|
||||||
|
margin-top:10px;
|
||||||
|
background:red;
|
||||||
|
}
|
||||||
|
#div11{
|
||||||
|
margin-top:20px;
|
||||||
|
width:0;
|
||||||
|
height:0;
|
||||||
|
background:yellow;
|
||||||
|
}
|
||||||
|
#div12{
|
||||||
|
margin-top:30px;
|
||||||
|
width:50px;
|
||||||
|
height:50px;
|
||||||
|
background:blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="div1">
|
||||||
|
<div id="div11"></div>
|
||||||
|
<div id="div12"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
解决措施：
|
||||||
|
|
||||||
|
给外边距加上如下属性，可以解决外边距合并的问题
|
||||||
|
|
||||||
|
border-top: 1px solid white; 给父元素加上边框
|
||||||
|
|
||||||
|
overflow: hidden; 设置超出隐藏
|
||||||
|
|
||||||
|
padding-top:50px; 给父盒子加padding-top 可以实现同样的效果
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
margin 复合属性
|
||||||
|
|
||||||
|
上右下左
|
||||||
|
|
||||||
|
例如：
|
||||||
|
|
||||||
|
margin 一个值得时候定义的是上下左右四个方向的边距
|
||||||
|
两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距
|
||||||
|
三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距
|
||||||
|
四个值得时候是上右下左的边距
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
padding复合属性
|
||||||
|
|
||||||
|
上右下左
|
||||||
|
|
||||||
|
例如：
|
||||||
|
|
||||||
|
padding一个值得时候定义的是上下左右四个方向的边距
|
||||||
|
两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距
|
||||||
|
三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距
|
||||||
|
四个值得时候是上右下左的边距
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
练习1：
|
||||||
|
|
||||||
|
五环之歌 效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
作业2：
|
||||||
|
|
||||||
|
分类菜单 效果如下
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
作业三：
|
||||||
|
|
||||||
|
效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
注：
|
||||||
|
|
||||||
|
左下角录制工具的水印不用做
|
||||||
|
|
||||||
|
图片可以自定义
|
||||||
BIN
csspress/3.定位.assets/image-20210104095232481.png
Normal file
BIN
csspress/3.定位.assets/image-20210104095232481.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
csspress/3.定位.assets/image-20210104101111002.png
Normal file
BIN
csspress/3.定位.assets/image-20210104101111002.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 992 B |
BIN
csspress/3.定位.assets/image-20210104102616301.png
Normal file
BIN
csspress/3.定位.assets/image-20210104102616301.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
csspress/3.定位.assets/image-20210104104339420.png
Normal file
BIN
csspress/3.定位.assets/image-20210104104339420.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1002 B |
BIN
csspress/3.定位.assets/image-20210104113658613.png
Normal file
BIN
csspress/3.定位.assets/image-20210104113658613.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
csspress/3.定位.assets/image-20210104115013701.png
Normal file
BIN
csspress/3.定位.assets/image-20210104115013701.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
csspress/3.定位.assets/image-20210104115040341.png
Normal file
BIN
csspress/3.定位.assets/image-20210104115040341.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
csspress/3.定位.assets/image-20210118113158799.png
Normal file
BIN
csspress/3.定位.assets/image-20210118113158799.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
BIN
csspress/3.定位.assets/image-20210118113652011.png
Normal file
BIN
csspress/3.定位.assets/image-20210118113652011.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 KiB |
BIN
csspress/3.定位.assets/image-20210118172837051.png
Normal file
BIN
csspress/3.定位.assets/image-20210118172837051.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
csspress/3.定位.assets/image-20210118172910611.png
Normal file
BIN
csspress/3.定位.assets/image-20210118172910611.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
csspress/3.定位.assets/image-20210118172934691.png
Normal file
BIN
csspress/3.定位.assets/image-20210118172934691.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
csspress/3.定位.assets/image-20210118173020931.png
Normal file
BIN
csspress/3.定位.assets/image-20210118173020931.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 973 KiB |
BIN
csspress/3.定位.assets/image-20210118173115050.png
Normal file
BIN
csspress/3.定位.assets/image-20210118173115050.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
311
csspress/3.定位.md
Normal file
311
csspress/3.定位.md
Normal file
@@ -0,0 +1,311 @@
|
|||||||
|
# 定位(position)
|
||||||
|
|
||||||
|
### 为什么要使用定位
|
||||||
|
|
||||||
|
请问以下状况用标准流或者浮动可以实现吗？
|
||||||
|
|
||||||
|
- 想让广告右下角的切换的那三个点图标 在广告框内自由移动位置，并且会压住下面的盒子 覆盖在最上面
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- 不管滚动条滚动到什么位置 ，元素都始终固定在原来的位置不变
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**结论** ：
|
||||||
|
|
||||||
|
1. 以上的两种情况 用普通的文档流和浮动都不能快速实现，此时要用定位来实现
|
||||||
|
|
||||||
|
2. 浮动和定位的区别
|
||||||
|
|
||||||
|
浮动可以让多个块级盒子一行内没有缝隙排列显示 经常用于
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
position 用来定义元素在网页上的位置，常用的有五种：
|
||||||
|
|
||||||
|
- static 正常的页面流，position属性的默认值
|
||||||
|
- absolute 绝对定位
|
||||||
|
- relative 相对定位
|
||||||
|
- fixed 固定定位
|
||||||
|
- sticky 粘性布局
|
||||||
|
|
||||||
|
语法：
|
||||||
|
|
||||||
|
position:定位方式
|
||||||
|
|
||||||
|
方向：偏移值
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### static
|
||||||
|
|
||||||
|
这时浏览器会按照源码的顺序决定元素的位置，这样称为“正常的页面流”。块级元素占据自己的区块，元素之间不重叠。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
html：
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
css：
|
||||||
|
|
||||||
|
```
|
||||||
|
<style>
|
||||||
|
/*
|
||||||
|
去掉浏览器默认的标签自带样式
|
||||||
|
*/
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
position不写默认是static
|
||||||
|
*/
|
||||||
|
div{
|
||||||
|
width:60px;
|
||||||
|
height: 60px;
|
||||||
|
background:red
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### absolute
|
||||||
|
|
||||||
|
absolute 基于父元素定位，通过 top,bottom,left,right 四个属性规定元素的位置
|
||||||
|
|
||||||
|
当父元素不定义position属性时，选中的元素依照整个网页的html根元素定位
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
html 不变 css如下：
|
||||||
|
|
||||||
|
```
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
width:60px;
|
||||||
|
height: 60px;
|
||||||
|
background:red;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
background: gray;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
上面的例子里，第一个灰色的div（以下叫A）并没有出现在页面上，因为这时候给A 添加了position:absolute 属性，使他脱离正常的文档流 然后他下面（从上到下依次叫B,C），B,C并没有脱离文档流，所以会移动到上面来，把A覆盖
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
html：
|
||||||
|
|
||||||
|
```
|
||||||
|
<body>
|
||||||
|
<div class="box1"></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
css:
|
||||||
|
|
||||||
|
```
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
width:60px;
|
||||||
|
height: 60px;
|
||||||
|
background:red;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
background: gray;
|
||||||
|
position: absolute;
|
||||||
|
right:0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### relative
|
||||||
|
|
||||||
|
相对定位，选中元素不会脱离文档流，相对于其自身位置进行移动，通过top,bottom,left,right 属性进行规定
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
width:60px;
|
||||||
|
height: 60px;
|
||||||
|
background:red;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
background: gray;
|
||||||
|
position: absolute;
|
||||||
|
right:90px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> 常用技巧是给父元素定义绝对定位 子元素定义相对定位 这样就会使子元素相对于父元素定位
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### fixed
|
||||||
|
|
||||||
|
fixed 固定定位，将某个元素固定在浏览器的某个位置，无论如何滚动滚动条，元素位置不变。 即元素相对于可视窗口固定位置
|
||||||
|
|
||||||
|
html:
|
||||||
|
|
||||||
|
```
|
||||||
|
<body>
|
||||||
|
<div class="box1"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
css:
|
||||||
|
|
||||||
|
```
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
width:60px;
|
||||||
|
height: 600px;
|
||||||
|
background:red;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
background: gray;
|
||||||
|
position: fixed;
|
||||||
|
left: 90px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
.box2{
|
||||||
|
background: gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### sticky 粘性布局（拓展）
|
||||||
|
|
||||||
|
从效果来说 sticky更像是混合体，使用sticky的元素在页面滑动到临界点之前，表现为relative, 到达临界点之后，表现为fixed
|
||||||
|
|
||||||
|
#### css 使用：
|
||||||
|
|
||||||
|
> 1. 用 position: sticky 声明目标元素
|
||||||
|
> 2. top/bottom/left/right 任意一个赋予有效值 ，甚至是负值也可以
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
注： 如果元素定义了overflow，那么sticky就会失效
|
||||||
|
|
||||||
|
html:
|
||||||
|
|
||||||
|
```
|
||||||
|
<body>
|
||||||
|
<div class="box1"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
css:
|
||||||
|
|
||||||
|
```
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
width:60px;
|
||||||
|
height: 600px;
|
||||||
|
background:red;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
background: gray;
|
||||||
|
height: 60px;
|
||||||
|
position: sticky;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
.box2{
|
||||||
|
background: gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
滚动前：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
滚动后：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
作业一
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
作业二
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
作业三
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
作业4
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
作业5
|
||||||
|
|
||||||
|
|
||||||
BIN
csspress/4.flex.assets/image-20210120113341512.png
Normal file
BIN
csspress/4.flex.assets/image-20210120113341512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
csspress/4.flex.assets/image-20210120114325303.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114325303.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120114326831-1611138867367.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114326831-1611138867367.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120114326831.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114326831.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120114504619.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114504619.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120114721023-1611138852216.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114721023-1611138852216.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120114721023.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114721023.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120134940595.png
Normal file
BIN
csspress/4.flex.assets/image-20210120134940595.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
BIN
csspress/4.flex.assets/image-20210120135351730.png
Normal file
BIN
csspress/4.flex.assets/image-20210120135351730.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
BIN
csspress/4.flex.assets/image-20210120135442183.png
Normal file
BIN
csspress/4.flex.assets/image-20210120135442183.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
csspress/4.flex.assets/image-20210120135503448.png
Normal file
BIN
csspress/4.flex.assets/image-20210120135503448.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
csspress/4.flex.assets/image-20210120143705542-1611138861830.png
Normal file
BIN
csspress/4.flex.assets/image-20210120143705542-1611138861830.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
csspress/4.flex.assets/image-20210120143705542.png
Normal file
BIN
csspress/4.flex.assets/image-20210120143705542.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
csspress/4.flex.assets/image-20210222165013291.png
Normal file
BIN
csspress/4.flex.assets/image-20210222165013291.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
191
csspress/4.flex.md
Normal file
191
csspress/4.flex.md
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
# flex
|
||||||
|
|
||||||
|
flex 意为弹性盒子，用来为盒模型提供最大的灵活性
|
||||||
|
|
||||||
|
### flex 使用
|
||||||
|
|
||||||
|
任何一个元素都能被指定为flex 容器
|
||||||
|
|
||||||
|
```
|
||||||
|
display:flex 选中元素为块级元素时
|
||||||
|
|
||||||
|
display:inline-flex 选中元素为内联元素时
|
||||||
|
```
|
||||||
|
|
||||||
|
### 基本概念
|
||||||
|
|
||||||
|
通过display:flex 定义的元素称为容器，他包含的元素是容器成员，称为”项目“
|
||||||
|
|
||||||
|
容器默认存在两个轴，水平主轴和垂直的交叉轴
|
||||||
|
|
||||||
|
水平主轴的起点叫做 main start 结束位置叫做 main end
|
||||||
|
|
||||||
|
垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
注： 容器的主轴和侧轴是由 flex-direction 确定的 默认主轴是水平（row）
|
||||||
|
|
||||||
|
当 flex-direction 的值为column时 主轴为竖直 侧轴为水平
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 容器的属性
|
||||||
|
|
||||||
|
- flex-direction 声明容器使用的轴是水平的还是垂直的
|
||||||
|
- row 水平（起点在左）
|
||||||
|
- column 垂直 （起点在上）
|
||||||
|
- row-reverse 水平（起点在右）
|
||||||
|
- column-reverse 垂直（起点在下）
|
||||||
|
|
||||||
|
- justify-content 声明排列的方式
|
||||||
|
- center 居中
|
||||||
|
- space-around 每个项目两侧的间隔相等 项目到边框有间距
|
||||||
|
- space-between 两端对齐 项目之间的间隔都相等
|
||||||
|
- align-items 定义项目在交叉轴上的排列方式
|
||||||
|
- center 居中
|
||||||
|
- flex-start 交叉轴起点对齐（拓展）
|
||||||
|
- flex-end 交叉轴终点对齐
|
||||||
|
- baseline 第一行文字的基线对齐
|
||||||
|
- stretch 默认占满整个容器的高度
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
<!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>
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
width: 1000px;
|
||||||
|
height: 500px;
|
||||||
|
background: pink;
|
||||||
|
display:flex; //声明容器为弹性盒子
|
||||||
|
flex-direction: row; //声明排列的方向为水平和竖直
|
||||||
|
align-items: center;//垂直排列方式
|
||||||
|
justify-content: center； //水平排列方式
|
||||||
|
}
|
||||||
|
.left{
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### justify-content
|
||||||
|
|
||||||
|
##### center: 水平居中
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
.box{
|
||||||
|
width: 1000px;
|
||||||
|
height: 500px;
|
||||||
|
background: pink;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
##### space-around 每个项目两侧的间隔相等 项目到边框有间距
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
.box{
|
||||||
|
width: 1000px;
|
||||||
|
height: 500px;
|
||||||
|
background: pink;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
##### space-between 两端对齐 项目之间的间隔都相等
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
.box{
|
||||||
|
width: 1000px;
|
||||||
|
height: 500px;
|
||||||
|
background: pink;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### align-items
|
||||||
|
|
||||||
|
定义侧轴的项目对齐方式
|
||||||
|
|
||||||
|
作业1：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
作业2：
|
||||||
|
|
||||||
|
实现flex-内容宽度等分
|
||||||
|
|
||||||
|
作业3：
|
||||||
|
|
||||||
|
左右布局，一侧定宽一侧自适应填满
|
||||||
|
|
||||||
|
作业4：
|
||||||
|
|
||||||
|
未知高度上下左右居中
|
||||||
|
|
||||||
|
作业6：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
作业7：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
作业8
|
||||||
|
|
||||||
|
|
||||||
BIN
csspress/4.flex.pdf
Normal file
BIN
csspress/4.flex.pdf
Normal file
Binary file not shown.
246
csspress/5.自适应和响应式.md
Normal file
246
csspress/5.自适应和响应式.md
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
# 自适应和响应式
|
||||||
|
|
||||||
|
为了适配移动端终端设备
|
||||||
|
|
||||||
|
### 实现途径：
|
||||||
|
|
||||||
|
1.媒体查询
|
||||||
|
|
||||||
|
将设备按照不同的分辨率条件筛选，使符合条件的设备显示对应的样式，从而实现不同分辨率样式不同的效果
|
||||||
|
|
||||||
|
语法：
|
||||||
|
|
||||||
|
```
|
||||||
|
@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.百分比
|
||||||
|
|
||||||
|
通过’%‘单位来实现响应式效果。浏览器高度和宽度发生变化时，通过百分比单位可以使元素的高和宽随着浏览器的变化而变化，从而实现响应式效果
|
||||||
|
|
||||||
|
可以取百分比的属性：
|
||||||
|
* 定位：top, right, bottom, left
|
||||||
|
* 盒模型：width,height, margin,padding
|
||||||
|
* 背景：backgroug-position, backgroud-size
|
||||||
|
* 文本：text-indent
|
||||||
|
* 字体：font-size
|
||||||
|
|
||||||
|
css 百分比都相对于谁？
|
||||||
|
结论：css的布局块都是盒子，然后一个盒子的百分比其实是相对于其包含块的，也就是他的父级元素。
|
||||||
|
* 相对于父级宽度的：
|
||||||
|
* width
|
||||||
|
* max-width
|
||||||
|
* min-width
|
||||||
|
* padding
|
||||||
|
* margin
|
||||||
|
* text-indent
|
||||||
|
* left
|
||||||
|
* right
|
||||||
|
...
|
||||||
|
|
||||||
|
* 相对于父级高度的：
|
||||||
|
* height
|
||||||
|
* max-height
|
||||||
|
* min-height
|
||||||
|
* top
|
||||||
|
* bottom
|
||||||
|
|
||||||
|
* 相对于主轴长度(在flex弹性盒子布局中)
|
||||||
|
* flex-basis
|
||||||
|
|
||||||
|
* 相对于继承字号的
|
||||||
|
* font-size
|
||||||
|
|
||||||
|
* 相对于自身字号的
|
||||||
|
* line-height
|
||||||
|
|
||||||
|
* 相对于自身宽高的
|
||||||
|
* border-radius 等border相关
|
||||||
|
* background-size
|
||||||
|
...
|
||||||
|
|
||||||
|
* 相对于行高的
|
||||||
|
* verticle-align (设置元素垂直对齐方式)
|
||||||
|
|
||||||
|
示例：
|
||||||
|
|
||||||
|
```
|
||||||
|
<!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>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> 使用百分比做单位时，如果要定义一个元素的宽高，需要根据设计稿手动计算 换算成% 单位，容易出现误差
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 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。
|
||||||
|
|
||||||
|
示例参考demo/rem.html
|
||||||
|
|
||||||
|
|
||||||
105
csspress/6.sass和less.md
Normal file
105
csspress/6.sass和less.md
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
# sass(scss) 与 less
|
||||||
|
|
||||||
|
sass 和 less 都是我们css的扩展语言，他们完全兼容css的写法 并为css添加了许多新的功能。
|
||||||
|
|
||||||
|
#### 下载
|
||||||
|
|
||||||
|
sass基于ruby语言开发而成，因此 安装sass之前需要安装Ruby
|
||||||
|
|
||||||
|
windows 通过Ruby 官网（https://rubyinstaller.org/downloads/） 下载并完成安装
|
||||||
|
|
||||||
|
安装过程中需要勾选Add Ruby executables to your PATH 添加到系统的环境变量 否则安装wanchengho
|
||||||
|
|
||||||
|
需要手动配置
|
||||||
|
|
||||||
|
如下图：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
安装完后需要测试安装是否成功，打开cmd
|
||||||
|
|
||||||
|
```
|
||||||
|
ruby -v
|
||||||
|
//如安装成功会打印
|
||||||
|
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]
|
||||||
|
```
|
||||||
|
|
||||||
|
ruby 安装完成后 可以在控制台输入下面命令安装sass
|
||||||
|
|
||||||
|
> gem install sass
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
或者用
|
||||||
|
|
||||||
|
#### less 安装
|
||||||
|
|
||||||
|
推荐使用node环境 npm 包管理器进行安装 使用如下命令：
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install -g less
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### sass 使用
|
||||||
|
|
||||||
|
```
|
||||||
|
sass app.scss app.css
|
||||||
|
```
|
||||||
|
|
||||||
|
使用上面命令可以将app.scss 文件编译成 app.css
|
||||||
|
|
||||||
|
less 编译：
|
||||||
|
|
||||||
|
```
|
||||||
|
lessc test.less > test.css
|
||||||
|
```
|
||||||
|
|
||||||
|
使用上面的命令可以将test.less 编译成test.css
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### sass 和 less语法
|
||||||
|
|
||||||
|
sass 和less 完全支持css的语法
|
||||||
|
|
||||||
|
除此之外，还拓展了以下语法：
|
||||||
|
|
||||||
|
父子关系嵌套写法：
|
||||||
|
|
||||||
|
```
|
||||||
|
.box{
|
||||||
|
width:70px;
|
||||||
|
height:70px;
|
||||||
|
.head{
|
||||||
|
background:red
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
编译出来的结果为：
|
||||||
|
|
||||||
|
```
|
||||||
|
.box{
|
||||||
|
width:70px;
|
||||||
|
height:70px;
|
||||||
|
}
|
||||||
|
.box .head{
|
||||||
|
background:red
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
其他使用变量 嵌套导入 混合器....等功能有兴趣自行拓展
|
||||||
|
|
||||||
|
sass中文网：
|
||||||
|
|
||||||
|
https://www.sass.hk/guide/
|
||||||
|
|
||||||
|
less中文网
|
||||||
|
|
||||||
|
https://less.bootcss.com/
|
||||||
BIN
csspress/css实战(一).assets/image-20210223151126809.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223151126809.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
BIN
csspress/css实战(一).assets/image-20210223174608465.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223174608465.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
BIN
csspress/css实战(一).assets/image-20210223180430143.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223180430143.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
BIN
csspress/css实战(一).assets/image-20210223180523455.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223180523455.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
csspress/css实战(一).assets/image-20210223181949796.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223181949796.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
csspress/css实战(一).assets/image-20210223182049992.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223182049992.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 355 KiB |
BIN
csspress/css实战(一).assets/image-20210223182258454.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223182258454.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
BIN
csspress/css实战(一).assets/image-20210223182345438.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223182345438.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 KiB |
BIN
csspress/css实战(一).assets/image-20210223182428924.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223182428924.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
csspress/css实战(一).assets/image-20210223182524394.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223182524394.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 495 KiB |
43
csspress/css实战(一).md
Normal file
43
csspress/css实战(一).md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# css实战阶段一
|
||||||
|
### 苏宁易购
|
||||||
|
|
||||||
|
#### 顶部导航栏：
|
||||||
|
|
||||||
|
.assets\image-20210223180523455.png)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
说明： 写完顶部导航条以后需要加上下面的白色下拉框的内容 本阶段可以一直显示
|
||||||
|
|
||||||
|
### 白色的标题搜索栏
|
||||||
|
|
||||||
|
.assets\image-20210223181949796.png)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 分类
|
||||||
|
|
||||||
|
.assets\image-20210223182049992.png)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 热卖爆款
|
||||||
|
|
||||||
|
.assets\image-20210223182258454.png)
|
||||||
|
|
||||||
|
|
||||||
|
### 冰箱洗衣机
|
||||||
|
|
||||||
|
.assets\image-20210223182345438.png)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 底部导航
|
||||||
|
|
||||||
|
.assets\image-20210223182428924.png)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 固定的侧边栏
|
||||||
|
|
||||||
|
.assets\image-20210223182524394.png)
|
||||||
29
csspress/css重点内容.md
Normal file
29
csspress/css重点内容.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# css 重点内容
|
||||||
|
|
||||||
|
- 盒模型
|
||||||
|
|
||||||
|
- 块级元素和内联元素
|
||||||
|
- 会画盒模型的线框图
|
||||||
|
- padding margin border...属性的认识
|
||||||
|
- 会计算盒模型中元素的宽度和高度
|
||||||
|
|
||||||
|
- 定位
|
||||||
|
|
||||||
|
- static
|
||||||
|
- relative
|
||||||
|
- absolute
|
||||||
|
- fixed
|
||||||
|
|
||||||
|
- 浮动和flex
|
||||||
|
|
||||||
|
- float
|
||||||
|
- flex
|
||||||
|
|
||||||
|
- 自适应和响应式
|
||||||
|
|
||||||
|
- 媒体查询
|
||||||
|
- rem
|
||||||
|
- 百分比
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
8
csspress/demo/.idea/demo.iml
generated
Normal file
8
csspress/demo/.idea/demo.iml
generated
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="PYTHON_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
12
csspress/demo/.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
12
csspress/demo/.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||||
|
<option name="ignoredErrors">
|
||||||
|
<list>
|
||||||
|
<option value="N802" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</inspection_tool>
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
6
csspress/demo/.idea/inspectionProfiles/profiles_settings.xml
generated
Normal file
6
csspress/demo/.idea/inspectionProfiles/profiles_settings.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<settings>
|
||||||
|
<option name="USE_PROJECT_PROFILE" value="false" />
|
||||||
|
<version value="1.0" />
|
||||||
|
</settings>
|
||||||
|
</component>
|
||||||
8
csspress/demo/.idea/modules.xml
generated
Normal file
8
csspress/demo/.idea/modules.xml
generated
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/demo.iml" filepath="$PROJECT_DIR$/.idea/demo.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
csspress/demo/.idea/vcs.xml
generated
Normal file
6
csspress/demo/.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
37
csspress/demo/.idea/workspace.xml
generated
Normal file
37
csspress/demo/.idea/workspace.xml
generated
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ChangeListManager">
|
||||||
|
<list default="true" id="1a809e5f-af9b-4af6-ad05-8377cd49b05b" name="Default Changelist" comment="" />
|
||||||
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
|
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||||
|
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||||
|
</component>
|
||||||
|
<component name="Git.Settings">
|
||||||
|
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/../.." />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectId" id="1nEKiqsAzxjfTabj7kX1m5ezM5s" />
|
||||||
|
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
|
||||||
|
<component name="ProjectViewState">
|
||||||
|
<option name="hideEmptyMiddlePackages" value="true" />
|
||||||
|
<option name="showLibraryContents" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PropertiesComponent">
|
||||||
|
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
|
||||||
|
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
|
||||||
|
<property name="settings.editor.selected.configurable" value="configurable.group.appearance" />
|
||||||
|
</component>
|
||||||
|
<component name="SvnConfiguration">
|
||||||
|
<configuration />
|
||||||
|
</component>
|
||||||
|
<component name="TaskManager">
|
||||||
|
<task active="true" id="Default" summary="Default task">
|
||||||
|
<changelist id="1a809e5f-af9b-4af6-ad05-8377cd49b05b" name="Default Changelist" comment="" />
|
||||||
|
<created>1610949940462</created>
|
||||||
|
<option name="number" value="Default" />
|
||||||
|
<option name="presentableId" value="Default" />
|
||||||
|
<updated>1610949940462</updated>
|
||||||
|
</task>
|
||||||
|
<servers />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
52
csspress/demo/absolute.html
Normal file
52
csspress/demo/absolute.html
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<!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>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box1 {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: yellow;
|
||||||
|
margin: 20px;
|
||||||
|
/* position:static */
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2 {
|
||||||
|
background: red;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="box1">
|
||||||
|
<div class="box2"></div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<p> 注：这里红色的div是依据 body定位的，而不是根据父元素黄色的div 定位，</p>
|
||||||
|
<p> 加上position static 后也是根据body 定位，</p>
|
||||||
|
<p>当父元素的Position声明为 absolute 时，红色会依据父级黄色定位，但是会超脱文档流，影响下面的元素</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
36
csspress/demo/baifenbi.html
Normal file
36
csspress/demo/baifenbi.html
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<!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>
|
||||||
37
csspress/demo/boxsize.html
Normal file
37
csspress/demo/boxsize.html
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<!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:1000px;
|
||||||
|
height:300px;
|
||||||
|
background: gold;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
width:50px;
|
||||||
|
height: 50px;
|
||||||
|
background:red;
|
||||||
|
}
|
||||||
|
.box2{
|
||||||
|
width:500px;
|
||||||
|
height:500px;
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
.box3{
|
||||||
|
background:pink;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box">
|
||||||
|
<div class="box1">aaa</div>
|
||||||
|
<span class="box2">bbb</span>
|
||||||
|
<span class="box3">cccc</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
93
csspress/demo/clearfloat.html
Normal file
93
csspress/demo/clearfloat.html
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
<!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>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: 1000px;
|
||||||
|
height: 300px;
|
||||||
|
background: gold;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box1 {
|
||||||
|
/* width:60px;
|
||||||
|
height: 60px; */
|
||||||
|
background: red;
|
||||||
|
/* background: rgba(255, 0, 0, 0.363); */
|
||||||
|
/* float: left; */
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2 {
|
||||||
|
width: 120px;
|
||||||
|
height: 80px;
|
||||||
|
background: gray;
|
||||||
|
border: 1px solid pink;
|
||||||
|
color: white;
|
||||||
|
/* float:right */
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box4 {
|
||||||
|
width: 120px;
|
||||||
|
height: 80px;
|
||||||
|
background: blue;
|
||||||
|
border: 1px solid pink;
|
||||||
|
/* clear: left;
|
||||||
|
这是哪个元素需要清除浮动哪个元素加clear
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxes{
|
||||||
|
overflow: auto;
|
||||||
|
/*
|
||||||
|
这是通过Overflow:auto 清除浮动
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
.blank{
|
||||||
|
clear:left
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
在浮动元素最后面加一个空的div 附上clear属性清除浮动
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* .boxes:after {
|
||||||
|
content: '.';
|
||||||
|
height: 0;
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
这是通过伪类清除浮动，必须加上content:"." 否则不起作用
|
||||||
|
*/
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="box">
|
||||||
|
<div class="boxes clearfix">
|
||||||
|
<div class="box1">asaaaa</div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
|
||||||
|
<div class="box2">4</div>
|
||||||
|
<div class="box2 blankdiv">5</div>
|
||||||
|
<!-- <div class="box2" style="height: 180px;">6</div> -->
|
||||||
|
<div class="blank"></div>
|
||||||
|
</div>
|
||||||
|
<div class="box4"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
46
csspress/demo/fixed.html
Normal file
46
csspress/demo/fixed.html
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<!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>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.box1 {
|
||||||
|
background: yellow;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
/* height: 50px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2 {
|
||||||
|
height: 20px;
|
||||||
|
position: fixed;
|
||||||
|
top: 30px;
|
||||||
|
width: 100%;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
.box3{
|
||||||
|
width: 60px;
|
||||||
|
height: 900px;
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="box1">暖暖</div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
<div class="box3"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
107
csspress/demo/flex.html
Normal file
107
csspress/demo/flex.html
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
<!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>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: 1000px;
|
||||||
|
height: 500px;
|
||||||
|
background: pink;
|
||||||
|
display: flex;
|
||||||
|
/* 通过display:flex来把目标元素设置成flex布局 */
|
||||||
|
flex-direction: row;
|
||||||
|
/* flex-direction 属性决定主轴的方向，值为row的时候水平排列 起点在左 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.box1 {
|
||||||
|
width: 1000px;
|
||||||
|
height: 500px;
|
||||||
|
background: gold;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left,
|
||||||
|
.left1 {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right,
|
||||||
|
.right1 {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box3 {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box4 {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="box" style="margin-bottom: 15px;">
|
||||||
|
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
<div>
|
||||||
|
这里是flex-direction:row的状况 即水平排列 起点在左侧
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
<div>
|
||||||
|
这里是flex-direction:row的状况 即水平排列 起点在左侧
|
||||||
|
对于溢出的状况，flex-wrap 可以定义是否换行
|
||||||
|
<P>默认属性值为 nowrap 不换行；其他属性还有wrap(换行), wrap-reverse(换行，第二行反向排列)</P>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box1">
|
||||||
|
|
||||||
|
<div class="right1"></div>
|
||||||
|
<div class="left1"></div>
|
||||||
|
<div>
|
||||||
|
这里是flex-direction:column的状况 即垂直排列 起点在上面
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box box3">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
<div>
|
||||||
|
这里是flex-direction:column的状况 即垂直排列 起点在下面
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="box1 box4">
|
||||||
|
|
||||||
|
<div class="right1"></div>
|
||||||
|
<div class="left1"></div>
|
||||||
|
<div>
|
||||||
|
这里是flex-direction:column-reverse的状况 即垂直排列 起点在下面
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
86
csspress/demo/flex1pailie.html
Normal file
86
csspress/demo/flex1pailie.html
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
width: 1000px;
|
||||||
|
height: 500px;
|
||||||
|
background: pink;
|
||||||
|
|
||||||
|
display:flex;
|
||||||
|
/* 通过display:flex来把目标元素设置成flex布局 */
|
||||||
|
flex-direction: row;
|
||||||
|
/* flex-direction 属性决定主轴的方向，值为row的时候水平排列 起点在左 */
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
width: 1000px;
|
||||||
|
height: 500px;
|
||||||
|
background: gold;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
}
|
||||||
|
.left,.left1{
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
.right,.right1{
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
.box3{
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.box4{
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="margin-bottom: 50px;">
|
||||||
|
注：以下所有实例 基于flex-direction:row的情况，即水平排列 起点在左边
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style=" margin-bottom: 30px;">
|
||||||
|
上面是 justify-content:center 居中的状况
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box1">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style=" margin-bottom: 30px;">
|
||||||
|
上面是 justify-content:space-between 居中的状况
|
||||||
|
两端对齐 项目之间的间隔都相等
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box box3">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style=" margin-bottom: 30px;">
|
||||||
|
上面是 justify-content:space-around 居中的状况
|
||||||
|
每个项目两侧的间隔相等 项目到边框有间距
|
||||||
|
即两端不对齐
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
112
csspress/demo/flexjiaochazhou.html
Normal file
112
csspress/demo/flexjiaochazhou.html
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
width: 1000px;
|
||||||
|
height: 500px;
|
||||||
|
background: pink;
|
||||||
|
display:flex;
|
||||||
|
/* 通过display:flex来把目标元素设置成flex布局 */
|
||||||
|
flex-direction: row;
|
||||||
|
/* flex-direction 属性决定主轴的方向，值为row的时候水平排列 起点在左 */
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
width: 1000px;
|
||||||
|
height: 500px;
|
||||||
|
background: gold;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
}
|
||||||
|
.left,.left1{
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
.right,.right1{
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
.box3{
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.box4{
|
||||||
|
align-items: baseline ;
|
||||||
|
}
|
||||||
|
.box5{
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
.lefta{
|
||||||
|
height:auto
|
||||||
|
}
|
||||||
|
.boxfin{
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="margin-bottom: 50px;">
|
||||||
|
注：以下所有实例 基于flex-direction:row的情况，即水平排列 起点在左边
|
||||||
|
且 主轴为默认
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
</div>
|
||||||
|
<div style=" margin-bottom: 30px;">
|
||||||
|
上面是 align-items:center 居中的状况
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box1">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style=" margin-bottom: 30px;">
|
||||||
|
上面是 align-items: flex-start; 起点在上面
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box box4">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style=" margin-bottom: 30px;">
|
||||||
|
上面是 align-items:base-line 项目的第一行文字的基线对齐的情况
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box1 box5">
|
||||||
|
<div class="left lefta"></div>
|
||||||
|
<div class="right lefta"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style=" margin-bottom: 30px;">
|
||||||
|
上面是 align-items:stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box1 boxfin">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="zong">
|
||||||
|
总结1：flex-direction属性定义的是主轴方向，默认为水平，所以 交叉轴方向默认为垂直;
|
||||||
|
<p>当 flex-direction的值为column的时候，align-items决定的就是垂直方向的排列方式</p>
|
||||||
|
<b>align-items决定的是交叉轴的排列方式 而不一定是单指 垂直的排列方式</b>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
71
csspress/demo/float.html
Normal file
71
csspress/demo/float.html
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
<!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>
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
width: 1000px;
|
||||||
|
height: 300px;
|
||||||
|
background: gold;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
/* width:60px;
|
||||||
|
height: 60px; */
|
||||||
|
background: red;
|
||||||
|
/* background: rgba(255, 0, 0, 0.363); */
|
||||||
|
/* float: left; */
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.box2{
|
||||||
|
width: 120px;
|
||||||
|
height:80px;
|
||||||
|
background: gray;
|
||||||
|
border: 1px solid pink;
|
||||||
|
/* float:right */
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.a{
|
||||||
|
/* width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
border: 1px solid blue;
|
||||||
|
background: pink; */
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box">
|
||||||
|
<div class="box1">asaaaa</div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
<div class="box2"></div>
|
||||||
|
|
||||||
|
<!-- <div class="box1"></div>
|
||||||
|
<div class="box1"></div>
|
||||||
|
<div class="box1"></div>
|
||||||
|
<div class="box1"></div>
|
||||||
|
<div class="box1"></div>
|
||||||
|
<div class="box1"></div>
|
||||||
|
<div class="box1"></div>
|
||||||
|
<div class="box2">1</div>
|
||||||
|
<div class="box2">2</div>
|
||||||
|
<div class="box2">3</div>
|
||||||
|
<div class="box2">4</div>
|
||||||
|
<div class="box2">5</div>
|
||||||
|
<div class="box2" style="height: 180px;">6</div>
|
||||||
|
<div class="a"></div>
|
||||||
|
<div>nhjksahkihfi</div> -->
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
45
csspress/demo/float1.html
Normal file
45
csspress/demo/float1.html
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>
|
||||||
|
盒子模型
|
||||||
|
</title>
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
width:200px;
|
||||||
|
height:200px;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
#div1{
|
||||||
|
margin-top:10px;
|
||||||
|
background:red;
|
||||||
|
}
|
||||||
|
#div11{
|
||||||
|
margin-top:20px;
|
||||||
|
width:0;
|
||||||
|
height:0;
|
||||||
|
background:yellow;
|
||||||
|
}
|
||||||
|
#div12{
|
||||||
|
margin-top:30px;
|
||||||
|
width:50px;
|
||||||
|
height:50px;
|
||||||
|
background:blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="div1">
|
||||||
|
<div id="div11"></div>
|
||||||
|
<div id="div12"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
csspress/demo/float2.html
Normal file
50
csspress/demo/float2.html
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
<!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>
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background: red;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.hr{
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
.zongjie{
|
||||||
|
font-size:18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.zhu{
|
||||||
|
color:black
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box">你好</div>
|
||||||
|
<p class="hr">我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="box1">你好</div>
|
||||||
|
<p class="hr">我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字</p>
|
||||||
|
<!-- box1默认样式时，p标签的内容会出现在红色div的下方 -->
|
||||||
|
|
||||||
|
<p class="zongjie">总结：当box1加上float:left 时，如果文字的宽度不超过红色div的宽度 那么文字会在红色div的下面 如果文字宽度超过div的宽度，那么文字会环绕红色div</p>
|
||||||
|
<div class="zongjie zhu">原因：浮动的破坏性在于切断Linebox(行盒)链，致使高度塌陷，由于浮动元素仍在dom树中，实体是看得见摸得着的，所以他占据的位置还是在的</div>
|
||||||
|
<div class="zongjie zhu">解释:脱离文档流 是将元素从普通的布局排版中拿走，其他盒子定位的时候，会当做脱离文档流的元素不存在进行定位。但是，使用float 使元素脱离文档流时，其他盒子会无视这个元素，但其他盒子的文本依然会为这个元素让出位置，环绕在四周</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user