CSS day_05(6.16) 高度坍塌问题、元素定位、文本处理、CSS样式重置

一、解决高度坍塌

1.父级元素自定义高度

当父级中子元素浮动，子元素就脱离文档流了，从而就不能支持父元素，父元素可以参照子元素自定义一个高度。

应用场景： 已知子元素的高度，并且子元素高度相同，最适合使用父级自定义高度，如：导航条 劣势：当子元素高度未知时，无法自定义父级高度

2.BFC保护

任何设置了BFC的元素，和浮动的元素相遇时，都可以实现"自动填充"的适应布局。 父元素设置了BFC结界后，子元素浮动，父元素高度会自动填充(自动适配) 解决父级高度坍塌 overflow:hidden/auto/scroll 触发父元素的BFC

应用场景： 子元素不会超出父级范围

3.clear属性清除子元素浮动给父元素带来的影响

clear属性专门用来解决float带来的高度坍塌问题 清除不是清除前面元素的浮动效果，而是清除因为子元素浮动对父亲造成的"不支撑"影响 使用clear的元素自己不可以浮动，要保持在文档流中替前面浮动走的兄弟元素收尾，支持父级 clear属性只对块级元素生效 方案：可以使用父元素的最后一个子元素，牺牲自我(宽度高度都不能有)，清除前面元素造成的坍塌 注意：clear清除的是前面的元素，后面的浮动元素不起效，所以要写在最后

劣势：不适合后台数据遍历插入

4.让父级元素成为同层元素

让父元素也通过float浮动脱离文档流，这时父级与子级就成为了同层元素 父元素脱离文档流还会产生问题，导致上层元素依然需要处理高度坍塌的问题 浮动的属性不会继承，此处方式尽量少用，因为会出现连带反应，还得解决父级的父级

5.使用伪元素解决高度坍塌

使用父元素的 ::after 模拟一个假孩子，而且 ::after 伪元素刚好在元素的最末尾 注意需要变成块级并且使用 clear:both

/* 给父元素最后生成一个空白子元素，变块级，清除前面兄弟浮动对父级造成的高度坍塌影响 */ .clearfix::after {     content: ''; /* 在父级最后生成一个空白的新的子元素 */     display: block;     clear: both; }

二、 元素的定位

1.定位的相关属性

定位position的五种值： 静态定位(默认)、相对定位、绝对定位、固定定位。粘性定位(新出的) 静态定位：position:static;默认值 元素是静态/文档流定位。 从上往下(块级)/从左到右(内联) 当前元素处于文档流中，只能依次排布，不能随意改变自己的位置 常用的三种：相对定位、绝对定位、固定定位

四个位置移动属性： top/bottom/left/right 值可以是长度值也可以是百分比 top : 正值向下移动 负值相反 bottom: 正值向上移动 负值相反 left: 正值向右移动 负值相反 right: 正值向左移动 负值相反 注意：不使用定位属性不能使用以上四个值让元素移动

层级 z-index 设定一个定位元素，当元素之间发生重叠时，z-index值大的元素就会覆盖z-index值较小的元素 z-index的值越大，层级越高 值为整数值，没有任何单位 默认值auto,可以看作层级0，z-index还可以取负值

2.相对定位 relative

相对定位：相对于元素原来的位置进行重新定位 position:relative; 可以使用top/bottom/right/left移动元素 使用相对定位可能会产生元素的重叠，向改变元素的层级需要使用z-index属性 相对定位没有脱离文档流，所以可以保留原有位置，支撑父元素，不会影响父级 与外间距的区别： 外间距移动会影响到其他元素的位置，相对定位不会挤开兄弟元素，但会遮盖兄弟元素

三、文本处理

1.字号(字体大小)

font-size:14px; 绝对单位，在任何的终端尺寸都一样 font-size:1.5em；设置成父级字体大小的1.5倍 font-size:1.5rem;设置成页面根元素html元素大小的1.5倍 文字大小这个属性可以被继承 提示：Chrome浏览器默认字体大小是16px,最小显示字号是12px,低于12px也以12px显示 一般门户常用的字体大小是12px、14px、16px

2.字体型号(家族)

font-family 字体系列允许通过指定有先后顺序的，由字体"名称"或字体"族名"的列表来选定元素字体。简单说：多写几个字体，要写的就是字体名字 执行顺序是从前向后执行的 如果字体名称有空格或中文，需要用引号包裹 一般情况下，设置字体系列放到html标签上渲染 注意的是，使用商用字体要考虑版权

3.字体自重(重量)

font-weight 字体重量 就是字体的粗细 浏览器不同展现的效果也会不同 font-weight: normal;  默认正常体 font-weight: lighter; 细体 font-weight: bold;  粗体 font-weight：使用数值的方式 100的倍数 100~900 默认400正常体  600粗体  300细体

4.文字颜色

color:文字颜色，该属性可以被继承，值可以使用颜色色值

5.文本的水平对齐方式

text-align 定义行内内容(文本、内联元素)，如何相对于它的块级父元素对齐 text-align 属性并不写给对齐的元素，而是要写给它的块级父元素 取值： left 左对齐  center 居中对齐  right 右对齐 提示：此属性对行内元素无效，如果行内块元素宽度与内容等宽，也无效

6.行高

line-height 行高也称作行间距，指的是文本之间的距离，包含文本本身的高度 line-height:20px； 长度值 line-height:数字； 数字没单位，代表倍数(当前字号的几倍行距) 如果需要单行文字在元素内垂直居中：line-height：元素高度

7.文本的修饰线

text-decoration:underline； 下划线 text-decoration:none；无线条 text-decoration:line-through；删除线

