前端开发（css）_前台加css-优快云博客

本文详细介绍了CSS的基础知识，包括文本样式、背景样式、边框与边框圆角、尺寸、伪类选择器、盒模型和布局样式。讨论了CSS的引入方式，如行间、内部和外部引用。此外，还探讨了浮动、定位等布局技术，以及伪类选择器在链接样式的应用。同时，文章深入讲解了盒模型的概念及其对元素尺寸和位置的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

day02

css的学习

css通俗点说就是给html化妆的
常见的css样式

文本样式
背景样式
边款，边框圆角
尺寸
伪类选择器
盒模型
布局样式：浮动，定位
标签显示效果

css的引入方式（为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>css的引入方式1：行间引入</title>
</head>
<body>
    <!-- 
        在标签的行间使用style属性，为标签设置css样式
        css样式编写的语法格式：
            css样式名称: 值;
        弊端：
            代码重复度高、代码冗余度高、代码可读性差、没有实现样式与结构的分离！
     -->
    <div style="width: 200px; height: 200px; background-color: red;"></div>
    <div style="width: 200px; height: 200px; background-color: red;"></div>
</body>
</html>

内部引用

```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>css引入方式2：内部引入</title>
    <!-- 
        在head标签内部，使用style标签，为标签设置css样式(选择器)
        弊端：
            没有从本质上实现样式与结构的分离！
            当前页面中编写的css样式，无法应用于其他的页面
     -->
     <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
     </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

外部引用

首先在外部建立css文件，在文件中使用选择器为标签设置样式，然后在head中，使用link标签，链接外部的css文件。先写一个p标签，再写一个css样式例如p{ font-size: 30px; color: red; font-weight: bold; }然后用link,例如<link rel="stylesheet" href="../css/style1.css">

选择器的介绍

作用：为了更方便快捷，提供复杂的样式操作
常见的选择器：标签选择器（标签名{}），类选择器（.类名{}），id选择器（#{}）。
这些选择器都要放在head标签，然后放在一个style标签里面。
如果标签过多，相同类型的选择器从后往前覆盖，优先级：标签 < 类class < id < 行间引入style。

常见的css样式

一.尺寸的设置

height,width：标签的高度，宽度，使用像素记得css得加px,百分比的话参照物是父级标签。

二.边框的设置

边框有四个方向且组成部分为粗细，颜色，样式，显示范围是自身+边框。

属性样式（四种）

solid:实体线
dashed:虚线
dotted:点状线
double:双层边框

设置四条边框
            border-left: 5px blue solid;
            border-top: 5px yellow dashed;
            border-right: 5px cyan dotted;
            border-bottom: 5px green double; 

            /* 四条边边框一致 */
            border: 10px black solid;

三.边框圆角

 /* 四个角的圆角效果一致 */
       /*  border-radius: 100px; */

       /* 四个角的效果不一致，分开设置的！ */
       /* border-top-left-radius: 30px;
       border-top-right-radius: 60px;
       border-bottom-right-radius: 90px;
       border-bottom-left-radius: 120px; */

        /* 四个角的效果不一致，一起设置 */
        /* 左上 右上    右下    左下 */
        /* border-radius: 30px 60px 90px 120px; */
        /* 左上     右上左下    右下 */
        /* border-radius: 30px 90px 150px; */
        /* 左上右下     右上左下 */
        border-radius: 30px 120px;

四.文本样式

描述字体（5个）

color:字体颜色（英文单词，十六进制代码，rgb(0~255 ,0~255, 0~255)）
font-weight:字体加粗效果（bold）
font-style:字体样式倾斜（italic）
font-family:字体样式（有的字体得给浏览器加插件）
font-size:字体大小

描述文本（2个）

text-decoration:文本修饰 underline(下划线)，overline(上划线)，line-througn(删除线)，none(无修饰)
text-align:文本横向的对齐方式，默认值left左对齐，center居中对齐，right右对齐。

其他（2个）

letter-spacing:字符间距
line-height:行高，单行文本行高与容器高度一致，可以实现垂直居中
多行文本行高的设置会影响行与行之间的距离，为了确保行间距产生，那么行高的值要大于字体大小，不然会发生字体重叠效果。

五.背景样式

background-color：背景颜色
background-image：url(“路径”)	背景图片
background-size：背景图片的尺寸
background-repeat：背景重复效果
默认值为repeat，既有横向重复，也有纵向重复
repeat-x，只有横向重复
repeat-y，只有纵向重复
no-repeat，没有重复
background-position：背景图片的位置
background-position-x，设置背景图片的横向位置：left、center、right
background-position-y，设置背景图片的纵向位置：top、center、bottom
background-position：横向位置	纵向位置

六.伪类选择器

伪类选择器主要对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>Document</title>
    <style>
        a {
            font-size: 30px;
        }
        /* 未被访问时 */
        a:link {
            color: red;
            text-decoration: none;
        }
        /* 访问过后 */
        a:visited {
            color: blue;
        }
        /* 鼠标悬停时 */
        a:hover {
            color: yellow;
            text-decoration: underline;
        }
        /* 正在访问 */
        a:active {
            color: springgreen;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        div:hover {
            background-color: purple;
        }
    </style>
</head>
<body>
    <a href="#">伪类选择器</a>
    <div></div>
</body>
</html>

七.盒模型

盒模型是每个标签都具备的内容，组成部分，从外往内分别是:
外边距 margin
边款 border
内边距 padding
内容 context

margin
外边距有四个方向可以设置，分别是上下左右，在某一个方向上，一旦设置了外边距，就代表这个方向上从边框外侧到指定的外边距范围内，不能存在任何内容！可以实现元素的位置偏移，以及元素之间间距的设置
margin存在复合写法
margin的冲突问题
margin如果在纵向产生了冲突，取大作为两者之间的距离
margin如果在横向产生了冲突，取和作为两者之间的距离
margin的小技巧，横向居中
margin的距离问题
如果是父子级关系，子级的外边距是边框外侧到父级边框内侧的距离
如果是同级关系，外边距就是边框外侧到边框外侧的距离
padding
内边距有四个方向可以设置，分别是上下左右，在某一个方向上，一旦设置了内边距，就代表这个方向上从边框内侧到指定的内边距范围内，不能存在任何内容！可以实现子级元素的位置偏移
一个元素如果一旦设置了内填充、内边距padding，该元素的显示范围会变大！
内边距也存在复合写法，css样式名称为padding，其赋值的原理与margin赋值的原理一致，方位一致！
内边距的距离问题
子级的边框外侧到父级边框内侧的距离

盒模型的问题

在盒模型的加持下，一个元素，现在显示的范围应该包含哪些内容？
横向：边框左侧+左侧的内填充padding+宽度width+右侧的内填充padding+边框右侧
纵向：边框上侧+上侧的内填充padding+高度height+底部的内填充padding+边框底侧
在盒模型的加持下，一个元素的作用范围包含哪些内容？
横向：边框左侧+左侧的内填充padding+宽度width+右侧的内填充padding+边框右侧+左右侧的外边距margin
纵向：边框上侧+上侧的内填充padding+高度height+底部的内填充padding+边框底侧+上下侧的外边距margin

八.浮动

(1)浮动的值有两个：left和right。left左浮动，浮动元素从父级容器左侧开始横向排版，空间不足自动换行，right右浮动，浮动元素从父级容器右侧开始横向排版，空间不足自动换行！
(2)、我们使用浮动是需要用浮动带来的快捷布局方式，但是不能让浮动元素对其他正常的布局产生影响！因为浮动元素是脱离文档流的，属于一种漂浮状态！
(3)、我们需要清除浮动带来的影响，在浮动元素的同级以下，设置一个空的div，并为其设置clear这个css样式，取值有三种：left、right、both
left 只清除左浮动 right 只清除右浮动 both 左右浮动都清除
清除浮动后，浮动元素保留布局效果，垂直落入文档流，那么就占据空间！

  <!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>
        #div1 {
            width: 150px;
            height: 75px;
            background-color: greenyellow;
            float: left;
        }
        #div2 {
            width: 200px;
            height: 100px;
            background-color: plum;
            float: left;
        }
        #div3 {
            width: 250px;
            height: 125px;
            background-color: tomato;
            float: right;
        }
        #div4 {
            width: 250px;
            height: 125px;
            background-color: pink;
            float: right;
        }
        #clearDiv {
            clear: left;
        }
        #testDiv {
            width: 700px;
            height: 300px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="clearDiv"></div>
    <div id="testDiv"></div>
</body>

九.定位

TML默认的布局方式是不会出现重复的元素的，就是说在一个位置上不可能出现重复的元素。但是在某些情况下需要改变元素的位置和显示效果，此时我们就需要用到定位技术！
定位属性为position 默认值为static，元素的排版就是默认的排版，按照从左到右、从上到下显示
当元素设置了定位position之后，就可以通过left、right、top、bottom这四个属性，来改变元素的位置！！
relative，相对定位。偏移的参照为自身原先的位置
left正值向右偏移、right正值向左偏移、top正值向下偏移、bottom正值向上偏移而且元素偏移之后，原先的位置依旧存在

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相对定位</title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				font-weight: bold;
				font-size: 50px;
				float: left;
				border: 1px black solid;
			}
			#div1 {
				background-color: red;
			}
			#div2 {
				background-color: blue;
				position: relative;
				left: 50px;	
				top: 100px;
			}
			#div3 {
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="div1">1</div>
		<div id="div2">2</div>
		<div id="div3">3</div>
	</body>
</html>

absolute：绝对定位。

如果元素设置了定位属性为absolute，其父级或者父级的父级设置了定位属性，那么偏移参照就是这个设置定位属性的父级元素
left正值，从父级左侧向右偏移 right正值，从父级右侧向左偏移 top正值，从父级顶部向下偏移 bottom正值，从父级底部向上偏移

<!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>
        #big {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
        #small {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="small">哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊</div>
    </div>
</body>
</html>

如果元素设置了定位属性为absolute，其父级或者父级的父级没有设置任何的定位属性，那么偏移参照物为浏览器的可视化窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				font-weight: bold;
				font-size: 50px;
				float: left;
				border: 1px black solid;
			}
			#div1 {
				background-color: red;
			}
			#div2 {
				background-color: blue;
				position: absolute;
				left: 50px;	
				top: 100px;
			}
			#div3 {
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="div1">1</div>
		<div id="div2">2</div>
		<div id="div3">3</div>
	</body>
</html>

fixed，固定定位。定位的参照物为浏览器的可视化窗口
left正值，浏览器可视化窗口左侧向右偏移
right正值，浏览器可视化窗口右侧向左偏移
top正值，浏览器可视化窗口顶部向下偏移
bottom正值，浏览器可视化窗口底部向上偏移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定定位</title>
		<style type="text/css">
			body {
				height: 2000px;
			}
			div {
				width: 200px;
				height: 200px;
				background-color: red;
				position: fixed;
				right: 10px;
				bottom: 10px;
			}
		</style>
	</head>
	<body>
		<h1>我是一个测试固定定位的标题！</h1>
		<div></div>
	</body>
</html>