前端 -- CSS基础

最新推荐文章于 2024-10-10 10:46:31 发布
最新推荐文章于 2024-10-10 10:46:31 发布
阅读量256 收藏 1
点赞数 2
分类专栏： 前端 文章标签： 前端 CSS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41361296/article/details/103416078
版权

文章目录

一、CSS概念

CSS（Cascading Style Sheet，级联样式表）。
表现 HTML 或 XHTML 文件样式的计算机语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

二、CSS优势

  • 内容与表现分离
  • 网页的表现统一，容易修改
  • 丰富的样式，使得页面布局更加灵活
  • 减少网页的代码量，增加网页的浏览速度，节省网络带宽
  • 运用独立于页面的CSS，有利于网页被搜索引擎收录

三、CSS语法

1. 基本语法结构

选择器{
	声明1;
	声明2;
	...
}

声明包含属性和值。
最后一条声明后的";"可写可不写，但是，基于W3C标准规范考虑，建议写上。

示例：

h1{
	font-size: 12px;
	color: #F00;
}

2. <style>标签

<style type="text/css">
	h1{
		font-size: 12px;
		color: #F00;
	}
</style>

3. HTML中引入CSS样式

3.1 行内样式

<h1 style="color:red;">text</h1>
<p style="font-size: 14px; color: green;">text</p>

使用 style 属性引入 CSS 样式，该样式为直接在 HTML 标签中设置的样式。

3.2 内部样式表

<head>
	...
	<style>
		h1{
			color: green;
		}
	</style>
	...
</head>

CSS 代码写在<head>标签的<style>标签中。
优点：方便在同页面中修改样式。
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底。

3.3 外部样式表

CSS 代码保存在扩展名为 .css 的样式表中。
HTML 文件引用扩展名为 .css 的样式表，有链接式和导入式里两种方式。

3.3.1 链接式外部样式表：
<head>
	...
	<link href="path" rel="stylesheet" type="text/css"/>
	...
</head>

href：导入 css 文件的路径
rel：属性用于定义链接的文件和 HTML 文档之间的关系，此处为使用外部样式表。
type：说明外链文档的的类型。

<link>标签 一般都放在头部的<head>标签里
导入 css 文件时，rel 和 type 属性不需要改，就只需改 href 对应的 css 文件路径即可。

3.3.2 导入式外部样式表
<head>
	...
	<style type="text/css">
		@import url("path");
	</style>
</head>

type：说明外链文档的的类型。
import：导入资源。
href：导入 css 文件的路径。

3.3.3 链接式和导入式的区别
  • <link>标签属于 XHTML，@import 属于 CSS2.1
  • 使用<link>标签链接的 CSS 文件先加载到网页中，再进行编译显示
  • 使用 @import 导入的 CSS 文件，先是客户端显示 HTML 结构，再把 CSS 文件加载到网页中
  • @import 是属于 CSS2.1 特有的，对不兼容 CSS2.1 的浏览器是无效的

3.4 CSS样式优先级

  • 行内样式 > 内部样式表 > 外部样式表
  • 就近原则，如后链接 / 导入的外部样式表覆盖前面的内部样式表。

4. 基本选择器

4.1 标签选择器

标签名称{
	声明1;
	声明2;
	...
}

HTML 标签作为标签选择器的名称，如 h1、p、img。

4.2 类选择器

.类名称{
	声明1;
	声明2;
	...
}

选择的标签中的 class 属性要包含上述类名称：

<标签名 class="类名称">标签内容</标签名>

4.3 ID选择器

#id名称{
	声明1;
	声明2;
	...
}

选择的标签中的 id 属性要包含上述 id 名称：

<标签名 id="id名称">标签内容</标签名>

4.4 基本选择器区别

  • 标签选择器可直接应用与 HTML 标签
  • 同一个类选择器可在页面中多次使用，用于标识元素组（类似的元素，或者可以理解为某一类元素）
  • 同一个ID选择器在同一个页面只能使用一次，用于标识单独的唯一的元素

