css查漏补缺day03

最新推荐文章于 2020-09-25 17:37:08 发布

才不是小弱鸡

最新推荐文章于 2020-09-25 17:37:08 发布

阅读量136

点赞数

分类专栏： css web

本文链接：https://blog.csdn.net/qq_40996739/article/details/108702690

版权

web 同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

0x00 盒子模型

边框简写没有顺序

border: 1px solid red;

border-collaspe属性表示绘制表格边框的格式

border-collapse: collapse; // 表示相邻边框合并

padding的复合写法

如果盒子没有指定width和height，则padding不会撑开盒子

若盒子指定了宽度，则只需要将左右margin设为anto即可水平居中

行内元素和行内块元素只需要将父元素的text-algin设为center即可水平居中

块元素塌陷问题见上一篇博客

0x01 浮动

传统布局三种方法标准流（文档流）浮动定位

浮动特性01：浮动元素会脱标

脱标的元素不再保留原来的位置

浮动特性02：浮动元素会一行内显示并对齐顶部

浮动特性03：浮动元素具有行内块元素的特性

块级元素若没有设置宽度默认和父元素一样宽，但设置浮动后由内容决定宽。

浮动后的元素没有间隙

0x02 清除浮动

当父元素不好给高度时，并且需要使用浮动元素，此时需要清除浮动来消除浮动带来的影响,以下是演示demo

<body>
    <div class="father">
      <div class="son">
        1
      </div>
      <div class="son">
        2
      </div>
    </div>
</body>
<style>
.father {
  width: 600px;
  height: auto;
  border: 3px solid sandybrown;
}
.son {
  width: 200px;
  height: 200px;
  background-color: aqua;
  border: 3px solid greenyellow;
  float: left;
}
.footer {
  width: 800px;
  height: 200px;
  background-color: black;
}
</style>

可以看到，因为元素浮动脱标，父元素高度直接变成了0，这里应该使用清除浮动来消除浮动带来的影响

<body>
    <div class="father">
      <div class="son">
        1
      </div>
      <div class="son">
        2
      </div>
<!--    额外标签法  在最后一个浮动元素的后面引入一个额外标签-->
      <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>
<style>
.father {
  width: 600px;
  height: auto;
  border: 3px solid sandybrown;
}
.son {
  width: 200px;
  height: 200px;
  background-color: aqua;
  border: 3px solid greenyellow;
  float: left;
}
.clear {
  clear: both;
}
.footer {
  width: 800px;
  height: 200px;
  background-color: black;
}
</style>

可以看到消除了浮动的影响

第二种方法，给父元素添加overflow属性

第三种方法，给父元素添加以下属性

.clearfix {
  /*ie6 ie7专属*/
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

第四种方法双伪元素法

.clearfix {
  /*ie6 ie7专属*/
  *zoom: 1;
}
.clearfix:after , .clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

才不是小弱鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css查漏补缺day03

0x00 盒子模型边框简写没有顺序border: 1px solid red; border-collaspe属性表示绘制表格边框的格式border-collapse: collapse; // 表示相邻边框合并 padding的复合写法
复制链接

扫一扫