第二周预习

一.盒子模型

1.1盒子模型组成

div {
width: 200px;
height: 200px;
background-color: pink;
/* 内容与盒子边缘之间＊/
padding: 20px;
border: 1px solid O#000;
margin: 50px
}

内容区域﹣width & height

内边距﹣ padding（出现在内部）

边框线﹣border 外边距- margin(出现在盒子外部)

1.2盒子模型﹣边框线 设置单方向边框线 属性名：border﹣方位名词（bd＋方位名词首字母，例如，bdl)

div {
 border-top: 2px solid red;
 border-right: 3px dashed green;
 border-bottom: 4px dotted blue;
 border-left:Spx solid orange;
 width: 200px;
 height: 200px;
 background-color: pink;
 ）
 solid实线
 dashed虚线
 dotted点线

1.3盒子模型﹣内边距 作用：设置内容与盒子边缘 之间的距离。属性名：padding / padding﹣方位名词

 div{
 /* 四个方向 内边距相同＊/
 padding: 30px;
 /* 单独设置一个方向内边距＊/
 padding-top: 10px;
 padding-right: 20px;
 padding-bottom: 40px;
 padding-left: 80px;
 width: 200px;
 height: 200px;
 background-color: pink;
     }

取值个数示例	含义
一个值padding: 10px;	四个方向内边距均为10px
四个值padding: 10px 20px 40px 80px;	上：10px；右：20px；下：40px；左：80px
三个值padding:10px 40px 80px;	上：10px；左右：40px；下：80px
两个值padding:10px 80px;	上下：10px；左右：80px

1.4盒子模型﹣尺寸计算

• 默认情况 盒子尺寸＝内容尺寸＋border尺寸＋内边距尺寸

• . 结论：给盒子加 border/padding 会撑大盒子

  解决

• 手动做减法，减掉 border /padding 的尺寸

• 内减模式：box-sizing: border-box

1.5使盒子在这一行居中

margin: 0 auto;

1.6文字溢出盒子

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

1.7外边距问题 - 合并现象 场景：垂直排列的兄弟元素，上下 margin 会合并现象：取两个 margin中的较大值生效

 .one {
 margin-bottom: 50px;
 }
 .two {
 margin-top: 20px;
 }
 两者之间的间距为50px

1.8外边距问题﹣塌陷问题 场景：父子级的标签，子级的添加上外边距 会产生塌陷问题

现象：导致父级一起向下移动

解决办法

1. 最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。

2. 给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。

3. 给父盒子添加overflow属性。 overflow:auto; 有可能出现滚动条，影响美观。 overflow:hidden; 可能会带来内容不可见的问题。

4. 父盒子里最下方引入清除浮动块。最简单的有：

   <br style="clear:both;"/>（在HTML中改） 有很多人是这么解决的，但是我们并不推荐，因为其引入了不必要的冗余元素 。

5. 父级设置 boder-top加入边框定位

6. after伪类清除浮动。 外部盒子的after伪元素设置clear属性。

7.  #parent:after{
                    clear: both;
                    content: "";
                    width: 0;
                    height: 0;
                    display: block;
                    visibility: hidden;
                }

1.9行内元素 - 内外边距问题 场景：行内元素添加 margin和 padding，无法改变元素垂直位置 解决方法：给行内元素添加 line-height 可以改变垂直位置

 span {
 /* margin 和 padding 属性，无法改变垂直位置 */
 margin: 50px;
 padding: 20px;
 /* 行高可以改变垂直位置 */
 line-height: 100px;
 }(改变两个span之间的距离水平和竖直)

1.10盒子模型﹣圆角 作用：设置元素的外边框为圆角。 属性名：border-radius

属性值：数字＋px／百分比

提示：属性值是圆角半径

