排版经验百家了乐八大技巧:

 百家乐概况     |      2019-12-21 22:50

排版经验,

1.  让图片填满一个固定宽高的div且图片不变形:

css:
.div{
    width:100px;
    height:100px;
}
.div1 img{
    width:100%;
    height:100%;
    object-fit:cover;//控制图片不变形的样式                
}

2.  解决父元素的第一个子元素的margin-top越界的问题:

 问题如下图:

 百家了乐八大技巧 1

 主要原因:div3是div2的第一个子元素!

 解决方法:

css:
div2:befor{
    content:" ";//有空格
    display:table;      
}

3. 解决所有的子元素浮动后父元素高度为0(一个大div里有很多小div以浮动排列,大div就会没有高度,导致排版出现问题)

 解决方法:

css:
<style>
    .a:after{
        content: " ";
        display: table;
        clear: both;
    }
    .b{
        width:100px;
        height: 100px;
        float: left;
    }
    .c{
        clear: both;
    }
    .d{
        width: 200px;
        height: 200px;
        background: greenyellow;
    }
</style>

HTML:
<div class="a">//设置它的:after(...)
    <div class="b">我是div1</div>
    <div class="b">我是div2</div>
    <div class="c"></div>//加入一个空div清除浮动
</div>
<div class="d"></div>

综合2和3,就有了bootstrap里的:after和:before。

  1. css设置垂直居中:

    css:

    HTML:

    我是div1
  2. css设置鼠标的显示类型:

    css: cursor: pointer;//一只手 cursor: wait;//一只表或是沙漏 cursor: help;//一个问号或气球 cursor: text;//文本 cursor: crosshair;//十字线 cursor: move;//可被移动

  3. 实现响应式网页的必要知识:css3媒体查询

    css:

 

1. 让图片填满一个固定宽高的div且图片不变形: css: .div{ width:100px; height:100px;}.div1 img{ width: 100% ; height: 100% ; object -fit:cover; // 控制...