4.5 基本选择器优先级

  • ID选择器 > 类选择器 > 标签选择器
  • 基本选择器的三类选择器之间不遵循就近原则，但是对于同一个标签对应的多个同一类选择器，遵循就近原则，若后面的选择器有和前面的选择器相同的属性，则覆盖这个属性。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>选择器、样式、CSS优先级</title>
        <!--外部样式表-->
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <!--内部样式表-->
        <style type="text/css">
            p{
                width: 280;
                height: 150;
                background-color: green;
            }

            /*标签选择器，多个标签同时选中*/
            h1,h3{
                background-color: darkslateblue;
            }

            /*类选择器*/
            .title{
                font-style: italic; /*斜体*/
                background-color: red;
            }
            .normal{
                font-weight: normal;    /*设置字体加粗程度，此处不加粗*/
                background-color: pink;
            }
        </style>
        
        <!-- 后导入覆盖前面style标签中的样式-->
        <!-- <link rel="stylesheet" href="css/style2.css" type="text/css"/> -->
    </head>
    <body>
        <h3 style="background-color: blue">优先级</h3> <!--行内样式-->
        <h1 class="title normal">大家好</h1> <!--类选择器，此处有两类-->
        <h3 class="title">优先级</h3> <!--类选择器-->
        <p>这是一段文本</p>
    </body>
</html>

/* 文件 css/style2.css */
p{
    width:400;
    height: 260;
    background-color: brown;
}

效果：
在这里插入图片描述

4.6 注意事项

  • 若多个标签 / 类 / ID同时被选中，则可用逗号隔开。示例：
h1,h3{
    font-style: italic;
    background-color: red;
}

5. 层次选择器

5.1 后代选择器

E F{
	声明1;
	声明2;
	...
}

选择作为 E 元素后代的所有 F 元素。

示例：

body p{
	background: red;
}

效果：body 元素内所有的 p 元素背景色都变为红色。

5.2 子选择器

E>F{
	声明1;
	声明2;
	...
}

选择作为 E 元素子元素的所有 F 元素。

示例：

body>p{
	background: pink;
}

效果：
body 元素的所有子元素中的 p 元素背景色都变为红色。

5.3 相邻兄弟选择器

E+F{
	声明1;
	声明2;
	...
}

选择紧接在 E 元素后的 F 元素，且 E 元素和 F 元素拥有共同的父元素。

示例：

p+h3{
	background: green;
}

效果：
紧接 p 元素后，且和 p 元素拥有共同的父元素的 h3 元素的背景色变为绿色，两个条件缺一不可。

5.4 通用兄弟选择器

E~F{
	声明1;
	声明2;
	...
}

选择匹配的 F 元素，且 E 元素和 F 元素是兄弟元素，匹配的 F 元素位于匹配的 E 元素后面，不必紧邻。

示例：

p~h3{
	background: yellow;
}

效果：
位于p 元素后，且和 p 元素拥有共同的父元素的 h3 元素的背景色变为黄色。

6. <span>标签

<p>享受<span class="show">更好</span>教育服务</p>
<p>在这里，有一群人默默支持你学好<span id="dream">数理化</span></p>
<p class="bird">选择<span>我们</span>，成就你的梦想</p>

使某段文字能够单独被选择器选择，给这段文字加以修饰。

7. 字体样式

7.1 font-family

p{
	font-family: "Verdana","楷体";
}
body{
	font-family: "Times","Times New Roman","楷体";
}

设置字体类型。把多个字体名称作为一个"回退"系统来保存，如果浏览器不支持第一个字体，则会尝试下一个，以此类推。

7.2 font-size

h1{
	font-size: 24px;
}
span{
	font-size: 2em;
}

设置字体大小，单位有px、em、rem、cm、mm、pt、pc。

