Web前端教程学习笔记4_2022.11.16

人擠人踩人殺人

已于 2022-11-21 23:34:34 修改

阅读量121

点赞数

文章标签：前端学习 css

于 2022-11-16 20:10:32 首次发布

本文链接：https://blog.csdn.net/m0_73991604/article/details/127891254

版权

一、CSS定位

1.position定位

position特性：
CSS position属性用于指定一个元素在文档中的定位方式，
top、 right、bottom、left 属性则决定了该元素的最终位置。
position取值：
static（默认)、relative、absolute、fixed、sticky
relative:
1.如果没有定位偏移量，对元素本身没有任何影响
2.不使元素脱离文档流
3.不影响其他元素布局
4.left、top、 right、bottom是相对于当前元素自身进行偏移的

<head>
   <style>
      #box1{width:100px;height:100px;background:bule;position:relative;left:100px;top:100px;}
   </style>
</head>

2.absolute绝对定位：

1.使元素完全脱离文档流
2.使内联元素支持宽高（让内联具备块特性）
3.使块元素默认宽根据内容决定（让块具备内联的特性）
4.如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定)

<head>
   <style>
      #box1{width:100px;height:100px;background:bule;position:absolute;}
      span{width:100px;height:100px;background:red;position:absolute;}
      div{background:red;position:absolute;left:100px;top:100px;}
   </style>
</head>
<body>
   <span>这是一个内联</span>
   <div>这是一个块</div>
</body>

3.fixed固定定位：

1.使元素完全脱离文档流
2.使内联元素支持宽高（让内联具备块特性)
3.使块元素默认宽根据内容决定(让块具备内联的特性)
4.相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

<head>
   <style>
      body{height:2000px;}
      div{position:fixed;}
   </style>
</head>
<body>
   <div>这是一个块</div>
</body>

4.sticky黏性定位：

在指定的位置，进行黏性操作

<head>
   <style>
      body{height:2000px;}
      div{background:red;position:sticky;top:100px;}
   </style>
</head>
<body>
   <p>aaaaaaa</p>
   <p>aaaaaaa</p>
   <div>这是一个块</div>
   <p>aaaaaaa</p>
   <p>aaaaaaa</p>
</body>

5.z-index定位层级：

默认层级为0
嵌套时候的层级问题

<head>
   <style>
      #box1{width:100px;height:100px;background:bule;position:absolute;z-index;0;}
      #box2{width:100px;height:100px;background:bule;position:absolute;left:50px;top:50px;z-index;2;}   
   </style>
</head>

二、CSS添加省略号

width
必须有一个固定的宽
white-space : nowrap
不让内容折行
overflow : hidden
隐藏溢出的内容
text-overflow : ellipsis
添加省略号

#content{width:200px;border:1px black solid;white-space : nowrap;text-overflow : ellipsis;}

三、CSS Sprite

特性:
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。
它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处：
可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开

注：个体图案在原图中的位置是有讲究的

<head>
   <style>
      #box1{width:20px;height:21px;background:url(./sprite_icon.png)no-repeat left -596;}
      </style>
</head>
<body>
   <div id="box1"></div>
</body>

四、CSS圆角

border-radius
给标签添加圆角

注：
1.圆角直径等于块边长的一半时，可以做出圆形，或者直接将数据写为50%
2.写对角时，可以写两组数据
3.当写出四组数据时，分别对应为从左上角开始的顺时针顺序
4.当写出20px/40px时，相切的圆形变为相应的椭圆
5.如何做出半圆:设置一半的边角，多余部分将像素缩短

<head>
   <style>
      #box{width:100px;height:100px;background:bule;border-radius:20px;}
   </style>
</head>
<body>
   <div id="box"></div>
</body>

五、PC端的布局

通栏：自适应浏览器的宽度
版心：固定一个宽度，并且让容器居中
在这里插入图片描述