【CSS 笔记】基础内容

已于 2022-04-19 08:46:23 修改
阅读量196 收藏 1
点赞数
分类专栏： 前端学习笔记 文章标签： css
于 2022-04-17 08:51:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JT61100/article/details/124224702
版权

文章目录

01 CSS 层叠样式表

  • CSS层叠样式表，用来美化网页。做到结构（HTML）与表现分离（CSS）
  • CSS语法有三个组成部分：选择器，属性，属性值
  • 基本语法
selector {
  property: value;
}

02 CSS 四种引用方式

  • CSS 的四种引用方式：行间样式、内部样式、外部样式、导入外部样式
  • 行间样式/嵌入式样式：直接在标签上书写
<div style="color:aquamarine;width: 100px;border: 1px solid blue;">行间样式测试</div>
  • 内部样式：写在 head 里
<head>
  <style type="text/css">
    /* 样式设置 */
    p{
      background-color: aqua;
      font-size: 18px;
      font-style: oblique;
    }
  </style>
</head>
  • 外部样式表：先创建一个 CSS 文件，再在 HTML 文件中用 link 标签引入 CSS 文件
<head>
  <link rel="stylesheet" href="day3.css">
</head>

span{
  font-size: 15px;
  color: blanchedalmond;
  display: block;
}
  • 导入外部样式：先创建一个 CSS 文件，HTML 文件在 style 标签中用 import 引入导入文件
<head>
  <style type="text/css">
    /* 样式设置 */
    @import url(day3.css);
  </style>
</head>
<body>
  <span>导入外部样式测试</span>
</body>

span{
  font-size: 15px;
  color: blanchedalmond;
  display: block;
}
  • 四种CSS引用方式的区别
    • 行间样式只作用于当前标签；内部样式作用于当前文件；外部样式可以被多个HTML文件引用
    • 在实际项目开发中最好使用外部样式
    • 外部样式分为 link 引入和 import 引入两种方式
      • 从属关系区别：@import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
      • 加载顺序区别：加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。
      • 兼容性区别：@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。
      • DOM 可控性区别：可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式。

03 CSS 选择器分类

  • *：匹配html中所有元素（注意：* 的性能差，因为它要匹配所有元素，所以在开发时不建议使用）
  • 标签选择器：用来匹配对应标签
<p>hhh</p>

p {
  color: brown;
}
  • 类选择器：用来选择class命名的标签
<p class="brown">hhh</p>

.brown {
  color: brown;
}
  • id选择器：用来选择用id命名的标签
<p id="brown">hhh</p>

#brown {
  color: brown;
}
  • 派出选择器：根据上下文确定要选择的标签
<ul class="box1">
  <li>li001</li>
  <li>li002</li>
  <li>li003</li>
</ul>
<ul class="box2">
  <li>li001</li>
  <li>li002</li>
  <li>li003</li>
</ul>
<ul class="box3">
  <li>li001</li>
  <li>li002</li>
  <li>li003</li>
</ul>

.box2 li{
  color: blueviolet;
}
  • 伪类选择器：专门用来表示元素的一种特殊状态，详见下
  • 伪元素选择器：详见下

1、选择器分组：让多个选择器具有相同样式，一般用于设置公共样式

<h1>hhh</h1>
<p>ppp</p>
<div class="ddd">ddd</div>
<span id="sss">sss</span>

h1,p,.ddd,#sss{
  color: blue;
}

2、选择器的继承：子元素可以继承父元素的样式

<div>dddd<span>sss</span>ddd</div>

div{
  color: blue;
}
div span{
  color: red;/*改写子元素样式*/
}

3、优先级：外部样式 < 内部样式 < 内联样式

4、样式权重：!import(10000) > 内联样式(1000) > id选择器(100) > 类、伪类、伪元素选择器(10) > 标签选择器(1)