px 表示"绝对尺寸"（并非真正的绝对），实际上就是 css 中定义的像素（此像素与设备的物理像素有一定的区别），利用 px 设置字体大小及元素宽高等比较稳定和精确。px 的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em 表示相对尺寸，相对于父级元素的 font-size（如果当前对象内文本的 font-size 计量单位也是 em，则当前对象内文本的 font-size 的参考对象为父元素文本 font-size）。使用 em 可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的 font-size 及当前对象内文本的 font-size，如有遗漏可能会导致错误。

rem 也表示相对尺寸，其参考对象为根元素<html>的 font-size，因此只需要确定这一个 font-size。

举例：在不同环境下 em 和 rem 换算成的 px：
在这里插入图片描述

7.3 font-style

h1{
	font-style: italic;
}

设置字体风格。

取值：
normal：指定文本字体样式为正常的字体。
italic：指定文本字体样式为斜体（对于没有斜体变量的特殊字体，将应用oblique）。
oblique：指定文本字体样式为倾斜的字体。

7.4 font-weight

h1{
	font-weight: bold;
}

设置字体粗细。

取值：
normal：默认值，定义标准的字体。
bold：粗体字体。
bolder：更粗的字体。
lighter：更细的字体。
100、200、300、400、500、600、700、800、900：定义由细到粗的字体。400 = normal，700 = bold。

7.5 font

h1{
	font: oblique bold 12px "楷体";
}

在一个声明中设置所有字体属性。
字体属性的顺序：font-style → font-weight → font-size → font-family。

8. 文本属性

8.1 color

h1{
	color: #EEFF66;
}
h2{
	color: rgb(0,255,255);
}
h3{
	color: rgba(0,0,255,0.5);
}

设置文本颜色。

取值：
RGB：

  • 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
  • rgb(r,g,b)：正整数的取值为0~255

RGBA：

  • 在 RGB 的基础上增加了控制 alpha 透明度的参数，其中透明度的取值为0~1

8.2 text-align

h2{
	text-align: center;
}

设置元素水平对齐方式。
text-align 属性只能针对文本文字和 img 标签，对其他标签无效。

取值：
left：默认值，向左对齐。
right：向右对齐。
center：居中。
justify：两端对齐（通过调整符号的间距，保证段落两端文字分别于左右边距对齐）。
inherit：规定应该从父元素继承 text-align 属性的值。

8.3 text-indent

p{
	text-indent: 30px;
}

设置首行文本的缩进，单位有 px、em。

8.4 line-height

p{
	line-height: 30px;
}

设置文本的行高，单位有 px。

8.5 text-decoration

h1{
	text-decoration: underline;
}

设置文本的装饰。

取值：
none：默认值，定义的标准文本。
underline：设置文本的下划线。
overline：设置文本的上划线。
line-through：设置文本的删除线。

8.6 vertical-align

h1{
	vertical-align: middle;
}

设置文本的垂直对齐方式。

取值：
middle：向中对齐。
top：向顶端对齐。
bottom：向低端对齐。

8.7 text-shadow

h1{
	text-shadow: color x-offset y-offset blur-radius;
}

color：阴影颜色。
x-offset：X轴位移，用来指定阴影水平位移量。
y-offset：Y轴位移，用来指定阴影垂直位移量。
blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围。

9. 超链接伪类

标签名:伪类名{
	声明1;
	声明2;
	...
}

伪类名：
link：未单击访问时的超链接样式。
visited：单击访问后的超链接样式。
hover：鼠标悬浮其上时的超链接样式。
active：鼠标单击未释放时的超链接样式。

设置伪类的顺序：
link > visited > hover > active

示例：

a:hover{
	color: #B46210;
	text-decoration: underline;
}

10. 列表样式

10.1 list-style-type

li{
	list-style-type: none;
}

设置列表的标记符号。
一般另加图片。

取值：
none：无标记符号（去除列表前面的小黑点）。
disc：默认值，实心圆。
circle：空心圆。
square：实心正方形。
decimal：数字。

10.2 list-style-image

ul li{
	list-style-image: url(images/icon.gif);
}

