CSS流式布局 仿京东

个人自学demo。

效果图:

 

 地址:https://files-cdn.cnblogs.com/files/y112102/JdH5.7z

  

总结:

1:流式布局 宽度使用百分比。

2:默认样式

body {
    width: 100%;
    /* 最小最大宽度 */
    min-width: 320px;
    max-width: 640px;
    /* 居中 */
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}


/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

a {
    color: #666;
    /* 去掉下划线 */
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    /* 去掉小点 */
    list-style: none;
}


/*  图片底部有空隙 
    https: //www.cnblogs.com/allen2333/p/9026526.html */

img {
    vertical-align: middle;
}

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
}


/* 浮动引起的 父元素高度坍塌 解决(最外层父元素添加clearfix ) */

.clearfix:after {
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

 

3:图片底部有空隙 

 https: //www.cnblogs.com/allen2333/p/9026526.html
 
4:浮动引起的 父元素高度坍塌 css 经典问题
参考 clearfix类 

 

5:图片和文字对齐

行内元素 文字和图片对齐。默认:元素放置在父元素的基线上。
       看到图片 和文字对齐就要想到 vertical-align
       父元素需要设置 line-height

6:圣杯布局

左右大小固定,绝对定位(中间元素 左右边界回收(margin)

 

7:外边距塌陷 

https://blog.csdn.net/qq_24557303/article/details/77603317

解决办法

https://segmentfault.com/a/1190000017301996

 

资料:pink老师自学

posted @ 2020-02-21 14:08  s_p  阅读(449)  评论(0编辑  收藏  举报