div浮动+盒子模型+溢出隐藏+滚动条

Posted 2022-01-31 a199706

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div浮动+盒子模型+溢出隐藏+滚动条相关的知识，希望对你有一定的参考价值。

总结:

一、浮动float

float：left/right左右

clear：left/right/both清除浮动

如上图所示：

我们完全可以利用12清除浮动，其余浮动来解决，但一定要注意好div之间的位置

代码如下：

<body>
<div id="d1">

    <div class="z1">这是1</div>
    <div class="z1">这是2</div>
    <div class="z1">这是3</div>
    <div class="z1">这是4</div>
    <div class="z1">这是5</div>

<div class="z2">这是6</div>
<div class="z7">
    这是7
</div>

<div class="z3">
这是8
<div class="z3-1">
    这是9
</div>
</div>
<div class="z7">
    这是10
</div>


<div class="z4">这是11</div>
<div class="z10">这是12</div>
</div>
</body>

css

/* CSS Document */

#d1
    width: 500px;
    height: 600px;
    border: 1px solid #000000;
    

.z1
    width: 98px;
    height: 97px;
    border: 1px solid #000000;
    float: left;


.z2
    width: 314px;
    height: 146px;
    border: 1px solid #000000;
    float: left;
    
.z3
    width: 314px;
    height: 146px;
    border: 1px solid #000000;
    float: left;

.z3-1
    width: 96px;
    height: 146px;
    border: 1px solid #000000;
    float:right;

.z4
    width: 314px;
    height: 106px;
    border: 1px solid #000000;
    float: left;

/*#z7
    width: 180px;
    height: 100px;
    border: 1px solid #000000;
    float: right;
*/
.z7
    width: 182px;
    height: 200px;
    border: 1px solid #000000;
    float: right;


.z10
        width: 498px;
    height: 95px;
    border: 1px solid #000000;
    clear: both;

二、盒子模型

外边距：margin，div与另外div等的距离，顺序，上右下左，顺时针旋转。

内边距：padding：内容与div的距离
边框：border，div的边框
div大小需要加上内边距padding，外边距margin，边框border还有div内容大小所得。

div=（padding+margin+border）*2+content

三、溢出处理

overflow：hidden：隐藏并清除所占位置

overflow：scroll：在区域里面查看，但不会清除内容

四、列表ul的css样式设置

最常用的 ul 去除list-style-type：none，

ul li

list-style-type
list-style-position 定位
list-style-image 前面图片

<style>
ul

    list-style-type:none;
    padding:0px;
    margin:0px;

ul li

    background-image:url(sqpurple.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;

</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

以上是关于div浮动+盒子模型+溢出隐藏+滚动条的主要内容，如果未能解决你的问题，请参考以下文章

从零开始的Java开发2-8-3 CSS浮动：DIV盒子模型浮动

div盒子存在阴影导致父级标签出现滚动条

python 之前端开发（盒子模型页面布局浮动定位z-indexoverflow溢出）

“css中滑动背景如何让盒子不滑动”？

css的核心内容标准流盒子模型浮动定位等分析

浮动布局及盒子模型