NightWatch

# 前端查漏补缺——CSS2

# CSS选择器

# CSS基本选择器

  1. 通配符选择器 ： 用于清除样式
  2. 元素选择器：不能差异化选择
  3. 类选择器
  4. id选择器

# CSS复合选择器

复合选择器建立在基本选择器之上，通过不同方式组合而成

# 交集选择器（无分隔）

语法：选择器1选择器2选择器3 {} （直接拼接在一块）

/* 选中类名为beauty的p元素 */
p.beauty {
    color:blue;
}

/* 选中类名包含rich和beauty的元素 */
.rich.beauty {
    color: green;
}

注意：

  1. 标签名必须写在前面
  2. 用的最多的是元素选择器配合类名选择器

# 并集选择器（逗号分隔）

语法：选择器1，选择器2，选择器3 {} (逗号分隔)

#peiqi, 
.rich, 
.beauty {
    font-size: 40px;
    background-color: skyblue;
    width: 200px;
}

注意：

  1. 并集选择器，一般竖着写
  2. 任何形式的选择器都可以作为并集选择器一部分。

# 后代选择器（空格分隔）

语法：选择器1 选择器2 选择器3 ... 选择器n {} (先写祖先，再写后代)

ul li {
    color: red;
}

ul li a {
    color: orange;
}

.subject li {
    color: blue;
}

.subject li.front-end {
    color: yellow;
}

注意：

  1. 儿子、孙子、重孙，都算是后代
  2. 文档结构要符合要求

# 子代选择器（>分隔）

语法：选择器1>选择器2>选择器3>...选择器n {} （大于号分隔）

/* div中的子元素a */
div>a {
    color: red;
}

/* 类名为persons元素的子元素a */
.persons>a {
    color: green;
}

注意：子就是指儿子

# 兄弟选择器(+分隔)

相邻选择器：

  • 作用：选择紧挨着的下一个元素

  • 语法：选择器1+选择器2 {} （加号分隔）

div+p {
	color: red;
}

通用选择器：

  • 作用：选择指定元素后，所有的兄弟元素
  • 语法：选择器1~选择器2 {} （波浪号分隔）
span~p {
	color: green;
}

注意：两种兄弟选择器，只能选择下面的兄弟

# 属性选择器（[]中括号）

语法：

  1. [属性名] 选中具有某个属性的元素
  2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素
  3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头
  4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾
  5. [属性名*="值"] 选中包含某个属性，且属性值包含指定的值
div[title] {
    color: red;
}

div[title="bachong"] {
    color: purple;
}

div[title^="a"] {
    color: green;
}

div[title$="b"] {
    color: blue;
}

div[title*="x"] {
    color: #bfa;
}

# 伪类选择器

作用：选中特殊状态的元素

如何理解伪类？像类，但不是类，是元素的一种特殊状态

一、动态伪类：

  1. :link超链接未被访问的状态
  2. :visited超链接访问过的状态
  3. :hover鼠标悬停在元素上的状态
  4. :active元素激活的状态

注意：遵循LVHA的顺序

  1. :focus获取焦点的元素

表单类元素才能使用

当用户：点击元素、触摸元素、或者通过键盘上的tab键，选中元素时，就是获得焦点

二、结构伪类：

  • 常用的：

    1. :first-child所有兄弟元素中的第一个
    2. :last-child 所有兄弟元素中的最后一个
    3. :nth-child 所有兄弟元素的第n个
    4. :first-of-type 所有同类型兄弟元素的第一个
    5. :last-of-type 所有同类型兄弟元素的最后一个
    6. :nth-of-type 所有同类型兄弟元素的第n个

    关于n的值：符合an+b的规则

    1. 0或不写：什么都不选中
    2. n：选中所有元素
    3. 1~正无穷的整数：选中对应序号的子元素
    4. 2n或even：选中序号为偶数的子元素
    5. 2n+1或odd：选中序号为奇数的子元素
    6. -n+3：选中前3个元素

  • 了解即可：

    1. :nth-last-child(n) 所有兄弟元素中的倒数第n个
    2. :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
    3. :only-child 选择没有兄弟的元素
    4. :only-of-type 选择没有同类型兄弟的元素
    5. :root 根元素
    6. :empty 内容为空元素(空格也算)

