css的理解总结

已于 2022-04-27 10:34:33 修改
阅读量373 收藏 1
点赞数 1
分类专栏： conclusion 文章标签： css
于 2022-04-25 20:59:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47979372/article/details/124401249
版权

目录

1. 对盒子模型的理解

  • 定义：css基本盒子模型是css规范的模块，它定义的长方形的盒子
  • 分类：盒模型按照标准定义分为标准盒模型和IE盒模型，按照元素类型分为块级盒模型和内联盒模型
  • 使用：按照标准切换模型：box-sizing: border-box;或者box-sizing: context-box;
    按照元素切换盒模型：display: block;或者display: inline;或者display: iinline-block
  • 应用：盒模型有padding,border,margin属性；padding和margin设置的值沿着顺时针方向等

2. 对BFC的理解

  • 定义：BFC是块格式化上下文,代表一个独立的空间, 这个空间子元素的渲染不会影响外部布局
  • 创建BFC:
    • display: inline-block;
    • display: table-cell;
    • display: flex;
    • position: absolute;
    • position: fixed;
    • overflow: hidden
  • 作用：
    • 解决了垂直方向margin合并的问题
    • 解决了设置float脱离文档流, 父元素高度塌陷问题

3. 对css选择器的理解

  • 定义： css选择器是用来对选定页面元素进行样式修改的
  • 种类：
    • 标签选择器
    • 通配符选择器
    • 类选择器
    • ID选择器
    • 标签属性选择器
    • 伪类选择器
    • 伪元素选择器
    • 后代选择器
    • 子代选择器
    • 兄弟相邻选择器
    • 通用兄弟选择器

4. 对css选择器的优先级的理解

  • 定义: css选择器优先级是对于不同种类选择器组成的匹配规则
  • 优先级： !important > 行内样式 > ID选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器 > 通配符、子类选择器、兄弟选择器

5. 对css属性继承的理解

  • 定义: css继承指的是父元素设置的属性样式等, 子元素同时拥有该属性和样式
  • 可继承属性:
    • 字体：font、font-family、font-size、font-style、font-variant、font-weight
    • 字母间距：letter-spacing
    • 文字展示：line-height、text-align、text-indext、text-transform
    • 字间距：word-spacing
    • 可见性: visibility

6. 对px/em/rem/vw/vh的理解

  • 定义:
    • px: 绝对单位，像素, 基本长度单位
    • em: 相对单位，相对当前元素文本的字体大小
    • rem: 相对单位，基于html元素字体大小
    • vw: 相对单位，相对浏览器的视口宽度单位(1vw代表视口宽度的1%)
    • vh：相对单位，相对于浏览器的视口高度单位(1vh代表视口高度的1%)

