CSS复习

已于 2022-04-26 16:25:27 修改
阅读量248 收藏
点赞数
分类专栏： css 文章标签： css
于 2022-03-21 22:26:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44743897/article/details/123278389
版权

css

css简介

CSS：Cascading Style Sheet 层叠样式表，用于控制页面的外观。

长度单位

  • 像素
    相同的px不同设备下展示效果不同
  • 百分比
    相对于父元素属性的百分比。
  • em
    em是相对于自身元素字体大小来计算。
    1em=1px的font-size，浏览器默认字体大小16px。
    em会随着字体的大小改变而改变。
  • rem
    rem相对于根元素（html）字体大小来计算。
    1rem=1px的font-size

颜色单位

  • RGB
    通过三种颜色的不同浓度来调配
    R red， G green ， B blue。
    每种颜色范围：0~255（0%·100%）之间
    rgb（0，0，0）

  • RGBA
    在rgb的前提下加了一个a表示不透明度。
    1完全不透明 0全透明 .5半透明
    rgba（0，0，0，.5）

  • 十六进制的rgb值
    #红色绿色蓝色
    #00~ff

块元素和行内元素

  • 块元素
    块元素会在页面独占一行
    默认高度是把内容撑开
    默认宽度是父元素的全部
    元素的高度，宽度，行高，以及顶部和底部的（padding，margin）都是可以设置的
    设置display:block,将元素转成块级元素。
<div></div>,<h1>~<h6>,<p>,<ul>,<ol>,<li>，<table>,<address>
  • 行内元素
    行内元素不会独占一行，只占自身的大小
    行内元素的默认宽度和高度都是被内容所撑开。
    高度和宽度及顶部和底部边距不可设置
    display:inline可以将块级元素转成内联元素
<a>,<b>,<span>,<strong>
  • 内联块级元素
    和其他元素在一行上
    高度和宽度及顶部和底部边距可设置
    常用的内联块级元素：,,display:inline-block
    float:left,position:absolute/fixed可以设置成内联块级元素（BFC）

css样式的特性

  • 继承性
    文本样式和字体样式的继承
    a标签不继承字体颜色color
  • 堆叠性
    为一个标签定义多个样式规则
    如果样式属性不冲突，都会作用到这个标签上
  • 优先级
    默认优先级
    高 内联样式
    中 内部样式，外部样式（就近原则）
    低 浏览器默认样式
    调整成最高优先级 !important，比内联都高，内联样式不允许设置!important
color: red !important ;

css的用法

样式属性用分号连接。
如 color:red; 字体颜色
内联样式，行内样式

<div style="color:red;"></div>

外部样式
在head中，link标签的方式引入

<link rel="stylesheet" href="demo.css"></link>

内部样式
在head标签中，加style标签，在style标签内部编写css属性
选择器{样式声明;样式声明}
选择器：使用这个样式的元素条件

<head>
	 <style>
        .map {
            width: 100%;
            height:400px;
        }
        #map {
            position: relative;
        }
        #info {
            position: absolute;
            height: 1px;
            width: 1px;
            z-index: 100;
        }
        .tooltip.in {
            opacity: 1;
        }
        .tooltip.top .tooltip-arrow {
            border-top-color: white;
        }
        .tooltip-inner {
            border: 2px solid white;
        }
    </style>
</head>

css选择器

id选择器 以#开头，自定义名称

<div id='box'></div>
#box{
  width:100px;
  height:100px;
}

类选择器 .开头，自定义名称

<div class='box'></div>
.box{
  width:100px;
  height:100px;
}

通用选择器 *

*{
  width:100px;
  height:100px;
}

元素选择器

<div id='box'></div>
div{
  width:100px;
  height:100px;
}

子代选择器

<div id='box'>
	<span>库里</span>
</div>
#box >span{
 color:red;
}

后代选择器

<div id='box'>
	<span>库里</span>
</div>
#box span{
 color:red;
}

