css3盒子定位整理

秒速五厘米 2022-10-19 08:19 158阅读 0赞

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>定位模式</td> 
   <td>是否脱标</td> 
   <td>移动位置</td> 
   <td>是否常用</td> 
  </tr> 
  <tr> 
   <td>static静态定位</td> 
   <td>否</td> 
   <td>不能使用边偏移</td> 
   <td>很少</td> 
  </tr> 
  <tr> 
   <td>relative相对定位</td> 
   <td>否（占有位置）</td> 
   <td>相对于自身位置移动</td> 
   <td>常用</td> 
  </tr> 
  <tr> 
   <td>absolute绝对定位</td> 
   <td>是（不占有位置）</td> 
   <td>带有定位的父级</td> 
   <td>常用</td> 
  </tr> 
  <tr> 
   <td>fixed固定定位</td> 
   <td>是（不占有位置）</td> 
   <td>浏览器可视区</td> 
   <td>常用</td> 
  </tr> 
  <tr> 
   <td>sticky粘性定位</td> 
   <td>否（占有位置）</td> 
   <td>浏览器可视区</td> 
   <td>当前阶段少</td> 
  </tr> 
 </tbody> 
</table>

### 固定定位 ###

是元素固定于浏览器的可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会发生改变。

语法：

选择器\{position:fixed\}

特点：

1、以浏览器的可视窗口（就是我们肉眼能够看到的浏览器的区域）为参照移动元素

2、跟父元素没有任何关系

3、不随滚动条滚动而滚动

固定定位不会占有原先的位置，会在上方显示；

固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。

### 粘性定位sticky ###

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

选择器\{position:sticky;top:10px;\}

粘性定位的特点：

1、以浏览器的可视窗口为参照点移动元素（固定定位特点）

2、粘性定位占有原先的位置（相对定位特点）

3、必须添加top left right  bottom其中一个才能有效

跟页面滚动搭配使用，兼容性较差，IE不支持

### 定位的叠放次序 ###

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（Z轴）

语法：

选择器\{z-index:1;\}

*  数值可以是正整数、负整数活0，默认值是auto，数值越大，盒子越大；
 *  如果属性值相同，则按照书写顺序，后来居上；
 *  数字后边不能加单位
 *  只有定位的盒子才有z-index属性

绝对定位水平垂直居中

position:absolute;
    left:50%;
    top:50;

### 定位的拓展 ###

**绝对定位会完全压住盒子，但是不会压住下面标准流盒子里边的文字图片**

浮动之所以不会压住文字，因为浮动产生的目的就是为了做文字环绕目的的，文字会围绕浮动的元素进行渲染。

## 元素的显示与隐藏 ##

dispaly属性用于设置一个元素应如何显示。

display:none;隐藏对象

display:block;除了转换为块级元素外，同时还有显示元素的意思

**display隐藏元素后，不再占有原来的位置。**

**类似于网站的广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！**

visiblity可见性

visibility:visiable; /\*元素可视\*/

visibility:hidden; /\*元素隐藏\*/

visibility隐藏元素后，继续占用原来的位置。

### overflow ###

overflow:visible|auto|hidden|scroll

visible:不剪贴内容也不添加滚动条。假如显示声明此默认值，对象将被剪贴为包含对象的window或frame的大小。并且clip属性设置将失效。

auto:此为body对象和textarea的默认值。在需要时剪贴内容并添加滚动条；

hidden:不显示超过对象尺寸的内容；

scroll：总是显示股东条。

综上：所以设置为auto会好一点，文字少时不显示滚动条，文字多了显示滚动条。

但是如果有定位的盒子，请慎用overflow:hidden;因为它会隐藏多余的部分；

## 精灵图 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70][]

把页面所有的图片都封装到一张图里，这样请求资源次数会变少，增加性能体验等。

但是会维护困难，修改图片困难，定位到所需要图片的位置麻烦。

