web前端3-4

一、文本相关样式

1.首行缩进

text-indent：~         定义一个块元素首行文本内容之前的缩进量

2.字体大小

font-size   设置字体大小

3.文本水平对齐方式

text-align：~           定义行内内容（例如文字）如何相对它的块父元素对齐。他并不控制块元素自己的对齐，只控制它的行内内容的对齐。

4.溢出

overflow：auto      其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时

5.行高

line-height       用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

/* 行高  单行文本垂直居中   行高=元素高度*/

6.装饰性线条

text-decoration        设置文本上的装饰性线条的外观

7.阴影

text-shadow       为文字添加阴影。可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成

8.防止文本拖拽

resize 用于设置元素是否可调整尺寸，以及可调整的方向

9.与文字的对齐方式

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式

二、列表

1.list

list-style是一个简写对属性集合，包括list-style-type, list-style-image, 和 list-style-position。

/* css具有层叠行，后面的会覆盖前面的 */

三、元素显示模式转换

display：none      隐藏元素，脱离文档流

display：inline-block      将元素转换为行内块元素

display：inline       换为行内元素

display：block       换为块元素

四、背景

background是简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等

eg：background: fixed url(../米莱迪.jpg) no-repeat

background-color 会设置元素的背景色，属性的值为颜色值或关键字"transparent"二者选其一

background-image属性用于为一个元素设置一个或者多个背景图像

background-repeat定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复

background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动

background-position为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的

渐变

background-image

eg：

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

五、边框

border是一个用于设置各种单独的边界属性的简写属性。border 可以用于设置一个或多个以下属性的值：border-width、border-style、border-color

border-radius允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果

border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。

合并相邻边框

border-collapse是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框

collapse：合并

separate：分开

六、轮廓

outline 属性是在一条声明中设置多个轮廓属性的简写属性 ，例如 outline-style, outline-width 和 outline-color

eg：

input[type="text"] {

            outline: none;

            outline-style: groove;

        }

七、隐藏元素

display: none;   脱离文档流，原来的位置不再保留

visibility: hidden;  元素隐藏，位置保留

八、定位

z-index  定位中显示的优先级

绝对定位

position: relative      相对定位

position: absolute    绝对定位：不保留原来位置  子绝父相   父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动，如果都没找到，则相对于浏览器进行定位

固定定位

position: fixed   固定定位:相对于可视区域进行定位

粘性定位

position: sticky 

 

九、盒子模型

1. Margin(外边距) - 清除边框外的区域，外边距是透明的。
2. Border(边框) - 围绕在内边距和内容外的边框。
3. Padding(内边距) - 清除内容周围的区域，内边距是透明的。
4. Content(内容) - 盒子的内容，显示文本和图像。

1.内边距

padding-bottom

padding-left

padding-right

padding-top

padding: 10px 60px 90px;

                上，左右，下

padding: 10px 30px 60px 90px;

                 上    右     下      左

2.外边距

同内边距

margin: 40px 2px 34px 40px

3.外边距塌陷问题

margin塌陷问题

        父元素的第一个子元素的margin-top值会被父元素抢走，给父元素添加边框，overflow:hidden;  -------偏方

padding: 10px 20px 40px 50xp   顺时针

4.解决padding影响盒子大小问题

eg：

 div {

            width: 300px;

            height: 300px;

            background-color: pink;

            padding: 40px;

            border: 2px solid red;

            box-sizing: border-box;

        }

十、样式继承

css样式的继承性

        不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承

        a链接最好在自身更改样式

十一、flex布局

flex       设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间

此属性是以下 CSS 属性的简写：

1. flex-grow---设置 flex 项 主尺寸 的 flex 增长系数
2. flex-shrink---属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值
3. flex-basis---指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸

flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)【排列方式】

order   值越小，排列在越靠前的位置

十二、浮动

float---属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）

  /* 浮动，会脱离文档流   不再保留原来位置  会造成在其下方的兄弟元素位置发生变化  */

  /* 当子元素发生浮动时，其父元素的高度发生塌陷 */

float问题解决办法

/* clear  清楚浮动 */

十三、2d转换

transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的

               平移

transform: translate(-40px, 40px);

transform: translateX(70px);

transform: translateY(-60px);

               旋转

transform: rotateZ(40deg);

               复合写法  旋转永远放在最后一个

transform: translate(100px) rotateZ(45deg);

transform: rotateZ(45deg) translate(100px);

transform: scale(1.5);

transform: scaleX(2);

transform: scaleY(2);

transform: skew(40deg);

                         向右下移动100px   旋转45度    缩放1.5

transform: translate(100px, 100px) scale(1.5) rotate(45deg);

十四、3d

transform-style 设置元素的子元素是位于 3D 空间中还是平面中

~：flat     平面

~：preserve-3d       3d空间

transform-origin  让你更改一个元素变形的原点

backface-visibility 指定当元素背面朝向观察者时是否可见