04 CSS 字体、背景

  • CSS 字体
    • font 简写顺序（风变浓大名）：font-style font-variant font-weight font-size/line-height font-family
      • 属性值的位置和顺序不能乱
      • font-size 和 font-family 必填
    • font-size：字号（px %）
    • font-family：字体，按优先顺序排列，用逗号隔开
    • font-style：文字样式（normal默认 italic斜体 oblique倾斜的字体）
    • font-variant：文本修饰（normal small-caps大写字母并变小一些）
    • font-weight：文字加粗（normal默认 bold加粗 bolder lighter {100-900} 400=normal 700=bold）
    • line-height：行高（normal默认 px像素值 number倍数）
    • color：文字颜色（color rgb 16进制）
    • text-decoration：文字修饰（normal默认 underline下划线 line-through贯穿线 overline上划线）
    • text-transform：字母大小写（none capitalize首字母大写 upperca转大写 lowercase转小写）
    • text-indent：文本缩进（px缩进像素值 em缩进字符）
    • text-align：文本水平对齐方式（left center right）
    • vertical-align：文本垂直对齐方式（top center bottom）
  • CSS背景
  • background 简写顺序：background-color必须放最前面，其他无要求
  • background-color：背景色（transparent color）
  • background-image：背景图（none url）
  • background-repeat：背景图铺排方式（repeat no-repeat repeat-x横向平铺 repeat-y纵向平铺）
  • background-position：背景图位置（x-{px/top/center/bottom} y-{px/left/center/right}）有两个参数，若只写一个参数，则 y 向默认占50%。设置背景图位置时，background-repeat 必须为 no-repeat
  • background-attachment：背景图滚动位置（scroll fixed背景图不滚动）

05 CSS 伪类选择器、伪元素选择器

  • 伪类：专门用来表示元素的一种特殊状态
  • 常用伪类选择器：
    • a 标签伪类：
      • :link 初始状态
      • :visited 被访问过后的状态
      • :hover 鼠标悬停时状态
      • :active 鼠标点击时状态
  • 表单中
    • :focus input 元素获得焦点时的状态
  • 列表或其他地方，下面以列表为例
    • :first-child ul/ol列表中第一个 li 的状态
    • :last-child ul/ol列表中第一个 li 的状态
    • :nth-child(n) ul/ol列表中第n个 li 的状态
  • 伪元素：
    • 前面可以是 : 也可以是 ::
      • ::before 前面添加内容并设置样式
      • ::after 结尾添加内容并设置样式
      • ::first-letter 第一个字设置样式
      • ::first-line 第一行设置样式
    • 前面只能是::
      • ::selection
      • ::placeholder
      • ::backdrop
  • 伪类与伪元素区别
    • 伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户的行为而动态变化的。它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
    • 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文字，但这些文本实际上不在文档树中。
    • 伪类的操作对象是文档树中已有的元素。而伪元素则创建了一个文档树外的元素。
  • 伪类和伪元素的特点：
    • 伪类和伪元素都不会出现在源文档或者文档树中
    • 伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
    • 伪类名和伪元素名都是大小写不敏感的
    • 有些伪类是互斥的，而其他的可以同时用在一个元素上（在规则冲突的情况下，常规层叠顺序决定结果）

06 CSS 属性选择器

  • [属性名]：包含有指定属性名的元素
  • [属性名=值]：属性名的值为指定值的元素
  • [属性名~=值]：属性名的值包含指定值的元素
  • [属性名^=值]：属性名的值以指定值开头的元素
  • [属性名$=值]：属性名的值以指定值结尾的元素

07 CSS 关系选择器

  • 空格：后代选择器
  • >：只选择儿子元素
  • +：兄弟选择器。有 n 个 + 时，从 n+1 个兄弟元素开始套用样式

08 CSS 浮动布局

  • 浮动：float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
    • 浮动就是让块级标签不独占一行
    • 目的：把块级标签元素排在一行上
    • 浮动的原理：让元素脱离文档流，不占用标准流
float值描述
left元素向左浮动
right元素向右浮动
none默认值。元素不浮动，并会显示在其文本中出现的位置
inherit规定应该从父元素继承float属性的值
  • 清除浮动：浮动会给整个 HTML 布局带来一定的影响，所以我们必须清除浮动。
    • 浮动后后面的元素不管是块级还是行级元素，不会显示在下一行
    • 目的：让后面的元素自动掉到下一行

