1.2.1css简介

最新推荐文章于 2023-05-11 09:48:41 发布
最新推荐文章于 2023-05-11 09:48:41 发布
阅读量225 收藏
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45988877/article/details/126696349
版权

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 文件！

语法格式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S4t1ahOI-1662304207757)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660117492050.png)]

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

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

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

第三步：刷新当前网页

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-70bVnNKl-1662304207758)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660125248184.png)]

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;}

通用选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QiI1Smfx-1662304207759)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660287415266.png)]

标签选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rvHXJGgq-1662304207759)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660287612688.png)]

类选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iHp8wYNr-1662304207759)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660293937137.png)]

ID选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TDFig4bT-1662304207760)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660293835632.png)]

复合选择器

选择器含义举例
选择器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；}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aghFNO7Z-1662304207760)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660631508508.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kSf7FdQb-1662304207760)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660636642170.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5R7ud01k-1662304207761)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660631788767.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y8iQpNeQ-1662304207761)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660631811949.png)]

css是孙子元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j5AIiGTo-1662304207761)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660632330800.png)]

伪类选择器

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

超级链接的不同状态

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

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

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

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

超级链接的美化

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

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

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

举例：

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yI4VxSFJ-1662304207761)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660726653295.png)]

属性选择器

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

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

选择器含义举例
[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”]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VamQ8fdm-1662304207761)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660807637557.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2pfHncJ2-1662304207762)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660817967402.png)]

尺寸样式属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yInYR0WW-1662304207762)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660360942592.png)]

问：<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设置单词间距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gb66e5gd-1662304207762)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660442744411.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4mPV5va6-1662304207762)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660442998177.png)]

字体属性

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

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

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

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

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

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

列表样式属性

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

属性值含义
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. 外层元素身上的样式会被内层元素所继承

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cfM8pTCE-1662304207762)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660831559076.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-26viT5QN-1662304207763)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660831601539.png)]

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

关于继承性的问题

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

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

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

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

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

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

注意事项

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

优先级

一、先级的排序

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

二、优先级计算的方式

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

标签选择器 1

类选择器 10

ID选择器 100

行内样式 1000

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ye0TqlAF-1662304207763)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660878992597.png)]

！Important 属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxMvFiCr-1662304207763)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660899735612.png)]

!important 在 CSS 中的作用

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

注意事项

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9ZRBVwa-1662304207763)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660900134131.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8OSNogZl-1662304207764)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660900116545.png)]

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-86UlbjCA-1662304207764)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660900824640.png)]

单个标签里的多个类名

类名指的是 class 的属性值。

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNZRNcVp-1662304207764)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660901285271.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tXqhPbmE-1662304207764)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660901295952.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gwBkkbcg-1662304207764)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660903225104.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qx4h7NPp-1662304207765)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1660903399974.png)]

背景样式属性

属性值含义
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. 空白折叠现象

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UBh8qSmH-1662304207765)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661501299571.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPIxX7Ac-1662304207765)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661501315522.png)]

    2.高矮不齐，底部对齐

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1Pmj79i-1662304207765)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661501259419.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ufSC9dsg-1662304207765)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661501275681.png)]

浮动

需求:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

浮动案例

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F3JmPnxq-1662304207766)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661662271254.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oNTCjEgk-1662304207766)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661662303891.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKhVuGv7-1662304207766)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661698451182.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EUWc9vln-1662304207766)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661698469778.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cHnlmXr3-1662304207766)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661698486451.png)]

清除浮动

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

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

清除浮动的方法

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

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

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

    clear:left; 清除左浮动

    clear:right; 清除右浮动

    clear:both; 两者都清除；

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3PoCWMWB-1662304207767)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661916417730.png)]

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8d1etSDw-1662304207767)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661917185866.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4eqOWOw9-1662304207767)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1661917214041.png)]

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

盒子模型

什么是盒子?

盒子是用来存储物品 sI-

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

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

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

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

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

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2VgkSSUm-1662304207767)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1662109355169.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wkK8zc2G-1662304207767)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1662109375047.png)]

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

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

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 值不会叠加它会取较大的值.有塌陷现象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uc0hqDoB-1662304207767)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1662303389010.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8pbTqoA3-1662304207768)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1662303571042.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VT4DXXSY-1662304207768)(C:\Users\panjicong\AppData\Roaming\Typora\typora-user-images\1662303973138.png)]

为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 值不会叠加它会取较大的值.有塌陷现象

[外链图片转存中…(img-Uc0hqDoB-1662304207767)]

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

[外链图片转存中…(img-8pbTqoA3-1662304207768)]

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

[外链图片转存中…(img-VT4DXXSY-1662304207768)]

