前端常用知识

小灰灰 2022-04-06 13:54 217阅读 0赞

### 外边距： ###

1.    块级盒子的居中对齐：margin : 0 auto 会使div居中对齐，如果想要盒子左右对齐将0变为auto 但是在设置的时候，需要给盒子设置宽高
2.  清除内外边距：\*\{margin :0 ; padding : 0 \},margin 外边距，padding 内边距，在设置样式的时候需要首先设置，如果不设置会有默认的内外边距的距离
3.  合并问题（在合并div的时候，最大div的为准）：
    
    1.  上下垂直合并（尽量避免开），
    2.  嵌套的合并（出现塌陷的效果），
    3.  解决的方法：
        
        1.  border 用于设置div边框线的颜色，粗细，显示的形状（直线还是点线），
        2.  padding ：内边距，
        3.  overflow：hidden：表示将溢出的部分不会显示出来

### 圆角边框： ###

border-redius：50% ： 将div的四个边角变成圆角

### 盒子阴影： ###

bos-shadow : 水平阴影，垂直阴影，模糊距离（虚实）阴影尺寸（影子的大小）阴影的颜色，内外阴影

###      box-shadow: 10px 10px 5px \#888888;   浮动： ###

浮动的作用： 为了让多个块级元素显示在一行

标准流：正常显示：方式块级元素一行显示一个，行内元素一行显示多个元素

浮动的脱标：脱离标准流的控制，变成游动的状态

浮动在父盒子里面，是不是超过内边距和外边距的，如果一个盒子是浮动的，其他的盒子都需要变成浮动的，

存在默认的隐式转换：行内块元素

在使用的时候，如果想要元素变成浮动的，float属性，设置浮动的位置，如果想要清除浮动，提供三种清除浮动的方法，            1：在浮动的div加上一个div不设置宽高，这样就会将两个div分隔开来

2： 用属性  clear:both

3: 使用overflow：hidden 在父类设置，会将默认溢出的部分隐藏 掉

### 定位： ###

定位模式：

1，相对定位：（relative），脱离标准流的控制，相对定位是对于自己原先的位置进行移动，但是原由的位置会保存

2.绝对定位：（absolute），完全脱离标准流，不会保留位置，如果没有父类或者父类没有定位的情况下，会以当前窗口为准，如果有父类并且父类有定位，会以父类为准，通常使用子绝父相，其实就是给绝对定位的子元素规定好一个有位置有大小的盒子，可以用来随便移动，如果不设置，则会以相邻的容易进行移动

3， 静态定位：默认的情况下都是使用静态定位

4, 固定定位：是脱离标准流的，不保留位置，以窗口为准，

### 显示与隐藏： ###

display：none ： 表示隐藏元素，block：表示显示，转换为块级元素

Visibliity：visble，显示。hidden，隐藏，会保留之前的元素的位置，但是不会显示

两者的区别在于：display：不会占位置，而Visibliity 会占位置

OverFlow：hidden ： 溢出的部分隐藏掉

Visible：显示

Auto：自动的，超出的部分就会显示滚动条，不超出的部分不会显示滚动条

Scroll：总是显示滚动条

### 用户界面操作： ###

Cursor：表示鼠标的样式

Default： 小白

Text ： 文本

Move ： 移动

Pointer ： 表示的是小手

### 溢出部分显示省略号： ###

文字一行显示，不换行：white-space:nowrap

显示超出部分隐藏个 : overFlow:hidden

超出的部分显示省略号：text-overFlow:ellipsis

注意：想要达到溢出的部分显示省略号的情况，需要上面三种方式一起使用

### 图片、文字基线对齐： ###

![20190115155654962.png][]

行内块使用：img input搭配

### css精灵图: ###

作用：减少去服务器的请求的次数

实现：把多个小背景的图片放在一张大图片上

使用： 背景定位backgroud-postion

在使用的时候，一定要是用切片去测量需要的背景图的位置

推荐博客：[https://blog.csdn.net/it\_queen/article/details/54729949][https_blog.csdn.net_it_queen_article_details_54729949]

###          ###

[20190115155654962.png]: /images/20220406/af5f9424520b4b209ab11736fb8ea25f.png
[https_blog.csdn.net_it_queen_article_details_54729949]: https://blog.csdn.net/it_queen/article/details/54729949