清除浮动方法

  • 在要清除浮动的块标签后添加空 <div> 标签，并设置样式：clear:both;
    • clear:left; 清除左浮动，空盒子左边不能存在浮动元素
    • clear:right; 清除右浮动，空盒子右边不能存在浮动元素
    • clear:both; 清除左右浮动，空盒子两边不能存在浮动元素
    • clear:none; 左右浮动都不清除
<div class="wapper">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="clear"></div>
  <div class="box3">box3</div><!-- 在父级标签里 -->
</div>

.wapper{
  width: 600px; 
  margin: 0 auto;
  border: 2px solid aquamarine;
}
.box1,.box2,.box3{
  width: 200px;
  height: 150px;
}
.box1{
  background-color: blue;
  float: right;
}
.box2{
  background-color: brown;
  float: left;
}
.clear{
  clear: both;/* 清除页面内所有浮动 */
}
.box3{
  background-color: darkorange;
}
  • 要清除浮动的父级元素添加样式：overflow:hidden;（首选方法）
    • overflow:hidden; 溢出被剪裁，其余内容将不可见。浮动可见部分所占位置还在，可用来清除浮动。
    • overflow:visible; 默认。溢出没有被剪裁，内容在元素框外渲染 。浮动可见部分所占位置消失。
    • overflow:scroll; 添加滚动条
    • overflow:auto; 与 scroll 类似，但仅在必要时添加滚动条
<div class="wapper">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>
<div class="box3">box3</div><!-- 移出父级标签 -->

.wapper{
  width: 600px;
  margin: 0 auto;
  border: 2px solid aquamarine;
  overflow: hidden;
}
.box1,.box2,.box3{
  width: 200px;
  height: 150px;
}
.box1{
  background-color: blue;
  float: right;
}
.box2{
  background-color: brown;
  float: left;
}
.box3{
  background-color: darkorange;
}
  • 要清除浮动的父级元素添加伪元素 ::after 清除浮动，并设定样式
<div class="wapper">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

.wapper{
  width: 600px;
  margin: 0 auto;
  border: 2px solid aquamarine;
}
.wapper::after{
  content: "";
  display: block;
  clear: both;
}
.box1,.box2,.box3{
  width: 200px;
  height: 150px;
}
.box1{
  background-color: blue;
  float: right;
}
.box2{
  background-color: brown;
  float: left;
}
.box3{
  background-color: darkorange;
}

09 CSS 盒子模型

  • 每个元素都是一个盒子，一个盒子由 margin（外边距）、border（边框线）、padding（内边距）、content（内容）组成，内外边距以 border 为分界。系统默认 body 的外边距为 8px。
    • 外边距（margin）：指元素边框线之外的距离，可带1至4个参数
      • margin-left：左边距
      • margin-right：右边距
      • margin-top：上边距
      • margin-bottom：下边距
      • margin 可用来设置任意一个边的边距
        • 1个：apx → 上下左右a
        • 2个：apx bpx → 上下a 左右b
        • 3个：apx bpx cpx → 上a 左右b 下c
        • 4个：apx bpx cpx dpx → 上a 右b 下c 左d
    • 内边距（padding）：边框线到文本内容的距离，可带1至4个参数
      • padding-left：左边距
      • padding-right：右边距
      • padding-top：上边距
      • padding-bottom：下边距
      • padding 可用来设置任意一个边的边距
    • 边框（border）
      • border-width：边框线宽度，可带1至4个参数
      • border-style：边框线样式，可带1至4个参数
      • border-color：边框线颜色，可带1至4个参数
      • 复合写法无位置之分
  • 盒子真实尺寸
    • 盒子宽度 = width + padding 左右 + border左右
    • 盒子高度 = height + padding 上下 + border上下