weixin_45988877
关注
CSS基础
ccyzq的博客
12-19 632
文章目录前言一、CSS概述1、CSS基本语法结构二、CSS的使用如何将HTML与CSS进行关联？三、CSS 选择器1、认识选择器（selector）2、标签选择器（元素选择器）四、CSS样式属性五、伪类、伪元素 前言 在页面排版时，内容与样式和混合设计导致页面代码过于臃肿、难维护，也不利于搜索引擎的检索层叠样式表（Cascading Style Sheets CSS）将页面内容与样式分离，极大改善了HTML在页面显示的缺陷。 一、CSS概述 CSS（Cascading Style Sheets）通常称
几种后代选择器的比较
francis_zc的博客
05-16 2025
一、后代选择器 选取指定元素的后代元素 与子元素选择器相比，后代选择器选取的不一定是直接后代（儿子），而是作用于所有后代元素（儿子、孙子、重孙…）都可以。 实例：（选取类为 box的元素的 id为aa后代元素） HTML 复制代码 emmmmmmmmmm…… 23333333333333333…… wwwwwwwwwwww QQQQQQQQQQ 复制代码 CSS .box #aa{ background: #aaf; } 二、（>）
web笔记
2303_76593060的博客
04-25 1651
HTML中的ol元素表示排序的项目列表，属性type 可设置列表符号样式，取值为1表示按数字排序，取值为A表示按大写英文字母排序，取值为a表示按小写英文字母排序，取值为I表示按大写罗马数字排序，取值为i表示按小写罗马数字排序，默认按数字排序。HTML5中的语义化元素nav可表示一个导航区，在其中可以嵌套超链接标签（a）来实现跳转，外部超链接的常用属性有href和title，href的取值为链宿的路径，title的取值为鼠标悬停在链源上显示的文本。另外，改变标记中的“type”属性值，还可以定义按钮类型。
CSS选择器常见用法总结
baidu_41298300的博客
05-01 4303
CSS基础选择器和复合选择器的详细介绍
前端CSS学习（二）
qq_50086023的博客
05-11 623
CSS学习
layui admin 1.2.1
07-21
8. **文件结构**："layuiadmin1.2.1" 压缩包内通常包含 css、js、images、fonts 和 views 等目录，分别存储样式文件、脚本文件、图片资源、字体文件和视图文件，这种结构清晰明了，便于开发和维护。 总的来说，...
layuiAdmin.std-v1.2.1.zip
07-18
layuiAdmin.std-v1.2.1.zip 是一个用于后台开发的常规版本模板，它专为后端程序员设计，旨在提升开发效率并优化用户体验。这个压缩包包含了一系列必要的文件和配置，使得开发出具有高度交互性的后台系统变得更为便捷...
[电子商务]osCSS 1.2.1_oscss_1.2.1.zip
最新发布
03-16
【电子商务】osCSS 1.2.1 是一个专门针对电子商务网站设计的前端样式库，旨在提供一套统一、美观且响应式的CSS框架。这个版本1.2.1的发布，通常意味着对之前版本的改进和优化，以提升用户体验和开发者效率。 在电子...
xm-select-v1.2.1
12-23
至于压缩包中的"dist"文件夹，它是组件的发布目录，包含了编译后的CSS、JS文件以及可能的图片资源。开发者在使用时，只需将这些文件引入到项目中，按照文档的指导进行配置，即可轻松实现多选功能。 总结来说，xm-...
layuiAdmin.v1.2.1 std.rar
05-27
在 layuiAdmin.v1.2.1 std 版本中，可能包含的子文件有：基础样式文件（CSS）、JavaScript 文件、图片资源、字体图标、HTML 模板、示例页面文件以及可能的配置文件等。安装使用时，通常需要将这些文件部署到服务器，...
致自己：CSS学习笔记二
sinat_42285508的博客
03-12 520
CSS2 1、选择器进阶 1、复合型选择器 1、后代选择器 1、作用：根据HTML嵌套关系，选择父元素后代中满足条件的元素。 2、语法：选择器1 选择器2{CSS属性名：属性值；}； 3、结果：在选择器1的后代（儿子、孙子、重孙子…）中找到满足条件的选择器2的标签，设置样式。 4、注意点： 后代包括：儿子、孙子、重孙子… 后代选择器中：选择器与选择器之间使用空格隔开 5、代码示例： <!DOCTYPE html> <html lang="en"> <head>
CSS常用属性
qq_52843224的博客
10-31 1036
css的一些简单属性
css中后代元素选择器和子元素选择器
qq_42931285的博客
03-16 3600
后代元素选择 —— 空格 匹配所有属于A元素后代的B元素，A和B之间用空格分隔。 子元素选择器 —— > 匹配所有A元素的子元素B（直接子元素）。一定要是直接后代才行，如果是孙辈以下的就不行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g.
css中后代元素和子元素的区别
q285661571的专栏
04-10 9874
后代元素表达方式：例：#main p{ color:red; } 子元素：表达方式：例：#main>p{ color:red; } 后代元素包括子元素，孙子元素，重孙子元素.........
css的子元素选择器和后代元素选择器
学而不思则罔 思而不学则殆
05-17 3668
css 的子元素选择器 自元素表示儿子 孙子不可以       后代选择器   儿子和孙子 重孙子 所有的后代都起作用
css 所有后代元素,CSS 选择子元素和后代元素
weixin_42300090的博客
08-04 4955
内层11内层12内层21子元素概念:如上代码 , id 为 container 的div元素 包含了 id 为 layer1 和 layer2 的两个div元素。这种包含是直接包含， 中间没有其他的层次的元素了。 所以 id 为 layer1 和 layer2 的两个div元素 是 id为 container 的div元素的直接子元素而 id 为 layer1 的div元素 又包含了 id 为 i...
css后代选择器，子元素选择器
haha_hello的博客
02-10 8568
一，后代选择器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12-css后代选择器.html</title> <!-- 后代选择器,找到指定特定的标签的所有后代,然后设置属性 1,格式: 标签名称1 标签名称2 ...{
css中 后代元素 和 子元素的表示方法
iteye_4712的博客
08-05 1032
 在css中的表示        #log    span   // id =“log” 元素的后代元素中的所有&lt;span&gt;元素         #log &gt; span   // id =“log” 元素的子元素中的所有&lt;span&gt;元素   后代元素包括了 子元素 、 孙子元素 、重孙子元素 等等 范围更大 加了 &gt; 符号，说明只是子元素 ，范围小一...
CSS入门：详解选择器及其用法
- **1.2.1 标签选择器**：通过HTML标签名称来选择元素，如`div`、`p`等。常用属性包括`color`（文字颜色）、`background-color`（背景颜色）、`font-size`（文字大小）、`width`和`height`（设置尺寸）、`text-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值