三、否定伪类

:not(选择器) 排除满足括号中条件的元素

四、UI伪类

  1. :checked 被选中的复选框或单选按钮
  2. :enable 可用的表单元素
  3. :disabled 不可用的表单元素（有disabled属性）

五、目标伪类（了解）

:target 选中锚点指向的元素

六：语言伪类

:lang() 根据指定的语言选定元素(本质是看lang属性的值)

# 伪元素选择器

定义：像元素，但不是元素，是元素中的一些特殊位置

  • 常用伪元素：
    • ::first-letter 选中元素的第一个文字
    • ::first-line 选中元素的第一行文字
    • ::selection 选中被鼠标选中的内容
    • ::placeholder 选中输入框的提示文字
    • ::before 在元素最开始的位置，创建一个子元素（用content属性指定内容）
    • ::after 在元素最后的位置，创建一个子元素（用content属性指定内容）

# CSS选择器优先级

通过不同的选择器，选中相同的元素，并且为相同的样式名称设置不同的值时，就产生了样式冲突，这时候就需要看优先级了。

行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

详细计算：

  1. 计算方式：每个选择器，都可计算出一组权重，格式为：（a,b,c）
  • a:ID选择器的个数
  • b:类、伪类、属性选择器的个数
  • c:元素、伪元素选择器的个数

例如：

选择器 权重
ul>li (0,0,2)
div ul>li p a span (0,0,6)
#atguigu .slogan (1,1,0)
#atguigu .slogan a (1,1,1)
#atguigu .slogan a:hover (1,2,1)

  1. 比较规则：按照从左向右的顺序，依次比较大小，当前位胜出，后面不再对比。（本质上就是一个排序规则）

  2. 特殊规则：

    1. 行内样式大于所有选择器
    2. !important权重，大于行内样式，大于所有选择器，权重最高！

# CSS常用属性

# CSS颜色属性

  • 表达方式1：颜色名(red,orange,green等)

  • 表达方式2：rgb或rgba

/* 使用0~255之间的数字表示一种颜色 */
color: rgb(138,43,226); /* 紫罗兰色 */
color: rgba(255,0,0,0.5) /* 半透明的红色 */

/* 也可以使用百分比表示一种颜色 */
color: rgb(100%,0%,0%)
color: rgba(100%,0%,0%,50%) /* 半透明的红色 */

注：

  • 对于rgba来说，前三位rgb形式需要保持一致，要么都是0~255，要么都是百分比
  • 表达方式3：HEX或HEXA

原理与rgb一样，只不过是写成了16进制的形式

注意：IE浏览器不支持HEXA，但支持HEX

  • 表达方式4：HSL或HSLA

    20240522233349

    • 色相：取值范围0~360度，具体度数对应的颜色如下
    • 饱和度：取值范围0%~100%。（0%就是全灰，100%就是没有灰）
    • 亮度：取值范围0%~100%。（0%亮度没了，就是黑色，100%亮度太强，就是白色）

    HSLA就是加上了透明度

# CSS字体属性

# 字体大小

  • 属性名 font-size

  • 注意点：

    1. Chrome浏览器支持的最小文字是12px，默认文字大小为16排序，并且0px会自动消失
    2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值
    3. 通常给body设置font-szie属性，其他的元素可以继承

字体设计

  1. 由于字体设计原因，文字最终呈现的大小并不一定与font-size遗址，可能有偏差
  2. 通常情况下，文字相对于字体设计框，并不是垂直居中的，通常都是靠下一些的

# 字体族

  • 属性名：font-family
  • 语法
div {
	font-family: "STCaiyun", "Microsoft YaHei", sans-serif
}

注意：

  1. 使用字体的英文名称兼容性会更好，英文名称可以现查
  2. 字体名称包含空格，必须用引号包裹起来
  3. 可以设置多个字体，按照从左到右顺序查找，最后写上serif（衬线字体）或sans-serif（非衬线字体）
  4. windows系统，默认字体就是微软雅黑

