发表于: 2019-07-11 23:13:05

1 909


总结一下任务六所用到的知识点,这个地方我学习到了两个知识点,一个是margin负值,margin为正值时,元素在文档中所占位置是从border之外向四周扩展的,而为负值时,则是向内收缩的,比如招雇工这个元素明显要压倒找雇主这个元素身上一点点,所以只要在找雇主这个元素margin设置成负值,元素就会往里收缩,找雇工这个元素就会压倒找雇主这个元素身上。其实所谓的margin负值就是所占的位置减少,比如我设置一个元素margin-left为-20px,那么这个元素左边就会有20px被无视,比如我设置一个盒子的margin-bottpm为-20px,但是没有任何变化,但是下面要是有一个盒子就有变化了,很明显蓝色盒子占了红色盒子20px位置。但是如果我把红色盒子的margin-bottpm为-20取消,蓝色盒子设置为margin-top:-20px,发现依然是蓝色盒子压着红色盒子,再看看红色盒子和蓝色盒子的高度蓝色盒子顶部的20px像浮动了一样,但是下面80px却还是在实体流里。所以得出了一个结论,当一个元素margin为负值时负值部分将不再占有位置后续的元素会无视他,就像脱离了标准流一样。

学会的第二个知识点就是focus伪类,所谓的伪类就是同一个元素根据不同的状态有不同的样式,比如说一个元素用户点击时是什么样的,用户点击后是什么样的,用户放到元素上没点击时是什么样地,focus这个伪类是指某个标签获得焦点时的样式伪类用冒号来表示比如这样设置的伪类就是鼠标点击聚焦时背景颜色为白色,字体颜色 为蓝色。结果

之后我学习到的一个知识点是模拟下拉,因为基本的select标签下拉框,采用浏览器内置样式,不能更改,如果想要修改样式的话就得自己写一个下拉框。

先写一个父div设置成display:flex;在里面写3个,input子元素,在input里写一个ul列表设置成display:none,然后设置伪类,input:foucs  ul{display:black}这样当input被点击的时候ul就会显示出来,模拟下拉就完成了。任务六的main部分字体要求在分辨率缩小时变成省略号像这样,省略号的属性是这个text-overflow:ellipsis;但是单独使用它会有一个问题,字体会自动向下换行,所以得配合white-space: nowrap;属性使用,white-spacenowrap属性是规定段落中的文本不进行换行,但是又有新问题,虽然文字不换行了,但是字体还是没有变成省略号所以又加上了overflow: hidden;属性,overflow属性是规定当内容溢出元素框时发生的事情。其属性值为 visible:内容不会被修剪,会呈现在元素框之外。hidden:内容会被修剪,并且其余内容是不可见的。scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容,auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容,inherit:规定应该从父元素继承 overflow 属性的值。用hidden的值会发现省略号出来了。还要注意text-overflow:ellipsis;属性只能作用在标准流的元素身上,如果元素脱离了标准流比如设置了float或者绝对定位,那么这个属性就无效了。



返回列表 返回列表
评论

    分享到