css | 青训营笔记

用户1320468246909
268 阅读25分钟

css简介

​ CSS (Capcading Style Sheets 的缩写)，翻译为“层叠样式表”或者“级联样式表”，简称样式表

css主要作用

​ 它主要是用来给 HTML 网页来设置外观或者样式。

​ 外观或者样式，HTML 网页中的文字的大小、颜色、字体，网页的背景颜色、背景图片。

书写css的语法规则

  • css代码是由选择器和一对括号组成
  • 每一条语句都要使用英文状态下面的分号
  • 每一条语句是有“属性：值”组成
  • CSS 中的属性值一般不加引号
  • 在 CSS 中如果属性值为数值型数据的时候，一般情况下需要加单位，单位一般都是 px（像素）
  • 在 CSS 中不能出现 HTML 标签

h1 {color:red;font-size:14px;}

CSS代码的书写方式

css代码的书写方式：嵌入式、外链式、行内式

嵌入式

​ 将css代码嵌入到HTML文件中，嵌入式是通过HTML中的<style>将css代码嵌入到HTML网页中！

​ 语法规则:

	\<style type="text/css">

​		/*书写css代码\*/
		选择器{属性:值;属性:值}
div{
            width: 100px;
            height: 100px;
            background-color: #FF0000;
        }
    </style>
</head>
<body>
    <!--要使用css代码给div设置宽度100像素高度100像素以及背景为红色
    把div理解为一个存放东西的盒子
    -->
    <div></div>
</body>
</html>

注意：<style></style> 它可以出现在 HTML 中的任何地方，但是一般情况我们只会将它放置在 head 标签里面

外链式

外链式是指单独写一个以 .css 为扩展名的文件，然后在 标签中使用 标签，将这个 css 文件链接到 html 文件中。

注意：Css 文件不能单独的运行，它必须要依赖于 HTML 文件！

语法格式：

1660117492050

为了确保 css 文件被成功录入，需要进行如下检查：

第一步：在当前页面点击鼠标右键，选择“检查

第二步：找到 “Network” 选项卡

第三步：刷新当前网页

第四步：查找 networkd 选择卡中的 status ，状态如果是“成功”就表示文件已经被加载

如果是“失败"就表示文件没有加载。

1660125248184

Link 标签可以有多个，一个 HTML 页面可以同时的引入多个单独的 CSS 文件。

行内式

将 Css 代码书写在 HTML 标签的 style 属性中

style 是一个通用属性，每一个标签里面都拥有这个属性！

语法格式：

<标签名 style=“属性:值;属性:值;”></标签名>

<

!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>嵌入式</title>
    <style type="text/css">
​        /*嵌入式*/
​        /*
​        选择器{属性：值}
​        */
​        div{
​            width: 100px;
​            height: 100px;
​            background-color: #FF0000;
​        }
​    </style>
</head>
<body>
​    <!--要使用css代码给div设置宽度100像素高度100像素以及背景为红色
​    把div理解为一个存放东西的盒子
​    -->
    <div></div>
</body>
</html>

总结

  • 使用嵌入式的方式来书写来书写css代码，它只能作用于当前的HTML文件
  • 使用外链式的方式来书写CSS代码，它可以作用于多个HTML文件

注释

格式：/*注释的内容*/

千万不要在 CSS 代码中使用 HTML 的注释<！------>

选择器

​ 选择器指通过一定的语法规则选取到对应的 HTMI 标记，然后给这个对应的 HTMI 标记设置样式。

​ 选择器的四大类：基本选择器、复合选择器、伪类选择器、属性选择器

选择器格式含义举例
通用选择器*{属性：值；}通用选择器，将匹配HTML所有标签。不建议使用。IE6不支持，给大型网站增加负担*{margin:0px;}
标签选择器标签名{属性:值;}标签选择器，匹配对应的HTML标签p{font-size:14px;}
类选择器.class属性值{属性:值；}类选择器，给拥有指定的CLASS属性值的元素设置样式.box{width:800px;}
Id选择器#id属性值{属性:值;}Id选择器可以为标有特定ID的HTML元素指定特定的样式，只能使用一次。ID选择器以”#”来定义。#title{font-size:14px;}

