Web网页开发-总结笔记2

28.为什么会出现浮动？浮动会带来哪些问题？
1)为什么会出现浮动：
为了页面排版时块元素同行显示
2)浮动带来的问题：
父元素高度崩塌
29.清除浮动的方法
?(额外标签法、父级overflow、after伪元素、双伪元素）
（1）给浮动的子盒子的父盒子设置高度
（2）给父盒子添加overflow：hidden
（3）额外标签法：给浮动盒子的后方设置一个空盒子，并为这个空盒子设置clear:both属性
（4）使用伪元素、双伪元素的方式
30.设置左上角的边框圆角值为15px
border-top-left-radius: 20px;（需要注意先写垂直方向 后写水平）
或者 border-radius: 20px 0 0 0;
31.css的三种显示模式及其特点
行内块：一行多个（不能独立成行）、可设宽高
例如：<img>、<input>
行内元素：一行多个、不可设宽高、设置上下内外边距无效
例如：<font></font>、<b></b>、<span></span>
块级元素：独立成行、可设宽高
例如：<p></p>、<h1></h1>、<div></div>
32.css的三种转换模式
（1）转换为块元素：display:block;
（2）转换为行内块：display:inline-block;
（3）转换为行内元素：display:inline;
33.css的三种布局
标准流、浮动、定位
34.定位有几种模式？分别是什么？特点是什么？
（1）静态定位（static） : 默认
（2）相对定位（relative）： 相对自己本身原来所在位置的偏移，并且还占有原来的位置，不脱离标准流
（3）绝对定位（absolute）: 是元素以带有定位的父级元素来移动位置 （拼爹型），（子绝父相），脱离标准流，不占据原来的位置,脱离标准流
（4）固定定位（fixed） : 是以浏览器窗口为参照物进行定位的，脱离标准流
35.定位改变display属性
针对行内元素 行内元素如果想让宽高生效的话:
1）转换行内块元素/块级元素
2）设置浮动
3）设置定位（绝对定位和固定定位）
36.如何使用定位让一个已知宽高盒子垂直水平居中？
定位模式：position:absolute;或者position:fixed;
垂直居中 边偏移top:50% margin-top:-100px;
水平居中 边偏移left:50% margin-left:-100px;
margin-top:-100px是指盒子高度的一半
margin-left:-100px是指盒子宽度的一半
37.关于定位口诀子绝父相，什么是?绝?相以及为什么要?绝?相？
子元素设置绝对定位 父元素需要设置定位
原因：
1）?元素不占据标准流位置，所以设置绝对定位，绝对定位，父盒子要带有定位
2）父元素需要占据标准流位置，所以设置相对定位
38.图片文字对齐(垂直对齐方式)
vertical-align:top; 顶部对齐
vertical-align:middle; 中间对齐，图文对齐
vertical-align:bottom; 底部对齐
vertical-align:baseline; 基线对齐
39.display有哪些属性值，分别是什么意思？
display:none; 元素的隐藏
display:block; 元素的显示
display:block; 转换为块级元素
display:inline; 转换为行内元素
display:inline-block; 转换为行内块元素
40.display:none与 visibility:hidden的区别
display:none;隐藏之后，不保留原有位置
visibility:hidden;隐藏之后，保留原有位置
41.overflow有哪些值，分别是什么意思？
overflow:visible; 不剪切内容也不添加滚动条
overflow:hidden; 不显示超过对象尺寸的内容，超出的部分隐藏掉
overflow:scroll; 不管超出内容否，总是显示滚动条
overflow:auto; 超出自动显示滚动条，不超出不显示滚动条
42.去除图片底侧的空白空隙
①给img 设置vertical-align:middle | top| bottom等等。让图片不要和基线对齐。
②给img 添加 display:block; 转换为块级元素就不会存在问题了
43.溢出的文字省略号显示
1）强制在一行显示 white-space:nowrap;
2）超出的部分隐藏 overflow:hidden;
3）溢出的文字用省略号显示 text-overflow:ellipsis;
44.简述优雅降级和渐进增强
优雅降级：先写最新版本浏览器支持的外观样式，再考虑兼容问题，兼容旧版本浏览器
渐进增强：先保证基本功能的实现，再考虑实现新的外观效果，兼容新版本浏览器
45.如何使用定位让一个未知宽高的盒子垂直，水平居中？
第一步：绝对定位 上下左右为0
第二步：margin：auto；
46.CSS Sprites精灵图使用步骤？使用CSS精灵图的好处？
步骤：①.得到精灵图后? ②.插入背景图的方式进行引用? ③.再利用背景图片定位
好处：①.减少http的请求次数? ②.页面加载速度变快
47.浏览器是怎样解析CSS选择器的？
写时从左到右，解析时从右到左。先选最里层，后选外层
48.什么是回流？什么是重绘以及区别？
回流：从新加载页面，布局发生变化? ? ? ?重绘：重新调用css? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 区别：回流必将引起重绘，而重绘不一定会引起回流。
49.用纯CSS实现三角形的原理是什么？
1）div的宽高为0
2）四个方向边框：粗细 实线 颜色
3）想要哪个方向给哪个方向边框设置透明色（transpare）
50.style标签写在body前和body后有什么区别？
写在body前当然是先加载样式.
写在body标签后先加载HTML结构再加载样式，会出现页面闪烁的问题
51.怎么让Chrome支持小于12px的文字？
font-size后加缩放比例
52.rgba、opacity、transparent透明效果有什么区别？
rgba设置透明效果，只作用于当前元素
opacity不只作用于当前元素，还包括当前元素里的内容，具有继承性
transparent 是颜色的一种，这种颜色叫透明色
53.取消轮框线
outline: 0; 或者 outline: none;
54.div+css布局较table布局有什么优点？
1）?结构与样式分离
2）代码语义性好
3）更符合HTML标准规范
4）SEO（搜索引擎优化）友好