模仿京东页面

阅读量：

css样式总结

最好避免通过*boby标签选择器使用通配符来清除样式
导航栏可以采用无序列表的形式来实现

不定宽高的元素主要通过min-width和min-height属性实现尺寸控制。
在处理伪元素时，默认情况下它们会被当作父容器处理；而当仅使用pseudo-element作为定位基准时，则必须采用相对定位方式。
为了防止文本过长导致断行，默认情况下应避免断行可借助white-space属性；若文本过长则可配合text-overflow和overflow属性进行处理。

复制代码

        1. <li class="news_list_li">

    
        2.     <a href="" class="new_list_a">
    
        3.         <span class="news_tag">最新</span>
    
        4.         小米10：骁龙865+四摄+升降屏+100W快充，价香
    
        5.     </a>
    
        6. </li>

复制代码

        1. .news_list_li{

    
        2.     max-width: 160px;
    
        3.     height: 16px;
    
        4.     line-height: 16px;
    
        5.     white-space: nowrap;
    
        6.     text-overflow: ellipsis;
    
        7.     overflow: hidden;
    
        8.     color: #999;
    
        9.     margin-bottom: 6px;
    
        10. }

border属性的应用：画三角形

复制代码

    <div class="bor"></div>

复制代码

        1. .bor{

    
        2.     border-width: 100px 100px 100px 100px;
    
        3.     border-style: solid;
    
        4.     border-color: red blue green black;
    
        5.     width: 0px;
    
        6.     height: 0px;
    
        7.     margin: 100px auto;
    
        8. }

复制代码

 .price-miaosha::before{

    
     content: ' ';
    
     width: 0;
    
     height: 0;
    
     border-width: 22px 8px 0 0;
    
     border-style: solid;
    
     border-color: transparent white transparent transparent;
    
     position: absolute;
    
     top: 0;
    
     left: 84px;
    
 }

margin被折叠(BFC相关)

注

块级元素 + 块级样式表（在页面中有一套统一渲染规则的区域）决定了其子元素的位置及其与其他元素的关系。

BFC的生成：

基础元素
- 浮点数值不可设为none
- 溢出样式不可设为visible
- 显示样式可设置为inline-block、table-cell或table-caption。（例如：当设置display：block时，默认会生成一个带有表头单元格的对象BFC；这是因为表单元格会自动生成一个匿名表单元格对象从而导致表脚本代码）
- 位置样式可设为absolute或fixed。

BFC****的约束规则：

在垂直方向上依次排列内部的Box（其对应CSS规则指出块元素会扩展至与父容器宽度一致，并按顺序垂直排列）。
垂直方向上的间距由margin控制。属于同一BFC内的两个相邻Box会出现margin重叠现象（塌陷），无论方向如何均适用此规则（实际上此规则并不完全正确）。
每个元素（位于该BFC区域内的所有子元素）都会与包含块的最左侧边界接触（从左到右排布），即使子元素为浮动类型也是如此。这表明BFC中的子元素不会超出其包含区域，在position属性为absolute的情况下仍可超出包含边界（因为浮动元素会尽力靠近左上方或右上方）。
BFC区域不会与浮动元素产生重叠区域。
计算BFC的高度时需要考虑浮动子元素的存在（当父级设置overflow: hidden或为浮动父级时则包含浮动子级）。
BFC是一个独立于页面其他元素的隔离容器，在这种情况下容器内的子元素无法影响外部布局并外部内容也不会影响到容器内的布局。

BFC在布局中的应用：

防止margin重叠（塌陷）

在同一 BFC 中垂直方向上的 margin 会发生重叠。（由于在一个 BFC 中垂直方向上的 margin 会发生重叠，并可通过为其中一个 box 包裹一层容器生成一个新的 BFC 来解决）
在同一 BFC 中水平方向上的 margin 也会发生重叠。（此外，在同一个 BFC 中水平方向上的 margin 也会发生重叠）
嵌套结构的 margin 会相互影响。（遇到的主要问题是这一现象）

解决办法一是将子元素设置为display:inline-block使其成为BFC容器

解决办法二：给父容器元素指定明确边界（即通过border属性设定固定宽度或padding属性填充空白区域）以便确保子容器单元格的边距将被纳入到父容器模型中从而避免与外部div产生重叠

涉及到的BFC约束规则：

垂直方向上的间距取决于margin。属于同一个BFC的两个相邻Boxes的margin会发生重叠现象，并不受方向的影响。

清除内部浮动

涉及的BFC约束规则：

计算BFC高度时，浮动元素也参与计算，为父元素创造成为BFC的条件即可

自适应多栏布局

自适应两栏布局
自适应三栏布局

涉及BFC的两条约束规则：

每个元素的marginbox左侧与其所包含块的border左侧相接，在从左到右排列时则相反；即便浮出框也如此（position:absolute除外）。

BFC的区域不会与float box重叠。

参考博客：

https://www.cnblogs.com/ranyonsue/p/9204986.html

chrome有最小字体大小12px的限制

复制代码

 .font-6px{

    
   transform: scale(0.5);
    
   font-size: 12px;
    
 }

清除button的默认样式（border:0;outline:none;）

复制代码

 .shuffling_box_btn_left,

    
 .shuffling_box_btn_right{
    
     position: absolute;
    
     border-radius: 50%;
    
     width: 30px;
    
     height: 30px;
    
     background-color: rgba(0, 0, 0, 0.15);
    
     transition: background-color 1s;
    
     z-index: 10;
    
 }

点击时会有蓝色边框，而且会影响自定义的边框样式

复制代码

 .shuffling_box_btn_left,

    
 .shuffling_box_btn_right{
    
     border: 0;
    
     position: absolute;
    
     border-radius: 50%;
    
     width: 30px;
    
     height: 30px;
    
     background-color: rgba(0, 0, 0, 0.15);
    
     transition: background-color 1s;
    
     z-index: 10;
    
     outline: none; 
    
 }

点击时没有蓝色边框

让多个块元素不换行，一行排列的方法

给父元素设置

复制代码

 .seckill_inner_center{

    
     display: flex;
    
     flex-wrap: nowrap;
    
 }

针对父元素display:flex布局下的宽度异常问题：让子元素的flex-shrink属性设为0；

复制代码

 .seckill_inner_right{

    
     width: 200px;
    
     height: 260px;
    
     padding: 10px;
    
     box-sizing: border-box;
    
     display: flex;
    
     flex-wrap: nowrap;
    
     overflow: hidden;
    
 }
    
 .seckill_inner_right_a{
    
     width: 180px;
    
     height: 240px;
    
     display: block;
    
     flex-shrink: 0;
    
 }