diff --git a/csspress/1.css基础.md b/csspress/1.css基础.md index 69fd612..b40e3b0 100644 --- a/csspress/1.css基础.md +++ b/csspress/1.css基础.md @@ -186,5 +186,13 @@ overflow-x:auto(滚动条)/ hidden (隐藏) 横向内容溢出的表现 overflow-y:auto(滚动条)/ hidden (隐藏) 纵向内容溢出的表现 - +verticle-align 设置元素的垂直对齐方式 +属性值: +* baseline 默认值,元素放置在父元素的基线上 +* text-top 元素顶端和父元素字体顶端对齐 +* text-bottom 元素顶端和父元素字体底部对齐 +* middle 元素位于父元素的中部 + ... + + diff --git a/csspress/2.盒模型.md b/csspress/2.盒模型.md index 77457d7..2658f07 100644 --- a/csspress/2.盒模型.md +++ b/csspress/2.盒模型.md @@ -115,7 +115,7 @@ css 盒模型包括如下要素 width:300px; height:300px; background-color:red; - margin-top:20px; + margin-bottom:20px; } #inner { diff --git a/csspress/4.flex.assets/image-20210222165013291.png b/csspress/4.flex.assets/image-20210222165013291.png new file mode 100644 index 0000000..9a5a3cd Binary files /dev/null and b/csspress/4.flex.assets/image-20210222165013291.png differ diff --git a/csspress/4.flex.md b/csspress/4.flex.md index 52837ec..db55a5f 100644 --- a/csspress/4.flex.md +++ b/csspress/4.flex.md @@ -7,16 +7,9 @@ flex 意为弹性盒子,用来为盒模型提供最大的灵活性 任何一个元素都能被指定为flex 容器 ``` -/* - 选中元素为块级元素时 -*/ -display:flex +display:flex 选中元素为块级元素时 - -/* - 选中元素为内联元素时 -*/ -display:inline-flex +display:inline-flex 选中元素为内联元素时 ``` ### 基本概念 @@ -35,13 +28,24 @@ display:inline-flex 当 flex-direction 的值为column时 主轴为竖直 侧轴为水平 -![image-20210120143705542](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120143705542.png) +![image-20210222165013291](\4.flex.assets\image-20210222165013291.png) + + + +![image-20210120143705542](\4.flex.assets\image-20210120143705542.png) + + + + ### 容器的属性 - flex-direction 声明容器使用的轴是水平的还是垂直的 - - row 水平 - - column 垂直 + - row 水平(起点在左) + - column 垂直 (起点在上) + - row-reverse 水平(起点在右) + - column-reverse 垂直(起点在下) + - justify-content 声明排列的方式 - center 居中 - space-around 每个项目两侧的间隔相等 项目到边框有间距 @@ -53,7 +57,7 @@ display:inline-flex - baseline 第一行文字的基线对齐 - stretch 默认占满整个容器的高度 -![image-20210120113341512](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120113341512.png) +![image-20210120113341512](\4.flex.assets\image-20210120113341512.png) ``` @@ -103,7 +107,7 @@ display:inline-flex ##### center: 水平居中 -![image-20210120114326831](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120114326831.png) +![image-20210120114326831](\4.flex.assets\image-20210120114326831.png) ``` .box{ @@ -120,7 +124,7 @@ display:inline-flex ##### space-around 每个项目两侧的间隔相等 项目到边框有间距 -![image-20210120114504619](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120114504619.png) +![image-20210120114504619](\csspress\4.flex.assets\image-20210120114504619.png) ``` .box{ @@ -137,7 +141,7 @@ display:inline-flex ##### space-between 两端对齐 项目之间的间隔都相等 -![image-20210120114721023](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120114721023.png) +![image-20210120114721023](\4.flex.assets\image-20210120114721023.png) diff --git a/csspress/5.自适应和响应式.md b/csspress/5.自适应和响应式.md index 2529233..8a355a6 100644 --- a/csspress/5.自适应和响应式.md +++ b/csspress/5.自适应和响应式.md @@ -75,6 +75,50 @@ 通过’%‘单位来实现响应式效果。浏览器高度和宽度发生变化时,通过百分比单位可以使元素的高和宽随着浏览器的变化而变化,从而实现响应式效果 +可以取百分比的属性: +* 定位: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 (设置元素垂直对齐方式) + 示例: ``` @@ -195,5 +239,8 @@ rem是一个相对单位,1rem等于html元素上字体设置的大小。我们 2.根据设计稿大小,调整里面的最后两个参数值。 -3.使用1rem=100px转换你的设计稿的像素,例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。 +3.使用1rem=100px转换你的设计稿的像素,例如设计稿上某个块是100px * 300px,换算成rem则为1rem*3rem。 + +示例参考demo/rem.html + diff --git a/csspress/css实战(一).assets/image-20210223151126809.png b/csspress/css实战(一).assets/image-20210223151126809.png new file mode 100644 index 0000000..526f58b Binary files /dev/null and b/csspress/css实战(一).assets/image-20210223151126809.png differ diff --git a/csspress/css实战(一).assets/image-20210223174608465.png b/csspress/css实战(一).assets/image-20210223174608465.png new file mode 100644 index 0000000..105aa17 Binary files /dev/null and b/csspress/css实战(一).assets/image-20210223174608465.png differ diff --git a/csspress/css实战(一).assets/image-20210223180430143.png b/csspress/css实战(一).assets/image-20210223180430143.png new file mode 100644 index 0000000..84bce1c Binary files /dev/null and b/csspress/css实战(一).assets/image-20210223180430143.png differ diff --git a/csspress/css实战(一).assets/image-20210223180523455.png b/csspress/css实战(一).assets/image-20210223180523455.png new file mode 100644 index 0000000..47d8685 Binary files /dev/null and b/csspress/css实战(一).assets/image-20210223180523455.png differ diff --git a/csspress/css实战(一).assets/image-20210223181949796.png b/csspress/css实战(一).assets/image-20210223181949796.png new file mode 100644 index 0000000..e0a74ca Binary files /dev/null and b/csspress/css实战(一).assets/image-20210223181949796.png differ diff --git a/csspress/css实战(一).assets/image-20210223182049992.png b/csspress/css实战(一).assets/image-20210223182049992.png new file mode 100644 index 0000000..c4f2bd2 Binary files /dev/null and b/csspress/css实战(一).assets/image-20210223182049992.png differ diff --git a/csspress/css实战(一).assets/image-20210223182258454.png b/csspress/css实战(一).assets/image-20210223182258454.png new file mode 100644 index 0000000..5a12baf Binary files /dev/null and b/csspress/css实战(一).assets/image-20210223182258454.png differ diff --git a/csspress/css实战(一).assets/image-20210223182345438.png b/csspress/css实战(一).assets/image-20210223182345438.png new file mode 100644 index 0000000..c37580f Binary files /dev/null and b/csspress/css实战(一).assets/image-20210223182345438.png differ diff --git a/csspress/css实战(一).assets/image-20210223182428924.png b/csspress/css实战(一).assets/image-20210223182428924.png new file mode 100644 index 0000000..3f7b61d Binary files /dev/null and b/csspress/css实战(一).assets/image-20210223182428924.png differ diff --git a/csspress/css实战(一).assets/image-20210223182524394.png b/csspress/css实战(一).assets/image-20210223182524394.png new file mode 100644 index 0000000..4669925 Binary files /dev/null and b/csspress/css实战(一).assets/image-20210223182524394.png differ diff --git a/csspress/css实战(一).md b/csspress/css实战(一).md new file mode 100644 index 0000000..17d1feb --- /dev/null +++ b/csspress/css实战(一).md @@ -0,0 +1,43 @@ +# css实战阶段一 +### 苏宁易购 + +#### 顶部导航栏: + +![image-20210223180523455](E:\web\lessons\课件\csspress\css实战(一).assets\image-20210223180523455.png) + + + +说明: 写完顶部导航条以后需要加上下面的白色下拉框的内容 本阶段可以一直显示 + +### 白色的标题搜索栏 + +![image-20210223181949796](E:\web\lessons\课件\csspress\css实战(一).assets\image-20210223181949796.png) + + + +### 分类 + +![image-20210223182049992](E:\web\lessons\课件\csspress\css实战(一).assets\image-20210223182049992.png) + + + +### 热卖爆款 + +![image-20210223182258454](E:\web\lessons\课件\csspress\css实战(一).assets\image-20210223182258454.png) + + +### 冰箱洗衣机 + +![image-20210223182345438](E:\web\lessons\课件\csspress\css实战(一).assets\image-20210223182345438.png) + + + +### 底部导航 + +![image-20210223182428924](E:\web\lessons\课件\csspress\css实战(一).assets\image-20210223182428924.png) + + + +### 固定的侧边栏 + +![image-20210223182524394](E:\web\lessons\课件\csspress\css实战(一).assets\image-20210223182524394.png) \ No newline at end of file diff --git a/csspress/demo/absolute.html b/csspress/demo/absolute.html new file mode 100644 index 0000000..f8b2fc0 --- /dev/null +++ b/csspress/demo/absolute.html @@ -0,0 +1,52 @@ + + + +
+ + ++
注:这里红色的div是依据 body定位的,而不是根据父元素黄色的div 定位,
+加上position static 后也是根据body 定位,
+当父元素的Position声明为 absolute 时,红色会依据父级黄色定位,但是会超脱文档流,影响下面的元素
+ + + + + + + + \ No newline at end of file diff --git a/csspress/demo/fixed.html b/csspress/demo/fixed.html new file mode 100644 index 0000000..462f1ec --- /dev/null +++ b/csspress/demo/fixed.html @@ -0,0 +1,46 @@ + + + + + + +默认属性值为 nowrap 不换行;其他属性还有wrap(换行), wrap-reverse(换行,第二行反向排列)
+当 flex-direction的值为column的时候,align-items决定的就是垂直方向的排列方式
+ align-items决定的是交叉轴的排列方式 而不一定是单指 垂直的排列方式 +