移动背景图片的位置，此时可以使用background-position属性；

移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同。

因为一般情况下都是从上往左移动，所以数值都是负值。

## 字体图标 ##

字体图标的产生

字体图标的使用场景：主要显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点很明显：

1、图片文件会比较大

2、图片本身放大和缩小会失真

3、一旦图片制作完成想要更换非常复杂

此时，有一种技术的出现很好的解决了上述问题，就是字体图标iconfont

字体图标可以为前端工程师提供一种方便高效的使用方式，展示的是图标，本事属于字体。

###  字体图标的下载 ###

icomoon字库：

htttp://icomoon.io

http://www.iconfont.cn阿里字库

### 字体图标的引入 ###

在css样式中全局声明字体：简单理解把这些字体文件通过css引入到我们的页面中去

一定注意字体文件路径的问题

@font-face{
        font-family:'icommoon';
        src:url('fonts/icomoon.eot?7kkyc2');
        src:ulr('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
        url('fonts/icomoon.woff?7kkyc2') format('woff'),
        url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
        font-weight:normal;
        font-style:normal;
    }

span\{font-family:'icomoon';\}

## 绘制三角形： ##

![20210710145506347.png][]

.triangle{
                float: left;
                margin-left: 20px;
                width: 0;
                height: 0;
                line-height: 0;
                font-size: 0;
                border: 50px solid transparent;
                border-left-color:pink;
            }

宽50px

## 用户界面样式 ##

1、鼠标样式cursor

li\{cursor:pointer;\}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状；

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性值</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>default</td> 
   <td>小白 默认</td> 
  </tr> 
  <tr> 
   <td>pointer</td> 
   <td>小手</td> 
  </tr> 
  <tr> 
   <td>move</td> 
   <td>移动</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>文本</td> 
  </tr> 
  <tr> 
   <td>not-allowed</td> 
   <td>禁止</td> 
  </tr> 
 </tbody> 
</table>

### 轮廓线outline ###

给表单添加outline:0;或者outline：none；样式之后，就可以去掉默认的蓝色边框；

input\{outline:none;\}

### textarea防止拖拽影响布局 ###

textarea\{resize:none;\}

<textarea></textarea>放在一行中，这样在里边输入就可以顶着左上角输入；

### vertical-align属性应用 ###

css的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者是行内块元素有效。

vertical-align：baseline | top | middel | bottom

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>值</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>baseline</td> 
   <td>默认，元素放置在父元素的基线上</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>把元素的顶端与行中最高元素的顶端对齐</td> 
  </tr> 
  <tr> 
   <td>middle</td> 
   <td>把此元素放置在父元素的中部</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>把元素的顶端与行中最低元素的顶端对齐</td> 
  </tr> 
 </tbody> 
</table>

### 图片和文字垂直居中 ###

vertical-align:middle;

可以解决图片底部默认的空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决的方法有两种：

1、给图片添加vertical-align:middle | top | bottom等属性；

2、把图片转换为块级元素：display:block;

### 单行文本溢出显示省略号 ###

/\*先强制一行内显示文本\*/

white-space:nowrap; /\*默认normal自动换行\*/

/\*超出的部分隐藏\*/

overflow:hidden;

/\*文字用省略号替代超出的部分\*/

text-overflow:ellipsis

### 多行文本溢出显示省略号 ###

有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分都是webkit内核）

overflow:hidden;

text-overflow:ellipsis

/\*弹性伸缩盒子模型展示\*/

display:-webkit-box;

/\*限制一个块元素展示的文本行数\*/

\-webkit-line-clamp:2;

/\*设置或检索伸缩盒子对象的元素排列方式\*/

\-webkit-box-orient:vertical;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70]: /images/20221005/a3848266f7544075ae4e2d7897283538.png
[20210710145506347.png]: /images/20221005/9ade7392059e428c9fe6da6b0d95d2e9.png