当前位置： 移动技术网 > IT编程>网页制作>CSS > Day2

Day2

2020年07月17日  | 移动技术网IT编程  | 我要评论

领跑计划：102-Day2

CSS企业开发经验、习惯、盒子模型、层模型

0.开发经验、习惯

  a). 先定义功能，后组装功能(实现1 + 1 > 2)。
  b). 标签选择器、通配符通常用来初始化标签样式。

1.常见行级元素 & 块级元素

行级元素(inline): {
	a).内容决定元素所占位置;
	b).不可以通过 CSS 改变宽高;
	eg: span strong em a del
}
块级元素(block): {
	a).独占一行;
	b).可以通过 CSS 改变宽高;
	eg: div ul li ol form
}
行级块元素(inline-block): {
	a).内容决定元素所占位置;
	b).可以通过 CSS 改变宽高;
	eg: img
}

2.盒子模型

在这里插入图片描述
  padding, margin为复合属性(padding-top, padding-bottom, padding-left, padding-right);

  一个值代表上下左右

  两个值代表上下、左右

  三个值代表上、左右、下

  四个值代表上下左右

3.层模型

Position Description
absolute 脱离原来位置进行定位，寻找最近的带有 Position 元素进行定位，否则一直想上寻找直到整个文档
relative 相对原来位置进来定位，常用 relative 搭配 absolute 使用
fixed 与 absolute 一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
  top, bottom, left, right 四个属性需要有 Position 才生效

4.两栏布局

  两个元素，一个用定位定过去，另一个自适应元素则用margin等方法把那个区域让出来。先写right，不然新出生的元素会出现在第二行;

# html
<div class='right'></div>
<div class='left'></div>

#css
.right{
	position: absolute;
	height: 100px;
	width: 100px;
	right: 0;
}
.left{
	margin-right: 100px;
	height: 100px;
}

5.两个经典BUG

  margin塌陷(竖直取最大)

在这里插入图片描述
在这里插入图片描述
  当子元素的 margin-top 小于等于 父元素的 margin-top 时，子元素的 margin-top 并不会相对于父级元素进行移动，如下图所示。
在这里插入图片描述
  当子元素的 margin-top 大于 父元素的 margin-top 时，子元素则会相对于父级元素进行移动，如下图所示。
在这里插入图片描述
在这里插入图片描述
  解决方法:

    触发BFC(Block Format Content) BFC仅会改变很小盒模型渲染规则，但足以对付margin塌陷

    触发条件：a.) display: inline-block;
            b.) position: absolute;
            c.) float: left/right;
            d.) overflow: hidden;

    仅能恰似完美的解决问题，遇到问题时自行选择最优方案！

  margin合并(竖直不会累加)

在这里插入图片描述
在这里插入图片描述
  当上下两个元素同时添加margin-top, margin-bottom时，并不会出现 margin 累加的情况，如下图所示。
在这里插入图片描述
  解决方法:

    a.) 触发BFC(Block Format Content)但过于麻烦
    b.) 计算好空白高度后，单独设置 margin-top 或 margin-bottom 足矣
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.Float

  关于Float注意以下几点

    a.) 有Float的元素脱离了原来的“层”，类似于 position: absolute; 但是需注意的是块级元素无视浮      动元素，直接抢占其原来位置。而产生了BFC的元素和文本类属性(inline)的元素以及文本则可以      看到浮动元素，即排在Float元素后面。

    b,) 清除Float用clear: left | right | both，开发中使用p标签配合both清除，从而实现父级元素能够      自适应被Float元素撑开。

本文地址：https://blog.csdn.net/weixin_45565925/article/details/107383578

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网