float浮动
float 属性可以将元素向左或向右浮动,使其他内容环绕在其周围。其主要用值包括:
left: 将元素浮动到其包含块的左侧。
right: 将元素浮动到其包含块的右侧。
none: 默认值,不浮动。
inherit: 从父元素继承 float 属性的值。
清除float浮动
当使用 float 时,浮动元素会影响后续的内容流,因此常常需要使用 clear 属性来清除浮动,避免影响布局。
clear: left;: 清除左侧浮动。
clear: right;: 清除右侧浮动。
clear: both;: 清除左右两侧的浮动。
clear: none;: 默认值,不清除浮动。
.clear-box:after { clear: both; content: ""; display: block; }
.clear-box:after:使用伪元素 :after 清除浮动,以确保包含浮动元素的容器能够正确包裹浮动内容。
clear: both:清除左右浮动,使 .clear-box 元素显示在浮动元素下方,确保容器的高度正确。
在html文件中声明引入css文件
<link rel="stylesheet" href="css/float.css"/>
子代选择器:
子代选择器 ul > li 是 CSS 中的一种选择器,用于选择 ul 元素的直接子元素 li。这种选择器只会匹配那些直接位于 ul 元素内部的 li 元素,而不会影响任何嵌套在 li 元素内部的子元素。
ul > li 通常用于创建和样式化菜单、列表项等,其中你希望直接控制列表项的样式,而不影响嵌套在这些列表项中的其他元素。
以下是使用 ul > li 子代选择器的示例,展示了如何创建一个简单的垂直菜单,并为每个直接子元素应用样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--声明引入css文件-->
<link rel="stylesheet" href="css/float.css"/>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue float"></div>
<div class="pink"></div>
</body>
</html>
div{
height: 100px;
width:100px;
}
.red{
background-color: red;
}
.blue{
background-color:beige;
}
.green{
background-color: darkgreen;
}
.pink{
background-color: pink;
}
.float{
float: right;
}
.clear-box:after{
clear:both;
content: "";
display: block;
}
/* 子代选择器 */
#menu li{
border: 1px solid #f3ecd3;
float:left;
padding:10px 20px 30px 40px;/*上右下左 */
padding:10px 20px 30px;/*上 左右 下 */
padding:10px 25px ;/*上下 左右 */
width: 100px;
position:relative;/* 相对定位 */
}
#menu>li:hover{
background-color: #FFA812;
}
ul,ol,li{
list-style: none;
margin: 0;
padding: 0;
}
.child{
display: none;
position: absolute;
left: 0;
/* top:0; */
/* bottom: 0; */
}
.child>li{
padding: 10px 25px;
width: 100px;
}
.child>li:hover{
background-color: aquamarine;
}
#menu>li:hover .child{
display: block;
}
.menu 选择所有具有 class="menu" 的元素(类选择器)。类选择器 (.menu) 可以应用于多个元素,一个页面中可以有多个相同类名的元素。
#menu 选择具有 id="menu" 的单个元素(ID 选择器)。ID 选择器 (#menu) 应用到页面中的唯一元素,一个页面中每个 ID 应该是唯一的。
优先级:
ID 选择器的优先级比类选择器高。这意味着如果同一个属性的样式同时由类选择器和 ID 选择器定义,ID 选择器的样式会被优先应用。
css中基本边框属性
border: 同时设置边框的宽度、样式和颜色。
border-width: 设置边框的宽度。可以指定具体的像素值,也可以使用关键词(如 thin, medium, thick)。
border-style: 设置边框的样式。
常见的样式包括:
solid(实线) dashed(虚线) dotted(点线)double(双线)groove(凹槽) ridge(脊) inset(内嵌) outset(凸起) none(无边框)hidden(隐藏)
border-color: 设置边框的颜色。
可以使用颜色名称、十六进制值、RGB、RGBA、HSL 或 HSLA 值。
可以使用 border-top, border-right, border-bottom, border-left 分别设置四个边框的宽度、样式和颜色。
/* 分别设置四个边框的样式 */
element {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px double yellow;
}
border-radius 属性用于设置边框的圆角。可以为每个角设置不同的半径,也可以为所有角设置相同的半径。
/* 设置所有角的圆角半径 */
element {
border-radius: 10px;
}
/* 分别设置四个角的圆角半径 */
element {
border-radius: 10px 20px 30px 40px;
}
border-image 属性允许使用图像作为边框。可以设置图像的来源、切割、平铺方式等。
/* 使用图像作为边框 */
element {
border-image: url('border-image.png') 30 round;
}
css表格
HTML 表格通常包含以下基本元素:
<table>: 表格容器。
<thead>: 表头部分,包含标题行。
<tbody>: 表格主体部分,包含数据行。
<tr>: 表格行。
<th>: 表头单元格(通常加粗且居中)。
<td>: 表格数据单元格。
定位 position 四个属性
position 属性在 CSS 中用于控制元素的定位和布局。它决定了元素如何相对于其正常流动的位置进行定位,并影响其与其他元素的关系。position 属性有几个不同的值,每个值会对元素的布局产生不同的影响。
1. static(默认值)
position: static 是所有元素的默认定位方式。使用此值的元素不会受到 top、right、bottom 和 left 属性的影响,元素将按照正常的文档流进行布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static Position</title>
<style>
.static {
position: static;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="static">Static Position</div>
</body>
</html>
2. relative
position: relative 使元素相对于其正常位置进行定位。设置 top、right、bottom 和 left 属性会相对于元素的原始位置移动元素,但元素仍占据原本的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relative Position</title>
<style>
.relative {
position: relative;
top: 20px;
left: 30px;
background-color: lightcoral;
padding: 10px;
}
</style>
</head>
<body>
<div class="relative">Relative Position</div>
</body>
</html>
3. absolute
position: absolute 使元素相对于最近的具有 position 值为 relative、absolute、或 fixed 的祖先元素进行定位。如果没有这样的祖先元素,则相对于初始包含块(通常是 <html> 元素)进行定位。此元素从文档流中完全脱离,周围的元素不会影响它的布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Position</title>
<style>
.container {
position: relative;
background-color: lightgray;
padding: 20px;
height: 150px;
}
.absolute {
position: absolute;
top: 10px;
right: 20px;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute">Absolute Position</div>
</div>
</body>
</html>
4. fixed
position: fixed 使元素相对于浏览器窗口进行定位,不论页面如何滚动,该元素始终保持在相同的位置。此元素也从文档流中完全脱离,周围的元素不会影响它的布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Position</title>
<style>
.fixed {
position: fixed;
bottom: 10px;
right: 10px;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="fixed">Fixed Position</div>
</body>
</html>
button
基本按钮样式
/* 基本按钮样式 */
.basic-button {
background-color: #007bff; /* 按钮背景颜色 */
color: white; /* 按钮文字颜色 */
border: none; /* 去除边框 */
padding: 10px 20px; /* 内边距 */
font-size: 16px; /* 字体大小 */
border-radius: 5px; /* 圆角 */
cursor: pointer; /* 鼠标悬停时显示手型光标 */
transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
}
.basic-button:hover {
background-color: #0056b3; /* 鼠标悬停时背景颜色 */
}
.basic-button:active {
transform: scale(0.98); /* 鼠标点击时按钮稍微缩小 */
}
.basic-button:focus {
outline: none; /* 去除焦点时的轮廓 */
}
自定义按钮样式
/* 自定义按钮样式 */
.custom-button {
background-color: #28a745; /* 背景颜色 */
color: white; /* 文字颜色 */
border: 2px solid #28a745; /* 边框颜色 */
padding: 12px 24px; /* 内边距 */
font-size: 18px; /* 字体大小 */
border-radius: 8px; /* 圆角 */
cursor: pointer; /* 鼠标悬停时显示手型光标 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
transition: all 0.3s ease; /* 过渡效果 */
}
.custom-button:hover {
background-color: #218838; /* 鼠标悬停时背景颜色 */
border-color: #218838; /* 鼠标悬停时边框颜色 */
}
.custom-button:active {
background-color: #1e7e34; /* 鼠标点击时背景颜色 */
border-color: #1e7e34; /* 鼠标点击时边框颜色 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 点击时阴影效果 */
}
.custom-button:focus {
outline: none; /* 去除焦点时的轮廓 */
}
文本框
1. 基本输入框样式
/* 基本输入框样式 */
.basic-input {
width: 100%; /* 宽度 */
padding: 10px; /* 内边距 */
border: 2px solid #007bff; /* 边框颜色 */
border-radius: 5px; /* 圆角 */
font-size: 16px; /* 字体大小 */
box-sizing: border-box; /* 包括内边距和边框在宽度内 */
transition: border-color 0.3s, box-shadow 0.3s; /* 过渡效果 */
}
.basic-input:focus {
border-color: #0056b3; /* 焦点时边框颜色 */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 焦点时阴影效果 */
outline: none; /* 去除焦点轮廓 */
}
.basic-input::placeholder {
color: #6c757d; /* 占位符文字颜色 */
opacity: 1; /* 占位符文字不透明度 */
}
2. 密码框样式
/* 密码框样式 */
.password-input {
width: 100%;
padding: 10px;
border: 2px solid #28a745; /* 边框颜色 */
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s, box-shadow 0.3s;
}
.password-input:focus {
border-color: #1e7e34;
box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
outline: none;
}
.password-input::placeholder {
color: #6c757d;
}
3. 多行文本框(<textarea>)
/* 多行文本框样式 */
.textarea {
width: 100%;
height: 150px; /* 高度 */
padding: 10px;
border: 2px solid #17a2b8; /* 边框颜色 */
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s, box-shadow 0.3s;
resize: vertical; /* 允许用户垂直调整大小 */
}
.textarea:focus {
border-color: #138496;
box-shadow: 0 0 5px rgba(23, 162, 184, 0.5);
outline: none;
}
.textarea::placeholder {
color: #6c757d;
}