前端03

元素的显示方式

1. 内联：行内元素，一行放多个元素
2. 块状：独占一行
3. 内联块：多个块级元素放在一行

三种基本布局模式

CSS 有如下三种基本的布局模式：

普通流:是按照文档顺序布局，默认是从上到下，从左到右。

普通流：根据块级元素的标签在 HTML 里的顺序。
1.行内元素在水平（内间距、边框、外边距）方向上横向布局,行内元素无
法设定高度宽度等。
可通过设置行内元素的行高 line- height 调整元素高度。
2.将行内元素的 style 属性里设置一个 display:inline-block，可将其转化成中软国际(ETC)天津卓越信息技术有限公司
内联块元素,设定高度宽度
3.块级元素按照从上到下的方式进行布局，高度宽度边距等属性都生效。

浮动流:设定元素按照向某一个方向倾斜浮动的方式进行布局。

1.float:none 不浮动 left:左浮动 right:右浮动
2.脱标 释放空间 别的元素会挤占空间
3.clear 常用取值范围
none:允许左侧和右侧有浮动效果(默认值)。
both:清除左右两侧的浮动效果。
left/right:清除左边/右边的浮动效果。
根据浮动的方向来做 clear
4.visibility 和 display 的区别
vistibility 定义了元素是否可见。与 display 属性不同，此属性为隐藏的对象保
留其占据的物理空间.

相对/绝对/固定定位：直接定位元素在文档或在父元素中的位置(详见定位属性)。

position:设置对象的定位方式。取值范围:
static:对象遵循普通流(默认值)。
relative:相对定位，对象遵循普通流，当前元素参照父元素的左上角进行位置偏移。
保留原来的位置. absolute:绝对定位,脱标,绝对定位的元素的位置相对于最近的已定位祖先元素，如
果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
fixed:固定定位,与 absolute 一致，但偏移位置是以窗口为参考。当出现滚动条时，
对象不会随着滚动。
4.z-index:检索或设置对象的层叠顺序。取值范围:
auto:设定当前元素的层叠顺序为 0。
< integer >:用整数值来定义堆叠级别,可以为负值。

盒子模型

1.内容
2.内边距 padding 内容到内边框的距离
1.padding-top
2.padding-right
3.padding-bottom
4.padding-left
缩写:
padding:上右下做
3 个值:20px 10px 8px 上 20 右 10 下 8 左 10
2 个值:20px 10px 上下 20 左右 10
1 个值:10px 上右下左 10
3.border :内外边框的部分
border:1px solid red
1.border-top
2.border-right
3.border-bottom
4.border-left
4.外边距 margin border 的外边框到父元素的边缘之间的距离中软国际(ETC)天津卓越信息技术有限公司
1.margin-top
2.margin-right
3.margin-bottom
4.margin-left
缩写:
margin:上右下做

背景属性

background-image: url(img/1.png);
background-repeat: no-repeat; repeat-x 水平平铺 repeat-y 垂直平铺
background-position: center; bottom
background-attachment: scroll; fixed 背景图像不随着内容的滚动而滚动

背景渐变

1.background-image: linear-gradient(to right,red,yellow);/从左到右水平渐变/
2.background-image: linear-gradient(to bottom right,green,blue);/从左上角到右下角对角
线渐变/

阴影属性

box-shadow 可以设定多组阴影效果，每组参数值以逗号分隔。
< length >：连续四个长度单位设定阴影在不同方向上的阴影宽度。
阴影颜色：，阴影颜色将默认取当前最近的文本颜色
inset：定义元素的阴影类型为内阴影。
.test .inset {
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}

字体属性

font-family: “微软雅黑”; /字体/
font-style: oblique; 倾斜
font-weight: bold; 粗体
font-size: 96px; 字号:字体大小

文本属性

text-align: center; 水平居中
line-height: 300px; 垂直居中

颜色属性

color: red; 字体颜色
opacity: 0.2; 不透明度

2D 转换

/* 将当前元素在水平与垂直方向上放大两倍 /
/ transform: scale(2,2); /
/ 将当前元素在水平与垂直方向上平移 20px /
/ transform: translate(20px,20px); /
/ 指定元素相对中心点的旋转角度，单位 deg,旋转 30 度 /
/ transform-origin: 50% 50%;
transform: rotate(30deg); /
/ 指定元素相对中心点在 x、y 轴方向扭曲旋转 */
transform: skew(8deg,8deg);

3D 转换

多个平面在一个三维空间内转换，支持 3D 转换的浏览器在网页中内置 3D 显示引
擎。3D 转换的核心要素：
设定目标区域为 3d 显示模式。（transform-style）
观察者面对物体的距离。（perspective）
观察者视线与物体的角度。（perspective-origin）
物体的透明度。 （backface-visibility）
物体的沿 3 维坐标转动的角度。（transform）

伸缩盒

.father{
width: 500px;
height: 600px;
border: 1px solid red;
display: flex; 设置伸缩盒布局显示
/* justify-content: space-around; /
1.flex-start 左对齐,右留白
2.flex-end 右对齐,左留白
3.center 中间不留白,左右留白
4.space-between 中间留白,左右不留白
5.space-around 中间留白,左右留白
/ flex-wrap: nowrap; /
/ flex-wrap: wrap-reverse; /
/ flex-wrap: wrap;
1.nowrap:不换行
2.wrap:换行
3.wrap-reverse:翻转换行
flex-direction: column; */
1.· row 水平方向排列，从左至右
2.· row-reverse 水平方向排列，从右至左
3.· column 垂直方向排列，从上至下
4.· column-reverse 垂直方向排列，从下至上
}

.one{
width: 200px;
height: 200px;
background-color: #7FFFD4;
/* flex-grow: 1; */
用来伸的默认值为 0:说明子元素不会去占据剩余的空间
1:会占用剩余空间
flex-shrink: 0;
用来缩的.默认值为 1
值为 1 时，将不去承担收缩比例
值为 2,承担 2 份收缩比例
}
.two{
width: 200px;
height: 200px;
background-color: red;
/* flex-grow: 1; */
flex-shrink: 0;
}
.three{
width: 200px;
height: 200px;
background-color: blue;
/* flex-grow: 1; */
flex-shrink: 0;
}
.four{
width: 200px;
height: 200px;
background-color: purple;
}
.five{
width: 200px;
height: 200px;
background-color: #008000;
}

媒体查询

1.公式:
@media 选择符 设备类型 【and (查询表达式)。。】{
样式说明//只有符合设备类型和表达式的客户端，才能执行此样式。
}
2.例子

<style>
body {
background-color:lightgreen;
}
@media screen and (max-width: 800px) {
body {
background-color:lightblue;
}
}
</style>