通用选择器

1660287415266

标签选择器

1660287612688

类选择器

1660293937137

ID选择器

1660293835632

复合选择器

选择器含义举例
选择器1，选择器2{属性：值}多元素选择器多元素选择器同时匹配选择器1和选择器2，多个选择器之间用逗号分隔p,h1,h2{marqin:0px}
E F{属性：值}后代元素选择器后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔#slidebar p{font-color:#990000:}
E>F{属性：值；}子元素选择器子元素选择器，匹配所有E元素的子元素Fdiv>p{color:#990000;}
E+F{属性：值；}相邻元素选择器相邻元素选择器，匹配所有紧随E元素之后的同级元素Fdiv+div{color:#990000；}

1660631508508

1660636642170

1660631788767

1660631811949

css是孙子元素

1660632330800

伪类选择器

​ 伪类选择器是用来给超级链接的不同状态来设置样式

超级链接的不同状态

  • 正常状态 超级链接没有被访问 :link
  • 访问过后状态 超级链接已经被访问 :visited.
  • 鼠标放上状态 鼠标放在超级链接上面，但是并没有将鼠标的左键按下去 ：hover
  • 激活状态 鼠标左键已经按下去了，但是并没有将鼠标的左键弹出:active伪类选择器都是带有冒号“：”
选择器含义
:link向未被访问的链接添加样式。
:visited向已被访问的链接添加样式。
:hover当鼠标悬浮在元素上方时，向元素添加样式。
:active鼠标放在元素上面时，点击的一瞬间

超级链接的不同状态它其实是有顺序。也就是说伪类选择器设置其实是有顺序。

如果不按照伪类选择器的顺序，那么样式就会失效。

顺序：要遵守“爱恨准则”要先有爱，才有恨。“Love Hate”

超级链接的美化

​ 通常会去掉超级链接的下划线，同时给超级链接设置颜色。

​ 一般情况下：正常状态与访问过后的状态的样式设置为一致

​ 当鼠标经过时给其设置另外一种颜色。激活状态一般不设置，因为激活状态的时间太短。

举例：

​ a:link,a:visited {去掉超级链接的下划线;设置一个颜色;}

​ a:hover {设置另外一个颜色;增加一张下划线;}

1660726653295

属性选择器

属性选择器它是与标签的属性名和属性值有关。

属性选择器是通过标签的属性名和属性值来匹配元素。

选择器含义举例
[attr]匹配所有具有attr属性的元素不考虑它的值h1[align]{......} input[type][size]{......}
[attr="val"]匹配所有attr属性值等于val的元素h1[align=“center”]{......} 属性值一般加引号
[attr^="val"]匹配元素中att属性以指定值开头的所有元素Font[color^="#ff"]
[attr$="val"]匹配元素中att属性以指定值结尾的所有元素Font[color^="#00"]
[attr*="val"]匹配元素中att属性包含指定值结尾的所有元素Font[color^="#00"]

1660807637557

​ 先匹配到P标签，再来判断P标签里面是否有align这个属性如果有就匹配到如果没有就匹配不到

1660817967402

尺寸样式属性

1660360942592

问：<span></span>能够设置宽度、高度吗？

答：不可以，因为 span 标签是一个行内函数，它是不可以设置宽度和高度的，只有块级元素才可以设置宽度与高度，span 标签的宽度和高度只由它的内容决定。

文本属性

属性名值含义
color.#ff0000 或 red 或 rgb(3,5,8)给文本设置颜色。
text-aligneleft(居左)、right(居右)、center(居中）设置文本的水平对齐方向。
text-decorationnone(去掉文本修饰线)、设置文本修饰线。underline(下划线),、overline(上划线)、line-through(删除线)设置文本修饰线
text-transformecapitalize、uppercase 、lowercase大小写转换或者首字母大写
Line-height固定值或百分比设置行高
text-indentpx 或者 em设置首行缩进允许负值。
letter-spacingpx设置字符间距
word-spacingpx设置单词间距

1660442744411

1660442998177

字体属性

属性名：font-style值：normal(正常)、(italic)斜体 功能：设置文本为斜体。

属性名：font-weight 值 normal(正常)、bolde 功能：设置文字粗细。

属性名：font-size 值：如12 px、14 px。功能：给文本设置大小。

属性名：font-family 值：微软雅黑、楷体、宋体.... 功能： 给文本设置字体。

属性名：font 值：举例：font:italic bold 14px“微软雅黑 功能：简写属性能够同时给文本设置斜体、加粗、大小、字体每一个值之间需要使用空格 并且一定要有顺序。

关于字体：一般很特殊的字体 网站上面都是使用图片来表示。是否能够显示此字体是根据用户电脑里面是否有对应的字体文件，如果没有该文件就会显示为宋体。

        .zhang{             font-style: italic;/*将文本设置为斜体*/             font-weight: bold;/*将文本设置加粗效果*/             font-size: 36px;/*设置文本的大小*/             font-family: "黑体","微软雅黑","宋体";         }         i{             font-style: normal;/*将斜体恢复正常*/         }         b{             font-weight: normal;/*将加粗效果恢复正常*/         }         .lin{             font-style: italic;             font-weight: bold;             font-size: 24px;             font-family: "楷体";         }    

列表样式属性

列表：无序列表和有序列表（整个网页中无序列表是使用最多的）

属性值含义
list-style-typenone (将列表前面的项目符号去掉),disc (实心园),square (实心小方块),circle (空心园)设置列表前项目符号的类型。
list-style-positioninside (在里面), outside (在外面)设置列表项标记的放置位置。
list-style-imageurl (图像路径)将图象设置为列表项标记。
list-stylesquare insideurl(arrow.gif)在一个声明中设置所有列表属性

ist-style：这个属性是一个简写属性，它集成了上面三个属性的功能。可以同时设置上面的三个属性，每个属性值之前使用空格分隔！它的属性值可以有一个也可以有两个也可以三个。其属性值个数不定，位置也不定！

list-style：去除列表前面的项目符号

list-style：none inside url （./images/li01.jpg)

或者

none url （./images/li01.jpg）也可以执行

<!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>列表样式属性</title>

    <style type="text/css">

​        /*后代元素选择器*/

​        .box ul{

​           /* list-style-type: none;/*去除列表前的项目符号*/

​        }

​        .box ul li{

​            border: 1px solid#f00;

​            height: 35px;/*要将文本在一个盒子里面垂直方向居中对齐

​            要将高度与行高设置为一样

​            */

​            line-height: 35px;

​            /* list-style-position: outside; */

​            /* 第一步 ：将列表前面的项目符号去掉*/

​            list-style-type: none;

​            /* 将列表前面的符号换成一张图片 */

​            /* list-style-image: url(image/01.jpg); */

​            /* 使用简写属性 */

​            list-style: none url(./image/01.jpg) inside;

​        }

​    </style>

</head>

<body>

    <div class="box">

​        <h2>请列出中国的四大名著</h2>

​        <ul>

​            <li>西游记</li>

​            <li>红楼梦</li>

​            <li>水浒传</li>

​            <li>三国演义</li>

​        </ul>

​    </div>

</body>

</html>

列表样式属性例子

<!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>列表样式属性案例</title>
  <style type="text/css">
 /* 第一步：需要给div设置一个边距并且让这个div在浏览器上面是居中显示 */
  .box{
		 width: 500px;
		 border: 1px solid #ccc;
  /* 外边距 HTML中的表格标记属性 cellspacing 单元格与单元格之间的距离 在CSS中盒子与盒子之间的距离也称为外边距 margin
 */
  margin-left: auto; /*将左外边距设置为自动*/
​            margin-right: auto;/*将右外边距设置为自动*/
​        }
​        .box h2{
​            border: 1px solid skyblue;
​            height: 40px;
​            line-height: 40px;
​            color: aquamarine;
​            font-weight: normal;
​        }
​        .box li{
​            list-style-type: none;
​            height: 30px;
​            line-height: 30px;
​            border: 1px solid #f00;
​            /* list-style-image: url(./image/01.jpg); */
​            /* 简写属性 */
​            list-style: none url(./image/01.jpg);
​        }
​    </style>
</head>
<body>
    <div class="box">
​        <h2>新闻频道</h2>
​        <ul>
​            <li><a href="#">为了更快融入星球大家庭、让鱼皮和大家了解你</a></li>
​            <li><a href="#">为了更快融入星球大家庭、让鱼皮和大家了解你</a></li>
​            <li><a href="#">为了更快融入星球大家庭、让鱼皮和大家了解你</a></li>
​            <li><a href="#">为了更快融入星球大家庭、让鱼皮和大家了解你</a></li>
​            <li><a href="#">为了更快融入星球大家庭、让鱼皮和大家了解你</a></li>
​        </ul>
​    </div>
</body>
</html>

继承性

继承性的特点

  1. 外层元素身上的样式会被内层元素所继承

    1660831559076

1660831601539

2.如果内层元素与外层元素身上的演示相同时，外层元素的样式会被内层元素所覆盖

关于继承性的问题

是不是所有样式都能被继承？

答：并不是所有样式能被继承，只有文本与字体样式属性能被继承，其他样式属性不能被继承

给 div 标签来一个边框 border：1px solid #ccc

div 标签相对于 h2 标签和p 标签来说 它是一个外层元素

现在给外层元素设置一个边框的样式 这个边框会不会被继承

如果会 h2 和 p 标签都会有一个边框

注意事项

在实际工作中，我们往往会给 boby 标签设置字体大小以及字体颜色，因为 boby 标签是最外层的元素，内层的元素会继承外层的元素样式。

优先级

一、先级的排序

行内样式> ID 选择器>类选择器>标签选择器

二、优先级计算的方式

一般而言，选择器指向的越准确，优先级就会越高，通常我们会用1表示标签选择器的优先级，用10来表示类选择器的优先级，用100来表示 ID 选择器的优先级，用1000来表示行内样式

标签选择器 1

类选择器 10

ID选择器 100

行内样式 1000

值越大表示其优先级越高。

不管是单个选择器还是多个选择器组合他们之前的优先级都可以通过上面这个公式来进行计算，我们将其只称之为权重值权重值越大，就会表示其优先级越高。

1660878992597

！Important 属性

1660899735612

!important 在 CSS 中的作用

它主要是用来提升属性的女重。其属性的权重值无穷大

注意事项

  1. ！important 它是提升的属性的权重，而不是提升选择器的权重

    1660900134131

    1660900116545

    ​ 文本的颜色是听加了！important 的属性， 文本的大小是听 ID 选择器的 因为！important 它只是提升了属性的权重并没有提升选择器的优先级。

  2. ！important 它不能提升继承过来的权重!

1660900824640

单个标签里的多个类名

类名指的是 class 的属性值。

一个标签内可以携带多个类名，指的是 class 的属性值可以有多个，每一个属性值之间使用空格分隔。

1660901285271

1660901295952

​ **$代表序列1，2，3，{}**代表的是尖括号的表示内容

1660903225104

​ 一个标签内有多个类名，它们设置的样式如果一样，那么就会存在样式冲突以 css 中的代码作为标准，谁写在后面就以谁作为标准，和 HTML 中的 class 属性值顺序没有关系。

1660903399974

背景样式属性

属性值含义
background-color#ff0000、red.rgb(255,0,0)背景颜色
background-imageurl(图像路径和名称);背景图像
background-repeatrepeat、repeat-x(水平方向)、repeat-y(垂直方向)、no-repeat背景图像是否重复
background-positioncenter center 或 x% y% 或 xpos ypos背景图像起始位置
background-attachmentscroll (滚动)、fixed (固定)设置背景图像是否固定或者随着页面的其余部分滚动。
backgroundurl(1.ipga) no-repeat center center fixed设器背景的简写形式

注意：

l background-color: 用于给元素设置背景颜色但是前提这个元素要么有内容，要么有宽度和高度才可以。

l background-position：水平位置 垂直位置 这两个位置的表示方式有三种 英文单词 固定值 百分比 这三种方式可以混合使用 可以同时使用英文单词或者是固定值或者是百分比

l 英文单词的表示方式

l 水平位置：left（居左）, center(居中), right(居右)

l 垂直位置：top（居上）, center(居中), bottom(居下)

l 固定值的表达方式

l 百分比的表达方式

l Background： 简写属性 它可以同时设置多个样式 比如背景颜色，背景图片，背景图片是否平铺 水平位置 垂直位置

l Background：简写属性 其值的个数不定 顺序也不一定 每一个值之前使用空格分隔

标准文化流

一、什么是标准文档流

在制作的 HTML 网页和 PS 画图软件画图时有本质上面的区别:

HTML 网页在制作的时候都得遵循一个“流的规则:从左至右、从上至下。

使用 Ps 软件画图时可以在任意地方画图。

二、标准文档流注意事项

  1. 空白折叠现象

    消除空白：让这些元素放在同一行，使这些元素紧密相连。

    1661501299571

    1661501315522

    2.高矮不齐，底部对齐

    1661501259419

    1661501275681

浮动

需求:

能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度!让多个元素排在同一行:行内元素的特性

给这些元素设置宽高:块级元素的特性

在标准文档流中的元素只有两种:块级元素和行内元素。如果想让一些元素既要有块级

元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。

浮动可以让元素脱离标准文档流就可以实现让多个元素排在同一行并且可以设置宽高!

浮动它是通过一个浮动属性来实现

float:这个属性有两个值left(向左浮动)向左移动、right(向右浮动)

向右移动浮动元素的特性:

l 浮动元素它脱离标准文档流它不再占用空间了

l 我们可以把浮动元素理解为“漂”

l 浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住

l 浮动元素它遇到了父元素的边框然后就停止了浮动

l 浮动元素它还会遇到上一个浮动元素后就停止了浮动

l 浮动元素浮动以后 其父元素不会再包裹着浮动元素

l 我们将行内元素进行浮动以后 那么这个行内元素它会变成块级元素

浮动案例

  • 通用选择器来去除HTML中所有标签的默认内填充与外边距就不会影响到我们的排版布局了

    1661662271254

1661662303891

1661698451182

1661698469778

1661698486451

清除浮动

​ 经过浮动的元素，会影响到下面的元素的排版布局，浮动元素的父元素没有将浮动元素包裹着。

​ 清除了浮动不会影响到浮动元素的下面进行排版布局﹐浮动元素的父元素会将浮动元素从视觉上包裹着。

清除浮动的方法

  1. 给浮动元素的父元素设置一个固定的高度。（不建议使用）因为一个元素的高度不是手动设置的 他应该是由其自身的内容撑高的

  2. 使用清除浮动的样式属性 clear

    clear 是专用于来清除浮动 clear 有三个值

    clear:left; 清除左浮动

    clear:right; 清除右浮动

    clear:both; 两者都清除；

    clear 一般是用在最后一个浮动元素的下面，在最后一个浮动元素的下面新建一个空白的 div ，里面不放置内容，只用作清除浮动。

    1661916417730

  3. 使用overflow:hidden 这个属性来清除浮动

    overflow 是一个属性 overflow:hidden 原意是用来将溢出的部分进行隐藏 还可以用于清除浮动

1661917185866

1661917214041

​ 因为在无序标签中无法再添加一个空白的div来清除，故采用行内样式 overflow来对列表清除

盒子模型

什么是盒子?

盒子是用来存储物品 sI-

思考一下:一个盒子是由哪些部分进行组成 !v 我们可以将一个盒子理解为一个快递的包裹:v

有内容+有填充物+纸盒子 v

那我们如何去理解 csS 中的盒子呢?“

在 css 中一个盒子的组成部分:内容 (content) +内填充 (padding) +边框(border) +外边距( margin) 一个盒子中的主要属性: width、height、padding、border、marginu

width: 指“宽度”的意思﹐但是这里的宽度指的盒子里面的内容的宽度―而不是盒子的宽刻

hegiht: 指“高度”的意思﹐但是这里的高度指的盒子里面的内容的高度而不是盒子的高度v

padding: 是“内填充”的意思，指的盒子里面的内容到盒子边框的距离

border:是“外边框”的意思指的盒子的边框

margin: 是“外边距”的意思指的是盒子与盒子之间的间距。

1662109355169

1662109375047

一个盒子的总宽度=盒子里面内容的宽度+左右两边的填充+左右两边的边框线

盒子的高度是不用设置的，因为一个盒子的高度他应该是由其内容来决定的

padding

Padding 是“内填充”的意思，指的是盒子中间的内容到边框这一段的距离，padding 有4个方向

描述四个方向 padding 的2种方法：

小属性

Padding-top：上内填充

Padding-right：右内填充

Padding-bottom：下内填充

Padding-left：左内填充

简写属性

Padding：这个属性是有方向的，同时表示4个方向，这个属性的方向是顺时针方向：上，右，下，左，这个顺序

Padding：20px； 表示上右下左四个方向填充都为20像素

Padding：10px 20px；表示上下为10像素，左右为20像素

Padding：10px 20px 30px；表示上为10像素，左右为20像素，下为30像素

Padding：10px 20px 30px 40px；表示上为10像素，左为20像素，右为30像素，下为40像素

margin

margin 它表示“外边距”的意思它是指盒子与盒子之间的距离

margin 的描述方法

margin 它也是有4个方向的所以我们也能够通过4个方向对其进行描述方法有两种:第一种我们称之为小属性，第二种我们称之为简写属性小属性:,

**1.**小属性

margin-top: 上外边距。margin-right:右外边距,margin-bottom:下外边距。margin-left:左外边距·

**2.**简写属性

margin: 简写属性它是有方向的这里的方向是一个顺时针的方向―它的方向是的顺序是:上、右、下、左。

范例：

margin:10px;表示上右下左这四个方向的外边距都是10像素。

margin:10px 20px;表示上下这两个方向的外边距为10像素︰左右两个方向的外边距为20像素。

margin:10px 20px 30px;表示上外边距为10像素左右外边距为20像素下外边距为30像素,

margin:10px 20px 30px 40p;表示上外边距为10像素右外边距为20像素下外边距为30像素左外边距为40像素。

margin 塌陷现象

1、在标准的文档流中竖直方向的 margin 值不会叠加它会取较大的值.有塌陷现象

1662303389010

2、横着方向是没有 margin 的塌陷现象.

1662303571042

3、浮动元素它是没有 margin 的塌陷现象的·

1662303973138

margin居中

  1. 使用 margin 来实现水平居中时，一定要有固定的宽度（给这个盒子设置一个宽度）只有块元素可以实现水平居中，行内元素不能实现居中

    1662391151690

    1662391184523

  2. 只有标准文档流中的盒子才可以使用 margin 来实现水平居中

1662391280219

float:left不是标准文档流里的盒子

3.margin 属性是用来实现盒子的水平居中，而不是文本的水平居中

相反属性：

text-align 这个属性是用于实现文本的水平居中，值为 center 表示文本水平居中，不能实现盒子水平居中

text-align：center；/*只能实现文本水平居中*/
margin：20px auto；/*只能实现元素的水平居中*/

1662391878722

根据例题探究善于使用父元素的 padding 而不使用子元素的 margin 的两种方法

1662452588003

要解决上图的问题，有两种方法可以解决

第一种方法：给其父元素设置一个边框线

​ 但这种方法不常用，因为边框一般主要是用来调试代码的 很少会给一个盒子设置变宽

第二种方法：不要使用子元素的margin而要使用父元素的padding

​ margin这个属性它本意是用来描述兄弟与兄弟元素之间的关系 不是用于描述父子元素之间的关系的 如果是父子元素的关系就最好使用给其父元素设置padding属性1662454189837

边框

img

其实边框也是有四个方法的:

border-top: 上边框

border-right: 右边框。

border-bottom: 下边框

border-left: 左边框

1662477707922

display属性

​ 它是“显示”的意思，用来进行行内元素与块级元素之间的相互转换！将隐藏的元素显示或者将显示的元素进行隐藏。

​ Display 属性取值：inline (行内)、block (块级)、none (无)

​ 将一个行内元素的 display 属性值设置为 block 后，这个元素就会被转换为块级元素

​ 将行内元素转换成块级元素，这个元素就会拥有块级元素的特点

​ 将块级元素转换成行内元素，这个元素就会拥有行内元素的特点

​ 将一个显示的元素隐藏,将一个隐藏的元素显示

​ display: none (将一个显示的元素进行隐藏)

​ display: block (将一个隐藏的元素进行显示)

​ 这两个功能是 java Script 使用

display属性的综合案例

1662539967591

1662539898769

​ 在没有将a标签从行内元素转换为块级元素时，只有将鼠标放在文字上才会显示

1662540320437

用display改变元素类型之后给a标签设置宽高转换为块状元素

固定定位

固定定位，它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变！

特点:

  • 固定定位元素它脱离了标准文档流
  • 固定定位元素的的层级比标准文档流里面的元素要高所以固定定位元素它会压盖住标准文档流里面的元素
  • 固定定位元素它不再占用空间
  • 固定定位元素它显示的位置不会随着浏览器滚动而滚动

快捷方式写列表与a标签 div.nav>div.inner_c>ul>li*10>a{填写的内容}

<!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>使用固定定位来实现顶部的导航栏</title>
    <style type="text/css">
​        *{
​            margin: 0
​            padding: 0;
​        }
​        .nav{
​            width: 100%;
​            height: 60px;
​            background-color: #222222;
​            /* 使用固定定位 */
​            position: fixed;
​            left: 0px;
​            top: 0px;
​        }
​        .nav .inner{
​            width: 1000px;
​            height: 60px;
​            margin: 0px auto;
​            /* background-color: #f00; */
​        }
​        ul{
​            list-style: none;
​        }
​        ul li{
​            float: left;
​            width: 100px;
​            height: 60px;
​            line-height: 60px;
​            text-align: center;
​        }
​        ul li a{
​            display: block;
​            width: 100px;
​            height: 60px;
​            color: aliceblue;
​            font-weight: bold;
​        }
​        ul li a:hover{
​            background-color: gold;
​        }
​        body{
​            padding-top: 60px; ;
​        }
​    </style>
</head>
<body>
    <div class="nav">
        <div class="inner">
​            <ul>
​                <li><a href="">网站栏目</a></li>
​                <li><a href="">网站栏目</a></li>
​                <li><a href="">网站栏目</a></li>
​                <li><a href="">网站栏目</a></li>
​                <li><a href="">网站栏目</a></li>
​                <li><a href="">网站栏目</a></li>
​                <li><a href="">网站栏目</a></li>
​                <li><a href="">网站栏目</a></li>
​                <li><a href="">网站栏目</a></li>
​                <li><a href="">网站栏目</a></li>
​            </ul>
​        </div>
​    </div>
    <img src="./image/wo.jpg">
    <img src="./image/wo.jpg">
    <img src="./image/wo.jpg">    
    <img src="./image/wo.jpg">
    <img src="./image/wo.jpg">
    <img src="./image/wo.jpg">
    <img src="./image/wo.jpg">
</body>
</html>

相对定位

相对定位相当于“自己”来定位；

语法：position: relative;

特点：

1.相对定位元素它没有脱离标准文档流

2.相对定位元素没有设置定位坐标，那么相对定位元素还在原来位置

1662603461665

3.相对定位元素设置了定位坐标，就会在原位置留下一个空白元素

4.相对定位元素会将标准文档流中的元素压盖住

1662603657400

5.相对定位元素的定位值可以为负数

1662603678957

相对定位元素一般很少单独使用，主要是用来配合“绝对定位”元素来使用

1662606436763

绝对定位

语法:position:absolute;

什么是绝对定位?

绝对定位元素是相对于“祖先定位元素”来进行定位!

什么是祖先定位元素?

绝对定位元素它会先去查找其父元素是否设置了定位的属性，如果有设置定位的属性那么它就会相对于其父元素来进行定位;但是如果它的父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性,如果有设置就相对于其父元素的上一级元素进行定位，但是如果没有设置，那么会继续往向一级进行查找，如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”来进行定位!

特点

绝对定位元素它脱离了标准文档流。

绝对定位元素它不再占用空间。

绝对定位元素它会压盖住标准文档流中的元素。

绝对定位元素他会相对于其祖先定位元素来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位，但是我们一般只会给其祖先定位元素设置相对定位属性

“子绝父相”子元素设置绝对定位父元素设置相对定位。

1662621139704

div2 是一个绝对定位元素它先去查找其父元素是否设置了定位属性.box 没有设置定位的属性 那么 .div2 它还会去查找其父元素的，上一级元素是否设置了定位属性 .boxp这个元素它设置了相对定位属性现在 .div2 它就会相对于 .boxp 来进行定位

离 .boxp 这个元素的右边0个像素

离 .boxp 这个元素的，上边0个像素

1662623176642

1662623979872

	问题：如果当前元素的父元素与其爷爷元素都设置了相对定位，那么请回答当前的绝对定位元素它会相对于“谁”来进行定位？

​ 答：当前的绝对定位元素它会相对于其父元素来进行定位，也就是说当绝对定位元素查找到了其祖先元素已经设置了定位的属性就不会查找上一级元素。

z-index 属性

Ø z-index 表示谁压盖着谁，数值大的会压盖住数值小的

Ø 只有定位的元素才有 z-index 值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有 z-index

Ø z-index 的值是没有单位的,值是一个正整数,默认的 z-index 的值是0

Ø 如果定位元素没有设置 z-index 属性或者 z-index 值设置一样,那么写在 HTML 后面的定位前面的定位元素

.div1 与.div2都设置了绝对定位,所以它们就拥有了 z-index 属性,但是并没有给其设置 z-index 属性。没有设置 z-index 属性那么它们的值就为0

我们要观察 HTML 中的结构 .div1 这个元素它写在 .div2 的后面然后就能知道 .div1 这个元素就会压盖住 .div2

1662650489029

1662686879161

如果做了一个导航条，需要将z-index设置为超大的数值，以免后续的定位压盖住导航条

1662688245799

1662688290082

CSS3与CSS2之间的区别

css3=css2+新语法+新的属性

是对 css2 进行扩充 删减 优化

结构伪类

选择器 功能

1.E:first-child 匹配第一个孩子

2.E;last-child 匹配最后一个孩子

3.E:nth-child(n) 匹配第n个孩子

4.E:nth-child(2n)或 匹配偶数的孩子

E:nth-child(even)

5. E:nth-child(2n+1) 匹配奇数的孩子

E;nth-child(odd)

6.E:only-child 匹配有且只有一个孩子

1662693861664

利用结构伪类实现变色表格

1662694108361

伪元素

选择器 功能

:first-letter 操作当前元素中第一个字

:first-line 操作当前元素中第一行

:before 在之前插入，在一一个盒子内部的最前面

:after 在之后插入，在一个盒子内部的最后面

1662708572387

文本阴影

text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色。

注释: text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。

描述:

●文字阴影可以有多组值，多组之间用逗号隔开就可以。

●水平阴影正值阴影在右边，负值在左边。

●垂直阴影正值在下边，负值在上边。

●模糊强度，值越大越模糊。

两组阴影分隔

1662716010089

盒子阴影

水平方向阴影、垂直方向阴影、模糊距离、阴影尺寸、阴影颜色、内/外阴影

1662870353532

特点

  • 盒子阴影可以有多组值，多组之间用逗号隔开。

  • 水平阴影正值阴影在右边，负值在左边。

  • 垂直阴影正值在下边，负值在上边。

  • 模糊尺寸，值越大越模糊

1662870483262

圆角矩形

Border-radius：左上 右上 右下 左下

1662879598693

1662887776493

案例

<!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 type="text/css">
​        body{
​            background-color: #ccc;
​        }
​        .more{
​            width: 60px;
​            height: 20px;
​            background-color: #fff;
​            text-align: center;
​            line-height: 20px;
​            margin: 100px auto;
​            border-radius: 10px;
​            font-size: 12px;
​            font-family: "微软雅黑";
​        }
​        a{
​            height: 20px;
​            width: 60px;
​            display: block;
​            border-radius: 10px;
​        }
​        a:link,a:visited{
​            color: #000;
​            text-decoration: none;
​        }
​        .more a:hover{
​            background-color: #f00;
​            color:#fff;
​        }
​    </style>
</head>
<body>
    <div class="more"><a href="#">更多</a></div>
</body>
</html>

透明度

CSS 透明度

只要是颜色，都可以用透明度

Rgba（红色，绿色，蓝色，透明度）

a：表示透明度的意思 透明度取值：0~1之间 0表示完全透明 1表示不透明

  • 背景颜色透明
avatar
文章
阅读
粉丝