自定义列表项符号。
但位置不好调节，一般另加图片。

取值：
none：默认值，不指定图像。
url：将列表符换成图像。

10.3 list-style-position

ul{
	list-style-position: inside;
}

设置在何处放置列表项标记，用于声明列表标志相对于列表项内容的位置。

取值：
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

10.4 list-style

ul li{
	list-style: url(images/icon.gif) inside none;
}

列表样式简写。

11. 背景样式

11.1 background-color

background-color: pink;

设置背景颜色。

11.2 background-image

background-image: url("images/play.png");

设置背景中的图片。

取值：图片路径。

11.3 background-repeat

background-repeat: no-repeat;

设置图片在背景中的重复方式。

取值：
repeat：沿水平和垂直方向平铺。
no-repeat：不平铺，只显示一次。
repeat-x：只沿水平方向平铺。
repeat-y：只沿垂直方向平铺。

11.4 background-position

background-position: center center;

设置图片在背景中的定位。

取值：
Xpos Ypos：水平位置和垂直位置，单位为 px。
X% Y%：使用百分比表示背景的位置。
X、Y方向关键词：水平方向关键词：left、center、right；垂直方向关键词：top、center、bottom。

11.5 background

.title{
	background: #C00 url("images/play.png") 205px 10px no-repeat;
}

背景样式简写。

11.6 背景样式示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>背景图片</title>
        <style>
            .test{
                width: 400px;
                height: 300px;
                border: 1px solid red;  /*设置边框*/
                background-color: bisque;   /*背景颜色*/
                background-image: url("images/play.png");  /*背景图片*/
                background-position: center center; /*背景定位*/
                background-repeat: no-repeat;   /*背景重复方式*/
                /*background: bisque url("play.png") center center no-repeat;*/ /*背景样式简写*/
            }
        </style>
    </head>
    <body>
        <div class="test">
        </div>
    </body>
</html>

效果：
在这里插入图片描述

12. <div>标签

块级元素，用来为 HTML 文档内大块的内容提供结构和背景的元素，可定义文档中的分区或节，可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 选择器或类选择器来标记 <div>，那么该标签的作用会变得更加有效。

示例：

<body>
<h1>NEWS WEBSITE</h1>
<p>some text. some text. some text...</p>
...
<div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text...</p>
...
</div>
<div class="news">
<h2>News headline 2</h2>
<p>some text. some text. some text...</p>
...
</div>
...
</body>

上面这段 HTML 模拟了新闻网站的结构。其中的每个<div>把每条新闻的标题和摘要组合在一起，也就是说，<div>为文档添加了额外的结构。同时，由于这些<div>属于同一类元素，所以可以使 class=“news” 对这些<div>进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得。