# 字体风格

  • 属性名：font-style

  • 常用值：

    1. normal：正常
    2. italic：斜体（使用字体自带的倾斜效果）
    3. oblique：斜体（强制倾斜产生倾斜效果）

    更推荐使用italic

# 字体粗细

  • 属性名：font-weight

  • 常用值：

    • 关键词
    1. lighter：细
    2. normal：正常
    3. bold：粗
    4. bolder：很粗（多数字体不支持）
    • 数值
    1. 100~1000且无单位，数值越大，字体越粗，具体得看字体设计时的精细程度
    2. 100~300等同于lighter，400~500等同于normal，600以上等同于bold
    • 语法
            .rong4 {
            font-weight: bolder;
        }

        .rong5 {
            font-weight: 300;
        }

# 字体复合属性

  • 属性名：font，可以把上述字体样式合并为一个属性
  • 编写规则：
    1. 字体大小、字体族必须都写上
    2. 字体族必须是最后一位，字体大小必须是倒数第二位
    3. 各个属性用空格分开
  • 更推荐复合写法

# CSS文本属性

# 文本间距

  • 字母间距：letter-spacing
  • 单词间距：word-spacing
  • 属性值为像素，正值让间距增大，负值让间距减小

# 文本修饰

  • 属性名：text-decoration
  • 可选值：
    1. none：无装饰线（常用）
    2. underline：下划线（常用）
    3. overline：上划线
    4. line-through:删除线
  • 可搭配如下值使用：
    1. dotted：虚线
    2. wavy：波浪线
    3. 也可以指定颜色和线宽
.rong1 {
  /* 上划的绿色虚线 */
    text-decoration: overline dotted green;
}
.rong2 {
  /* 下划的红色波浪线 */
    text-decoration: underline wavy red;
}
.rong3 {
  /* 删除线 */
    text-decoration: line-through skyblue;
}
.rong4, ins, del {
  /* 没有各种线 */
  text-decoration: none;
}

# 文本缩进

  • 属性名：text-indent
  • 属性值：css中的长度单位

# 文本对齐

  • 水平对齐：text-align

  • 垂直对齐：

    • 顶部：默认就是顶部对齐

    • 居中：对于单行文字，行高等于容器高度

    • 底部：对于单行文字，让line-height=height*2-font-size-x

      x是根据字体族，动态决定的一个值

# 行高（很重要）

  • 属性名:line-height
  • 可选值：
    1. normal：由浏览器根据文字大小决定的默认值
    2. 像素px
    3. 数字，参考自身font-size的倍数（常用）
    4. 百分比：参考自身font-size的百分比
/* 第一种写法，值为像素 */
line-height: 30px;

/* 第二种写法，值为normal */
line-height: normal;

/* 第三种写法，值为数值,用的比较多 */
line-height: 1.5;

/* 第四种写法，值为百分比 */
line-height: 150%;
  • 注意事项：
  1. line-height过小会怎样？文字会重叠，且最小值为0，不能为负数
  2. line-height是可以继承的，且为了更好地呈现文字，最好写数值
  3. line-height和height是什么关系？
    • 设置了height，那么高度就是height的值
    • 不设置height，会根据line-height计算高度
  • 应用场景：
  1. 对于多行文字：控制行与行之间的间距
  2. 对于单行文字：让line-height等于height，可以实现文字垂直居中

​ 备注：这种垂直居中并不是绝对的，和字体设计有关

# vertical-align

  • 属性名：vertical-align
  • 作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式
  • 常用值：
    1. baseline：使元素的基线与父元素的基线对齐
    2. top：使元素顶部与所在行顶部对齐
    3. middle：使元素中部与父元素字母x的中心点对齐
    4. bottom：使元素底部与所在行的底部对齐

注意：vertical-align不能控制块元素

# CSS列表属性

列表相关属性可以作用在ul、ol、li元素上

列表属性：

  • list-style-type：设置列表符号
    • none：不显示符号（很常用）
    • square：实心方块
    • disc：圆形
    • decimal：数字
    • lower-roman：小写罗马数字
  • list-style-position：设置列表符号位置
    • inside：在li里面
    • outside：在li外面
  • list-style-image：自定义列表符号
    • url(图片地址)
  • list-style：复合属性，没有顺序数量要求