伪元素选择器
:first-letter 为第一个字符的样式。
:first-line 为第一行添加样式。
:before 在元素内容的最前面添加内容，需配合content属性进行使用。
:after 在元素内容的最后面添加内容，需配合content属性进行使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        div:first-letter{
            color:blue;
            font-size:20px;
        }
        div:first-line{
            background:red;
        }
        div:before{
            content:"太阳";
        }
        div:after{
            background: #8c8c8c;
            content:"篮球";
        }
    </style>
</head>
<body>
<div>你好</div>
</body>
</html>

在这里插入图片描述

伪类选择器
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬浮到连接上，即移动在连接上
:active 选定的链接，被激活

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style>
		/*a:link{
			font-size: 12px;
			color:black;
			text-decoration: none;
		}
		a:visited{
			font-size: 15px;
			color:;
		}
		a:hover{
			font-size: 20px;
			color:blue;
		}
		a:active{
			font-size: 28px;
			color:red;
		}*/
		a:link,a:visited{
			color:red;
			font-size: 16px;
		
		}
		a:hover,a:active{
			color:#ff6300;
		}
		/*普通的标签也可以使用伪类选择器*/
		div:hover{
			color:blue;
		}
		div:active{
			color:yellow;
		}
	</style>
</head>
<body>
	<a href="demo.html">demo.html</a>
	<div>你好</div>
</body>
</html>

在这里插入图片描述

交集选择器
并且的意思，即…又

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
</head>
<style>
.box1{
    color: #ff6300;
}
p.box1{
    font-size: 28px;
}
</style>
<body>
    <div class="box">
        <div class="box1">交叉步</div>
        <p>天气晴</p>
        <p class="box1">你好呀</p>
    </div>
</body>
</html>

在这里插入图片描述
并集选择器
和的意思，逗号相隔，通常用于集体声明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
</head>
<style>
   p,h1,.box1{
        color: aqua;
    }
</style>
<body>
<div class="box">
    <span class="box1">交叉步</span>
    <p>天气晴</p>
    <span>胡歌</span>
    <p class="box1">你好呀</p>
    <h1>周杰伦</h1>
</div>
</body>
</html>

在这里插入图片描述
属性选择器
选择标签带有某些属性的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<style>
a[title]{
    color: #ff6300;
}
input[type=text]{
    color: #ff6300;
}
    div[class^=box]{
    /*    class是box开始的位置*/
        color: red;
        font-size: 22px;
    }
div[class$=footer]{
    /*    class是footer结束的位置*/
    color: blue;
    font-size: 22px;
}
div[class*=aa]{
    /*aa在任意位置*/
    color: aqua;
    font-size: 22px;
}
</style>
<body>
    <div>
        <a href="#" title="属性选择器">我是属性选择器</a>
        <a href="#" >你好属性选择器</a>
        <input type="text" value="文本框"/>
        <input type="text" value="文本框"/>
        <input type="text" value="文本框"/>
        <input type="submit"/>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="jd-footer">5</div>
        <div class="tb-footer">6</div>
        <div class="aa-b">7</div>
        <div class="aa-c">8</div>

    </div>
</body>
</html>

在这里插入图片描述

盒子模型（box model）

  • 标准的盒子模型：宽度=content宽度+padding+border。内容区大小由width和height设置
  • 低版本IE的盒子模型：宽度=content+border+padding。
  • Box-sizing属性：用于控制元素盒子模型的解析模式，content-box：w3c的标准盒子，设置元素的 height/width 属性指的是content部分的高/宽
    border-box: IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
    对于行级元素，margin-top,margin-bottom是无效的，
    对于行级元素，padding-top,padding-bottom显示上有效，但对周围元素没有影响，也可以认为无效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
<style>
    .main{
        /*box-sizing: content-box;*/
        box-sizing: border-box;
        width: 300px;
        height: 300px;
        background: red;
        padding: 10px;
        border: 1px solid blue;
    }
    .inile{
        /*margin-bottom: 100px;*/
        background: #8c8c8c;
        padding: 10px;
         /*  对于行级元素，margin-top,margin-bottom是无效的，对于行级元素，padding-top,padding-bottom显示上有效，但对周围元素没有影响，也可以认为无效  */
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: #ff6300;
        margin-bottom: 10px;
        /*display: inline-block; 可以解决垂直外边距塌陷*/
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color:gold;
        margin-top: 20px;
    /*    外边距合并，当上下两个块级元素相遇时，上元素有margin-bottom,下元素有上边距margin-top,
    则他们之间的垂直间距不是margin-top和margin-bottom的合，而是较大值。这现象称相邻垂直外边距的合并（也称外边距塌陷）*/
    }