13. 综合示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体样式、文本属性、超链接伪类</title>
        <style>
            /* h2{
                font-family: "隶书";
                font-size: 50px;
                font-weight:bold;
                font-style: italic;
            } */
            h2{
                font: italic normal 50px "微软细黑";
                color: cadetblue;
                text-align: center; /*水平对齐方式，此处为居中*/
            }
            p{
                text-indent: 30px;  /*首行缩进*/
                line-height: 30px;  /*行高*/
                text-shadow: coral 5px -5px 2px; /*文本阴影：阴影颜色 X轴偏移 Y轴偏移 阴影模糊半径*/
                /*-webkit-前缀是兼容webkit内核浏览器，如谷歌浏览器*/
                background-color: blanchedalmond;
                text-decoration: underline; /*文本装饰，此处为下划线*/
            }
            .test{
                height: 100px;
                line-height: 100px;
                background-color: pink;
                text-decoration: none;
                vertical-align: middle;  /*垂直对齐方式，此处居中*/
            }
            /*未单击访问时超链接样式*/
            a.link:link{
                color:lavender;
            }
            /*单击访问后的超链接样式*/
            a.link:visited{
                color:hotpink;
            }
            /*鼠标悬浮其上时的超链接样式*/
            a.link:hover{
                color:yellow;
            }
            /*鼠标单击未释放的超链接样式*/
            a.link:active{
                color:maroon;
            }
        </style>
    </head>
    <body>
        <h2>中国字</h2>
        <p>
            《花千骨》是由<span>慈文传媒集团</span>制作并发行，林玉芬、高林豹、梁胜权联合执导，霍建华、赵丽颖领衔主演，
            蒋欣、杨烁特别出演，张丹峰、马可、李纯、鲍天琦、安悦溪、徐海乔等主演的古装玄幻仙侠剧。该剧改编
            自fresh果果同名小说，讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐恋。该剧于
            2015年6月9日起每周二、周三晚10点在湖南卫视的钻石独播剧场播出。2016年1月1日，荣获2015年国剧盛
            典年度十大影响力电视剧。2017年2月，该剧获得第十一届电视制片业“电视剧优秀作品”奖。
        </p>
        <p class="test">
                2017年2月，该剧获得第十一届电视制片业“电视剧优秀作品”奖。
        </p>
        <a class="link" href="http://www.baidu.com/">百度一下</a>
        <a  href="http://www.zhihu.com/">百度一下</a>
    </body>
</html>

效果：
在这里插入图片描述

14. 盒模型

参考 https://blog.csdn.net/qq_34966814/article/details/82872971

14.1 组成

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。margin、border、padding 是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而 content 则是HTML元素的内容。

14.2 大小

14.2.1 标准盒模型（box-sizing：content-box）

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

14.2.2 IE盒模型（box-sizing: border-box）

盒子的宽度 = width

盒子的高度 = height

为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。

14.3 成分