# CSS表格属性

# 边框相关属性（其他元素也能用）

  • border-width：宽度
  • border-color：颜色
  • border-style：风格
  • border：复合属性

# 表格独有属性

  1. table-layout：设置列宽
    • auto：自动，列宽根据内容计算
    • fixed：固定列宽，平均分
  2. border-spacing：单元格间距
    • css中可用的长度值，前提是单元格不能合并
  3. border-collapse：合并单元格边框
    • collapse：合并
    • separate：不合并
  4. empty-cells：隐藏没有内容的单元格
    • show：默认显示
    • hide：隐藏
  5. caption-side：设置表格标题位置
table {
    border: 2px green solid;
    width: 500px;
    /* 控制表格列宽 */
    table-layout: auto;
    /* 控制单元格间距（生效的前提是：不能合并边框） */
    border-spacing: 0px;
    /* 合并相邻单元格的边框 */
    border-collapse: collapse;
    /* 隐藏没有内容的单元格 */
    empty-cells: hide;
    /* 设置表格标题位置 */
    caption-side: top;
}

# CSS背景属性

  • background-color：设置背景颜色
    • 默认颜色是transparent
  • background-image：设置背景图片
    • url(图片的地址)
  • background-repeat：设置背景重复方式
    • repeat：重复，铺满整个元素，默认值
    • repeat-x：只在水平方向重复
    • repeat-y：只在垂直方向重复
    • no-repeat：不重复
  • background-position：设置背景图位置
    • 通过关键字设置，两个值，空格分开
      • 水平：left、center、right
      • 垂直：top、center、bottom
      • 如果只写一个值，另一个就是center
    • 通过长度指定坐标位置，元素左上角为坐标原点，两个值分别为x坐标和y坐标
      • 如果只写一个值，会被认为x坐标
  • background：复合属性
    • 没有数量和顺序要求

注意：

  1. background-position指定的位置是背景的位置，而不是图片中的位置

# CSS鼠标属性

主要是修改鼠标的符号

  • 属性名：cursor

  • 功能：设置光标样式

  • 属性值：

    • pointer：小手
    • move：移动图标
    • text：文字选择器
    • crosshair：十字架
    • wait：等待
    • help：帮助

    扩展：自定义鼠标图标

    cursor: url("../img/arrow.png"), pointer;

# CSS盒模型

# CSS长度单位

  1. px：像素
  2. em：相对于font-size的倍数
  3. rem：相对于根字体大小，也就是html
  4. %：相对于父元素计算

# CSS元素的显示模式

# 显示模式分类

  • 块元素（block）

    1. 在页面中独占一行，从上到下排列
    2. 默认宽度撑满父元素
    3. 默认高度：由内容撑开
    4. 可以通过CSS设置宽高

  • 行内元素（inline）

    1. 在页面中不独占一行，一行容纳不下的行内元素，会在下一行继续从左到右排列
    2. 默认宽度：由内容撑开
    3. 默认高度：由内容撑开
    4. 无法通过CSS设置宽高

  • 行内块元素（inline-block）

    1. 在页面中不独占一行，一行容纳不下的行内元素，会在下一行继续从左到右排列
    2. 默认宽度：由内容撑开
    3. 默认高度：由内容撑开
    4. 可以通过CSS设置宽高

# 总结各元素显示模式(必须记住)

  • 块元素（block）
  1. 主体结构标签：html、body
  2. 排版标签：h1、h6、hr、p、pre、div
  3. 列表标签：ul、ol、li、dl、dt、dd
  4. 表格相关标签：table、tbody、thead、tfoot、tr、caption
  5. form、option
  • 行内元素（inline）
  1. 文本标签：br、em、strong、sup、sub、del、ins
  2. a、label
  • 行内块元素（inline-block）
  1. 图片：img
  2. 单元格：td、th
  3. 表单控件：input、textarea、select、button
  4. 框架标签：iframe