10 display 属性：用来设置元素显示方式

  • display 的属性值
    • none：不显示元素，但不影响整体布局
    • block：块显示，在元素前后设置换行符
      • 用来将行级标签转换为块级标签
      • 因为行级标签不识别宽高，而块级标签识别
      • 转换后行级标签也可设置宽高
    • inline：行内显示，将块级标签转换为行级标签
      • 不识别宽高，如果标签里无内容则看不到样式效果
    • inline-block：将块级或行级标签转换为行内块元素，效果类似浮动但不会脱离文档流

11 table 样式

  • table 一般不用来布局，主要用来格式化数据
    • table 属性
      • border：设置边框线或用来写复合属性
      • width：宽度
      • height：高度
      • border-collapse：是否应折叠表格边框（separate默认值不合并 collapse合并边框 inherit继承）
      • border-spacing：相邻单元格之间的边框的距离
      • empty-cells：是否在表格中的空白单元格上显示边框和背景
      • caption-side：表格标题的位置
      • table-layout：设置用于表格的布局算法
    • tr 属性
      • border：设置边框线或用来写复合属性
      • width：宽度
      • height：高度
      • text-align：文本水平对齐方式（left center right）
      • vertical-align：文本垂直对齐方式（top middle bottom）

12 列表样式

  • 不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列表等等
    • 列表类型
      • 无序列表（ul）列表项用 li 表示
      • 有序列表（ol）列表项用 li 表示
      • 用户自定义列表（dl）列表项由一个 dt（标题）和一个或多个 dd（描述）组成
  • 样式（用来修改标识类型）
    • list-style：复合属性，无顺序要求
    • list-style-image：用图像表示标识
    • list-style-position：标识的位置
    • list-style-type：标识类型
      • 无序（none disc cricle square）
      • 有序（none decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin）

13 轮播图

  • 组成
    • 轮播的组图（至少两张以上）
    • 控制器
    • 计数器
<!-- .carousel>ul.carousel-imges>li*3>a[href=""]>img[src="0$.jpg" alt="banner"] -->
<div class="carousel">
  <!-- 1.轮播组图 -->
  <ul class="carousel-imgs">
    <li><a href=""><img src="01.jpg" alt="banner"></a></li>
    <li><a href=""><img src="02.jpg" alt="banner"></a></li>
    <li><a href=""><img src="03.jpg" alt="banner"></a></li>
  </ul>
  <!-- 2.控制器 -->
  <div class="prev"></div>
  <div class="next"></div>
  <!-- 3.计数器 -->
  <div class="count">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

*{
  margin: 0px;
  padding: 0px;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
}
.carousel{
  width: 800px;
  height: 450px;
  margin: 0px auto;
  position: relative;/* 相对定位 */
  overflow: hidden;
}
/* 1.轮播组图 */
.carousel-imgs{
  width: 99999px;
}
.carousel-imgs li{
  float: left;
}
.carousel-imgs img{
  width: 800px;
  height: 450px;
}
/* 2.控制器 */
.prev,.next{
  width: 32px;
  height: 32px;
  position: absolute;/* 绝对定位，脱离文档流，它相对position:relative;的位置进行定位 */
  top: 50%;
  margin: -16px;
}
.prev{
  background-image: url(prev.png);
  left: 50px;
}
.next{
  background-image: url(next.png);
  right: 50px;
}
/* 3.计数器 */
.count{
  width: 800px;
  height: 10px;
  position: absolute;
  bottom: 10px;
}
.count ul{
  width: 60px;
  height: 10px;
  margin: 0 auto;
}
.count ul li{
  width: 10px;
  height: 10px;
  cursor: pointer;/* 将鼠标设为手型 */
  background-color: #000;
  opacity: .5;/* 不透明度，取值为[0,1] */
  list-style-type: none;
  float: left;
  margin-left: 10px;
  border-radius: 50%;
}
.count .active{
  background-color: #102bad;
  opacity: 1;
}

