前端03

今天药忘吃喽~ 2021-09-25 09:18 435阅读 0赞

### 文章目录 ###

*  元素的显示方式
 *  三种基本布局模式
 *   *  普通流:是按照文档顺序布局，默认是从上到下，从左到右。
     *  浮动流:设定元素按照向某一个方向倾斜浮动的方式进行布局。
     *  相对/绝对/固定定位：直接定位元素在文档或在父元素中的位置(详见定位属性)。
 *  盒子模型
 *  背景属性
 *  背景渐变
 *  阴影属性
 *  字体属性
 *  文本属性
 *  颜色属性
 *  2D 转换
 *  3D 转换
 *  伸缩盒
 *  媒体查询

# 元素的显示方式 #

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.例子