发表于: 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.清除浮动的常见办法

      浮动导致的问题:父级标签高度塌陷---其实就是没有高度

  1. 父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
  2. 在最后一个浮动标签之后添加标签并设置clear:both
  3. 给父级添加overflow属性,触发BFC
  4. 使用伪元素: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元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会

自动将焦点转到和标签相关的表单控件上。


二,明天计划的事情:复习知识点


返回列表 返回列表
评论

    分享到