14 CSS 定位布局（position）

  • 设定元素在文档中的位置。会将标签（元素）转换为块级标签
  • position 的属性值
    • static：静态定位，
      • 默认值，占用标准流即文档流
      • 不能设置偏移量（left top right bottom）
    • relative：相对定位
      • 占用标准流即文档流，它会出现在文档流中它该出现的位置
      • 可以设置偏移量（left top right bottom），设置偏移量后会相对于元素本来位置进行偏移
    • absolute：绝对定位
      • 脱离文档流，相对于 body 做偏移（left top right bottom）
      • 绝对定位一般与相对定位结合使用，当样式表里有元素是 relative 时，absolute 的元素的父级是 relative 元素对应的元素，此时偏移量会相对于 relative 元素本来位置进行偏移。relative 是 absolute 的父级。
      • 在项目开发中，一般是 relative 与 absolute 结合使用
    • fixed：固定定位
      • 脱离文档流相对于浏览器窗口左上角（0，0）做偏移
      • 与 relative 设定的对象没有关系，与父级的定位没有任何关系
      • 一般在开发中用来固定导航
  • z-index：当多个元素添加绝对定位，元素将会叠加在一起，使用 z-index可以设置元素显示的层次
    • 文档流默认的 z-index 的值为0
    • 元素可拥有负的 z-index属性值
    • 用在 static 和 relative 元素上无效

15 网站整体布局

网站开发策略：先整体再局部，至顶向下，逐步细化

双飞翼布局

  • 由三列组成，两端固定，中间自适应
  • 兼容性好，兼容所有主流浏览器，包括 IE6
  • 因为 DOM 中 center 在三列结构的最前面，因此可以实现主要内容的优先加载
<div class="container">
  <div class="column center"></div>
  <div class="column left"></div>
  <div class="column right"></div>
</div>

.container{
  width: 100%;
  overflow: hidden;
}
.column{
  float: left;
  height: 200px;
}
.left{
  width: 300px;
  background-color: #f00;
  margin-left: -100%;
}
.center{
  width: 100%;
  background-color: #0f0;
}
.right{
  width: 300px;
  background-color: #00f;
  margin-left: -300px;
}

圣杯布局

  • 由三列组成，两端固定，中间自适应。外观与双飞翼布局一样
  • 布局时与双飞翼比增加了定位和偏移设置
<!-- 一个网页通常由上中下三部分组成 -->
<!-- 1.header头部 -->
<div class="header">#header</div>
<!-- 2.content主题内容区 -->
<div class="container">
  <div class="column center"></div>
  <div class="column left"></div>
  <div class="column right"></div>
</div>
<!-- 3.footer尾部 -->
<div class="footer">#footer</div>

*{
  margin: 0;
  padding: 0;
}
body{
  min-width: 600px;
}
/* 头部+尾部 */
.header,.footer{
  width: 100%;
  height: 100px;
  line-height: 100px;
  background-color: #0c08e0;
  text-align: center;
  font-size: 30px;
}
/* 主体 */
.container{
  padding: 0 200px;
  overflow: hidden;
}
.column{
  float: left;
  height: 200px;
  position: relative;
}
.left{
  width: 200px;
  background-color: #000;
  margin-left: -100%;
  left: -200px;
}
.right{
  width: 200px;
  background-color: #f00;
  margin-left: -200px;
  right: -200px;
}
.center{
  width: 100%;
  background-color: #0f0;
}

侧边栏固定布局

两栏布局
左侧固定，右侧自适应
<div class="container">
  <div class="left">左侧固定</div>
  <div class="right">右侧自适应</div>
</div>

body{
  font-size: 18px;
  min-width: 600px;
}
.container{
  width: 100%;
  overflow: hidden;
}
.left{
  width: 150px;
  height: 200px;/* 实际开发中不设高度，高度由内容确定 */
  float: left;
  background-color: red;
  margin-right: -150px;
  position: relative;
}
.right{
  width: 100%;
  height: 200px;
  float: left;
  background-color: springgreen;
  margin-left: 150px;
}
左侧自适应，右侧固定
<div class="container">
  <div class="left">左侧自适应</div>
  <div class="right">右侧固定</div>
</div>