# 修改元素显示模式

通过css的display属性可以修改元素的默认显示模式，常用值如下：

  • none：元素会被隐藏
  • block：元素将作为块级元素显示
  • inline：元素将作为行内元素显示
  • inline-block：元素将作为行内块显示

总结：学习css的时候，不仅要记元素的默认属性值，还需要知道如何去修改

# 盒子内容区

max-width、min-width一般不与width一起使用

max-height、min-height一般不与height一起使用

# 默认宽度

盒子的默认宽度=父元素内容区宽度-盒子的外边距x2

# 内边距padding

  1. padding不能为负数
  2. 行内元素的左右padding是没问题的，上下padding不能完美设置
  3. 块级元素、行内块，四个方向内边距都可以设置

# 边框border

  1. 边框相关属性共20个
  2. border是复合属性
  3. border-style、border-width、border-color是复合属性
  4. border-left、border-right、border-top、border-bottom都是复合属性

# 外边距margin

  1. 子元素margin，是参考父元素content计算的
  2. 上左margin，影响自己位置；下右margin，影响后面兄弟位置
  3. 块级元素，行内块元素，均可以完美设置四个方向的margin，但行内元素，左右margin可以设置，上下margin设置无效
  4. margin的值也可以是auto，如果给一个块元素设置左右margin都为auto，该块元素会在父元素中水平居中
  5. margin可以使负值

# margin塌陷问题

什么是margin塌陷问题？

​ 第一个子元素的上margin会作用的父元素上，最后一个子元素的下margin会作用在父元素上

如何解决margin塌陷？

  • 方案一：给父元素设置不为0的padding,
  • 方案二：给父元素设置宽度不为0的border，
  • 方案三：给父元素设置css样式overflow:hidden

注：这其实是一个历史遗留问题，早期浏览器页面比较简单，浏览器认为这种方式比较好，但是现在网页丰富了，就存在很多问题

# margin合并问题

什么是margin合并？

​ 上面兄弟元素的下margin和下面兄弟元素的上margin会合并，去一个最大的值，而不是相加

如何解决margin合并问题？

​ 无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

# 处理内容溢出

overflow:溢出内容的处理方式

  • visible:显示，默认值
  • hidden:隐藏
  • scroll:显示滚动条
  • auto:自动显示滚动条

注意：

  1. overflow-x、overflow-y不能一个是hidden，一个是visible
  2. overflow最常用的值是hidden和auto，除了能处理显示方式，还可以解决很多疑难杂症

# 隐藏元素的两种方式

方式一：visibility属性

visibility属性默认值是show,如果设置了hidden，元素会隐藏，但是还占有原来的位置

方式二：display属性

设置display:none,元素彻底隐藏，不但看不见，而且不占用任何位置，没有大小宽高

# 样式的继承

能继承的属性：字体属性、文本属性（除了vertical-align）、文字颜色

不能继承的属性：边框、背景、内外边距、宽高、溢出方式

一个规律：能继承的属性都是不影响布局的，和盒模型没关系的

# 默认样式

优先级：元素默认样式>继承来的样式

body元素默认样式，8px的外边距

# 布局小技巧

  1. 行内元素、行内块元素，可以被父元素当做文本处理

即：可以想处理文本一样，设置行内、行内块在父元素中的对齐

例如：text-align、line-height、text-indent等

  1. 如何让子元素在父元素中水平居中？（容易理解）

    • 若子元素为块元素，给父元素加上：margin:0 auto;
    • 若子元素为行内元素、行内块元素，给父元素加上：text-align:center；

  2. 如何让子元素在父元素中垂直居中？

    • 若子元素为块元素，给子元素加上：margin-top，值为（父元素content-子元素盒子总高）/2

    • 若子元素为行内元素、行内块元素：让父元素的height=line-height,么给子元素都加上：vertical-align:middle

      补充：如果想绝对垂直居中，父元素font-size设置为0

说明：行内元素在父元素垂直对齐，是以字母x为依据的

代码示例：

