发表于: 2020-07-21 22:10:36
1 2243
一,今天完成的事情
复习了一下,css中的知识点,有一些没有完全掌握的地方
现在罗列出来部分知识点:
1.定位中的relative的使用场景
relative相对于自身进行定位,不脱离文档流也不脱离文本流
float脱离文档流但是不脱离文本流,所以会出现float将非定位盒子覆盖掉,
但是不会覆盖非定位盒子里面的文本,这样会出现文本环绕的效果。而对于
absolute元素会把非定位和自身位置和开面的文本都覆盖掉
relative一般使用设置给absolute的父层,这样absolute会依照absolute
父层的边界进行定位---也就是说给absolute元素提供定位基准
relative不会影响页面其他的布局,因为他相对自身移动时候仍然会保留自身
原始的位置,只是视觉上的偏移,原来的DOM仍然存在
relative会对overflow有限制作用
relative会对z-index有限制作用,,设置了定位元素的z-index值为数值可以
创建”层叠上下文”relative的top/bottom同时使用只有top生效,
left/right同时使用只有left生效
2.清除浮动的常见办法
浮动导致的问题:父级标签高度塌陷---其实就是没有高度
- 父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
- 在最后一个浮动标签之后添加标签并设置
clear:both
- 给父级添加overflow属性,触发BFC
- 使用伪元素:after
.clearfix:after {
content: '.';/*加个点的作用防止低版本浏览器出现空隙*/
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix{
*zoom:1; /* *只有ie6-7执行 */
}
3.使用双伪元素before和after
.clearfix:after,.clearfix:before {
content: '.';
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
4.flex布局是基于什么的,原理是什么
flex布局是围绕父元素和轴来进行布局的。布局基于两条轴,水平的主轴和垂直的交叉轴
可以通过flex-direction改变主轴方向,通过flex-wrap改变交叉轴方向
能决定元素展示宽度的属性有: flex-shrink,flex-grow,flex-basis,width,min-width
5.select更改默认样式
清除select默认样式
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
通过设置背景图片的位置改变默认样式
6.input和label联合使用
通过为input设置属性id,在label标签中设置for=id使label文本与对应的inpu他结合起来。
label标签包裹input标签,点击label时,label两次响应,即label本身触发和input触发后
冒泡到label上。(由于事件冒泡机制的存在,父节点所绑定的点击事件会被触发两次。)
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在
label
元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会
自动将焦点转到和标签相关的表单控件上。
二,明天计划的事情:复习知识点
评论