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

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

老师让假期自学web前端，咦，我大一就学过了，来吧，让暴风雨来的更猛烈些吧！
听说尤雨溪的Vue不错？听过前端也有组件化开发思想？那我就来试试吧！
经过xx天的每次打完球回来之后写一会，我弄成了，深有体会：“最后一天的效率比我原来三四天的效率还高”，可怕怕~

<iframe allowfullscreen="true" data-mediaembed="bilibili" id="MqSHfBGl-1614604177197" src="https://player.bilibili.com/player.html?aid=671961199"></iframe>

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

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的区别

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

标签：考拉,right,海购,元素,width,设置,京东,border,属性
来源： https://blog.csdn.net/qq_44486437/article/details/114259608