记忆：从左上角顺时针赋值，没有取值的角与对角取值相同＊/ /* 四值：左上 右上 右下 左下＊/ border-radius: 10px 20px 40px 80px; /* 三值：左上 右上＋左下 右下＊/ border-radius: 10px 40px 80px; /* 两值：左上＋右下 右上＋左下＊/ border-radius: 10px 80px;

1.11

1.12盒子模型﹣阴影 作用：给元素设置阴影效果 属性名：box-shadow 属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影 注意： X轴偏移量和Y轴偏移量必须书写 默认是外阴影，内阴影需要添加 inset

二.布局

1.1标准流 标准流也叫文档流 指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

1.2浮动 作用：让块元素水平排列。 属性名：float 属性值 .left：左对齐 .right：右对齐（只有一个属性值时两个块元素可能会重合一部分）

1.3清除浮动 场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

1.4 Flex Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

Flex - 组成 设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸 组成部分： 弹性容器 弹性盒子 主轴：默认在水平方向 侧轴／交叉轴：默认在垂直方向

/* 弹性盒子：沿着主轴方向排列**＊/

、

Flex 布局

描述	属性
创建flex 容器	display: flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

1.5侧轴对齐方式 属性名 align-items当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

1.6修改主轴方向 主轴默认在水平方向，侧轴默认在垂直方向 属性名：flex-direction 属性值

属性值	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

1.7弹性伸缩比 作用：控制弹性盒子的主轴方向的尺寸。 属性名：flex 属性值：整数数字，表示占用父级剩余尺寸的份数。

没有高自动拉伸

宽由内容撑开

即侧轴默认拉伸

主轴转换后

1.8弹性盒子换行 弹性盒子可以自动挤压或拉伸， 默认情况下，所有弹性盒子都在一行显示。 属性名：flex-wrap 属性值 .wrap：换行 .nowrap：不换行（默认）

1.10项目目录 网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML、CSS、图片、JavaScript等等。 ◆ images文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等 ◆uploads文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片 ◆ css文件夹：存放 CSS 文件（link 标签引入）

 base.css：基础公共样式，例如：清除默认样式、设置网页基本样式
 index.css：首页CSS 样式
 index.html：首页HTML文件

 /* 基础公共样式：清除默认样式＋设置通用样式／
 *{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 li{
 list-style: none;
 }
 body {
 font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
 color: □#333;
 }
 a {
 text-decoration: none;
 color: O#333;
 }
 /＊版心 */
 .wrapper{
 margin: 0 auto;
 width: 1200px;
 }

 <!-- 顺序要求：先清除再设置 -->
 <link rel="stylesheet" href="./css/base.css">
 <link rel="stylesheet" href="./css/index.css">

三.网页制作思路

1.1网页制作思路 1．布局思路：先整体再局部，从外到内，从上到下，从左到右 2.CSS实现思路 1．画盒子，调整盒子范围一宽高背景色 2．调整盒子位置→flex布局、内外边距 3．控制图片、文字内容样式

1.2header 区域﹣布局 通栏：宽度与浏览器窗口相同的盒子 标签结构：通栏＞版心＞logo＋导航＋搜索＋用户 display: flex;

