【前端知识点总结】CSS 基础三

相邻块元素垂直外边距合并

相邻的两个块元素,给上边的块元素设置 margin-bottom , 给下边的块元素设置 margin-top , 最终外边距不是两者的和,取二者的最大值。

嵌套块元素垂直外边距合并 (盒子模型塌陷)

嵌套的两个块元素,父元素和子元素的上外边距合并作用到父元素上,取二者的最大值

解决方案

1. 给父元素设置上边框 border-top
2. ★ 给父元素添加overflow:hidden; 触发 BFC
3. 给子元素转成行内块display: inline-block;
4. 给父元素设置内上边距 padding-top

注 : 触发 BFC (块级格式化上下文),独立的布局区域不会受内外因素干扰.

结构伪类选择器

查找一个(选择一个)

• .box li:first-child{} 选择第一个li
• .box li:last-child{} 选择最后一个li
• .box li:nth-child(数字){} 选择任意一个li

查找多个(选择多个)

• 自增符 n : n从0开始自增(0,1,2,3…)
• :nth-child(2n 或者 even) 选择父元素里面的偶数项子元素
• :nth-child(2n+1或2n-1 或odd) 选择父元素里面的奇数项子元素
• :nth-child(-n+i) 选择父元素里面的前 i 项子元素
• :nth-child(n+i) 选择父元素里面从第 i 项到最后一项子元素

注意: n在前面

易错点1

ul>li*9>a  找a  ul li:nth-child(1) a{}  结构伪类尽量找亲儿子

易错点2

结构伪类选择器,把父元素里面所有的子元素进行排列不管标签

按照标签类型选择子元素

.box p:nth-of-type(数字)   父元素里所有p标签进行排序,选择第几个

伪元素

::before{ content:  ; }  在标签最前面生成伪元素
::after{ content:  ; }  在标签最后面生成伪元素

标准流(元素默认的显示方式)

在页面上元素自上而下,自左而右显示,块元素独占一行,行内元素在一行显示,碰到父元素边界换行,这就是标准流(文档流,普通流)

浮动

float:值; ( 值: left 左, right 右, none 默认值)

• 特点1 : 浮动元素脱标(脱离标准流),不占据原来位置
• 特点2 : 浮动元素在一行显示,紧贴着上一个同方向浮动元素边缘显示
• 特点3 : 浮动只能到左边和右边,受父元素的内边距约束
• 特点4 : 浮动不能影响标准流的块元素
• 特点5 : 子元素的宽度相加超过了父元素的宽度,超过部分子元素会掉下来
• 特点6 : 脱标(浮动)元素的特点

  ★块元素浮动后,不会继续默认父元素的宽度,默认宽高度为0 内容会撑开宽高
  ★行内元素浮动后可以设置宽高
  

注意点 : 当文字 行内元素 行内块元素,遇到了浮动元素,不会跑到浮动元素底下,只会环绕浮动元素

清除浮动

清除浮动的原因

父元素不能设置高度时,子元素浮动后不能撑开父元素的高度,通过技术撑开父元素的高度

清除浮动的方法

1. 额外标签法 :<div style="clear:both"></div>

   在最后一个浮动元素的后面添加块元素,使用 clear:both; 属性, clear:both; 把左右浮动产生的影响清除掉
   

2. 父元素使用overflow属性 : 触发BFC

   弊端:  子元素出了父元素边界部分会被隐藏掉
   

3. 伪元素清除浮动 : 给浮动元素的父元素(亲爹)调用 clearfix 清除浮动

   .clearfix::after {
         content: '.';
         display: block;
         clear: both;
         /* 为了隐藏伪元素 */
         height: 0;
         /* 显示模式为隐藏 */
         visibility: hidden;
     }
   

4. 双伪元素清除浮动 : 给浮动元素的父元素调用 clearfix 类清除浮动

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

边框圆角

• border-radius:半径px; 普通边框圆角
• border-radius:50%; 正圆, 盒子必须是正方形
• border-radius:高的一半px; 胶囊按钮

自定义边逛圆角

border-radius:上 右 下 左; 圆角 , 哪儿要圆写哪儿

透明设置

单颜色透明

• 背景颜色透明 : background-color:rgba(0,0,0,0.5) a是alpha透明, 取值范围0-1, 0.5可直接写.5
• 字体透明 : color:rgba(0,0,0,0.5) a是alpha透明, 取值范围0-1, 0.5可直接写.5

整体透明

opacity:0.5; : 控制盒子整体透明度, 取值0-1

本章注意点:

• 浮动和转行内块的区别 : 浮动顶对齐,代码换行无缝隙
• 实际开发中:导航用 ul>li
• width:20%; 宽高写百分比时参考父元素宽高,父元素宽高的 20%
• margin:0 auto; 只对标准流块元素水平居中有效

欢迎小伙伴们,相互学习探讨,共同进步,加油 加油!!!