中级css总结教程

IM@taoyalong

已于 2023-03-10 13:49:27 修改

阅读量145

点赞数

文章标签： css html 前端

于 2021-08-29 17:45:23 首次发布

本文链接：https://blog.csdn.net/weixin_45352317/article/details/119983125

版权

中级css

1.Display属性

是否或如何显示元素的属性

可选值

block 块级元素占一行
inline 内联元素不从新行开始
none 隐藏和显示元素

display ：none和visibility：hidden的区别

display：none完全隐藏标签不占用位置
hidden：依然占用位置

2.max-width

设置最大占用宽度

3.position

可选值

static 默认页面定位方式不受 top、bottom、left 和 right 属性的影响
relative 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
fixed 相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
absolute 相对于定位祖先元素进行定位如果没有则对应于body
sticky 粘性定位首先先相对位置定位然后在fixed

z-index 元素重叠

举例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h1>图像文本</h1>

<p>在图像左上角添加一些文本：</p>

<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="W3School" width="800" height="450">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

3.overflow

visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条

4.float 浮动

可实现文字环绕的功能

img {
  float: right;
}

举例

5.css布局 clear和clearfix

可选值

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

由于使用了浮动当内部元素大于外部容器会出现溢出容器的情况

有两种解决方案

请添加图片描述

1.overflow：auto

.clearfix {
  overflow: auto;
}

clearfix hack

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

6.实现并排浮动框

.img-container {
  float: left;
  width: 33.33%;
  padding: 5px;
}

box-sizing 属性以确保图像容器不会由于额外的内边距（填充）而损坏

* {
  box-sizing: border-box; 
}

举例

7.display: inline-block

和 inline 的区别是什么

inline不允许设置宽度和内外边距

导航栏举例