body{
  font-size: 18px;
  min-width: 600px;
}
.container{
  width: 100%;
  overflow: hidden;
}
.left{
  width: 100%;
  height: 200px;/* 实际开发中不设高度，高度由内容确定 */
  float: left;
  background-color: springgreen;
}
.right{
  width: 150px;
  height: 200px;
  float: left;
  background-color: red;
  margin-left: -150px;
  position: relative;
}
两列定宽布局
<div class="container">
  <div class="left">左侧固定</div>
  <div class="right">右侧固定</div>
</div>

.container{
  width: 1000px;
  overflow: hidden;
}
.left{
  width: 200px;
  height: 200px;
  background-color: #f00;
  float: left;
}
.right{
  width: 780px;
  height: 200px;
  background-color: #00f;
  float: right;
}
三栏布局
中间自适应，两边固定
<div class="container">
  <div class="left">左侧固定</div>
  <div class="center">
    <div class="content">
      中间自适应
    </div>
  </div>
  <div class="right">右侧固定</div>
</div>

.container{
  overflow: hidden;
}
.left,.right{
  width: 200px;
  height: 200px;
  float: left;
  position: relative;
}
.content{
  margin: 0 200px;
}
.left{
  background-color: #f00;
  margin-right: -200px;
}
.right{
  background-color: #00f;
  margin-left: -200px;
}
.center{
  width: 100%;
  height: 200px;
  background-color: #0f0;
  float: left;
}
左边自适应，其他固定
<div class="container">
  <div class="left">
    <div class="content">左侧自适应</div>
  </div>
  <div class="center">中间固定</div>
  <div class="right">右侧固定</div>
</div>

.container{
  overflow: hidden;
}
.center,.right{
  width: 200px;
  height: 200px;
  float: left;
  position: relative;
}
.content{
  margin-right: 400px;
}
.center{
  background-color: #f00;
  margin-left: -400px;
}
.right{
  background-color: #00f;
  margin-left: -200px;
}
.left{
  width: 100%;
  height: 200px;
  background-color: #0f0;
  float: left;
}
右边自适应，其他固定
<div class="container">
  <div class="left">左侧固定</div>
  <div class="center">中间固定</div>
  <div class="right">
    <div class="content">右侧自适应</div>
  </div>
</div>

.container{
  overflow: hidden;
}
.center,.left{
  width: 200px;
  height: 200px;
  float: left;
  position: relative;
}
.content{
  margin-left: 400px;
  height: 200px;
}
.center{
  background-color: #f00;
}
.left{
  background-color: #00f;
}
.right{
  width: 100%;
  height: 200px;
  background-color: #0f0;
  margin-left: -400px;
  float: left;
}

16 BFC & IFC

  • FC的含义就是Fomatting Context。它是 CSS2.1 规范中的一个概念。它是页面中的一块渲染区域。而且有一套渲染规则，它决定了其子元素将怎样定位。以及和其它元素的关系和相互作用。BFC 和 IFC 都是常见的 FC。
  • BFC：块级格式上下文
    • 形成 BFC 的条件
      • 浮动元素 float（除 none 以外的值）
      • 定位元素 position（absolute fixed）
      • display（inline-block table-cell table-caption）
      • overflow（hidden auto scroll）
    • BFC特性
      • 内部的盒子会在垂直方向一个接一个放置
      • 垂直方向的距离由 margin 的最大值决定，如果不想 margin 值叠加，需要将其变为独立的容器
      • BFC 的区域不会与 float 元素区域重叠
      • 计算 BFC 的高度时浮动元素也参与计算
      • BFC 就是页面上的一个独立的容器，容器里的子元素不会影响到外面的元素
      • 计算 BFC 的高度时，浮动元素也參与计算
    • BFC 作用
      • 解决 margin 重叠的问题（添加独立 BFC）
      • 解决浮动高度塌陷的问题（在父级添加 overflow:hidden;）
      • 解决侵占浮动元素的问题（添加 overflow:hidden; 清除浮动）
  • IFC：行级（内联）格式上下文
    • 形成 IFC 条件
      • font-size
      • line-height
      • height
      • vertical-align
    • IFC 特性
      • 元素会在一行中从左至右排列
      • 一行上所有元素会形成一个行框
      • 行框的宽度为包含框的宽度，高度为最高框的高度
      • 浮动元素不会在行框中，并且浮动元素会压缩行框的宽度
      • 行框的宽度容纳不下子元素时，子元素会换下一行显示，并产生新行框
      • 行框的元素内遵循 text-align 和 vertical-align