</style>
</head>
<body>
    <div class="main">
        content
        <span>123</span>
    </div>
    <div>
        <span class="inile">demo</span>
        <div>123</div>
    </div>
    <div class="box">
        1
    </div>
    <div class="box1">
        2
    </div>
</body>
</html>

浮动布局

float：left/right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
</head>
<style>
    .box{
        width: 100%;
        height: 100px;
        background-color: #ff6300;
    }
    .box1{
        width: 50%;
        height: 100px;
        background-color: #8c8c8c;
        float: left;
    }
    .box2{
        float: left;
        width:50%;
        height: 100px;
        background: red;
    }
</style>
<body>
    <div class="box">

    </div>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
</body>
</html>

定位布局

position(定位)
absolute：绝对定位，脱离文档流的布局，遗留下来的空间由后面的元素填充，定位的起始位置为最近的父元素（position不为static），否则为body文档本身。
relative：相对定位，不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域，定位的起始位置为此元素原先文档流的位置。
fixed：固定定位，类似与absolute，但不随滚动条的移动而改变位置。
static：默认值；默认布局。忽略top,bottom,left,right,z-index.
sticky:类似relative和fixed的结合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background-color: #8c8c8c;
        position: relative;
        left: 100px;
    }
    .box-header{
        position: absolute;
        top: 10px;
        width: 60px;
        height: 60px;
        background-color: #ff6300;
    }
    .box-fixed{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        position: fixed;
        top: 10px;
    }
</style>
<body>
    <div class="box">
        <div class="box-header">123</div>
        <div class="box-fixed"></div>
    </div>
</body>
</html>

grid布局

flex布局

适用于移动端的布局，pc端支持比较差，ie11或更低版本，不支持或仅部分支持
display:flex;

  • flex的布局原理
    flexible Box的缩写，弹性布局。
    父盒子设置为flex布局以后，子元素的float，clear和vertical-align属性失效。
    伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

常见的父亲属性

  • justify-content属性
    作用：属性定义了项目在主轴上的对齐方式
    取值：flex-start | flex-end | center | space-between | space-around
    flex-start：默认的是从主轴开始位置对齐
    flex-end：默认的是从主轴结束位置对齐
    center：居中对齐，项目形成的总宽度不变
    space-between：两端对齐，中间间隔宽度一样
    space-around：所有项目的两侧间隔相等，主轴两端会留边
    -align-items属性
    设置侧轴上的子元素排列方式

  • flex-direction属性
    设置主轴方向
    注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，子元素是跟着主轴来排序的。
    属性值：row|row-reverse|column|column-reverse
    row:默认值从左到右
    row-reverse：从右向左
    column：从上到下
    column-reverse:从下到上

  • align-content属性
    作用：定义交叉轴上的堆砌方式
    属性值：flex-start | flex-end | center | baseline | stretch
    flex-start：交叉轴的开始位置对齐
    flex-end：交叉轴的结束位置堆砌
    center：交叉轴居中
    baseline：基线对齐，文字第一行对齐
    stretch：默认值！如果项目未设置高度或者设置为auto，将沾满整个容器的高度（自动填充）

  • flex-flow属性
    是flex-direction和flex-wrap和合并缩写形式
    属性值：flex-direction|flex-wrap的属性值

  • flex-wrap属性
    作用：描述如果一个轴线排列不下，如何换行
    属性值：nowrap | wrap | wrap-reverse
    nowrap：默认不换行，会压缩子元素
    wrap：换行，第一行在上方
    wrap-reverse：换行，第一行在下方
    flex布局常见的子项属性
    flex属性
    定义子项分配的剩余空间，用flex来表示占多少份数
    align-self控制子项自己在侧轴上的对齐方式
    order属性定义项目的排列顺序，默认的是0,数值越小排列越靠前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
