Table of Contents
1.复习内容
-
水平换行会产生空隙
- 设置font-size：0
-
文字水平垂直对齐方式
- 一行文本在当前一行中永远是垂直居中的
- text-align：center文本center水平居中
- line-height:60px；行高和高度保持一致，展现的就是文本垂直居中，100%计算的是和当前文字大小一致
- 表格间的元素（盒模型不完整）都要靠表格自身调节
- 单元格与单元格之间，用table属性才能添加连续的表格
- tr可以调内边距，th不可以调内边距
2.灵感代办
- 需要总结一下昨天和今天的知识点
- overflow属性研究一下
- 打代码的时间要手动设置，不然无法统计
3.学习内容
-
布局方式
-
静态流，文档流布局，流式布局
- 根据标签和书写顺序，从上到下，从左至右依次显示。
-
浮动布局（脱流）
- 主要问题：
- 浮动元素不占位，后面元素会向前移动(解决：clear可以清除兄弟元素的浮动）
- 子元素全部浮动，父元素高度为0，影响父元素背景边框等，还会影响整体布局
- 解决块元素水平排列问题，把元素顺序排列变为层次排列，浮起来
- 从原始位置开始浮动（水平浮动，垂直不动），则下一个元素占据浮动元素的原有位置（文字等不被遮挡，块元素则被遮挡）
- 按照浮动方向依次排列，如果不够，下移到可以停靠的地方
- 浮动元素并不遮挡内容，类似文字环绕效果，间距要加在浮动元素上（文字，input等）
- 设置位float之后就可以设宽高
- 块元素和浮动，行内和浮动，都有效果
- 要给块元素都添加float属性才可以并列
- 属性:float，值left/right
-
定位布局 position
- 用于实现元素显示位置的调整
- 属性position:
- 取值：relative相对定位（想对自己定位）/absolute绝对定位/fiexed固定定位
- 使用：元素设置position属性之后就叫已定位元素，已定位元素可以使用偏移属性来调整显示位置
- 偏移属性：left ，top ，bottom ，right（根据参照物进行上下左右的偏移）
- 分类：
- 1.相对定位（relative）:设置相对定位的元素会参照元素自身在文档中的原始位置偏移
- 不会脱流（保留自身位置大小）
- 2.绝对定位（absolute）：绝对定位的元素会按照距离最近的，已经定位的祖先元素进行定位，如果没有，则按照0.0，进行定位，
- 脱流（不占位，可以手动调整宽高）
- 使用：父元素设置相对定位，子元素设置绝对定位。
- 固定定位（fixed）:设置固定定位的会参照浏览器的窗口进行偏移，不会跟随页面滚动而滚动
- 脱流（不占位，可以调尺寸）
- 常见于广告，聊天，博客的目录
- 堆叠次序调整
- 已定位的元素与文档中正常元元素相比，已定位元素在上（resolution）
- 都设置了定位，就是HTML结构上，后来居上（先渲染的在底下，后渲染的在上面）
- z-index 属性，数值大，靠前
-
背景属性
- 1.设置背景颜色
- background-color
- 2.背景图片相关
- background-image:url(“路径”); 设置背景图像
- background-repeat:用来设置背景图片的重复方式（默认是：图片过大裁剪，图片太小重复）
- 取值：repeat 默认值，repeatX，repeatY，no-repeat不重复（常用）
- background-position:x,y;设置背景图像的显示位置
- x,y取值方式：
- 1.像素值，(用元素坐标系)
- 2.取方位值：
- left/center/right
- top/center/bottom
- 默认值：center
- 3.百分比取值：方位值的加强版
- x%，y%计算背景图片的起始坐标
- （元素尺寸-图片尺寸）*x%
- 特殊值：
- 0% 0% -> left top
- 50% 50% -> center
- 100% 100% -> right bottom
- background-size:width height;设置背景图片的尺寸，取像素值，百分比，或者关键字
- 像素值是直接指定宽高，只给一个值表示的是宽，高度是等比例缩放
- 百分比是根据元素尺寸（父元素）计算背景图尺寸大小
- cover覆盖：等比拉伸足够大，覆盖元素，超出部分不可见
- contain包含： 等比拉伸，到父元素限制大小
- background:color url() repeat position简写属性，背景图片尺寸要单独设置，background-size
-
伪元素：（before，after）
- 伪元素伴随每个元素
- before 和 after 必备content属性
- 伪元素是行内元素，行内元素要display才可以修改宽高
- 可以当正常元素来使用
- 适合用来设置clear：both
- clear清除要生效的话，必须是块级元素
-
position:absolute;float:left/right
- 设置了这些元素，这个元素自动变成行级块元素（inline-block）
-
浮动流
- 浮动流使用完了，要拿伪元素after消除一下
4.扩展延伸知识
- 经典的两个BUG
- margin塌陷，子和父的margin取最大的(改动子，父也被改动) bfc 改变父元素
- margin垂直合并也可以用bfc解决，但一般都不用解决
- 区域不能共用（两个span之间）
- 盒子的bfc(弥补margin塌陷)
- https://www.cnblogs.com/chen-cong/p/7862832.html
- 触发条件（只能配合使用）
- position:absolute
- display:inline-block
- float:left/right
- overflow:hidden
- 开发中的一些事：
- 一像素也不能差，产品经理像素眼
- HTML是骨架，不能随意更改
- 自适应太灵活，容易让布局变形，所以图片等元素要严谨一点
- HTML三大模型
- 盒模型，层模型，浮动模型
- 解决浮动流的根本
- 方法1：手动添加高度
- 方法2：添加overflow:hidden;属性(适用于内容不确定，需要动态加载的元素)
- 末尾加一个块元素，比如div，设置clear：both；
- content内容不被浮动float影响
- margin带动父元素下移解决：
- overflow: hidden;
- https://www.cnblogs.com/ningxinjie/p/10878225.html
- span之间间距的解决办法
5.知识内容个人梳理
6.今天都复习了之前的什么内容
水平换行会产生空隙
文字水平垂直对齐方式
- 一行文本在当前一行中永远是垂直居中的
- text-align：center文本center水平居中
- line-height:60px；行高和高度保持一致，展现的就是文本垂直居中，100%计算的是和当前文字大小一致
- 单元格与单元格之间，用table属性才能添加连续的表格
- tr可以调内边距，th不可以调内边距
- 需要总结一下昨天和今天的知识点
- overflow属性研究一下
- 打代码的时间要手动设置，不然无法统计
3.学习内容
-
布局方式
-
静态流，文档流布局，流式布局
- 根据标签和书写顺序，从上到下，从左至右依次显示。
-
浮动布局（脱流）
- 主要问题：
- 浮动元素不占位，后面元素会向前移动(解决：clear可以清除兄弟元素的浮动）
- 子元素全部浮动，父元素高度为0，影响父元素背景边框等，还会影响整体布局
- 解决块元素水平排列问题，把元素顺序排列变为层次排列，浮起来
- 从原始位置开始浮动（水平浮动，垂直不动），则下一个元素占据浮动元素的原有位置（文字等不被遮挡，块元素则被遮挡）
- 按照浮动方向依次排列，如果不够，下移到可以停靠的地方
- 浮动元素并不遮挡内容，类似文字环绕效果，间距要加在浮动元素上（文字，input等）
- 设置位float之后就可以设宽高
- 块元素和浮动，行内和浮动，都有效果
- 要给块元素都添加float属性才可以并列
- 属性:float，值left/right
-
定位布局 position
- 用于实现元素显示位置的调整
- 属性position:
- 取值：relative相对定位（想对自己定位）/absolute绝对定位/fiexed固定定位
- 使用：元素设置position属性之后就叫已定位元素，已定位元素可以使用偏移属性来调整显示位置
- 偏移属性：left ，top ，bottom ，right（根据参照物进行上下左右的偏移）
- 分类：
- 1.相对定位（relative）:设置相对定位的元素会参照元素自身在文档中的原始位置偏移
- 不会脱流（保留自身位置大小）
- 2.绝对定位（absolute）：绝对定位的元素会按照距离最近的，已经定位的祖先元素进行定位，如果没有，则按照0.0，进行定位，
- 脱流（不占位，可以手动调整宽高）
- 使用：父元素设置相对定位，子元素设置绝对定位。
- 固定定位（fixed）:设置固定定位的会参照浏览器的窗口进行偏移，不会跟随页面滚动而滚动
- 脱流（不占位，可以调尺寸）
- 常见于广告，聊天，博客的目录
- 堆叠次序调整
- 已定位的元素与文档中正常元元素相比，已定位元素在上（resolution）
- 都设置了定位，就是HTML结构上，后来居上（先渲染的在底下，后渲染的在上面）
- z-index 属性，数值大，靠前
-
背景属性
- 1.设置背景颜色
- background-color
- 2.背景图片相关
- background-image:url(“路径”); 设置背景图像
- background-repeat:用来设置背景图片的重复方式（默认是：图片过大裁剪，图片太小重复）
- 取值：repeat 默认值，repeatX，repeatY，no-repeat不重复（常用）
- background-position:x,y;设置背景图像的显示位置
- x,y取值方式：
- 1.像素值，(用元素坐标系)
- 2.取方位值：
- left/center/right
- top/center/bottom
- 默认值：center
- 3.百分比取值：方位值的加强版
- x%，y%计算背景图片的起始坐标
- （元素尺寸-图片尺寸）*x%
- 特殊值：
- 0% 0% -> left top
- 50% 50% -> center
- 100% 100% -> right bottom
- background-size:width height;设置背景图片的尺寸，取像素值，百分比，或者关键字
- 像素值是直接指定宽高，只给一个值表示的是宽，高度是等比例缩放
- 百分比是根据元素尺寸（父元素）计算背景图尺寸大小
- cover覆盖：等比拉伸足够大，覆盖元素，超出部分不可见
- contain包含： 等比拉伸，到父元素限制大小
- background:color url() repeat position简写属性，背景图片尺寸要单独设置，background-size
-
伪元素：（before，after）
- 伪元素伴随每个元素
- before 和 after 必备content属性
- 伪元素是行内元素，行内元素要display才可以修改宽高
- 可以当正常元素来使用
- 适合用来设置clear：both
- clear清除要生效的话，必须是块级元素
-
position:absolute;float:left/right
- 设置了这些元素，这个元素自动变成行级块元素（inline-block）
-
浮动流
- 浮动流使用完了，要拿伪元素after消除一下
4.扩展延伸知识
- 经典的两个BUG
- margin塌陷，子和父的margin取最大的(改动子，父也被改动) bfc 改变父元素
- margin垂直合并也可以用bfc解决，但一般都不用解决
- 区域不能共用（两个span之间）
- 盒子的bfc(弥补margin塌陷)
- https://www.cnblogs.com/chen-cong/p/7862832.html
- 触发条件（只能配合使用）
- position:absolute
- display:inline-block
- float:left/right
- overflow:hidden
- 开发中的一些事：
- 一像素也不能差，产品经理像素眼
- HTML是骨架，不能随意更改
- 自适应太灵活，容易让布局变形，所以图片等元素要严谨一点
- HTML三大模型
- 盒模型，层模型，浮动模型
- 解决浮动流的根本
- 方法1：手动添加高度
- 方法2：添加overflow:hidden;属性(适用于内容不确定，需要动态加载的元素)
- 末尾加一个块元素，比如div，设置clear：both；
- content内容不被浮动float影响
- margin带动父元素下移解决：
- overflow: hidden;
- https://www.cnblogs.com/ningxinjie/p/10878225.html
- span之间间距的解决办法
5.知识内容个人梳理
6.今天都复习了之前的什么内容
布局方式
-
静态流，文档流布局，流式布局
- 根据标签和书写顺序，从上到下，从左至右依次显示。
-
浮动布局（脱流）
- 主要问题：
- 浮动元素不占位，后面元素会向前移动(解决：clear可以清除兄弟元素的浮动）
- 子元素全部浮动，父元素高度为0，影响父元素背景边框等，还会影响整体布局
- 解决块元素水平排列问题，把元素顺序排列变为层次排列，浮起来
- 从原始位置开始浮动（水平浮动，垂直不动），则下一个元素占据浮动元素的原有位置（文字等不被遮挡，块元素则被遮挡）
- 按照浮动方向依次排列，如果不够，下移到可以停靠的地方
- 浮动元素并不遮挡内容，类似文字环绕效果，间距要加在浮动元素上（文字，input等）
- 设置位float之后就可以设宽高
- 块元素和浮动，行内和浮动，都有效果
- 要给块元素都添加float属性才可以并列
- 属性:float，值left/right
- 主要问题：
-
定位布局 position
- 用于实现元素显示位置的调整
- 属性position:
- 取值：relative相对定位（想对自己定位）/absolute绝对定位/fiexed固定定位
- 使用：元素设置position属性之后就叫已定位元素，已定位元素可以使用偏移属性来调整显示位置
- 偏移属性：left ，top ，bottom ，right（根据参照物进行上下左右的偏移）
- 分类：
- 1.相对定位（relative）:设置相对定位的元素会参照元素自身在文档中的原始位置偏移
- 不会脱流（保留自身位置大小）
- 2.绝对定位（absolute）：绝对定位的元素会按照距离最近的，已经定位的祖先元素进行定位，如果没有，则按照0.0，进行定位，
- 脱流（不占位，可以手动调整宽高）
- 使用：父元素设置相对定位，子元素设置绝对定位。
- 固定定位（fixed）:设置固定定位的会参照浏览器的窗口进行偏移，不会跟随页面滚动而滚动
- 脱流（不占位，可以调尺寸）
- 常见于广告，聊天，博客的目录
- 1.相对定位（relative）:设置相对定位的元素会参照元素自身在文档中的原始位置偏移
- 堆叠次序调整
- 已定位的元素与文档中正常元元素相比，已定位元素在上（resolution）
- 都设置了定位，就是HTML结构上，后来居上（先渲染的在底下，后渲染的在上面）
- z-index 属性，数值大，靠前
背景属性
- 1.设置背景颜色
- background-color
- 2.背景图片相关
- background-image:url(“路径”); 设置背景图像
- background-repeat:用来设置背景图片的重复方式（默认是：图片过大裁剪，图片太小重复）
- 取值：repeat 默认值，repeatX，repeatY，no-repeat不重复（常用）
- background-position:x,y;设置背景图像的显示位置
- x,y取值方式：
- 1.像素值，(用元素坐标系)
- 2.取方位值：
- left/center/right
- top/center/bottom
- 默认值：center
- 3.百分比取值：方位值的加强版
- x%，y%计算背景图片的起始坐标
- （元素尺寸-图片尺寸）*x%
- 特殊值：
- 0% 0% -> left top
- 50% 50% -> center
- 100% 100% -> right bottom
- x,y取值方式：
- background-size:width height;设置背景图片的尺寸，取像素值，百分比，或者关键字
- 像素值是直接指定宽高，只给一个值表示的是宽，高度是等比例缩放
- 百分比是根据元素尺寸（父元素）计算背景图尺寸大小
- cover覆盖：等比拉伸足够大，覆盖元素，超出部分不可见
- contain包含： 等比拉伸，到父元素限制大小
- background:color url() repeat position简写属性，背景图片尺寸要单独设置，background-size
伪元素：（before，after）
- 伪元素伴随每个元素
- before 和 after 必备content属性
- 伪元素是行内元素，行内元素要display才可以修改宽高
- 可以当正常元素来使用
- 适合用来设置clear：both
- clear清除要生效的话，必须是块级元素
position:absolute;float:left/right
- 设置了这些元素，这个元素自动变成行级块元素（inline-block）
浮动流
- 浮动流使用完了，要拿伪元素after消除一下
- 经典的两个BUG
- margin塌陷，子和父的margin取最大的(改动子，父也被改动) bfc 改变父元素
- margin垂直合并也可以用bfc解决，但一般都不用解决
- 区域不能共用（两个span之间）
- 盒子的bfc(弥补margin塌陷)
- https://www.cnblogs.com/chen-cong/p/7862832.html
- 触发条件（只能配合使用）
- position:absolute
- display:inline-block
- float:left/right
- overflow:hidden
- 开发中的一些事：
- 一像素也不能差，产品经理像素眼
- HTML是骨架，不能随意更改
- 自适应太灵活，容易让布局变形，所以图片等元素要严谨一点
- HTML三大模型
- 盒模型，层模型，浮动模型
- 解决浮动流的根本
- 方法1：手动添加高度
- 方法2：添加overflow:hidden;属性(适用于内容不确定，需要动态加载的元素)
- 末尾加一个块元素，比如div，设置clear：both；
- content内容不被浮动float影响
- margin带动父元素下移解决：
- overflow: hidden;
- https://www.cnblogs.com/ningxinjie/p/10878225.html
- span之间间距的解决办法
5.知识内容个人梳理
6.今天都复习了之前的什么内容