600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 考拉海购与京东结合起来居然原来如此漂亮

考拉海购与京东结合起来居然原来如此漂亮

时间:2023-03-14 14:31:44

相关推荐

考拉海购与京东结合起来居然原来如此漂亮

HELLO,大家好,年后第一次发博客,首先祝大家新年快乐,技术牛上牛。

老师让假期自学web前端,咦,我大一就学过了,来吧,让暴风雨来的更猛烈些吧!

听说尤雨溪的Vue不错?听过前端也有组件化开发思想?那我就来试试吧!

经过xx天的每次打完球回来之后写一会,我弄成了,深有体会:“最后一天的效率比我原来三四天的效率还高”,可怕怕~

上面就是整体的效果,个人还是比较满意的,这是下载地址,下面就对这次的练习做一下总结吧!

css

cursor属性:可以设置指针悬浮时的状态

position属性:设置元素的定位方式

- sticky:该定位基于用户滚动的位置,它的行为就像 position:relative;而当页面滚动超出目标区域时,它的表现就像position:fixed;它会固定在目标位置。

- static:默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right或者 z-index 声明)

- relative:生成相对定位的元素,相对于其正常位置进行定位。不会脱离文档流

- absolute:相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于html标签,会脱离正常流

box-sizing: border-box属性

- 未设置前:width设置的是内容的宽度,即此时盒子的总宽度 = border-left + padding-left + width(设置的值) + padding-right +border-right

- 未设置后:width设置的是总宽度,即width(我们设置的宽度) = border-left + padding-left + width(动态改变) + padding-right +border-right

display属性:规定元素应该生成的框的类型

- none:此元素不会被显示

- block:此元素将显示为块级元素,此元素前后会带有换行符

- inline:此元素会被显示为内联元素,元素前后没有换行符设置宽高无效,元素的宽高是由内容撑起来的

- inline-block:行内块元素,元素前后没有换行符设置宽高有效

- (扩展):当需要让块元素在同一行显示时,方法有二:一是通过浮动来实现,二是通过设置display为inline-block

white-space属性:指定元素内的空白怎样处理

- normal:所有的空格、换行,无论多长,均看做一个空格,当一行放不下时自动换行

- pre:所有的空格、换行会被浏览器按照原样保留

- nowrap:文本不会换行,直到遇到br标签为止

word-break属性:指定非CJK脚本的断行规则

- break-all:允许在单词内断行

- keep-all:只能在半角空格或连字符处换行 (比如空格)

overflow属性:内容溢出一个元素的框,会发生什么

- 作用一: 实现所有文本单行显示,超出后用.表示

overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

- 作用二:设置div中的div的margin-top属性值无效

dl、dd和dt标签:带有项目和描述的描述列表

transition标签:设置元素过渡效果

linear-gradient:设置渐变,可以做进度条

float与inline-block的区别

上面的讲解资料在这里下载

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。