<style>
  .outer {
    width: 400px;
    height: 400px;
    background-color: gray;
    text-align: center;
    /* 行高等于height */
    line-height: 400px;
    /* 消除父元素文字对子元素文字的影响 */
    font-size: 0px;
  }

  span {
    font-size: 40px;
    /* 文字对齐位置，如果不设置，图片中间就会和x字母底部对齐 */
    vertical-align: middle;
    background-color: orange;
  }

  img {
    /* 图片对齐位置 */
    vertical-align: middle;
  }
</style>

<div class="outer">
    <span>出来玩啊！</span>
    <img src="../img/girl.png" alt="">
</div>

最终效果：

20240526215818

# 元素之间的空白问题

产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符

解决方案：

  1. 方案一：去掉空格和换行（太蠢了）
  2. 方案二：给父元素设置font-size:0,再给需要显示文字的元素，单独设置字体大小

# 行内块的幽灵空白问题

产生原因：行内块元素与文本的基线对齐，而文本的基线语文本的最底端之间是有一定距离的。

异常情况：幽灵空白

正常情况：正常情况

    div {
      width: 600px;
      background-color: skyblue;
      /* 第三种解决方案 */
      font-size: 0;
    }

    img {
      /* 第一种解决方案,只要不是baseline  */
      vertical-align: bottom;

      /* 第二种解决方案, 后面没东西 */
      display: block;
    }

# CSS浮动

# 简介

浮动早期是为了实现文字环绕效果的，包括文字环绕图片，文字环绕文字等，现在是主流网站布局方式之一。

早期使用表格布局，随后是浮动，弹性盒子flex

# 元素浮动后的特点（重要！）

  1. 脱离文档流（可以理解为不排队了）
  2. 不管之前是什么元素，浮动后，默认宽高被内容撑开，而且可以设置宽高
  3. 不会独占一行，可以和其他元素共用一行
  4. 不会margin合并,也不会margin塌陷,能够完美地设置四个方向的margin和padding
  5. 不会像行内块一样被当做文本处理（没有行内块的空白问题）

# 元素浮动之后的影响

对兄弟元素的影响：后面的兄弟元素，会占用浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。

对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但是父元素的宽度依然束缚浮动的元素

# 解决浮动产生的影响

首先提一句，没有最优雅的解决办法

解决方案：

  1. 方案一：给父元素设置高度
  2. 方案二：给父元素也设置浮动，（父亲的兄弟元素会顶上来）
  3. 方案三：给父元素设置overflow：hidden
  4. 方案四：在所有浮动元素最后面，添加一个块元素，并给该元素设置clear：both
  5. 方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理和方案四相同。==>推荐使用
.parent::after {
	content: '',
	display: block,
	clear: both
}

布局中的一个原则，设置元素浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

# CSS定位

# 相对定位

如何开启相对定位？

  • 给元素设置position:relative
  • 可以使用left、right、top、bottom四个属性

相对定位的参考位置在哪？

  • 相对于自身原来的位置

相对定位的特点：

  1. 不会脱离文档流，不会对其他元素产生任何影响

  2. 定位后的元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的

    默认规则是：

    • 定位的元素会盖在普通元素之上
    • 都发生定位的两个元素，后写的元素会盖在先写的元素之上

  3. left不能和right一起设置，top和bottom不能一起设置，只有left和top会生效

  4. 相对定位的元素，也能继续浮动，但是不推荐这样做

  5. 相对定位的元素，也能通过margin设置外边距，但不推荐这样做

注意：绝大部分情况下，相对定位，会和绝对定位一起使用

# 绝对定位

如何设置绝对定位？

  • 给元素设置position：absolute
  • 可以使用left、right、top、bottom四个属性

绝对定位的参考点在哪？

  • 参考它的包含块

什么是包含块？

  1. 对于没有脱离文档流的元素：包含块就是父元素
  2. 对于脱离文档流的元素，包含块就是第一个拥有定位属性的祖先元素（如果所有的祖先都没有定位，包含块就是整个页面）

