Web网页开发-总结笔记2

发布时间:2024年01月05日

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(搜索引擎优化)友好

文章来源:https://blog.csdn.net/pinbodeshaonian/article/details/135400796
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。