笔记|理解CSS

简介: 理解CSS

1、CSS标准化

W3C(万维网联盟):CSS和HTML的标准组织


W3C并不想创建一个单一标准,而是将CSS3分割为多个模块(module),并允许每个模块根据自身需要进行更新。


浏览器特定厂商前缀:

image.png


2、盒模型

CSS的一个基本概念是盒模型(box model),可见元素会在页面中占据一个矩形区域,该区域就是元素的盒子(box)。

image.png

⚠️元素盒子有两个部分:内容和边框。


  • 内边距:内容和边框之间的空间。
  • 外边距:边框和页面上其他元素之间的空间。


⚠️父元素的内容盒子称为子元素的块容器(container block),通常称为容器


父元素和子元素盒模型的关系:

image.png


❗️可以使用包含块的特征限定元素的外观,适用于:层叠属性、继承属性、显式定义的属性。


3、选择器简明参考

image.png


4、属性简明参考

4.1、边框和背景属性

image.png


image.png

image.png

4.2、盒模型属性

image.png


4.3、布局属性

image.png


4.4、文本属性

image.png


4.5、过渡、动画和变换属性

image.png

image.png


4.6、其他属性

image.png


目录
相关文章
|
1月前
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记(3)
理解CSS | 青训营笔记(3)
24 0
|
1月前
|
机器学习/深度学习 编解码 前端开发
理解CSS | 青训营笔记(2)
理解CSS | 青训营笔记
26 0
|
1月前
|
前端开发 容器
理解CSS | 青训营笔记(1)
理解CSS | 青训营笔记
42 0
|
4月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
66 2
|
4月前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
58 1
|
4月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
89 1
|
4月前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
42 1
|
4月前
|
前端开发 JavaScript UED
CSS3选择器详解 前端开发入门笔记(六)
CSS3选择器详解 前端开发入门笔记(六)
67 1
|
4月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
29 0
|
4月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
63 0