7. 实现左边定宽，右边自适应

  • flex布局
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      display: flex;
    }
    .left {
      width: 200px;
      background-color: pink;
    }
    .right {
      flex: 1;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>
  • table布局
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      display: table;
    }
    .left {
      width: 200px;
      background-color: pink;
      display: table-cell;
    }
    .right {
      display: table-cell;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>
  • grid布局
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      display: grid;
      grid-template-columns: 200px auto;
    }
    .left {
      background-color: pink;
    }
    .right {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

8. 实现绝对居中

  • 定宽高

绝对定位 + 负margin值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: pink;
      margin-left: -50px;
      margin-top: -50px;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="box"></div>
  </div>
</body>
</html>

绝对定位 + margin auto

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: pink;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="box"></div>
  </div>
</body>
</html>
  • 不定宽高

绝对定位 + transform

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }
    .box {
      position: absolute;
      background-color: pink;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="box">position + transform</div>
  </div>
</body>
</html>

table-cell

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .box {
      background-color: pink;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="box">table-cell</div>
  </div>
</body>
</html>

flex布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box {
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="box">flex布局</div>
  </div>
</body>
</html>

9. 清除浮动方式

例如外部div没有设置高度， 但是内部元素设置了浮动, 这时候会导致外部div塌陷, 这时候就需要清除浮动

方式：

* 1. 父元素设置固定宽高
	* 优点：简单, 代码量少, 没有兼容问题
	* 缺点: 内部元素高度不确定时不能使用
* 2. 内部添加新元素,并添加`clear: both;`
	* 优点: 简单, 代码量少,没有兼容问题
	* 缺点: 无语义, 不利于后期维护
* 3. 使用伪元素
	* 优点: 仅用css实现, 不容易出错
	* 缺点: 仅支持IE8以上和非IE浏览器
* 4. 触发父元素BFC
	* 优点: 仅使用css实现, 代码少, 浏览器支持好
	* 缺点: 用overflow: hidden触发可能会使内部元素被裁剪

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 100px;
      /* 方式一 */
      /* height: 20px; */
      padding: 10px;
      border: 1px solid red;
      /* 方法四 */
      /* overflow: hidden; */
    }
    .left {
      float: left;
    }
    .right {
      float: right;
    }
    /* 方法三 */
    /* .A::after {
      content: '';
      display: block;
      clear: both;
      height: 0;
    } */
    /* 方式二 */
    /* .else {
      clear: both;
    } */
  </style>
</head>
<body>
  <div class="A">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <!-- 方式2 -->
    <!-- <div class="else"></div> -->
  </div>
</body>
</html>

10. css画三角形

处于页面性能考虑,为避免发送过多的http请求，节省带宽，我们可能需要使用css手动绘制各种图案

  • 对于实现三角形，我们可以利用border属性来实现
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 0;
      /* height: 0; */
      border: 20px solid transparent;
      border-left: 20px solid red;
    }
  </style>
</head>
<body>
  <div class="A">
  </div>
</body>
</html>

11. css提高页面性能

  • 属性设置使用简写(例：margin值)
    • 目的：减小生产包体积
  • 用css替换图片
    • 目的：减少http请求节约带宽
  • 删除不必要的零和单位
    • 目的：减小生产包体积
  • 用css精灵图代替单个文件加载
    • 目的：减少http请求节约带宽
Aaron Con
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS基本了解
qq_64421953的博客
05-02 310
1.CSS 1）什么是CSS CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离 2）CSS基本语法 选择器+{ 属性：属性值； } 例如： <style> p{ font - size：10px； color：red； } </style> <p> 你好</p> 3）CSS的使用方式 直接定义标...
关于css的理解
m0_68317492的博客
08-07 1259
文本样式,基本选择器,伪类选择器,复合选择器
CSS深入理解
m0_63203388的博客
01-11 506
文章目录CSS盒子模型 CSS盒子模型 作用：进行网页布局。网页中的每一个标签，都可以看成是一个盒子。并且浏览器在渲染网页的时候，会把网页中的元素看成是一个个矩形的区域。 内容：每个盒子包括内容区域（content)，内边距区域(padding)，边框区域(border)，外边距区域(margin)。 1.边框线 == 纸箱子 。 内边距 == 填充泡沫（出现在盒子的内容和盒子边缘之间）。 外边距 == 出现在俩个盒子之间，也就是盒子的外面。 2.内容的宽度和高度：width/height(取值：数字+p
对css的理解
qq_52240945的博客
05-04 795
css简介 css指的是层叠样式表（Cascading Style Sheet），样式就是定义如何显示html元素，设置他的背景、字体大小颜色、边框等等。通常把样式存储到样式表中，为了代码简洁便于维护，大多数放置在css文件中，引入外部css文件，css文件就是一个外部样式表。 css语法介绍 css语法规则集由选择器和声明块组成。选择器指的就是您要设置样式的html元素。如标签名（body ，h1,p,div...）就是一个选择器。 <!DOCTYPE html> &lt
css选择器的优先级是怎样的
Meraln的博客
02-25 473
css选择器的优先级是怎样的 css选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器 到具体的计算层面，优先级是A、B、C、D的值来决定的，其中它们的值计算规则如下： A 的值等于1的前提是存在 内联样式，否则A = 0 B 的值等于 ID选择器 出现的次数； C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数 D 的值等于 标签选择器 和 伪元素 出现的总次数 就比如下面的选择器，它不存在内联样式，所以A = 0，不存在ID选择器B = 0,存在一个类
CSS总结.xmind
09-11
自己总结的css的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
css position 定位
09-25
定位(position)布局页面说容易非常容易，只需要记住这节课最后一句话就可以了，说困难，那是相当的难理解，需要一定的耐心，不过还好，KwooJan给大家总结的已经很通俗易懂了。
CSS 约定写法 利用扩展
12-03
以前在程序中，有美工设计好了静态页面，而... 下面是总结的一些css使用约定： 1尽量使用外部链接的方式引入css 2 css文件开发版本中尽量加入样式注释 3 css命名规则： css文件名称建议具有实际意义，例如，公用css
css核心基础总结篇(推荐)
01-19
层叠可以简单地理解为冲突的解决方案。 什么是冲突？ 就是同个元素在使用不同的选择器选择中后添加相同的样式。 优先级规则可以表述为 行内样式>ID样式>类别样式>标记样式 在复杂的页面中，某一个元素有可能会从很多...
CSS 优先级问题详解
12-13
那么应该如何处理 CSS 优先级问题呢，下面我总结了一些解决 CSS 优先级问题的常用法则。 样式距离 我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式，此时的优先级是: 外部样式 < 内部...
深入理解css属性的选择对动画性能的影响
09-24
下面小编就为大家带来一篇深入理解css属性的选择对动画性能的影响。小编觉得挺不错的，现在分享给大家，也给大家做个参考
对css规范的理解,我对于CSS的一些理解
weixin_28839629的博客
08-04 108
之前在自学的时候，只看过CSS的一些属性，布局完全不了解。本周做的需求，是我第一次写一个完整的CSS页面。第一次嘛，难免有些费劲。但是做完之后，对CSS有了一点点基础的了解。CSS最重要的是下面几个概念。1、CSS盒子2、文档流、position、浮动CSS的调试就是在浏览器的开发者工具中，下面这张图是谷歌浏览器中截取出来的CSS盒子，关于元素的尺寸、定位这张图片上全都有。我之前自学的时候，都不知...
谈谈我对CSS的认识
StarFack的专栏
09-10 1253
<br />    今天弄了一下午的CSS，结合以前理解，现在谈谈我对CSS的理解，如有不妥之处，请评论或发站内短消息，我们共勉，期待共同进步。<br />    最近一直很流行DIV+CSS，我也就试着学了一下，CSS是标记性语言，配合HTML进行网页外观与内容实现分离。CSS是W3C组织制定并发布，由于W3C是民间组织，所以没有强制要求各浏览器一定要对CSS给以支持，故此，各浏览器对CSS的支持也五花八门。不过随着浏览器开发商对CSS认识的重视，现在对CSS的支持也接近完善（IE，Firefox等 ）<
[前端]css的理解 - 了解css
m0_46233342的博客
02-06 363
文章目录CSS:组成在页面中使用CSScss是如何工作的（css应用到页面）选择器选择器 Selector属性选择器伪类(pseudo-classes)1.状态伪类：元素处于某种状态2.结构性伪类组合：选择器组文字设置样式颜色字体font-familyfont-size字体大小字体粗细斜体文字行间距line-height文字font文字对齐方式text-align间距spacing文字缩进text-indent文本装饰text-decoration空格换行white-space调试css动画总结 CSS:
对css规范的理解,我对Css的一些属性的理解
weixin_39907131的博客
08-04 180
因为Css包含的属性实在太多太多，博主就写一点这几天遇到的问题的总结吧。元素高度到底由什么决定？div高度由其内部的文档流元素的高度综合决定。内联元素的流动方向: 从左往右流动 如果遇到宽度不够 就另起一行内联元素 设置宽和高无效宽由内容决定高度由文字的建议行高(line-height)决定这里强烈推荐看一下张鑫旭老师的关于line-heigt的视频教程，讲的非常清晰明了，没有废话。https:/...
讲一些对于css 的理解
vteihlll的博客
11-17 1384
布局全靠html 排版全靠css  首先做一个网页 需要 加载一些css 而且 这些css应该放在head标签 里 方便一加载的时候 就开始渲染网页  第一步就应该格式化html 标签的自有样式  比如 p div button... 有一些margin 啊 padding border 一开始就必须格式化 不然做到后面会发现在这个浏览器没问题 在那个浏览器就有问题 比如现在前端很火的css框
css的理解思考
mazhaer的博客
07-10 377
1：css作为层叠样式表，从诞生就是为html的标签服务的，为了更好的管理html的标签，把html的标签分为了三大类：        块级元素，行级元素，行块元素（介于行级和块级的元素）2：个人在思考css的发展过程而猜测：①：就是早先的html其实主要就是文本文字，所以css又分出来一个分支就是大量的针对文字的样式，这些样式你会发现无论文字出现行级元素中还是块级元素中都适用，具体的体现就是使它...
CSS是什么
afsdha9051的博客
07-10 929
css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它...
css的理解
w2019128491的博客
07-11 476
关于css的理解 css的含义及作用 “css”的中文名字叫做层叠样式表，英文“Cascading Style Sheet",其实"css"在写网页的过程中就是一个选择器。 作用：它的作用有布局和美化作用。 布局 盒子模型 它是写网页时最常用到的，它有六大属性：内容区域（width heigh) 外填充区域（margin)、内填充区域（padding)、边框（border)、背景（background) 内容区域：也就是盒子的高度和宽度。一般来说，盒子的高度是由它里面的内容撑起来的，但是在里
feedback css
最新发布
07-09
在总结中，CSS的发展和提升需要全方位的反馈。用户、开发人员和测试都可以提供宝贵的反馈资源，帮助CSS不断改进和创新。通过积极收集和利用反馈，CSS可以更好地满足用户的需求，提升网页的外观和体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值