8.文本溢出效果

文本溢出先要控制元素的范围(宽度) white-space: nowrap; 强制不换行 overflow: hidden; 溢出部分隐藏 text-overflow: ellipsis; 想显示省略号，告诉用户文字还没完 以上三步都写出来才会有文字后面的省略号效果

9.首行缩进

一般用于中文段落的首行，首行需要缩进两个中文字符 text-indent: 2em; 注意：使用 是英文空格

10.垂直对齐方式

vertical-align 针对的是内联元素左右的文本和内联元素自己的垂直对齐方式。块级无效。 img图片标签默认vertical-align: baseline; 基线对齐 vertical-align:top; 顶线对齐 vertical-align:bootom; 底线对齐 vertical-align:middle; 居中对齐

四、拓展 CSS样式重置

样式重置(Reset)/样式标准化(Normalize)解决方案：

https://necolas.github.io/normalize.css/8.0.1/normalize.css

有些元素默认样式不好用，需要在最开始写页面时重新设定统一下，改成适合于当前项目的样式

这个样式文件讲了哪些标签进行重置，哪些标签修改了默认样式以及解释了为什么要这么重置

基本上把各种浏览器存在不统一，有兼容性问题的样式全都进行一致化了,可以认为是一个最全的

推荐大家课下空了看看，慢慢啃

面试题：你知道的浏览器兼容性问题有哪些？/进行过样式重置吗？/进行过样式标准化吗？

这种问题几乎是无解的，兼容性问题可以认为是BUG

HTML CSS标准本身有BUG,浏览器实现就无法全部按照标准实现出来

所以有各种各样兼容性不好的地方，不同的地方

有没有一个CSS全列出来了有哪些不兼容的地方？

可以找上面的那个CSS文件：样式重置(Reset)/样式标准化(Normal)

创建04.css /**** 第一步：样式标准化(重置):将浏览器提供的默认样式统一化实用化 ****/ /* 有些元素默认样式不好用，需要在最开始写页面时重新设定统一下，改成适合于当前项目的样式 */ /* 1.将所有元素、所有元素之前、所有元素之后的盒子模型计算方案改成边框盒子 */ *, *::before, *::after {     box-sizing: border-box; } /* 2.根元素html的设置*/ html {     /* 2.1根元素html的高度默认是靠内容撑起来的，很矮，使用起来很不方便     所以可以让html的高度是它的父级，也就是浏览器高度的100%  */     height: 100%;     /* 2.2 设定根元素html的字体大小 */     font-size: 14px;     /* 页面中所有使用rem单位的长度都是相对于html的font-size */     /*根倍率：2rem相当于2倍的html font-size的大小 */ } /* 3.body的样式重置 */ body {     /* 3.1不同浏览器外边距不同，不要，清零 */     margin: 0;     /* 3.2设置字体，中文用黑体，英文用Arial,第三个是替补，没有前面再用它 */     font-family: '黑体','Arial','Helvetica';     /* 3.3body的字体大小不用写，继承了html的14px,字体颜色设置一下 */     color: #666;     /* 3.4设置背景颜色 */     background-color: #f5f5f5; } /* 4.超链接样式重置 */ a:link {     /* 4.1文本装饰：清除(不要超链接默认的下划线) */     text-decoration: none;     /* 4.2修改超链接字体颜色：超链接默认不会继承body的字体颜色(特殊记忆) */     color: #808080; } /* 4.3设置超链接被访问过后的样式 */ a:visited {     /* 访问前后都是#808080 */     color: #808080; } /* 4.4设置超链接鼠标悬停时的样式 */ a:hover {     /* 鼠标悬停，超链接字体颜色会深一些 */     color: #666; } /* 4.5 a:active状态没有特殊样式，在这里不用写，但注意这4个伪类的顺序：link visited hover active */ /* 5.1一般做导航栏的时候都会用到列表，但是列表有一些默认样式需要重置下 */  ul,ol {     /* 浏览器为所有的列表提供了上下外间距，需要清除 */     margin: 0;     /* 浏览器为所有的列表左侧提供了内边距，需要清除 */     padding: 0; } /* 5.2 清除浏览器提供的每个列表项前的提示符号*/ li {     /* 去掉列表前默认的实心圆(ul)/阿拉伯数字(ol) */     list-style-type: none; } /* 6.清除段落默认存在的上下外间距 */ p {     /* 浏览器为所有的段落提供了上下外间距，需要清除 */     margin: 0; } /* 7.清除输入元素的外轮廓线，就没有什么项目想使用这个外轮廓线的 */ input {     /* 所有的输入元素获得焦点时，会添加外轮廓线，需要清除 */     outline: none; } /****第二步：样式脚手架(Scaffolding):声明一些基础类，辅助构建整个页面****/ /* 8.给页面做一些基础的样式设置 */ .container {     /* 8.1给主要内容设置1000px的宽度 */     width: 1000px;     /* 8.2设置container在页面水平居中的效果 */     margin: 0 auto; } /* 8.3 担心后面会出现因全部子元素浮动走造成的父级高度坍塌问题 */ .container::after {     content: ''; /*在.container内部最后位置生成一个新的子元素,其实就是个空字符串*/     display: block; /*显示模式为"块级"的元素才能清除前面兄弟的浮动影响*/     clear: both; /*清除向左/右两个方向浮动产生的影响*/ } /**** 8.4 开发测试阶段的辅助线，颜色自定义，代码完成后记得要删掉！****/ div {     border: 1px solid #aaa; } /****第三步：准备工作完成 正式开始写"各层楼"的样式****/ /******** F1 相关的样式 ********/ /******** F2 相关的样式 ********/