HTML+CSS零基础学习笔记(三)
CSS学习笔记(二)
一、两栏布局
两栏布局,即:左侧内容宽度自适应,右侧内容宽度固定,且两侧内容相邻而不重合。详见下图:
如上述代码所示,在两栏布局的时候,在html中必须先写需要用到定位的那一栏,否则会出错!
如果将上图左侧html文档中的div调换位置,会出现以下两栏布局不成功的情况!
二、两大经典BUG
-
margin 塌陷
★定义★:父子嵌套的两个元素,垂直方向的margin会结合到一起,并取两者中的最大值。
解决方式:
1)给父级元素设置一个上边框(1px…)— 不能用
2)bfc语法 — block format context (块级格式化上下文)
在一个元素的父级的CSS中,应用上图中四种方式的任意一种,都能够触发此父级盒子的bfc语法。但需根据具体需求决定使用哪一种方法好,同时使其周围元素产生的影响降到最小。 -
margin 合并
★定义★:两个兄弟结构元素在垂直方向上的margin是合并的。
解决方式:
1)将其中一个兄弟元素或者将这两个兄弟元素都套在一个具有bfc语法规则的父级元素里(如下图)。— 不好,不用(因为在实际开发中,不能因为解决某个BUG而改变HTML结构)
2)此bug可以不解决,只需要知道此BUG的存在,并且在设置值margin值时注意一下就行。(如:在上图的代码中,只设置 demo1的下边距 或 demo2的上边距 为150px,就可以避免引发此BUG。)
三、浮动模型(float:left/right)
-
应用 float 属性的前后对比
1)没有设置 float 属性时:
2)设置了 float 属性时: -
float属性的值 left 和 right 的区别
-
★浮动元素 会产生 浮动流★
对于所有产生了浮动流的元素:①块级元素看不到它们;②产生了 bfc 的元素、具有文本类属性(inline)的元素和文本都能看到浮动元素。【注意】
1)上述问题还可以通过触发浮动元素的父级元素的bfc 来解决。但是,通过伪元素来解决是最常用的,也是效果最好的。
2)凡是设置了position: absolute; 或 float: left / right; 的元素,系统会打内部把元素转换成inline-block,这时会由该元素的内容撑开它的宽高。 -
float 属性也可以用来实现“报纸式”环绕布局
四、伪元素(::before / ::after)
伪元素是行级元素,不能直接设置宽高,需要将其的display属性值改为:inline-block 或 block。
五、小案例(淘宝导航条)
总结自《渡一教育_2020权威HTML+CSS零基础入学》