绝对定位元素的特点：

  1. 脱离文档流，对后面的兄弟元素、父元素有影响
  2. left不能和right一起设置，top和bottom不能一起设置，只有left和top会生效
  3. 绝对定位和浮动不能同时设置，如果同时设置，浮动失效
  4. 绝对定位的元素，也能通过margin调整位置，但不推荐这样做
  5. 无论是什么元素（行内、行内块、块）设置为绝对定位之后，都变成了定位元素

何为定位元素？

——默认宽高都被内容撑开，且能自由设置宽高。

# 固定定位

如何设置固定定位？

  • 给元素设置position：fixed
  • 可以使用left、right、top、bottom四个属性

固定定位的参考点？

  • 参考视口

固定定位元素的特点

  1. 脱离文档流，会对兄弟元素、父元素有影响
  2. left不能和right一起设置，top和bottom不能一起设置，只有left和top会生效
  3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效
  4. 固定定位的元素，也能通过margin调整位置，但不推荐这样做
  5. 无论是什么元素（行内、行内块、块）设置为固定定位之后，都变成了定位元素

# 粘性定位

如何设置粘性定位？

  • 给元素设置position：sticky
  • 可以使用left、right、top、bottom四个属性

粘性定位的参考点在哪里？

  • 离它最近的一个拥有“滚动机制”的祖先元素，即使这个祖先元素不是最近的真实可滚动祖先。

粘性定位元素的特点

  • 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式
  • 最常用的值是top
  • 粘性定位和浮动可以同时设置，但不推荐这样做
  • 粘性定位的元素，也能通过margin调整位置，但不推荐这样做

# 定位层级

  1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
  2. 如果发生重叠，默认情况是：后面的元素，会显示在前面元素之上
  3. 可以通过css属性z-index调整元素的显示层级
  4. z-index的属性值是数字，没有单位，数字越大显示层级越高
  5. 只有定位元素设置z-index才有效
  6. 如果z-index大的元素，依然没有覆盖掉z-index小的元素，请检查其包含块的层级

# 定位的特殊应用

注意：

  1. 发生固定定位、绝对定位之后，元素就变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
  2. 发生相对定位之后，元素依然是之前的显示模式
  3. 以下所说的特殊应用，只针对绝对定位和固定定位，不包括相对定位的元素

让定位元素的宽充满包含块

  1. 块宽与包含块一致，可以给定位元素同时设置left和right为0
  2. 块高与包含块一致，可以给定位元素同时设置top和bottom为0

让定位元素在包含块中居中

  • 方案一
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
  • 方案二
left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

注意：该定位的元素必须设置宽高！！！

原因：不设置宽高，方案一子元素会填充整个父元素，方案二需要用到元素的宽高

# CSS布局

# 版心

  • 在PC端网页中，一般会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心
  • 版心的宽度一般是960-1200像素之间
  • 版心可以是一个，也可以是多个

# 常用类名

位置
顶部导航条 topbar
页头 header、page-header
导航 nav、navigator、navbar
搜索框 search、search-box
横幅、广告、宣传图 banner
主要内容 content、main
侧边栏 aside、sidebar
页脚 footer、page-footer

# 重置默认样式

很多元素都有默认样式，比如：

  1. p元素有默认上下margin
  2. h1~h6标题也有上下margin，且字体加粗
  3. body元素有默认的8px外边距
  4. 超链接有默认文字颜色和下划线
  5. ul元素有默认左padding

方案一：使用全局选择器

* {
    margin: 0;
    padding: 0;
    ...
}

此种方法，简单案例可以用一下，实际开发不会使用，并不是所有元素都有默认样式。

方案二：reset.css

选择具有默认样式的元素，清空其默认样式

经过reset后的网页，如同一张白纸，开发人员可以根据设计稿，精细的添加具体的样式

方案三：Normalize.css

在清除默认样式的基础上，保留了一些有价值的默认样式

相对于以上两个方案，有如下优点：

  1. 保护了有价值的默认样式，而不是完全去掉他们
  2. 为大部分HTML元素提供一般化的样式
  3. 新增对HTML5的设置
  4. 对并集选择器的使用比较谨慎

相对而言还是reset用的多一些，Normalize有点理想化了

Last Updated: 12/23/2024, 4:18:13 AM

← 前端查漏补缺——CSS3 →