CSS知识点总结(二)

迷糊的小小淘

已于 2023-06-15 16:20:14 修改

阅读量686

点赞数 1

分类专栏：前端知识文章标签： css html html5

于 2021-11-21 19:12:22 首次发布

本文链接：https://blog.csdn.net/ks795820/article/details/120732994

版权

前端知识专栏收录该内容

51 篇文章 5 订阅

订阅专栏

一圆角边框与三角形效果

border-radius: length /*属性值为数值或百分比的形式*/

该属性可将正方形变成圆，只要将length值设为50%即可；

可将矩形设置成有圆角的矩形，只需将其设置为矩形高度的一般即可；

选择器 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px;
    border-color: red transparent transparent transparent
}

用css边框可以模拟三角效果(如下图)：

1、将元素的宽度和高度设置为0；

2、记住：虽然是三角效果，但是4个边框依然要写，保留需要的边框颜色，其余的颜色要改成transparent透明色即可；

3、为保持浏览器兼容性，一般要加上font-size: 0; line-height:0;

二盒子阴影

box-shadow: 水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影

其中水平阴影和垂直阴影两个属性是必须项，其它项可忽略；默认为外阴影(outset)、(内阴影为inset)

三元素的显示与隐藏

有三种方式可以将元素进行显示和隐藏设置：

display显示

display属性还有设置对象是否及如何显示的功能；

display: none; // 隐藏该元素
display: block;   // 除了转换为块级元素外，还有显示元素的意思

利用display属性隐藏的元素，原有位置则不再保留~

visibility可见性

visibility: visible; // 设置为该元素可见
visibility: hidden;  // 隐藏该对象

设置了visibility属性的元素，原有位置继续保留；

overflow溢出

该属性主要是针对当元素的内容超出其指定高度及宽度时如何显示超出内容（前面也有说过哦~）；

overflow: visible;  // 溢出显示超出内容
overflow: hidden;   // 不显示超出内容，即隐藏超出内容；
overflow: scroll;   // 不管是否超出内容，总是显示滚动条；
overflow: auto;     // 超出则显示滚动条，不超出则不显示滚动条

四鼠标样式

cursor属性用于设置在元素上移动的鼠标指针将采用何种预定义的光标形状；

cursor: default;   // 默认是白色箭头形状
cursor: pointer;   // 手掌形状，一般用于可以搜索的元素
cursor: move;      // 移动形状
cursor: text;      // 竖线形状，表示文本编辑
cursor: not-allowed  // 禁止形状，表示禁止编辑

五防止拖曳文本域

通过属性resize: none;设置即可

六垂直对齐vertical-align

前面说过，块级元素居中对齐，利用margin: auto;进行设置；

文字居中对齐，利用text-align： center;进行设置；

垂直对齐仅针对于行内元素或行内块元素；经常被用来控制图片/表单与文字的对齐；

vertical-align: baseline;  // 针对基线对齐
vertical-align: top;       // 针对顶线对齐
vertical-align: middle;    // 针对中线对齐
vertical-align: bottom;    // 针对底线对齐

七溢出的文字用省略号显示

white-space: nowrap;       // 强制性一行内显示文本
overflow: hidden;          // 超出的部分隐藏
text-overflow: ellipsis;   // 文字用省略号替代超出的部分

其中，white-space用于设置或检索对象内文本显示方式，默认是normal值，即正常显示，到达边款则换行显示；主要用该属性强制一行显示内容；

text-overflow用于设置或检索是否使用一个省略号标识对象内文本的溢出；默认是clip值，即不显示省略号，直接将溢出的文本隐藏；

八 CSS布局的三种机制

上面提到布局的本质其实就是摆放盒子，CSS布局的三种机制其实是利用该三种机制来设置盒子的摆放位置，三种机制分别是普通流(标准流)、浮动和定位。

普通流(标准流)

普通流即前面提到的块级元素与行内元素，行内块元素(见CSS知识点总结)

浮动

该机制是指将盒子从普通流中浮起来，主要作用是让多个块级盒子一行显示。

为什么需要浮动？

若盒子为div，现在需要将多个div放在一行显示，由于是标准流(块级元素)，只能从上到下展示；若将其转换为行内块元素，虽然能实现在一行展示，但是相邻之间会有空白缝隙；另外它也不能实现盒子分别居左居右对齐。因此，这个时候可能就会需要用到浮动；

什么是浮动？

浮动：设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置的过程。语法如下：

选择器 {
    float: 属性值;
}

属性float有三个属性值：none(不浮动，默认值)、left(向左浮动)、right(向右浮动)；

浮动有哪些特性？

指设置了浮动的元素，会漂浮在普通流的上面，不占位置

即将自己原来的位置漏给下面标准流的盒子，即不占有原来位置，是脱离标准流的(和上面的特性差不多)