CSS2.1 规范中的一个概念。它是页面中的一块渲染区域。而且有一套渲染规则，它决定了其子元素将怎样定位。以及和其它元素的关系和相互作用。BFC 和 IFC 都是常见的 FC。

宁阿宁阿宁
关注
专栏目录
css笔记css笔记css笔记
04-03
2. CSS 基础选择器： - **标签选择器**（Element Selectors）：通过元素名来选中所有该类型的元素，如 `p {color: red;}` 会改变所有段落的文本颜色。 - **类选择器**（Class Selectors）：使用点号 `.class` 来...
学习CSS基础过程笔记
03-26
学习 CSS 基础过程笔记是前端开发者的必备技能之一，本笔记总结了 CSS 的基础知识点，涵盖选择器、常见样式、布局案例等多方面的内容。 选择器 选择器是 CSS 中最基本也是最重要的概念之一。选择器用于选择 HTML ...
css基础知识笔记
2301_79175212的博客
09-22 1363
vscode,启动!
前端css基础学习笔记
a_big_panda的博客
01-22 1011
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1406
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
CSS学习笔记
m0_58761900的博客
09-18 3110
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS基础笔记-02动画
渔道的博客
01-05 1290
学习css动画的基本用法
CSS基础入门（详细总结笔记）
程序员阿龙的博客
08-12 4187
CSS基础入门，详细总结
CSS零基础学习笔记
Ke_1124的博客
04-01 2631
CSS零基础学习笔记1. CSS简介01-CSS语法规范 1. CSS简介 HTML只关注内容语义，虽然可以做简单样式，但是很繁琐。 CSS是层叠样式表(Cascading Style Sheets)的简称。 CSS是一种标记语言。 CSS最大的价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离。 01-CSS语法规范 CSS规则由两个主要部分构成：选择器或一条或多条声明。 h1{ color:red; font-gize:25px; } ...
CSS入门笔记
m0_74293254的博客
09-19 1080
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页外观和布局的样式表语言。它为 HTML 提供了视觉上的美化工具，能够控制网页中元素的展示方式，包括字体、颜色、布局、间距、边框等。层叠：CSS 的“层叠”概念意味着样式规则可以以多种方式应用，它们的优先级会按一定的规则叠加生效。样式可以直接在 HTML 元素中定义，可以在页面的<style>标签中编写，也可以存储在外部的 CSS 文件中。样式。
CSS基础笔记
Junnix的博客
12-19 3655
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 1.所有的css代码都写在style标签里--> <!-- 像这种把div标签的属性直接设置在style标签内部属于内部样式--> <!-- 它可以把所有的div标签都设置成内部样式的格式-->
CSS基础_css_笔记
09-23
**CSS基础：开启网页设计之旅** CSS，全称Cascading Style Sheets，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它是网页设计的重要组成部分，允许我们将表现与内容分离，使网页...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
CSS笔记(1).pdf
01-26
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
学习 CSS 新的属性 conic-gradient 实现环形进度条
m0_73035846的博客
10-04 416
我们在工作中用到环形进度条的时候，一般都是使用组件库提供的，那么你有没有想过这是怎么实现的呢？
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1159
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
使用纯CSS和JavaScript来实现一个转盘抽奖效果
最新发布
weixin_46328739的博客
10-10 429
使用纯CSS和JavaScript来实现一个转盘抽奖效果,抽到机率相同。
241006-Gradio中Chatbot通过CSS自适应调整高度
专注机器学习之路
10-06 381
【代码】241006-Gradio中Chatbot通过CSS自适应调整高度。
HTML与CSS基础学习笔记
“html和css笔记，包括HTML基础、XHTML注意事项、常用标签等内容，结合了书籍、网站和知名专家的资源，以及各种网页调试工具的介绍。” HTML与CSS是构建网页设计的基础，它们分别负责网页的结构和样式。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值