|
1、CSS基本
CSS，英文全叫作是 Cascading Style Sheet，层叠样式表。由李爵士的伴侣赖先生发明。
why 层叠样式表
样式层叠，选取器层叠，文件层叠 。css的这种特性引起它非常灵活。
CSS的版本
CSS 2.1是运用最广泛的版本CSS 3 是最现代的版本 能够在caniuse.com上查询那些浏览器支持那些特性。 CSS语法
样式语法 选取器 { 属性名: value; /*注释*/ } 复制代码
@语法@charset "UTF-8"; /*声明文档字符编码为UTF-8*/ @import url(x.css); /*导入x.css文档*/ @media (min-width:100px) { } /*媒介查找*/ 复制代码
CSS调试
W3C CSS validateor ，W3C验证器，结果较为准确。Webstorm 看颜色。但该软件需求电脑配置。vscode 看颜色，只能看出大概。border 调试法
倘若可疑元素的某个属性有问题，就在它前后依次加上border。倘若border显现且设置的符合预期，说明代码的bug出此刻该属性下方，可能是选取器或语法显现错误。
CSS文档流
在CSS中，文档的流动方向默认为从左到右（内联元素）、从上到下（块级元素）。内联元素的高度由line-height行高间接决定。而块级元素是其内部文档流元素高度的总和，能够被设置。
CSS盒模型
在对一个文档进行布局时，浏览器会将所有元素都暗示为一个矩形的盒子，每一个盒子由border、margin、padding和内容四部分构成。盒模型能够分为border-box和content-box，前者的width包含该盒子的padding、content以及border，后者的width只是内容content的宽度。通常运用border-box，由于其宽度就为设置的值，毋需进行加减宽度操作。
2、CSS布局
1、float布局
在子元素上加上float: left;和width属性，父元素加上如下属性，即完成float布局。
.clearfix::after { content: ""; display: block; clear: both; } 复制代码
运用负margin来处理平均布局问题。
2、flex布局 flexboxfroggy.com/#zh-cn
3、grid布局 二维布局，先在页面上画网格，再按需求取网格区域。 cssgridgarden.com/#zh-cn
3、CSS定位
垂直于页面上的次序（由上至下）：内联元素、浮动元素、块级元素、border、bac公斤round。
position的取值
static ，默认取值relative ，用做位移或是属性position: absolute;元素的父元素absolute ，相针对祖先元素中近期的一个定位元素来进行定位fixed ， 固定定位 以上除了默认的static外均为定位元素。 层叠上下文
从上到下依次为：定位元素（z-index=0/1/2）、内联子元素、浮动元素、块级子元素、border、bac公斤round、定位元素（z-index<0）。
每一个层叠上下文都是一个小世界 可查阅mdn相关文档看那些属性能够创建一个层叠上下文。4、 CSS动画
浏览器渲染的原理
按照HTML构建HTML树（DOM）按照CSS构建CSS树（CSSOM）将两棵树合并成一棵渲染树（render tree）Layout布局（文档流、盒模型计算体积和位置）Paint 绘制（边框文字颜色，暗影等）合成，按照层叠关系展示画面 CSS动画的两种做法
transition法
为一个元素加上transition属性，再加上另一一个属性，transition即暗示该元素在当前属性与新加属性之间的转换方式。
它的语法如下： 各参数依次为属性名
| 
发表于 2024-6-30 10:52:57