课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认识达内从这里开始
认真做教育 专心促就业
position的值， relative和absolute分别是相对于谁进行定位的？
<1>、relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
<2>、absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
<3>、fixed: 生成绝对定位，相对于浏览器窗口或者frame进行定位。
<4>、static:默认值，没有定位，元素出现在正常的文档流中。
<5>、sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。
position:absolute和float属性的异同？
共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素。
box-sizing属性有哪些？
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box;
<1>、content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border+padding+content的宽度/高度决定，设置width/height属性指的是content部分的宽/高。
<2>、border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border+padding+content的宽度/高度。
<3>、padding-box：设置width/height属性指的是padding+content的宽度/高度。
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或边距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
选择符：
<1>、id选择器（#myId）;
<2>、类选择器（.myClassName）;
<3>、标签选择器（div,p,h1）;
<4>、相邻选择器（h1 + p）;
<5>、子选择器（ul > li）;
<6>、后代选择器（li a）;
<7>、通配符选择器（*）;
<8>、属性选择器（button[disabled="true"]）;
<9>、伪类选择器（a:hover,li:nth-child）;表示一种状态
<10>、伪元素选择器（li:before、:after,:first-letter,:first-line,:selecton）;表示文档某个部分的表现
优先级：
!important > 行内样式（比重1000） > id（比重100） > class/属性（比重10） > tag / 伪类（比重1）;
伪类和伪元素区别：
1>、伪类：a:hover,li:nth-child；
2>、伪元素：li:before、:after,:first-letter,:first-line,:selecton;
伪元素和伪类都是选择器的补充，伪类表示的是一种状态，伪元素表示文档的某个确定部分的表现。
伪元素选择器选择出来的部分不再dom里，也不能对其绑定事件，但是如果对伪元素前面的选择器定义的元素绑定了事件，伪元素同样会生效。
新增伪类
1>、li:first-of-type:选择属于其父元素的首个<li>元素；
2>、li:last-of-type:选择属于其父元素的最后一个<li>元素；
3>、li:only-of-type:选择属于其父元素的唯一一个<li>元素；
4>、li:only-child:选择属于其父元素的唯一子元素；
6>、li:nth-child(2):选择属于其父元素的第二个<li>元素；
7>、:enabled :disabled:选择表单控件的禁用状态；
8>、:checked:单选或复选框被选中状态；
对BFC规范的理解？
BFC定义：块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个相邻的块级盒在垂直方向的margin会发生折叠。
BFC布局规则：
1>、内部的box会在垂直方向，一个接一个的放置。
2>、box的垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
3>、每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
4>、BFC的区域不会与float box重叠。
5>、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
6>、计算BFC的高度时，浮动元素也参与计算。
哪些元素会产生BFC：
1>、根元素；
2>、float属性不为none；
3>、position为absolute或fixed；
4>、display为inline-block，table-cell，table-caption，flex，inline-flex；
5>、overflow除了visible以外的值（hidden、auto、scroll）;
6>、fieldset元素
运用BFC：
1>、解决margin重叠问题：根据BFC布局原则2，在元素外侧包裹一层容器，并触发该容器生成一个BFC，那么两个元素就不在同一个BFC,就不会发生margin重叠。
<style>
.wrap { overflow: hidden;
} p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px;
}</style><body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div></body>
2>、自适应两栏布局：
<style>
body { width: 300px; position: relative;
}
.aside { width: 100px; height: 150px; float: left; background: #f66;
}
.main { height: 200px; background: #fcc;
}</style><body>
<div class="aside"></div>
<div class="main"></div></body>
根据BFC布局规则第3条：即使存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。
解决：根据BFC布局规则第4条，我们可以通过通过触发main生成BFC， 来实现自适应两栏布局。
.main { overflow: hidden;
}
当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：
3>、清除内部浮动：
<style>
.par { border: 5px solid #fcc; width: 300px;
}
.child { border: 5px solid #f66; width:100px; height: 100px; float: left;
}</style><body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div></body>
根据BFC布局规则第6条：计算BFC的高度时，浮动元素也参与计算，为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。
.par { overflow: hidden;
}
解释下浮动和它的工作原理？清除浮动的技巧：
原理：任何元素都可以被浮动，浮动元素脱离文档流，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动引起的问题：
1>、父元素的高度无法被撑开，影响与父元素同级的元素；
2>、与浮动元素同级的非浮动元素（内联元素）会跟随其后；
3>、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构；
清除浮动：
1>、使用空标签清除浮动：
这种方法是在所有浮动标签后面添加一个空标签 <div style="clear:both;"></div>. 弊端就是增加了无意义标签。
2>、使用after伪类：
#parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both;
}
3>、浮动外部元素；
4>、设置父元素overflow为hidden或者auto，触发父元素BFC；
常见兼容性问题
1>、png24位的图片在ie6浏览器上出现背景，解决方案是做成png8，也可以引用一段脚本处理。
2>、浏览器默认的margin和padding不同。解决方案：加一个全局的*{margin：0；padding：0}。
3>、ie6双边距bug（20px距离）：块属性标签float后，又有横行的margin情况下，在ie6显示margin值比设置的大。解决方案：在float标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)。
4>、渐进识别方式，从总体中逐步排除局部：
首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{ background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
< 上一篇：浅谈PHP程序员必经的技能/职位提升之路
下一篇：初识Python >
2023-08-11
免费试听课程
- 全部课程
- IT课程
- 设计课程
- 运营课程
4578
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 哈尔滨
- 济南
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 长沙
- 昆明
- 太原
- 无锡
- 石家庄
- 南宁
- 佛山
- 珠海
- 宁波
- 保定
- 呼和浩特
- 洛阳
- 烟台
- 运城
- 潍坊
- 开课名称
- 开班时间
- 抢座
- 咨询
- 开课名称
- 开班时间
- 抢座
- 咨询
-
- Java全链路开发
- 8月29日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 8月29日
- 火热抢座中
- 立即咨询
- 人工智能工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 8月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 8月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 8月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 8月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 8月29日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 8月29日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 8月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 8月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 8月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 8月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 8月29日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 8月29日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 8月29日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 8月29日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 8月29日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 8月29日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 8月29日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 8月29日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 8月29日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 8月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 8月29日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 8月29日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 8月29日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 8月29日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 8月29日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 8月29日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 8月29日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 8月29日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 8月29日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 8月29日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 8月29日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 8月29日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 8月29日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 8月29日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 8月29日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 8月29日
- 火热抢座中
- 立即咨询
预约申请试听课
400-111-8989
lihm@tedu.cn