.nav {
  background-color: yellow; 
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

8.水平垂直居中

居中对齐元素

使用margin :auto

元素内文本居中

text-align: center;

居中对齐图像

  display: block;
  margin-left: auto;
  margin-right: auto;

左右对齐

 position: absolute;
 right: 0px;
或者float

垂直居中

使用padding

padding: 70px 0;

使用line-height

height 属性值的 line-height 属性：

可以使用position 和transform 属性

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

举例

Flexbox

9.css组合器

选择有四种

后代选择器（空格）
子选择器（>）
相邻兄弟选择器（+）
通用兄弟选择器（~）

后代选择器：匹配属于元素后代的所有元素

div p {
  background-color: yellow;
}

子选择器：匹配指定元素子元素的所有元素

div > p {
  background-color: yellow;
}

后代选择器和子选择器的区别是后代包括子和其他代

相邻兄弟选择器

div ~ p {
  background-color: yellow;
}

10.css 伪类

伪类的语法

选择器：伪类{
	属性：值
}

伪类实现类似工具箱的效果

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

匹配第一个元素

:frist-child

在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何

元素：

p:first-child {
  color: blue;
}

匹配所有p元素的第一个i标签

p i:first-child {
  color: blue;
}

所有 CSS 伪类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素。
:enabled	input:enabled	选择每个已启用的元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个元素。
:first-of-type	p:first-of-type	选择作为其父的首个元素的每个元素。
:focus	input:focus	选择获得焦点的元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的元素。
:invalid	input:invalid	选择所有具有无效值的元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个元素的每个元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个元素的每个元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个元素的每个元素。
:only-of-type	p:only-of-type	选择作为其父的唯一元素的每个元素。
:only-child	p:only-child	选择作为其父的唯一子元素的元素。
:optional	input:optional	选择不带 “required” 属性的元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的元素。
:read-write	input:read-write	选择不带 “readonly” 属性的元素。
:required	input:required	选择指定了 “required” 属性的元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的元素。
:visited	a:visited	选择所有已访问的链接。

11. CSS 伪元素

选择器	例子	例子描述
::after	p::after	在每个元素之后插入内容。
::before	p::before	在每个元素之前插入内容。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
::selection	p::selection	选择用户选择的元素部分。

12.不透明度

opacity 越小越透明

13.导航栏

垂直导航栏

举例：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

水平导航栏

实现原理

float 使li浮起来

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

display: inline 使li 不换行

导航栏下拉框实现

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

14.悬停预览

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="dropdown">
  <img src="/i/photo/coffee.jpg" alt="Coffee" width="100">
  <div class="dropdown-content">
  <img src="/i/photo/coffee.jpg" alt="Coffee" width="300" height="200">
  <div class="desc">Coffee</div>
  </div>
</div>
  </div>
</div>
</body>
</html>

15.属性选择器

CSS [attribute] 选择器查找带有某属性的标签

a[target] {
  background-color: yellow;
}

CSS [attribute=“value”] 选择器属性为什么的标签

a[target="_blank"] { 
  background-color: yellow;
}

CSS [attribute~=“value”] 选择器包含选择器

[title~="flower"] {
  border: 5px solid yellow;
}

[attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。值必须是完整的单词

[class|="top"] {
  background: yellow;
}

[attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。值不必完整

[class^="top"] {
  background: yellow;
}

[attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。值不必完整

[class$="test"] {
  background: yellow;
}

[attribute*=“value”] 选择器选取属性值包含指定词的元素。不必完整

[class*="te"] {
  background: yellow;
}

16.表单样式

举例：

17.css 计数器

counter-reset 创建或重置计数器
counter-increment 递增计数器值
content 插入内容
counter() 或者counters（）将计数器的值添加到元素

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

18.网站布局

综合例子：

19.css优先级

行内样式
id选择
类、属性、伪类
元素伪元素

若等级相同则最后的生效

高级：css

1.圆角

border-radius

 border-radius: 15px 50px 30px 5px;

2.边框图案

border-image

三个属性

用作边框的图像
在哪里裁切图像
定义中间部分应重复还是拉伸重复round 拉伸 stretch

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

3.多重背景

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

background-image 设置背景图片

background-position 设置位置

background-repeat 是否重复

background-size: contain 和 cover; contain是压缩适应，cover 压缩裁剪适应

4.css 渐变

线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

方向默认从上向下

可选：to right ,bottom ,left,top

可调节透明性

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

径向渐变

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

5.阴影效果

box-shadow 边框阴影

卡片效果

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

6.文本效果

文字溢出

p.test2 {
  white-space: nowrap; //不换行
  width: 200px; //
  border: 1px solid #000000;
  overflow: hidden; //溢出隐藏
  text-overflow: ellipsis; // 省略号
}

书写模式

水平

writing-mode: horizontal-tb;

垂直

writing-mode: vertical-rl;

7.css 2D旋转

transforms

直线移动 translate（水平，垂直）

div {
  transform: translate(50px, 100px);
}

旋转 rorate() 正为顺时针，负为逆时针

div {
  transform: rotate(20deg);
}

scale 放大缩小（宽度的倍数，高度的倍数）

div {
  transform: scale(2, 3);
}

scaleX() 宽度放大缩小为原来的倍数scaleY()高度

div {
  transform: scaleX(2;
}

scaleX(xdeg) x轴旋转一定的角度 y轴旋转一定的角度

组合方法 matrix（）

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

8.css 3D旋转

css 3D旋转

rorateX rorateY rorateZ

9.过度

div {
  transition: width 2s, height 4s;
}

延迟过度 transition-delay: 1s;

过度加转移 transform:xs;

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>请把鼠标悬停在下面的 div 元素上：</p>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>

</body>
</html>

10.css 动画

@keyframes 动画声明

//声明动画
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
//绑定动画
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

animation-duration 动画时间
animation-delay: 2s;动画延迟时间
animation-iteration-count: 3/infinite;执行次数infinite 无限
animation-direction: 动画方向
- normal - 动画正常播放（向前）。默认值
- reverse - 动画以反方向播放（向后）
- alternate - 动画先向前播放，然后向后
- alternate-reverse - 动画先向后播放，然后向前
animation-fill-mode填充样式
- none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
- backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
- both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

11.tooltip

<div class="tooltip">Top
    <span class="tooltiptext tooltip-top">Tooltip text</span>
  </div>
<style>
    .tooltip{
        position:relative:
        display:inline-block;
        border-bottom: 1px dotted #ccc;
        color: #006080;
	}
    .tooltip-top::after {
    	content: "";
    	position: absolute;
    	top: 100%;
    	left: 50%;
   	 	margin-left: -5px;
   		border-width: 5px;
    	border-style: solid;
    	border-color: #555 transparent transparent transparent;
}
</style>

12.鼠标悬停叠加

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
  left: 0;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h1>滑入（从右）</h1>

<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

13.面包屑和分页

面包屑

分页

14.分列

div {
  column-count: 3;
}

分列间的间隙

.newspaper {
  column-count: 3;
  column-gap: 40px;
}

列间样式

div {
  column-rule-style: solid;
}

15.变量

:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
//局部变量可替换全局变量
.container {
  --blue: #0000ff;
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

JavaScript 修改变量

// 获取根元素
var r = document.querySelector(':root');
//设置变量的函数值
r.style.setProperty('--blue', 'lightblue');

变量结合@media

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}

16.box-sizing 属性

设置box-sizing:border-box; 则宽和高包括内边距和边框

17.Flexbox

水平排列

.flex-container {
  display: flex;
}

垂直排列

.flex-container {
  display: flex;
  flex-direction: column;
}

水平排列居中对齐

.flex-container {
  display: flex;
  justify-content: center;
}

完全居中

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

18.媒体查询：

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

媒体查询简单使用

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

19.可适应页面设计

举例

1.视口

用户可见区域

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）

initial-scale=1.0 初始缩放级别

2.网格视窗

请添加图片描述

一般可以将视窗分为12列

构建网格视窗首先要设置边框边距包括在宽和高中。

* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

3.媒体查询

/* 针对手机： */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* 针对平板电脑： */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* 针对桌面： */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

4.网格视图使用

设计模板

.grid-container {
  display: grid;//设置为网格容器
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;//间隙
  background-color: #2196F3;
  padding: 10px;
}

使用模板

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

声明为网格容器

display: grid;设置为网格容器

display: inline-grid;内部容器自动成为网格项目

设置间隙

grid-column-gap: 50px;列间隙

grid-row-gap：行间隙

grid-gap: 50px 100px;简写

可使用行线设置网格项目

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

可以使用grid-column 或者grid-row 进行item 位置设置

使 “item1” 从第 1 列开始并在第 5 列之前结束：

.item1 {
  grid-column: 1 / 5;
}

使 “item1” 从第 1 列开始，并跨越 3 列：

.item1 {
  grid-column: 1 / span 3;
}

使 “item8” 从 row-line 1 和 column-line 2 开始，在 row-line 5 和 column line 6 结束：

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}


### 4.网格视图使用

**设计模板**

```css
.grid-container {
  display: grid;//设置为网格容器
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;//间隙
  background-color: #2196F3;
  padding: 10px;
}