1 迅速搞清 html布局(SY)

Until2028

已于 2023-09-05 06:16:24 修改

阅读量353

点赞数

分类专栏：双越文章标签：前端 javascript html5 css3

于 2022-09-01 23:53:36 首次发布

本文链接：https://blog.csdn.net/harvestuachieve/article/details/126634934

版权

双越专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1 css布局

1盒子模型的宽怎么计算（offsetWidth计算）

8 float布局的问题,以及clearfix（实现圣杯布局和双飞翼布局）

圣杯布局

9 手写 clearfix

10 flex布局（画色子）

11 absolute 和 relative 分别依据什么定位?

1 css布局

1盒子模型的宽怎么计算（offsetWidth计算）

offsetWidth = （内容宽度+内边距+边框），无外边距离
=width+padding*2+border*2

=100+10*2+1*2 =122px
附加：如果让offsetWidth=100px，如何做？

.boxing-sizing:border-box 使width宽度= boder-box宽度

<style>
#div1 {
  width: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
  box-sizing: border-box;
}
</style>

<div id="div1"></div>

2盒模型是什么？

盒模型组成：margin、border、padding、width

3 元素实际宽度如何计算？

标准模式：offsetWidth = border + padding + width

IE(怪异)模式：offsetWidth = width

4 标准模式和IE模式如何转换？

标准模式：box-sizing: content-box

IE模式：box-sizing: border-box

5 margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠。大的覆盖小的。

空白内容的<p></p>也会重叠

6 margin负值问题

margin纵向重叠：

相邻元素margin-top和margin-bottom会发生重叠
空内容元素也会重叠

margin负值：

margin-top和margin-left负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响

7 BFC的理解和应用

BFC定义：

Block format context，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

BFC触发：

float不是none
overflow不是visible
position是absolute/fixed
display是inline-block...
display: flex/grid直接作用的子元素

8 float布局的问题,以及clearfix（实现圣杯布局和双飞翼布局）

圣杯布局和双飞翼布局目的：

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于 PC 网页

圣杯布局和双飞翼布局的技术总结：

使用 float 布局
两侧使用 margin 负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用 padding 一个用 margin

圣杯布局

 <style type="text/css">
body{
    min-width:550px;
}
#header {
text-align:center;
ground-color:#f1f1f1;
}
#container {
padding-left:200px;
padding-right:150px;
}
#container .column {
float:left;
}
#center {
background-color:#ccc;
width:100%;
}
#left {
position:relative;
background-color:yellow;
width:200px;
margin-left:-100%;
right:200px;
}
#right {
background-color:red;
width:150px;
margin-right:-150px;
}
#footer {
clear:both;
text-align:center;
background-color:#f1f1f1;
}
    
</style>
    <div id="header">this is header</div>
<div id="container">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>

双飞翼布局

<style type="text/css">
  body {
min-width:550px;
}
.col {
float:left;
}

#main {
width:100%;
height:200px;
background-color:#ccc
}

#main-wrap {
margin:0 190px 0 190px;

width: 100%;

}   
#left {
width:190px;
height:200px;
background-color:#0000FF;
margin-left:-100%;
}
#right {
width:190px;
height:200px;
background-color:#FF0000;
margin-left:-190px;
}

</style>
<div id="main" class="col">
            <div id="main-wrap">
            this is main
            </div>
        </div>

        <div id="left" class = "col">
        this is left
        </div>
        
        <div id="right" class = "col">
        this is right
        </div>

9 手写 clearfix

clearfix--清除浮动

.clearfix:after {
content: '';
display: table;
clear: both;
}

10 flex布局（画色子）

    <style type="text/css">
/* 
flex最常用的语法：（熟练掌握）
flex-direction:主轴的方向（可横向可纵向）
justify-content：主轴对齐方式（开始对齐、两边对齐...）
align-items:交叉轴对齐方式（和主轴垂直的轴）
flex-wrap:什么时候换行
align-self：子元素在交叉轴的对齐方式（开始对齐、居中对齐...）
实现一个三点的骰子： */
.box{
display:flex;      /*  //flex布局 */
justify-content:space-between;   /*//两端对齐*/
border-radius: 10px;
padding: 20px;
height: 200px;
width: 200px;
border: 2px solid #ccc;



}
.item {
/* //背景色、颜色、大小边框等 */
   display: block;
   width: 40px;
   height:40px;
   border-radius: 50%;
   background-color: #666;
}
.item:nth-child(2) {
align-self:center;
/* //第二项居中对齐 */
   align-self:center;
}
.item:nth-child(3) {
align-self:flex-end;
/* ]//第三项尾对齐 */
 
}


</style>
</head>
<body>
    <div class = "box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    
</body>