1.3logo 制作技巧 logo功能： ．单击跳转到首页 CSS（层叠样式表） ．搜索引擎优化：提升网站百度搜索排名 实现方法： . 标签结构：h1>a＞网站名称（搜索关键字） · CSS 样式：

 .logo a {
 display: block;
 width: 195px;
 height: 41px;
 background-image: url(../images/logo.png);
 /* 隐藏文字＊/
 font-size: 0;
 }

1.4导航制作技巧（nav) 导航功能 ．单击跳转页面 实现方法：

 . 标签结构：ul>li*3>a
 ．优势：避免堆砌a标签，网站搜索排名降级
 . 布局思路
 li 设置 右侧 margin
 a 设置 左右 padding

四.定位

1.1定位 作用：灵活的改变盒子在网页中的位置 1．定位模式：position 2．边偏移：设置盒子的位置 ·left ·right ·top ·bottom

1.2堆叠层级 z-index 默认效果：按照标签书写顺序，后来者居上 作用：设置定位元素的层级顺序，改变定位元素的显示顺序

1.3相对定位 position: relative

 *{
 margin: 0;
 padding: 0;
 }
 1．改变位置的参照物是 自己原来的位置
 2．不脱标，占位
 3．标签显示模式特点 不变
 div {
 position: relative;
 top: 100px;
 left: 200px;
 }

1.4绝对定位

使用场景：子级绝对定位，父级相对定位（子绝父相）

 .news {
 position: relative;
 margin: 100px auto;
 width: 400px;
 height: 350px;
 background-color: #f8f8f8;
 }
 /*1．脱标，不占位
 2．参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置
 */
 .news span {
 position: absolute;
 top: 0;
 right: 0;
 display: block;
 width: 92px;
 height: 32px;
 background-color: Orgba(0,0,0,0.6);
 text-align: center;
 line-height: 32px;
 color:■#fff;
 }

1.5定位居中

实现步骤： 1.绝对定位

2.水平、垂直边偏移为50%

3．子级向左、上移动自身尺寸的一半

. 左、上的外边距为 ﹣尺寸的一半

·transform:translate(-50%, -50%)

 img {
 position: absolute;
 left: 50%;
 top: 50%;
 /*margin-left:-265px;margin-top: -127px;*/
 /* 方便：50% 就是自己宽高的一半＊/
 transform: translate(-50%, -50%);
 }

1.6固定定位 position:fixed 场景：元素的位置在网页滚动时不会改变

 1．脱标，不占位
 2．参照物：浏览器窗口
 div{
 position: fixed;
 top: 0;
 right: 0;
 width: 500px;
    }

1.7定位总结

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来位置
绝对定位	absolute	是	行内块特点	1．已经定位的祖先元素2．浏览器可视区
固定定位	fixed	是	行内块特点	浏览器窗口

五.CSS精灵

1.1.CSS 精灵

也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度实现步骤： 1．创建盒子，盒子尺寸与小图尺寸相同 2．设置盒子背景图为精灵图

1. 添加 background-position 属性，改变背景图位置 3.1使用PxCook 测量小图片左上角坐标 3.2取负数坐标为 background-position 属性值（向左上移动图片位置）

 div {
 width: 112px;
 height: 110px;
 background-color: Mpink;
 background-image: url(./images/abcd.jpg);
 background-position:-256px-276px;
 }

1.2字体图标

字体图标：展示的是图标，本质是字体 作用：在网页中添加简单的、颜色单一的小图标优点

优点

＞灵活性：灵活地修改样式，例如：尺寸、颜色等 ＞轻量级：体积小、渲染快、降低服务器请求次数 ＞兼容性：几乎兼容所有主流浏览器 ＞使用方便：先下载再使用

1.3字体图标﹣下载字体 ● iconfont 图标库：https://wwyw.iconfont.cn/ . 下载字体 登录→ 素材库→官方图标库→进入图标库→选图标，加入购物车→购物车，添加至项目，确定→下载至本地

1.4字体图标﹣使用字体 1、 引入字体样式表（iconfont.css)

 @font-face {
 font-family: "iconfont";/＊字体名称＊/
 src: url('iconfont.woff2?t=1675303337325') format('woff2'),
     url('iconfont.woff?t=1675303337325')format('woff'),
     url('iconfont.ttf?t=1675303337325')format('truetype');
 }

2．标签使用字体图标类名

1. iconfont：字体图标基本样式（字体名，字体大小等等）

2. icon-xxxx：图标对应的类名

 <span class="iconfont icon-xxx"></span>

/* 如果要调整字体大小，注意选择器的优先级要高于iconfont类＊/

1.5字体图标上传矢量图 . 作用：项目特有的图标上传到iconfont图标库，生成字体

1.6垂直对齐方式 vertical-align 属性名：vertical-align

属性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 display: block;