css04笔记

目录

盒子模型

5.7 外边距折叠现象 – ① 合并现象

5.8 外边距折叠现象 – ② 塌陷现象

5.9 行内元素的margin和padding无效情况

一、结构伪类选择器

（了解）nth-of-type结构伪类选择器

 二、伪元素

三、标准流

四、浮动

浮动的代码：

浮动的特点：

 （案例）网页布局案例

（案例）小米模块案例

（案例）导航

---

盒子模型

5.7 外边距折叠现象 – ① 合并现象

➢ 场景： 垂直布局 的 块级元素 ，上下的margin会合并

➢ 结果：最终两者距离为margin的最大值

➢ 解决方法：避免就好

• 只给其中一个盒子设置margin即可

5.8 外边距折叠现象 – ② 塌陷现象

➢ 场景： 互相嵌套 的 块级元素 ，子元素的 margin-top 会作用在父元素上

➢ 结果：导致父元素一起往下移动

➢ 解决方法：

1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

2. 给父元素设置overflow：hidden

3. 转换成行内块元素

4. 设置浮动

5.9 行内元素的margin和padding无效情况

➢ 场景：给行内元素设置margin和padding时

➢ 结果：

1. 水平方向的margin和padding布局中有效！

2. 垂直方向的margin和padding布局中无效！

line-height 改变垂直方向位置

一、结构伪类选择器

目标： 能够使用 结构伪类选择器 在HTML中定位元素

1. 作用与优势：

1. 作用：根据元素在HTML中的结构关系查找元素

2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁

3. 场景：常用于查找某父级选择器中的子元素

2. 选择器

    
    
    
    
    


    
    

        
这是第1个li
        
这是第2个li
        
这是第3个li
        
这是第4个li
        
这是第5个li
        
这是第6个li
        
这是第7个li
        
这是第8个li
    

➢ n的注意点：

1. n为：0、1、2、3、4、5、6、……

2. 通过n可以组成常见公式

也可以填4n 4的倍数

如果（）填公式 n从0开始

-0+5=5

-1+5=4

-2+5=3

-3+5=2

-4+5=1

-5+5=0

-n+5可以选中前五个

（了解）nth-of-type结构伪类选择器

 二、伪元素

目标： 能够使用 伪元素 在网页中创建内容

➢ 伪元素： 一般页面中的非主体内容可以使用伪元素

➢ 区别：

1. 元素：HTML 设置的标签

2. 伪元素：由 CSS 模拟出的标签效果

➢ 种类：

注意：

1. 必须设置content属性才能生效

2. 伪元素默认是行内元素

    
    
    
    
    


    

    
    
爱
    

三、标准流

目标： 能够认识 标准流 的默认排布方式及其特点

➢ 标准流：又称 文档流 ，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

➢ 常见标准流排版规则：

1. 块级元素：从上往下， 垂直布局 ，独占一行

2. 行内元素 或 行内块元素：从左往右， 水平布局 ，空间不够自动折行

四、浮动

    
    
    
    
    


    
one
two

现在的作用： 网页布局

• 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

浮动的代码：

浮动的特点：

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

• 相当于从地面飘到了空中

2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4. 浮动元素有特殊的显示效果

• 一行可以显示多个

• 可以设置宽高

➢ 注意点：

• 浮动的元素不能通过text-align:center或者margin:0 auto

    
    
    
    
    


    
one
    
two
    
three

 （案例）网页布局案例

    
    
    
    
    


    
    

    
头部
    

        
left
        
right
    

CSS书写顺序: 浏览器执行效率更高
            1. 浮动 / display
            2. 盒子模型: margin border padding 宽度高度背景色
            3. 文字样式

（案例）小米模块案例

（案例）导航

    
    
    
    
    


    
    

        

            
新闻
            
新闻
            
新闻
            
新闻
            
新闻
            
新闻
            
新闻
            
新闻