14.3.1 margin
<head>
    <meta charset="utf-8"/>
    <title>外边距</title>
    <style type="text/css">
        /* 星号(*)代表所有标签*/
        *{ 
            /* 取消标签的默认边距*/
            margin: 0; 
            /*同上，简写：上 右 下 左*/
            /*margin: 0 0 0 0; */
            /*等同于：*/
            /*margin-left: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-top: 0; */
            /*简写： 上下  左右*/
            /*margin: 10px 20px;*/
        } 
        /* 重设标签的边距*/
        /* body{
            margin:20px;
        } */
        .div1{/*默认边距*/
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>

设置盒子的外边框，他是完全透明的，只可以设置它的边距。

margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距
margin：上下左右（一个值）；上下、左右（两个值）；上、左右、下（三个值）；上、右、下、左（四个值）

14.3.2 padding
<head>
    <meta charset="utf-8"/>
    <title>盒模型-内边距</title>
    <style type="text/css">
        *{
            margin: 0;  /*比如使body外边距为0*/
        }
        .div1{
            margin: 20px 0 0 20px;
            width: 250px;
            height: 400px;
            /* padding-left: 20px; */
            padding: 40px;  /*设置标签的内边距*/
            border: 1px solid red;
            background-color: aquamarine;
            background-clip: content-box;   /*只给标签内容添加背景色*/
            box-sizing: content-box;
            /*宽高不包含边框及内边距，宽=width+padding*2+border*2+border*2，高亦如此 */
            /* width292  height442 */

            /* box-sizing: border-box; */
            /*宽高包含边框及内边距，宽width，高=height */
            /* width250  height400*/
        }
    </style>
</head>
<body>
    <div class="div1">
            文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，
            文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，
            文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，文本内容，
    </div>
</body>

设置盒子的内边距（填充）。与外边距不同，padding 不是只能完全透明的，可以设置背景颜色和图片。

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充
padding：简写属性，用法与 magin 类似

14.3.3 border
<head>
    <meta charset="utf-8"/>
    <title>盒模型-边框</title>
    <style type="text/css">
        /* 星号(*)代表所有标签*/
        *{
            margin: 0;
        }
        .div1{/*有默认边距*/
            margin: 10px 0 0 10px;
            width: 200px;
            height: 200px;
            /*为元素添加边框*/
            border-left-width: 1px; /*边框宽度*/
            border-left-color: red; /*边框颜色*/
            border-left-style: solid; /*边框样式*/  /*实线*/
            border-right: 1px red dashed;   /*虚线*/
            border-top: 1px red dotted; /*点线*/
            border-bottom: 5px red double;  /*双实线*/
            /* border: 1px red solid; */	/*简写*/
        }
    </style>
</head>
<body>
    <div class="div1">

    </div>
</body>

设置盒子的边界，可以设置成可见的，样式多样的。

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界
border-width：边界宽度
border-style：边界样式
border-color：边界颜色
border：简写属性，用法与 magin 类似。当 border 属性的色值不明确指定时，边框颜色与当前元素的字体颜色 color 相同。

border-top-width：上边界宽度
border-top-style：上边界样式
border-top-color：上边界颜色
border-bottom-width：下边界宽度
border-bottom-style：下边界样式
border-bottom-color：下边界颜色
border-left-width：左边界宽度
border-left-style：左边界样式
border-left-color：左边界颜色
border-right-width：右边界宽度
border-right-style：右边界样式
border-right-color：右边界颜色

border-sytle 属性取值：
none：定义无边框。
hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted：定义点状边框。在大多数浏览器中呈现为实线。
dashed：定义虚线。在大多数浏览器中呈现为实线。
solid：定义实线。
double：定义双线。双线的宽度等于 border-width 的值。
groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
inset：定义 3D inset 边框。其效果取决于 border-color 的值。
outset：定义 3D outset 边框。其效果取决于 border-color 的值。
inherit：规定应该从父元素继承边框样式。

14.4 居中对齐技巧

<head>
    <meta charset="UTF-8">
    <title>盒子水平居中显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            /* 去除标签的内外边距 */
        }
        ul{
            width: 200px;
            height: 100px;
            margin: 0 auto; /*列表居中网页*/
            border: 1px solid red;
            background-clip: content-box;
        }
        li{
            list-style-type: none;  /*去掉无序列表圆点*/
            text-align: center; /*文字居中列表*/
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</body>

网页居中对齐的必要元素：

  • 块元素
  • 固定宽度

示例效果：
在这里插入图片描述
从示例中删除 margin: 0;
在这里插入图片描述
从示例中删除 padding: 0;
在这里插入图片描述
从示例中删除 margin: 0 auto;
在这里插入图片描述

14.5 示例

<head>
    <meta charset="utf-8"/>
    <title>课程导航</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type:none;
            border-bottom: 1px solid #CCC;
        }
        .course{
            width: 200px;
            margin: 20px auto;
            background-color: #F5F9FC;
            border: 1px solid #CCC;
            box-sizing: border-box;
        }
        .title{
            height: 40px;
            line-height: 40px;  /*配合上一行，使文字在一行中竖直方向上居中*/
            padding-left: 35px;
            background-color: aqua;
            background: url("images/book.png") 5% center no-repeat;
            background-size: 20px 20px;
            color: #545f79;
            font-weight: bolder;
        }
        .item{
            height: 40px;
            line-height: 40px;  /*配合上一行，使文字在一行中竖直方向上居中*/
            padding-left: 5px;
        }
        .last{
            border-bottom: null;
        }
    </style>
</head>
<body>
    <ul class="course">
        <li class="title">课程导航</li>
        <li class="item">IT工程师</li>
        <li class="item">软件测试工程师</li>
        <li class="item">网络工程师</li>
        <li class="item">网站工程师</li>
        <li class="item">安卓软件工程师</li>
        <li class="item">Java软件工程师</li>
        <li class="item last">.NET软件工程师</li>
    </ul>
</body>

效果：
在这里插入图片描述

15. 标准文档流

15.1 定义

元素根据块元素或行内元素的特性从上到下，从左到右的方式排列。这也是元素默认的排列方式。

