CSS零碎知识点

最新推荐文章于 2024-05-19 17:21:21 发布

NoobAllen

最新推荐文章于 2024-05-19 17:21:21 发布

阅读量115

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_45884377/article/details/120802213

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.浮动

浮动作用

用于网页布局，让垂直布局改变为水平布局

注意！！！当盒子已经浮动了就不能使用绝对定位，可以使用相对定位

浮动特点

浮动会脱离标准流，在标准流中不占位置
脱离后的浮动显示优先级比标准流高半个级别
浮动找浮动，几个元素同时浮动，后浮动的元素会在先浮动的元素的身后浮动
浮动受到元素边界的影响（div等块级元素独占一行）
浮动有特殊的显示效果，可以设置宽高，一行可以有多个浮动
浮动元素不能使用 text-align 和 margin:0 auto 来设置水平居中，但是浮动元素内容可以

浮动代码

#左浮动
.left {
	float:left;
}
#右浮动
.right{
    float:right;
}

清除浮动

目的：有时候子元素浮动了，便脱离了标准流，父元素不能再被子元素撑起来。

方法：

给父元素设置高度（缺点：有些板块不允许设置父元素的高度）

.father {
      height: 400px;
      width: 400px;
      background-color: pink;
    }

.son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }

额外标签法：在父元素最后添加一个块级元素并设置clear:both （缺点：增加了标签，让网页结构变得复杂）

 .father {
      width: 400px;
      background-color: pink;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }

    .clear {
      clear: both;
    }

2的优化，单伪元素方法：在父元素的伪元素中添加clear:both

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }

    .clearfix::after {
      content: '';
      display: block;
      clear: both;
      /* 补充代码：在网页中看不到伪元素 */
      /* height: 0;
      visibility: hidden; */
    }
  </style>
</head>
<body>
  <div class="father clearfix">
    <div class="son"></div>
  </div>

  <div class="clearfix"></div>
  <div class="clearfix"></div>
  <div class="clearfix"></div>
  <div class="clearfix"></div>
</body>
</html>

双伪元素清除法：也可以解决margin塌陷使用常规套路

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }

    .clearfix::before,
    .clearfix::after {
      content: '';
      display: table;
    }
    .clearfix::after {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="father clearfix">
    <div class="son"></div>
  </div>
</body>
</html>

给父元素设置overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
      overflow: hidden;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }
    
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

2.版心

版心作用

用于约束网页的主体内容，无论什么显示尺寸都能将网页主体内容呈现在中间

代码

.container {
    width:1000px;
    margin:0 auto;
}

3.index页面骨架

<!DOCTYPE html>
<!-- 选择语言:en zh-CN -->
<html lang="en"> 
<head>
<!-- 字符编码 万国码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页描述 -->
<meta name="description" content="xxxxxx">
<!-- 网页关键词 -->
<meta name="keywords" content="xxxxxxx">
<!-- icon图标 -->
<link rel="shortcut icon" href="./xtx/favicon.ico" type="image/x-icon">
<!-- 网页标题 -->
    <title>Document</title>
<!-- CSS外联样式 -->
<link rel="stylesheet" href="./xtx/css/base.css">

</head>
<body>
    
</body>
</html>

4.选择器

后代选择器

用法：选择器1 选择器2 {CSS}

效果：选择器1中的后代（儿子、孙子…），满足选择器2的条件都可以被选中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father p {
      color: red;
    }
  </style>
</head>
<body>
  <!-- 需求：只让小姐姐变红（不改变html结构） -->
  <!-- 解决：在.father这个div的后代中找p标签即可 -->
  <div class="father">
    <p>小姐姐</p>
    <div>
      <p>小帅哥</p>
    </div>
  </div>
  <p>小可爱</p>
</body>
</html>

Tips：小姐姐、小帅哥变红，小可爱不变

子代选择器

用法：选择器1 > 选择器2 {CSS}

效果：只选择选择器1中的子代，只能是儿子，符合选择器2的都被选中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father > p {
      color: red;
    }
  </style>
</head>
<body>
  <div class="father">
    <p>小可爱</p>
    <div>
      <p>小姐姐</p>
    </div>
  </div>
  <p>大可爱</p>
</body>
</html>

Tips：小可爱变红

并集选择器

用法：选择器1，选择器2 {CSS}

效果：让多个选择器满足选中条件，同时修改多个元素。选择器可以是基础选择器，也可以是复杂选择器，每行写一个选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div,
    p {
      color: red;
    }
  </style>
</head>
<body>
  <div>我是div</div>
  <div>我也是一个div</div>
  <p>我是p标签</p>
  <p>我也是p标签</p>
  <h1 class="red">我是一个h1标签</h1>
  <h2>我是一个h2标签</h2>
</body>
</html>

Tips：div 和 p 标签变红了

交集选择器