</head>
<style>
    .box{
        display: flex;
        width: 400px;
        height: 300px;
        background-color: #8c8c8c;
        /*默认的主轴是x轴 row*/
        flex-direction: row;
        /*设置主轴上子元素的排列方式*/
        justify-content: space-around;
        /*是否换行，默认值不换行nowrap wrap*/
        flex-wrap: wrap;
        /*设置侧轴的子元素排列方式（单行）*/
        align-items: center;
        /*设置侧轴上的子元素的排列方式（多行）*/
        align-content: center;
    }
    .box span{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-left: 5px;
    }
    .box1{
        display: flex;
        width: 400px;
        height: 600px;
        margin-top: 10px;
        background-color: #8c8c8c;
        /*默认的主轴是y轴 column*/
        flex-direction: column;
        /*设置主轴上子元素的排列方式*/
        justify-content: space-around;
        align-items: center;
    }
    .box1 span{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-left: 5px;
    }
    section{
        display: flex;
        width: 500px;
        height: 150px;
        background-color: #8c8c8c;
        margin: 0 auto;
    }
    section div:nth-child(1){
        width: 100px;
        height: 150px;
        background-color: #ff6300;
    }
    section div:nth-child(2){
        flex: 1;
        background-color: blue;
        order: -1;
    }
    section div:nth-child(3){
        width: 100px;
        height: 150px;
        background-color: red;
    }
