2020年10月22日 前端学习----定位和高级技巧 1、标准流可以从上向下摆放块级盒子，从左向右摆放行内盒子； 浮动可以从左向右摆放多个块级盒子，盒子之间没有缝隙并且顶端对齐； 定位可以让盒子： 摆放在另一个盒子中的任意位置； 固定在屏幕中的某个位置； 可以压住其他盒子。 2、定位 = 定位模式 + 边偏移 定位模式：用于指定元素的定位方式，通过 position 属性设置 边偏移：根据定位模式确定最终位置，通过 top、bottom、left、right 四个属性设置 3、静态定位 static 是元素的默认定位方式，表示没有定位的意思，类似于：border 属性的 none； 静态定位按照标准流特性摆放位置，它没有边偏移，使用边偏移没有效果； 静态定位在布局时几乎不用。 4、相对定位是相对元素自己原来的位置来定位的（自恋）。 相对定位不会脱标，原有在标准流的位置继续保留，后面的盒子仍然以标准流的方式对待它。 定位 = 定位模式 + 边偏移，给元素指定成相对定位（定位模式），但没有指定边偏移属性，元素仍然会呆在原有位置 5、绝对定位：相对最近一级设置了定位属性父级元素定位的（不包含 static）（拼爹型）。 在布局时，让盒子相对父级以上的元素定位好吗？ 不好，一旦出现问题，不好排查。 可以将父级元素设置为相对定位（relative），因为相对定位的盒子：不会脱标 + 不设置边偏移位置不会变化 会脱标，不在占有原来的位置 可以在父盒子内任意摆放位置，同时不会影响父盒子中的其他元素。 浮动元素不能随意摆放位置，会靠左或者靠右一个一个摆放，紧紧的挨在一起，并且顶部对齐。 6、子级使用绝对定位，父级使用相对定位 父级使用相对定位： 不脱标，在标准流中占据空间 绝对定位的儿子们都参考父亲进行定位 子级使用绝对定位： 脱标，不影响其他元素的摆放 自己则相对父级任意摆放位置 8、固定定位（fixed）是相对浏览器的可视窗口来定位的； 可以在浏览器的页面滚动时，元素的位置保持不变。 会脱标，固定定位的元素同样不会占有原先的位置。 在开发时为什么不建议直接控制图片？而是要给图片加一个父盒子？ 图片默认是按照实际大小显示的； 页面中的图片通常会很多； 用一个盒子包起来，控制图片更容易。 用户调整浏览器的大小时浏览器的可视区域会变化吗？固定定位的元素呢？ 会；固定定位的元素会根据边偏移属性重新调整显示位置 9、固定到版心右侧的实现步骤是什么？ left: 50%;； margin-left: 版心宽度的一半 10、粘性定位（sticky）同样也是相对浏览器的可视窗口来定位的； 粘性定位（sticky）不脱标，会占有原先的位置 把导航栏固定在屏幕的顶部，始终保持可见 把操作菜单固定在屏幕的左侧或右侧，始终保持可见 必须至少指定一个边偏移的属性；兼容性不好。 11、在使用定位时，如果出现盒子重叠的情况，可以使用 z-index 控制盒子的前后顺序。 12、绝对定位的盒子实现水平居中的步骤是什么？ left: 50%; 向右移动到父盒子宽度的一半； margin-left: -宽度的一半; 利用负数向左移动子盒宽度的一半； top: 50%; 向下移动到父盒子高度的一半； margin-top: -高度的一半; 利用负数向上移动子盒高度的一半 13、绝对定位和浮动哪一个会压住下面标准流的文字？为什么？ 绝对定位会压住文字，浮动不会； 浮动最开始的设计是为了实现文字环绕效果的。 14、display 属性可以设置或检索对象是否及如何显示。 display: none; 隐藏对象 display：block 除了转换为块级元素之外，同时还有显示元素的意思 display 隐藏元素后，不再占有原来的位置； 15、visibility 属性用于指定一个元素应可见还是隐藏； visible 元素可见； hidden 元素隐藏。 visibility: hidden 会隐藏元素，但是空间会保留； display：none 会隐藏元素，同时空间也不会保留（重点） 16、overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）的处理方式 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll 不管超出内容否，总是显示滚动条 auto 超出自动显示滚动条，不超出不显示滚动条 17、精灵图又称雪碧图，CSS Sprites； 将网页中需要使用的多张小图片整合到一张大图中，这样只要向浏览器发送更少次数的请求即可获得更多的图片 精灵图主要针对背景图片使用 用精灵图的核心是设置背景图片 的 backgroud-position（负值） x 轴是从左到右变大，从右向左移动会减少（负值） y 轴是从上到下变大，从下向上移动会减少（负值） 精灵图有什么缺点？ 本质还是图片，文件体积较大； 图片在高清屏幕上放大和缩小会失真（在手机上尤为明显）； 图片制作完毕要更换比较复杂。 体图标是为前端工程师提供一种方便高效的图标使用方式； 展示的是图标，本质属于字体； 因为字体图标的本质是字体，所以我们可以给字体图标更改大小或颜色 18、CSS 做三角形的核心原理是什么？ CSS 中边框连接处是斜边连接的 19、cursor 可以设置鼠标样式 default 小白，默认 pointer ☆ 小手，提示用户可以点击 move 移动，提示用户可以拖拽 text 文本，提示用户可以输入内容 not-allowed 禁止，提示用户 20、取消表单输入框的轮廓outline: none; 21、resize: none; 可以防止用户拖拽文本域破坏界面布局 22、vertical-align用于设置图片或者表单(行内块元素）和文字垂直对齐 baseline 默认，按照基线对齐 top 顶部对齐 middle 中部对齐 bottom 底部对齐 23、是什么原因导致图片底边有一个空白缝隙？如何解决？ 行内块元素和文本默认按照基线对齐 添加 vertical-align：middle | top | bottom（推荐使用）； 把图片转换为块级元素 display: block; 24、要实现单行文字溢出显示省略号有哪三个条件？ /* 1. 强制在一行显示文本，默认 normal 会自动换行 */ white-space: nowrap; /*2 . 超出的部分隐藏 / overflow: hidden; / 3. 文字用省略号替代超出的部分 */ text-overflow: ellipsis; 25、多行文字溢出省略号显示代码如下： /*1. 超出的部分隐藏 */ overflow: hidden; /*2. 文字用省略号替代超出的部分 / text-overflow: ellipsis; / 3. 弹性伸缩盒子模型显示 / display: -webkit-box; / 4. 限制在一个块元素显示的文本的行数 / -webkit-line-clamp: 2; / 5. 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical; 26、利用了浮动元素不会压住文字的特性。 27、行内块元素的特性： 把 a 标签转换为行内块，可以指定宽高，并且在一排显示； 利用行内块元素中间有缝隙特性自动给标签间添加间距； 给父级添加 text-align: center;、line-height: 36px;、font-size: 14px; 子级会继承，优化代码
