第二次笔记整理

web笔记

一：字体

<style>         p {             /* font-size :字体大小  字号 */             font-size: 12px;             /* font-family 字体 */             font-family: "微软雅黑";             /* 字体粗细  400:正常   700：加粗 */             /* font-weight: bold; */             font-weight: 700;             /* 字体样式   font-style */             /* font-style: normal; */

            /* style weight size family   字号和字体必须同时存在 /             / font: italic 700 20px '宋体';   不推荐 /             / css层叠性   属性名相同时，后边的样式会将前面的样式覆盖掉 */         }     </style>

2： /* 前景色 字体颜色 */

color: red;

color: rgb(33, 106, 178);

二：文本

1：文本缩进

p {

font-size: 20px;

/* text-indent: 32px; */

text-indent: 2em;

}

2：对齐方式

box1 {

/* 对齐方式：text-align 居中的是内容*/

text-align: center;

3：修饰

a {

/* 清除a链接默认样式 */

/* text-decoration: none; */

/* text-decoration: line-through; */

/* text-decoration: underline; */

text-decoration: overline;

4：行高

p {

line-height: 50px;

}

div {

width: 400px;

height: 200px;

background-color: pink;

text-align: center;

/* 单行文本借助行高垂直居中 */

line-height: 200px;

}

5;文本溢出

overflow: auto;

overflow: hidden;

overflow: scroll;

三:背景相关

1

background-color: pink;

background-image: url(./背景.jpg);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

2轮廓线

outline-style: none;

outline-style: dashed;

/* outline-style: dotted;

outline-style: double; */

outline-color: aqua;

/* outline-width: thick; */

/* outline-width: 40px; */

outline: none;

3：边框

width: 300px;

height: 300px;

background-color: pink;

border-width: 3px;

border-color: rgb(33, 29, 29);

border-style: solid;

border-top-left-radius: 50%;

border-top-right-radius: 50px;

border-bottom-left-radius: 30px;

border-bottom-right-radius: 20px

4:合并边框

border-collapse: collapse;

四；绝对定位，固定定位

1：绝对定位

.son1 {

/* 绝对定位会放弃原来的位置 子绝父相 逐级查找父级元素是否有相对定位，如果有，以父亲为定位参考，如果没有，继续向上查找*/

position: absolute;

/* top: 50px; */

left: 90px;

bottom: 40px;

background-color: blue;

/* 显示的优先级 z-index*/

z-index: 2;

2：相对定位

.box1 {

/* 固定定位 相对于可视窗口进行定位 放弃原来位置 */

position: fixed;

top: 100px;

width: 100px;

height: 100px;

background-color: aqua;

五：盒子模型

1：盒子大小

盒子大小： content+padding+border margin不会影响盒子大小 -->

2：边框

div {

width: 300px;

height: 300px;

background-color: pink;

border: 20px solid black;

3：边距

1：内边距

padding: 20px;

/* 两个值时，第一个值待变上下的padding值，第二个值代表左右的padding值 */

padding: 10px 50px;

/* 三个值：上 左右 下 */

padding: 10px 40px 50px;

/* 四个值：上 右 下 左 */

padding: 10px 20px 30px 40px;

/* padding的值不能为负值 */

2：外边距

margin-bottom: 20px;

margin-right: 20px;

margin-left: 20px;

margin-top: 40px;

/* 上 右 下 左 */

margin: 10px 20px 30px 40px;

六：flex布局

display: flex;

/* 改子元素排列方式 */

/* flex-direction: row-reverse; */

/* flex-direction: column; */

/* flex-direction: column-reverse; */

/* 改变主轴对其方式 */

/* space-between:两边贴边，中间评分剩余空间 */

justify-content: space-between;

/* space-around：平分在子项的两边 */

/* justify-content: space-around; */

/* justify-content: space-evenly; */

/* justify-content: center; */

/* 允许换行 */

flex-wrap: wrap;

/* 侧轴单行 */

align-items: center;

/* 侧轴对齐方式 */

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

七：

字体渐变

background-image: linear-gradient(to right, red, pink, green, blue);