css(4)传统网页布局常见流程（标准流程）的三种形式
标签按照指定的默认格式排列
1、块级元素会占据一行，并按照从上到下的顺序排列。
常用元素：div、hr、h1~h6、ul、ol、dl、form、table
2.行中的元素会按照顺序从左到右排列，遇到父元素的边缘时会手动断线。
常用元素：span、a、i、em
漂浮
多个块级元素可以无间隙地显示在一行中。
多个块级元素水平排列可以找到标准流，多个块级元素垂直排列可以找到浮动。
浮动浮动
创建一个浮动框，将其连接到一侧，直到左边缘或右边缘接触到包含浮动框或另一个浮动框的边缘。
选择器{
float:属性值;
}
属性值说明
没有任何
元素不浮动（默认）
左边
元素向左浮动
正确的
元素向右浮动
浮动特征
1. 浮动元件将脱离标准流程（标签外）并连接到指定位置。
2. 浮动元素将显示在一行中，但与元素底部对齐。 （如果其中一个袋子变高，则顶部边缘也对齐）
注意：浮动元素靠得很近。 如果父包的厚度无法容纳，则额外的包将开始新的一行。
3.浮动元素将具有内联块元素的特性。
4. 浮袋不再保持原来的位置。
浮动元素通常与标准流父级一起使用
首先使用标准流程的父元素进行上下位置排列，然后内部子元素采用左右位置浮动排列。
浮动注意点
1.匹配浮动流和标准流的父包。
先使用标准流程的父元素排列上下位置，然后内部子元素采用左右位置浮动排列
2.如果一个元素浮动，理论上剩余的兄弟元素也应该浮动以避免出现问题。
浮动只会影响前面的标准流，并且会显示在前一个标准流的下面
删除浮动
因为当父级包较多时，不方便给出高度，且子包浮动，不占位置。 最后，当父级包的高度为0时，会影响下面标准流的包。
去除漂浮性质 消除漂浮 清除
选择器{
clear:属性值;
}
在实际工作中，明确：两者兼而有之； 几乎被专门使用。
去除浮动的策略是：关闭浮动。
如何去除浮动
1.附加标记方法
在浮动元素末尾添加空标签（空标签必须是块级元素，而不是行内元素）
例如：
.clear{
clear:both;
}
或者其他标签，例如
等待
2.给parent添加overflow属性
将其属性设置为隐藏、自动、滚动
（溢出部分无法显示）
3.将after伪元素添加到父元素中
上面写这段代码来查找父元素
4.给父级添加双伪元素
方法与上面相同
位置
1.某个元素可以在一个包中自由通信并阻塞其他包。
2. 滚动窗口时，包被固定在屏幕上的某个位置。
定位构成
定位=定位方式+边缘偏转
定位模式用于指定元素在文档中的定位方式； 边缘倾斜决定了元素的最终位置。
定位方式
位置属性
值语义
静止的
静态定位
相对的
相对定位
绝对
绝对定位
固定的
固定定位
侧偏转
四个属性：上、下、左、右
静态定位
默认定位，不定位。
选择器{
position:static;
}
根据标准流量特性定位，无侧偏。
相对定位 相对
选择器{
position:relative;
}
1. 移动位置以原始位置为准。
2.当元素一起移动时，原来的位置仍然被占用，旁边的包总是以标准流方法对待它。
例子：
.box1{
postion:relative;
top:100px;
left:100px;
width:200px;
height:200px;
background-color:pink;
}
.box2{
width:200px;
height:200px;
background-color:deeppink;
}
功效：
绝对定位 绝对定位
当一个元素处于连接位置时，它相对于其祖先元素会发生变化。
选择器{
position:absolute;
}
1、如果没有父元素或者父元素没有定位，则以浏览器页面为准。
2、祖源元素有定位，以最近的一级祖源元素为准。
例子：
.father{
position:relative/absolute;
width:500px;
height:500px;
background-color:pink;
}
.son{
position:abolute;
left:0;
bottom:0;
width:200px;
height:200px;
background-color:sky-blue;
}
功效：
3、绝对定位不占据原来的位置（比浮起来还高），下面的包会占据它的位置。
使用相对/绝对定位
1、孩子是绝对定位的，不会占位置。 它可以放置在父包上方的任何位置，并且不会影响其他兄弟包。
2. 父包需要定位以限制子包在父包内显示。
3、爸爸的包在摆放时需要占据位置，所以妈妈只能相对定位。
相对定位通常用作绝对定位的父级。
因为parent需要占据位置，所以是相对定位，而child bag不需要占据位置，所以是绝对定位。
固定定位固定
将元素固定在浏览器可见区域内。 使用场景：当浏览器页面滚动时，元素的位置不会改变。
选择器{
position:fixed;
}
特征：
1. 使用浏览器的可视窗口作为连接元素的参考。
2.固定定位不占据原来位置
固定在铁芯两侧
1.让固定定位包left:50%走到浏览器可见区域的一半。
2. 使固定位置的袋子的左边距为板中心长度的一半。 移动中心距离一半以上。
.fixed{
position:fixed;
left:50%;
margin-left:400px;
width:50px;
height:150;
background-color:blue;
}
粘性定位粘性
相当于相对定位和固定定位的结合。
选择器{
position:sticky;
top:10px;
}
特征：
1.使用浏览器的可视窗口作为参考点连接元素（固定定位特性）
2、粘性定位占据原来的位置（相对定位的特点。
3. 必须添加上、左、右、下之一才有效。
.nav{
position:sticky;
top:0;
width:800px;
height:50px;
background-color:pink;
margin:100px auto;
}
位置堆叠顺序 z-index
使用定位时，袋子可能会重叠。 本例中使用z-index来控制包的前后顺序（z轴）
选择器{
z-index:1;
}
定位将包的绝对定位扩展到中心
绝对定位的包无法通过 margin:()auto 水平/垂直居中
方式：
1. 左：50%； 让包的一侧连接到父元素的水平中心。
2. 左边距：100px； 让袋子将其自身长度的一半连接到左侧。
.box{
position:absolute;
left:50%；
margin-left:-100px;
width:200px;
height:200px;
background-color:pink;
}
定位的特殊性
绝对定位和固定定位也和浮动类似。
1.给行内元素添加绝对或固定定位，可以直接设置高度和长度。
span{
position:absolute;
width:100px;
height:100px;
background-color:pink;
}
2.为块级元素添加绝对定位或固定定位。 如果未给出长度或高度，则默认大小为内容的大小。
.div{
position:absolute;
background-color:pink;
}
功效：
不贴标签的袋子不会引发外距离塌陷
浮动元素、绝对定位（固定定位）元素不会触发外距离合并的问题。
绝对定位（固定定位）将袋子完全困住
浮动元素则不同，它只会遮挡其下方标准流的包，不会遮挡其下方标准流上方的文字（图片），如：
而绝对定位（固定定位）会屏蔽掉下面所有标准流的内容，比如：
之所以浮动不会遮挡文字，是因为浮动本来是为了形成文字环绕效果，文字会围绕浮动元素。
CSS3 过渡
当元素从一种样式更改为另一种样式时添加到元素的效果
过渡动画：逐渐从一种状态过渡到另一种状态
经常与 :hover 一起使用
transition:要过渡的属性 花费的时间 运动曲线 何时开始;(后两个可以省略)
1、属性：你要改变的css属性，包括长度、高度、背景色、内外行距。如果你想让所有属性都是
对于更改和转换，只需全部写入即可。
2、耗时：单位为秒（单位必须写出来），如0.5s
3.运动曲线：默认ease（可省略）
4、何时启动：单位为秒（单位必须写好）。 您可以设置延迟触发时间。 默认值为 0 秒。
例子：
div{
width:200px;
height:100px;
background-color:pink;
/*如果想写多个属性，用,分割*/
transition:width .5s ease 1s,height .5s ease 1s;
/*如果想要多个属性都变化，属性写all即可*/
transition: all 0.5s;
}
剪切图片常用的图片格式jpg图片格式：JPEG（.JPG）保留色调信息较好，清晰度高，色彩较多。 我们的产品图片经常使用jpg格式gif图像格式：GIF格式只能存储256种颜色，所以一般用来显示简单的图形和字体，并且可以保存透明背景
而动画效果，其实经常会用到一些图片中，小动画效果png图片格式是一种新型的网络图形格式，它结合了GIF和JPEG的优点，并且具有存储方式丰富的特点。
支持透明背景。 如果要分割成透明背景的图片，请选择png格式。 PSD图像格式 PSD格式是Photoshop的一种特殊格式，可以存储视口、通道、蒙版等各种设计稿。 对于最终用户来说css3 浮动效果，最大的优势是我们可以直接从中复制文本，获取图片，并检测大小和距离。 视口切割
最简单的图片剪切方法：在视口上右键->快速导入为PNG
您需要合并视口然后导入：
1. 选择所需的视口：视口菜单 –> 合并视口（ctrl+e）
2. 右键单击视口 -> 快速导入为 PNG
CSS属性书写顺序
建议遵守以下顺序：
1.布局定位属性：display/position/float/clear/visibility/overflow（建议先写display，虽然和模式有关）
2.自带属性：width/height/margin/padding/border/background
3. 文本属性：颜色/字体/文本装饰/文本对齐/垂直对齐/空白/断字
4.其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...
页面布局总体思路
常见的网页布局方法
二维转换
变换可以实现元素的位移、旋转、缩放等效果。
联通：翻译
transform: translate(x, y);或者分开写
transform: translateX(x);
transform: translateY(y);
1.定义2D变换中的连接，沿X轴和Y轴连接2.元素ntranslate最大的优点：不会影响其他元素的位置
3. 参数x和y可以是百分比。 Translate中的比率单位是相对于其自身元素的长度或高度的比率。 翻译：(50%, 50%)
4. 对内联标签没有影响
实现袋子的水平和垂直居中
/*子绝父相*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
旋转：旋转
二维旋转是指在二维平面内顺时针或逆时针旋转元件。
transform: rotate(45deg);
1.如果值为负数，则顺时针旋转，如果为正数，则逆时针旋转。
2、默认旋转中心点为元素的中心点。
变换中心点transform-origin
我们可以通过设置transform-origin来设置元素变换的中心点。
句型：
transform-origin: x y;
1、xy默认转换的中心点为元素中心点（50%50%）
2.还可以为xy设置像素或位置名词（topbottomleftrightcenter）
缩放：比例
控制元素放大和缩小
transform: scale(x, y);
1、参数小于1则放大，大于1则缩小。
2、如果x和y不带单位，则指缩放倍数。 3.transform:scale(2)：只写一个参数，第二个参数与第一个参数相同，相当于scale(2,2)
4. 可以与transform-origin一起使用来改变缩放中心。
5、规模优势：不占用空间
转换综合写作
同时使用多个变换，格式为：
transform: translate() rotate() scale();
1. 顺序会影响转化效果。 （如果先旋转，坐标轴的方向就会改变）
2.当我们同时拥有位移和其他属性的时候，记得先把位移放在前面。
卡通片
可以设置多个节点来精确控制一个或一组动画，常用于实现复杂的动画效果。 与转场相比，动画可以实现更多变化、更多控制、连续手动播放等效果。
动漫的基本使用
1.定义动画（动画序列%a）
2.使用动漫
/* 1. 定义动画 */
@keyframes move {
/*开始状态*/
0% {
transform: translateX(0px);
}
/*结束状态*/
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 5s;
}
动漫序列
1. 0%为动画开始，100%为动画完成。 这样的规则就是动画序列。
2.在@keyframes中指定某种CSS样式，以创建从当前样式逐渐变为新样式的动画效果。
3、一个元素可以添加多个动画，调用时用冒号分隔。 动画：bear.4s、move3s；
4. 请使用比例来指定变化发生的时间，或者使用关键字“from”和“to”，分别相当于0%和100%。
笔记：
动画的常见属性
动漫属性缩写
animation: 动画名称(必) 持续时间(必) 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;
3D转换
三维坐标系虽然指的是三维空间，但三维空间是由三个轴组成的。
3D联通翻译3d透视透视
在2D平面上形成近、大、远小的视觉立体效果，而且效果只是二维的。
如果想要在网页上创建3D效果，就需要透视（理解为3D物体投影在2D平面上）。模拟人类的视觉位置，可以认为安排一只耳朵看透视就是称为观看距离：观看距离是人的眼睛到屏幕的距离。 离视点越近，笔记本平面上的图像就越大，离视点越远，图像就越小。 单位是像素
透视写在被观察元素的父包内
3D旋转rotate3d
xyz是表示旋转轴的向量变换：rotate3d(1,0,0,45deg)是沿x轴旋转45deg
transform:rotate3d(1,1,0,45deg) 是对角旋转45deg
旋转方向判断-左手判据
3D渲染transfrom-style（重要）FlexFlex布局原理
父包添加flex属性css3 浮动效果，控制子包的位置和排列方式，实现flex布局
Flex 布局父项的常用属性
flex-direction 设置主轴方向
Flex短发是主轴和侧轴。 默认主轴为x，水平方向，从左到右。
而flex-direction用于修改主轴方向。
felx-direction有四个值：row（默认值）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）
justify-content 设置主轴子元素的排列
可以指定子元素在父元素中的排列方式：如居中对齐、均匀分布、两边中间均匀分布等。
flex-wrap子元素是否换行
启用flex布局后，默认不换行
如果您想更改疗效设置
flex-wrap：wrap
align-items 设置侧轴子元素的对齐方式
借助align-items，可以设置侧轴元素的对齐方式，当子项为单个项（单行，这意味着我没有使用flex-wrap:wrap;为行）时使用它休息）
0921946316）]
flex-direction 设置主轴方向
Flex短发是主轴和侧轴。 默认主轴为x，水平方向，从左到右。
而flex-direction用于修改主轴方向。
felx-direction有四个值：row（默认值）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）
justify-content 设置主轴子元素的排列
可以指定子元素在父元素中的排列方式：如居中对齐、均匀分布、两边中间均匀分布等。
flex-wrap子元素是否换行
启用flex布局后，默认不换行
如果您想更改疗效设置
flex-wrap：wrap
align-items 设置侧轴子元素的对齐方式
借助align-items，可以设置侧轴元素的对齐方式，当子项为单个项（单行，这意味着我没有使用flex-wrap:wrap;为行）时使用它休息）
发表评论