移动端——前端页面编写总结

练习一：百度首页编写
    小结：
        1.不要用空格分割元素，浏览器或者手机空格大小不一致
        2.css，js事件用动态绑定的方式，不要写在行内样式中。防止其它人添加样式被覆盖
        3.少用p标签，浏览器不支持。
        4.css样式从后往前找。知道怎么回事，但是还是没有理解怎么优化
        5.颜色用16进制，字母机器识别不一致。
    生僻标签：
        a标签的四种状态
            *a:link 普通的、未被访问的链接样式
            *a:visited 用户已访问的链接样式
            *a:hover 鼠标指针位于链接上方样式
            *a:active 链接被点击的时刻样式
        text-decoration:none;/用于去除下划线/
        transform: translate(-50%, -50%);2D旋转
        title="点击一下，了解更多" 图片加title，鼠标移入显示文字
练习2：图书详情
    小结：
        
    生僻标签：
        设置盒子
        /* 盒子 */
        display: flex;
        display: -webkit-flex;
        分配盒子
        flex: 1;
        -webkit-flex:1;

        图片居中

        vertical-align:middle;

vertical-align 属性设置元素的垂直对齐方式。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把次元素放置在父元素的中部
bottom	把元素的顶端和行中最低的元素的顶端对齐。
text-bottom	把元素的地段与父元素字体的低端对齐
length
%	使用“line-height”属性的百分比值来排列此元素。允许使用负值
inherit	规定应该从父元素继承vertical-align 属性的值。

   

溢出显示

        overflow:scroll;

overflow 属性规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

        盒子溢出显示
        flex-wrap:wrap;

        盒子移动方向
        flex-direction:column;

        div圆角
        border-radius: 15px;

        浏览器私有前缀
        需要附带私有前缀。就是诸如-moz-, -webkit-之类。