</style>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="box1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>```
慎H
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS复习笔记
weixin_44921664的博客
12-07 155
HTML+CSS复习笔记 1.HTML 初识 HTML 指的是超文本标记语言 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 1.html作用: 网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。 2.所谓超文本，有2层含义： 因为它可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **） 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）。 文档类型<!DOCTYP
2.CSS复习.zip
01-29
2.CSS复习.zip
css复习
weixin_45825917的博客
02-23 763
border-collapse:collapse (表示相邻边框合并在一起)行内或行内块元素水平居中：text-align:center;border：1px solid red (没有顺序)单元格的border会发生重叠，如果不想要重叠设置。盒子阴影不占用空间，不会影响其他盒子排列。传统网页布局三种方式：标准流 浮动 定位。padding影响盒子大小的好处使用。盒子阴影：border-shadow。
html+css复习
l2298202515的博客
12-28 1221
html css复习
HTML&CSS复习
FIRE的博客
09-06 614
HTML&CSS 全面知识点复习....
CSS复习笔记
flow
09-12 322
CSS简介 基础语法 1.元素选择器 标签{}/p{} 2.id选择器 #id{} 3.类选择器 .{} 4.通配选择器 *{} 5.复合选择器 ①交集选择器 选择器1选择器2选择器3... 如果有元素选择器，必须以元素选择器开头； ②并集选择器 选择器1，选择器2，选择器3... 选择器可以是多种类型在一个并集选择器中； 6.关系选择器 父元素 子元素 祖先元素 后代元素 兄弟元素 ①子元素选择器 父元素>子元素 ②后代选择器 祖先 后代 .
CSS复习汇总
weixin_41597939的博客
08-22 137
css css是什么 css的注释是什么 怎么引用css（3） 什么是css级联，由什么决定 有哪些选择器 哪些属性可继承，哪些不可以 设置表格之间的空间属性是什么 设置表格与内容间距的属性是什么 表格合并列 表格合并行 字体有哪些属性（9） 列表有哪些属性（4） 光标有哪些属性 如何设置文本的行高 outline是什么 display分别有什么属性值（4） visibility是什么，opacity是什么 写出隐藏css属性，并说明区别 overflow有什么作用 盒子模型有哪些，有什么区别 背景有哪些
CSS复习总结
垂死病中惊坐起，菜鸟竟是我自己，于是含泪写下博客
05-15 293
简述：重新整理了一下当初学习css的笔记，复习css主要以实操所需知识点为主，面试系列的css总结会以八股文为主。那些很简单的知识点就没有写入此文中，只将自己比较容易遗漏的或较重要的知识点在此记录，方便日后复习查看。 在head标签中用style标签写样式 外部引入（推荐） 2.字体样式 字体样式综合写法 text-align:文本水平对齐方式,对行内元素、行内块元素都有效果的 line-height:行间距,行高等于高度可以让单行文本垂直居中 text-indent:首行缩进 whi
HTML,CSS复习
wyh666csdn的博客
01-29 876
HTML,CSS复习 6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置. ●在链接文本的href属性中,设置属性值为#名字的形式,如< a href= “#two”>第2集 ●找到目标位置标签,里面添加一个id属性=刚才的名字,如: < h3 id=“two” >第2集介绍</ h3> border-collapse: collapse;可以合并为一条边框 table{ width: 100%; b
CSS 复习
u011934280的专栏
09-05 454
CSS复习： 由于样式和html内容写在一起，导致代码特别紊乱，于是提出思想： Html内容 和 显示 相分离 Html 只负责写内容，搭建框架 CSS只负责装饰内容，装饰框架 举例子：html 比喻房子    css比喻修饰、装饰房子（挂一幅画、粉刷颜色...） Css----  cascade style sheet  层叠样式表 1，CSS的基本语法 （1）CSS是由
css复习内容.zip
12-26
css复习内容.zip
javascript与CSS复习(二)
10-29
我们接下来讨论元素的可见性，CSS有两种不同的方式可以有效的隐藏元素，它们有各自的特点，会导致不同的结果。
javascript与CSS复习(三)
10-29
呵呵，又弄成了三部曲，这是最后一部分，关于鼠标和浏览器本身显示上的一些属性。
Css复习题.docx
03-11
Css复习题.docx
CSS实现一个雨滴滑落效果
云加速
05-28 1229
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
CSS中inset属性详细讲解
2301_79858914的博客
05-31 1007
inset属性：用于同时设置toprightbottom和left四个定位属性。正值：元素从包含块的边缘向内偏移。负值：元素从包含块的边缘向外偏移，可能超出包含块的边界。使用场景：通过正值和负值的组合，灵活地控制元素相对于其包含块的位置，从而实现各种布局效果。可以更加简洁和方便地定位和调整元素的位置，使代码更易读和维护。
8. CSS弹性布局基础
一名全栈开发工程师
05-29 1399
弹性布局（Flexbox）是一种一维布局模型，主要用于在一个方向上（水平或垂直）排列子元素。它能够让我们更轻松地创建各种复杂的布局，包括居中对齐、等宽列和灵活的项目排列。
CSS中z-index不生效的原因和解决办法
最新发布
2301_79858914的博客
05-31 625
了解堆叠上下文的创建：识别哪些属性会创建新的堆叠上下文，并了解它们对z-index的影响。管理堆叠顺序：确保在同一个堆叠上下文内正确使用z-index值，以达到预期效果。检查元素属性：如果z-index不生效，检查元素是否创建了新的堆叠上下文，调整属性如positionopacitytransform等。避免不必要的堆叠上下文：尽量减少不必要的堆叠上下文创建，使用其他方法如translate等实现视觉效果。通过理解和管理堆叠上下文，可以有效地解决z-index。
html和css复习资料
09-20
关于HTML和CSS的复习资料，我推荐以下资源： 1. W3Schools：W3Schools是一个非常受欢迎的在线学习平台，提供了关于HTML和CSS的详细教程和示例代码。你可以通过它来学习基本的HTML标签、CSS选择器和样式属性等内容。网站链接：www.w3schools.com 2. MDN Web文档：MDN提供了关于HTML和CSS的权威文档，其中包含了详细的说明、示例代码和实用的技巧。通过MDN，你可以深入了解HTML和CSS的各种概念和用法。网站链接：developer.mozilla.org 3. 阮一峰的博客：阮一峰是知名的前端开发者和技术作家，他的博客中有很多关于HTML和CSS的教程和指南。他的文章通俗易懂，＊＊＊上有很多优质的HTML和CSS教学视频，你可以通过搜索相关关键词来找到适合自己的学习资源。一些知名的频道，如Traversy Media、The Net Ninja和freeCodeCamp等，都提供了丰富的教学内容。 希望以上资源对你的复习有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值