15.2 组成

  • 块级元素（block）
    与其他行内元素并排。
    不能设置宽、高，默认的宽度就是文字的宽度。
    所有的容器级标签都是块级元素，还有p标签。
    如<h1>，<p>，<div>。
  • 内联元素（inline）
    独占一行，不能与其他任何元素并列。
    能设置宽、高。默认宽度为父亲的100%。
    除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
    如<span>，<a>，<img>，<strong>。

15.3 块级标签和内联标签的关系

内联标签可以包含于块级标签中，成为它的子元素，反之不成立。

15.4 display属性

取值：
block：块级元素的默认值，元素会被显示为块级元素，该元素前后有换行符。
inline：内联元素的默认值，元素会被显示为内联元素，该元素前后没有换行符。
inline-block：行内块元素，元素既具有内联元素的特性，也具有块元素的特性。
none：设置元素不会被显示。

15.5 示例一

<head>
    <meta charset="utf-8"/>
    <title>内联块外边距</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 150px;
            height: 100px;

            /*块级标签：独占一行，宽度默认是父容器的宽度，高度由内容决定*/
            /* display: block;   */
            
            /*内联标签：默认在一行中从左到右排列，宽高由内容撑开，无法设置宽高*/
            /* display: inline;   */

            /*内联块：默认在同一行中从左到右排列，可以设置宽高*/
            display: inline-block;  
        }
        .div1{
            margin: 30px 20px 0 40px;
            background-color: aqua;
        }
        .div2{
            margin-left: 20px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

效果：
在这里插入图片描述

15.6 示例二

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        span{
            background-color: blue;
            /* 内联标签转为内联块 */
            /* display: inline-block; */

            /* 内联标签转换为块级标签 */
            display: block;
            height: 50px;
        }
        a{
            background-color: lightgreen;
        }


        .div1{
            /*隐藏标签，不占位*/
            /* display: none;   */
            width: 200px;
            height: 200px;
            background-color: lightpink;
        }
        
    </style>
</head>
<body>
    <!-- span、a标签均属于内联标签，宽度由内容撑开，排版默在同一行种从左到右依次排列-->
    <span>Java Web</span>
    <a href="http://www.baidu.com">百度网</a>

    <div class="div1">这是div标签内容</div>

    <a href="http://www.51job.com">51招聘</a>
</body>

效果：
在这里插入图片描述

16. 浮动

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：脱离标准流！其中一个方法就是浮动。

浮动、清除浮动、溢出处理请见 https://blog.csdn.net/weixin_39214481/article/details/81978419

太白的梳妆镜
关注
专栏目录
前端基础-CSS缩放zoom
逍遥云恋
03-30 1924
二、缩放zoom 语法：zoom:值 取值：值是一个倍数 <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .box{ width:200px; height:200px; border:1px solid #000; } div.box:hove...
前端-HTML-CSS-JS-个人网页制作实例
06-16
在本项目中，“前端-HTML-CSS-JS-个人网页制作实例”是一个涵盖了网页开发基础知识的实践案例。这个实例以“天气之子”这一主题为风格，展现了如何结合HTML、CSS和JavaScript技术来创建一个富有创意和个人特色的网页...
border-style:groove/ridge/double/inset/outset
好好做前端
05-19 3710
<p></p> 1.ridge p{ width: 200px; height: 200px; border-width: 3px; border-style: ridge; border-color: #faf; } 2.groove p{ width: 200px; height: 200px; border-wid
前端基础--CSS
qq_43813560的博客
08-22 3621
CSS 指层叠样式表 (Cascading Style Sheets) 多重样式将层叠为一个 样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。 层叠次序 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层...
前端基础-CSS-引入字体
weixin_43254742的博客
08-01 878
CSS-引入字体、下载字体地址
web前端开发--------CSS基础教程
m0_64365419的博客
11-07 2790
为什么要学习CSS？ 在之前的学习中，我们学习了通过html去布局网页，但是html存在非常多的局限性，而它的局限性体现在它只关注内容的语义，html主要做结构，显示元素内容，比如<h1>表名这是一个大的标题，<p>表名这是一个段落，<img>表明这儿有一个图片，<a>表示此处有链接。 CSS简介： CSS是层叠样式表（Cascading Style Sheets）的简称，有时候我们也会将其称之为CSS样式表或级联样式表。 CSS同样也是一种标记语言，主要用于
前端-CSS基础知识详解（一）
qq_52262831的博客
12-23 2053
目录： css 的介绍 css 的引入方式 css 的选择器
前端基础：CSS总结
时光
04-18 1700
前端基础：CSS总结
web前端-前端三剑客之CSS（1）
苏凉.py的博客
05-22 2539
🐚作者简介：苏凉（专注于网络爬虫，数据分析） 🐳博客主页：苏凉.py的博客 🌐系列专栏：web前端基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。 📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！ 👉关注✨点赞👍收藏📂 文章目录写在前面什么是csscss语法css选择器css-元素选择器css-id选择器(#)css-类选择器(.)css-通用选择器(*)css-分组选择器css-组合器选择器后代选择器（空格）子选择器（>）相邻兄弟选择器（+）通用兄弟选择器（~）css-伪类选择器cs..
前端开发中的CSS命名规范及BEM实践
热门推荐
官方推荐
09-08 1万+
前端开发中的CSS命名规范及BEM实践
web前端-css边框（border）
苏凉.py的博客
05-27 6353
🐚作者简介：苏凉（专注于网络爬虫，数据分析） 🐳博客主页：苏凉.py的博客 🌐系列专栏：web前端基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。 📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！ 👉关注✨点赞👍收藏📂 文章目录css边框属性css边框样式边框宽度圆角边框css所有边框属性 css边框属性 css的border属性允许您指定元素边框的样式、宽度和颜色。 css边框样式 border-style 属性指定要显示的边框类型。可以同时设置一到四个值（顺序为上边框、右边框、下边框和左..
universe-ui:CSS组件库-使用普通CSS构建
03-16
宇宙UI（Universe UI）是一个基于CSS构建的组件库，专为前端开发者设计，旨在提供一套简洁、可复用且易于定制的HTML组件。这个库的亮点在于它使用了普通的CSS，而非复杂的预处理器或者框架，使得开发者可以更加直接...
笔记-day08-前端基础CSS第六天.pdf
10-11
CSS 定位基础知识 CSS 定位是 CSS 布局中非常重要的一部分，它可以让我们更灵活地控制页面元素的位置和布局。今天，我们将学习 CSS 定位的基础知识，包括为什么需要使用定位、定位的组成部分、定位模式的分类和特点...
前端开源库-is-css
08-30
- **文件扩展名匹配**：最基础的检查方式是对比文件名的最后三个字符是否为`.css`。 - **URL解析**：库可能还会解析URL，提取主机、路径、查询参数等信息，确保即使在复杂的URL结构下也能正确识别。 - **内容检测**...
前端学习笔记-黑马程序员CSS
01-09
前端学习笔记-黑马程序员CSS CSS 是一种标记语言，主要用于美化页面，美化 HTML，让画面更美观。总结来说，HTML 主要做结构，显示元素内容，而 CSS 负责美化，让结构（HTML）与样式（CSS）相分离。 一、CSS 语法...
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1342
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
分享有趣的、贴近生活的CS知识
10-07 883
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
Vue根实例、实例总结
m0_54007573的博客
10-04 696
Vue根实例、实例总结
前后分离项目记录
最新发布
qq_25806839的博客
10-10 195
打包报错 Thread Loader时，增加以下代码： 上线，打包prod时:
前端小白的HTML-CSS基础练习
2. CSS基础： - CSS选择器：元素选择器、类选择器、ID选择器、属性选择器、伪类选择器等。 - 盒模型：边距（margin）、边框（border）、填充（padding）、内容（content）。 - 布局技术：浮动（float）、定位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值