CSS3理论

最新推荐文章于 2022-06-23 16:22:47 发布

weixin_47731102

最新推荐文章于 2022-06-23 16:22:47 发布

阅读量108

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/weixin_47731102/article/details/110203772

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一. 盒模型

分为标准盒模型和IE盒模型(怪异盒模型)
标准盒模型：总宽度=内容宽度( content ) + border + padding + margin
IE盒模型(怪异盒模型)：总宽度=内容宽度 ( content + border + padding ) + margin

二.弹性盒模型

flex-direction:row 主轴为水平方向,起点在左端。
flex-direction:row-reverse 主轴为水平方向,起点在右端
flex-direction:column 使用后会使x轴变为y轴
flex-firection:column-reverse 主轴为垂直方向,起点在下沿

flex-wrap:nowrap 不换行
flex-wrap:wrap 换行,第一行在上方
flex-wrap:wrap-reverse //换行,第一行在下方

flex-flow:该属性是flex-direction和flex-wrap属性的简写
flex-flow:值1(主轴方向) 值2(是否换行)
flex-flow:row nowrap (默认)

justify-content:flex-start 左对齐
justify-content:flex-end 右对齐
justify-content:center 居中
justify-content:space-between; 两端对齐,项目之间的间隔都相等
justify-content:space-around; 每个项目两侧的间隔相等

align-items:flex-start 与交叉轴的起点对其
align-items:flex-end 与交叉轴的终点即末尾对其
align-items:center 与交叉轴的中点对其
align-items:baseline 项⽬的第⼀⾏⽂字的基线对齐
align-items:stretch 如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度

align-content属性,紧跟于flex-wrap属性后,该属性用于修饰flex-wrap属性
align-content:flex-start 与交叉轴的起点对齐
align-content:flex-end 与交叉轴的终点对其
align-content:center 与交叉轴的中点对齐
align-content:space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
align-content:space-around 每根轴线两侧的间隔都相等

align-self:center 允许单个元素与其他元素有不一样的对齐方式
order属性: (自定义子元素的显示顺序)
用整数值来定义排列顺序，数值小的排在前面。可以为负值。

align-self:flex-start 默认
align-self:flex-end 终点
flex-grow属性:(定义弹性盒子元素的扩展比率)
表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例

flex-shrink属性:(定义弹性盒子元素的收缩比率)
该属性的值也是无单位的,表示的是当容器的空间不足各个条目的尺寸缩小的比例

三.CSS单位

px绝对单位,1px是一个像素点的大小
em相对单位：相对父元素字体的大小缩放比例
rem相对单位，是相对根元素的字体大小的缩放比例
%是相对父元素的百分比
vw是相对设备屏幕宽度的百分比比如：屏幕宽400px 8vw=400px*8%=32px
vh是相对设备屏幕高度的百分比
vm包含vmax和vmin，vmax为相对设备最大百分比，vmin为最小百分比
pt：point，大约1/72寸，一寸=3.3333···厘米。
pc：pica，大约6pt，1/6寸。
ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算，IE11以下不支持。
ch：以节点所使用字体中的“0”字符为基准，找不到时为0.5em。IE10以上支持。

四.CSS选择器

(1).选择器的优先级
!important > 内联样式 > id选择器 > class选择器 > 属性选择器 > 伪类选择器（: hover） > 标签选择器 > 伪元素（: before） > 通配符选择器
(2).选择器中可继承的属性：
font-size
font-family
color
(3).选择器中不可继承的属性：
border
padding
margin
width
height
(4).权重值：
!important权重值：10000，
内联样式：1000，
id选择器：100
class、伪类、属性、伪元素选择器：10
标签选择器：1
后代选择器的权重为包含的选择符权重值之和。
(5).CSS3新增的伪类：
p：first-of-type：选择属于其父元素的首个元素；
p：last-of-type：选择属于其父元素的最后元素；
p：only-of-type：选择属于其父元素的唯一元素；
p：only-child：选择属于其父元素的唯一子元素；
p：nth-child（1）：选择属于其父元素的第一个子元素；
：enabled：disabled：表单控件d的禁用状态；
：checked：单选框h或复选框被选中；

五.BFC

(1).理解
BFC是块级格式化上下文。BFC它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，BFC仍属于文档中的普通流
(2).特性
① 内部的块级元素会在垂直方向上一个接一个的放置；
② 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠；
③ 位于不同BFC下的相邻元素之间不会发生margin重叠；
④ BFC可以包含浮动元素；
⑤ BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
(3).创建:
① <html>根元素；
② float的值不为none
③ overflow的值为auto、scroll或hidden
④ display的值为:
table-cell：它会作为一个表格单元格显示（类似td和th）。
table-caption：此元素会作为一个表格标题显示。
inline-block：行内块元素。
⑤ position的值为fixed或absolute
(4).用途：
① 闭合浮动；
② 阻止margin重叠
③ 自适应流体布局

六.清除浮动的方法

(1).给设置了浮动的元素的父级加高。
(2).给设置了浮动的元素的父级设置overflow：hidden。如果需要兼容IE，在添加一个zoom：1;
（理解: 先找到浮动元素的父元素，再在父元素中添加属性overflow:hidden,清除找到的父元素中的子元素浮动对页面的影响）
(3).给需要清除浮动的元素设置clear：both；
（理解: 在所有浮动元素下方添加一个该属性，可以消除float的破坏性，但会增加不必要的标签）
(4).在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐)
(5).伪类清除：
.clearfix：after{content：""；clear：both；display：block；}
.clearfix{zoom：1}
.

七.层叠上下文

层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

	在这里插入代码片如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。

	具象的比喻：你可以把层叠上下文元素理解为理解为该元素当了官，而其他非层叠上下文元素则可以理解为普通群众。凡是“当了官的元素”就比普通元素等级要高，也就是说元素在Z轴上更靠上，更靠近观察者。

八.常见页面布局

⑴静态布局：最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。

  *优点*：采用的是css2之前的写法,不存在浏览器兼容性。布局简单。

  *缺点*：但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。

⑵流式布局：流式布局也叫百分比布局。随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。

 *优点*：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。

 *缺点*：屏幕尺度跨度过大的情况下，页面不能正常显示。

⑶弹性布局：弹性布局是CSS3引入的强大的布局方式，弹性盒模型：display：flex；

 *优点*：简单、方便、快速

 *缺点*：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。

⑷响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。

九.CSS预处理，后处理

1.css预处理
css预处理器是用一种专门的语言，进行网页的样式设计，之后在被编译为正常的css文件，以供项目使用。比如sass、less、stylus。
优点：是css更加简洁、方便修改、可读性强、适应新强并且更易于代码的维护。
缺点：采用特殊语法，框架耦合度高，复杂度高

	## 实现原理
	   ①取到 DSL 源代码 的 分析树
		②将含有 动态生成 相关节点的 分析树 转换为 静态分析树
		③将 静态分析树 转换为 CSS 的 静态分析树
		④将 CSS 的 静态分析树 转换为 CSS 代码

十.CSS3的新特性

1.过渡
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
2.动画
animation：动画名称
3.形状转换
transform:适用于2D或3D转换的元素
4.选择器
5.阴影
box-shadow: 水平阴影的位置垂直阴影的位置模糊距离阴影的大小阴影的颜色阴影开始方向（默认是从里往外，设置inset就是从外往里）
6.边框
7.颜色
rgba（rgb为颜色值，a为透明度）
8.渐变
9.弹性布局 flex
10.栅格布局 grid
11.媒体查询
就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！