改变元素display属性

浮动元素会生成一个块级框，而不论它本身是何种元素，生成的块级框和前面说到的行内块极其相似(可水平相似，且中间不留空隙，若父级宽度放不下多个子盒子，则会挤到下面去)。

设置了浮动的元素，相互之间总是会紧紧挤在一起~

如何使用？

给浮动的元素添加一个标准流的父亲，这样就可以减少对其它标准流的影响。

则子盒子的浮动参照父盒子对齐，不会与父盒子的边框重叠，也不会超过父盒子的内边距。

浮动只影响当前及后面的标准流，不会影响设置浮动的元素前面的标准流；

消除浮动？

为什么要消除浮动，这里消除浮动指的是解决父级元素因为子级元素浮动引起内部高度为0的问题(因为一般情况下父级元素的高度是不方便给出的，但子级元素若是浮动的则不占有位置，即没有高度，所以导致父级高度为0，从而影响下面的标准流盒子。)

消除浮动原理：设置消除浮动之后，浏览器会自动为元素添加一个上外边距，以使其位置不受其它元素的影响。

消除浮动之后，父级元素就会根据子级元素自动检测高度。clear属性用于消除浮动

选择器 {
    clear: 属性值  /*属性值有三个 left消除左侧浮动影响 right消除右侧浮动影响 both同时消除左右两侧浮动的影响*/
}

有如下方法：

额外标签法

即在浮动元素末尾添加一个空的标签。

<div style="clear: both"></div> <!-- 通俗易懂，但会增加无意义标签-->

给父级添加overflow属性方法

父级选择器 {
    overflow: hidden /*或者auto、scroll*/
}

但是使用hidden属性值，容易将盒子里放不下（超出）的内容隐藏掉，使用auto则会自动检测是否有超出内容，如果有超出内容，则会显示滚动条，如果没有超出内容，则正常显示；使用scroll属性值会在x、y轴上生成滚动条；

使用after伪元素清除浮动

:after方式为额外标签法的升级版；

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix { /*IE6、IE7专有*/
    *zoom: 1;
}

使用双伪元素清除浮动

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

定位

将盒子定在浏览器的某一个位置自由的漂浮在其他盒子的上面---CSS离不开定位，特别是后面的js特效

定位即定位模式+边偏移；

定位模式有四种：静态定位、相对定位、绝对定位、固定定位、黏性定位；

通过top、bottom、left、right属性定义元素的边偏移；

边偏移属性	示例	描述
top	top:55px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:86px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left:66px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:66px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式通过position属性定义元素的定位模式，语法如下：

选择器 {
    position: 属性值;
}

静态定位（static）

静态定位是元素的默认定位方式，即无定位的意思；

设置了静态定位的元素按照标准流特性摆放位置，不用设置边偏移；

相对定位（relative）

相对定位是元素相对于该元素原本应在标准流中的位置来说的；示例：

position: relative;
left: 80px;
top: 120px;

它的特点是设置了相对定位的元素，原本在标准流中的位置会保留；后面的盒子依然以标准流的方式对待它；

黏性定位（sticky）

黏性定位是元素相对于具有“滚动机制(scroll)”的父级元素，即使该滚动机制并没有实际上滚动~

它的特点是：

不会脱离文档流，是一种专门用于窗口滚动时的新的定位方式；

黏性定位和相对定位的特点基本一致，不同的是：黏性定位可以在元素到达某个位置时将其固定~直到设置黏性定位的父元素离开窗口时，才没有黏性定位效果；

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

    .box {
      overflow: scroll;
      height: 200px;
    }
   .box1 {
      background-color: #ccc;
      position: sticky;
      top: 10px;
      height: 10px;
   }
   .box2 {
      background-color: #f25656;
      height: 20px;
   }
   .box3 {
      background-color: blue;
      height: 200px;
   }

拖动滚动条时，box1盒子会“黏”在了距离顶部10px的地方，效果达成~

绝对定位（absolute）

绝对定位是元素相对于他父级元素来设置元素的位置，即设置了绝对定位的元素，父级元素必定要设置为定位模式才可实现子级元素具有定位效果；

它的特点是：

设置了绝对定位的元素完全脱标，不占有原来的位置；

若父元素（不仅指亲生父亲，上辈都可~）没有定位，则以显示的浏览器窗口为准来定位。

另外：原则上父级元素只要是定位即可（绝对、固定或相对定位），但是若设置为绝对定位，则由于绝对定位不占有位置，容易造成后面的元素布局错乱（如下图中右侧布局，下方的元素会上移），因此不建议用绝对定位；而固定定位一般用在设置元素为浏览器固定位置，因此也不用固定位置；所以这就是子绝父相（保证父亲也要占有一定位置）的由来~