用法：选择器1选择器2 {CSS}，如果有标签选择器，必须写在前面

效果：选中同时符合选择器1、2的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p.red {
      color: red;
    }
  </style>
</head>
<body>
  <div class="red">小姐姐</div>
  <p>小帅哥</p>
  <p class="red">小可爱</p>
</body>
</html>

Tips：小可爱变红了

hover伪类选择器

用法：选择器::hover {CSS}

效果：当鼠标悬停在标签上时，显示伪类选择器中的CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      text-decoration: none;
    }

    a:hover {
      color: orange;
      text-decoration: underline;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }

    .box:hover {
      width: 400px;
      height: 400px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <a href="#">我是一个a标签</a>
  <div class="box"></div>
</body>
</html>

结构伪类选择器

精准选择第几个元素

用法：

/*子元素为E*/
E:first-child {CSS} /*匹配父元素中第一个子元素*/
E:last-child {CSS}	/*匹配父元素中最后一个子元素*/
E:nth-child(n) {CSS}/*匹配父元素中第n个子元素*/
E:nth-last-child(n) {CSS}/*匹配父元素中倒数第n个子元素*/
/*
n为0,1,2,3,4......,9
奇数：2n-1,2n+1,odd
偶数：2n，even
前j个：-n+j
从第j个往后：n+j
*/

5.精灵图

作用：一张大图上集中了许多小图，向服务器发送数据时，不用多次发送小图片，只需要发送一次大图片就够了，减轻服务器负担

用法：

先创造一个盒子，盒子大小尺寸为图片的大小
量取小图片左上角的坐标(x,y)
将坐标取反
将图片放在盒子里

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one {
      width: 24px;
      height: 24px;
      background: url('./images/taobao.png') 0px -264px;
      float: left;
    }
    .two {
      width: 24px;
      height: 24px;
      background: url('./images/taobao.png') 0px -484px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
</html>

6.伪元素

作用：顾名思义，是伪元素，冒充标签效果，可在网页的非主体内容处添加伪元素

！！！默认是行内元素不拥有宽高

用法:

父元素::before {CSS} 在父元素内容前面添加一个伪元素

父元素::after {CSS} 在父元素内容后面添加一个伪元素

必须加content才能生效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .father::before {
      /* 必加的属性 */
      content: '我是一个伪元素';
      /* 转换显示方式 */
      display: block;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="father">
    我是father内部的内容
  </div>
</body>
</html>

缺点：不容易调试，审查元素无法发现

7.字体文本样式

字体大小 font-size 40px

字体粗细 font-weight 1.normal bold 2.数字 100~900

字体样式 font-style normal italic

字体系列 font-family

字体颜色 color

列表 list-style

8.盒子

margin塌陷

margin水平不会塌陷，垂直会塌陷。两个盒子中margin距离大的那个变成了两盒之间的距离，距离小的则缩在了距离大的里面

两个margin-top叠在了一起

解决方法：清除浮动中的双伪元素清除法

盒子构成

content

padding

border

margin

自动内减

在修改内部尺寸的同时，保持盒子大小不变

box-sizing:border-box

背景图片

background-size:

9.定位

静态定位

相对定位

当盒子已经浮动了就不能使用绝对定位，可以使用相对定位

绝对定位

相对于距离父元素的位置定位

当盒子已经浮动了就不能使用绝对定位，可以使用相对定位

特殊：

子绝父相

父绝子绝

10.元素显示模式

块级元素

display:block

代表：div p h dl dt dd ul li header footer nav form

特点：

一行只能有一个，独占一行显示
可以设置宽和高
默认高度被内容撑开，宽度与父元素宽度相同

行内元素

display:inline

代表：span a 伪元素

特点:

不能设置宽和高
高度和宽度都是被内容撑开的
一行可以有多个

行内块元素

11.对齐格式

垂直对齐

vertical-align:middle

文本:

line-height:当前高度

水平居中对齐

文本：text-align

margin:0 auto

操作技巧

快速生成框架

!+Tab

预览

Alt+B

同时选择多个相同元素

Ctrl+D

元素同时粘贴到多行

滚轮中键按住滚动

ement语法

NoobAllen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS零碎知识点

CSS零碎知识点浮动浮动作用用于网页布局，让垂直布局改变为水平布局注意！！！当盒子已经浮动了就不能使用绝对定位，可以使用相对定位浮动特点浮动会脱离标准流，在标准流中不占位置脱离后的浮动显示优先级比标准流高半个级别浮动找浮动，几个元素同时浮动，后浮动的元素会在先浮动的元素的身后浮动浮动受到元素边界的影响（div等块级元素独占一行）浮动有特殊的显示效果，可以设置宽高，一行可以有多个浮动浮动元素不能使用 text-align 和 margin:0 auto 来设置水平居中，但是浮
复制链接

扫一扫