css属性操作
文本属性：
font-style字体样式风格：
font-style属性值:
- normal：设置字体样式为正体。默认值。
- italic：设置字体样式为斜体。这是选择字体库中的斜体字。
- oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。
font-weight字体粗细：
font-weight属性值：
- normal：设置字体为正常字体。相当于数字值400
- bold：设置字体为粗体。相当于数字值700。
- bolder：设置字体为比父级元素字体更粗的字体。
- lighter：设置字体为比父级元素字体更细的字体。
- number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900。
- font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。
font-size字体大小：
font-size属性值：
- xx-small、x-small、small、medium、large、x-large、xx-large、smaller、larger
- 可以设置值为具体的数值加上对应的计算单位来表示字体的大小
- 字体单位有像素（ px ）、字符（ em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定 ）、百分比（ % ），磅[点]（ pt ）
font-family字体族：
font-family
- 可以指定元素使用的字体系列或字体族。
- 当我们使用font-family指定字体族的时候，可以指定多种字体,作为候补。
- 指定多个字体的时候，需要使用逗号隔开。
color字体颜色：
- 可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制
text-align文本对齐方式：
text-align属性值：
- left：左对齐
- right：右对齐
- center：居中对齐
- justify：两端对齐
line-height字体行高：
- 行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。
- 行高 = 字体大小 + 上半行距 + 下半行距
vertical-align属性设置元素的垂直对齐方式：
- vertical-align属性值：
主要应用于图片、图表上的调试
- baseline：使元素的基线与父元素的基线对齐
- sub：使元素的基线与父元素的下标基线对齐
- super：使元素的基线与父元素的上标基线对齐
- text-top：使元素的顶部与父元素的字体顶部对齐。
- text-bottom：使元素的底部与父元素的字体底部对齐。
- middle：使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。
- top：使元素及其后代元素的顶部与整行的顶部对齐。
- bottom：使元素及其后代元素的底部与整行的底部对齐。
text-decoration属性设置下划线的：
主要应用于a标签：
- text-decoration：none 取消链接的下划线
- text-decoration：underline 默认有下划线
背景属性：
background-color背景颜色：
- background-color: transparent; 透明
- background-color: #ff0000; 红色背景
- background-color: red; 红色背景
背景图片：
background-image背景图片
- background-image: url('图片地址')
background-repeat背景平铺方式
- repeat：平铺
- no-repeat：不平铺
- repeat-x：X轴平铺
- repeat-y：Y轴平铺
background-position背景定位
- x轴坐标 y轴坐标
- left
- right
-center
三个合为一个用法：
background: 背景颜色 背景图片 背景平铺方式 背景定位;
示例-获取图片中某个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 50px;
height: 50px;
background-image: url("https://img1.baidu.com/it/u=2570536247,3370681059&fm=26&fmt=auto");
<!--页面中通过检查进行调试位置-->
background-position: 242px -104px;
}
</style>
</head>
<body>
<div class="c1" id="i1"></div>
</body>
</html>
边框属性：
border-style（边框风格）:
- none：没有边框，当border的值为none的时候，系统将会忽略[border-color]
- hidden：隐藏边框，低版本浏览器不支持。
- dotted：点状边框。
- dashed：虚线边框。
- solid：实线边框。
- double：双实线边框，两条单线与其间隔的和等于border-width值。
指定不同的方向：
- border-top-style 设置上边的边框风格
- border-bottom-style 设置下边的边框风格
- border-left-style 设置左边的边框风格
- border-right-style 设置右边的边框风格
border-width（边框宽度）
- thin：细边框
- medium：中等边框（默认）
- thick：粗边框
- 10px：10像素边框
指定不同的方向：
- border-top-width 设置上边的边框宽度
- border-bottom-width 设置下边的边框宽度
- border-left-width 设置左边的边框宽度
- border-right-width 设置右边的边框宽度
border-color（边框颜色）
- 指定不同的方向：
- border-top-color 设置上边的边框颜色
- border-bottom-color 设置下边的边框颜色
- border-left-color 设置左边的边框颜色
- border-right-color 设置右边的边框颜色
边框样式的缩写：
border: 边框宽度 边框样式 边框颜色;
列表属性：
list-style: none; 去掉无序列表的默认样式
dispaly属性：
- disply：inline; 将块级标签设置成内联标签
- disply：block; 将内联标签设置成块级标签
- display:inline-block; 内联块级标签：像块级一样可设长宽，也可像内联一样在一行显示
- display:none; 隐藏属性，隐藏后的页面位置，可以被其它元素覆盖（常用，容易布局）
- visibility :hiddon； 隐藏属性，保留原来页面上占有的位置
盒子属性：
padding(内边距):
- padding-top 设置上边的外边距
- padding-bottom 设置下边的外边距
- padding-left 设置左边的外边距
- padding-right 设置右边的外边距
margin(外边距):
- 同上
整合示例：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf8">
<style>
/*取消默认浏览器的外边距*/
*{
margin: 0;
padding: 0;
}
/*占用百分之八十的区域*/
.c1{
width: 80%;
/*占用的区域居中*/
margin: 100px auto;
}
/*取消列表的默认样式*/
.c1 .J_categoryList{
list-style: none;
}
/*使用行块并设置内边距*/
.c1 .J_categoryList li{
display: inline-block;
margin: 10px;
}
/*设置文本信息*/
.c1 .J_categoryList li a{
font-size: 16px;
color: #333;
padding: 20px;
border: 1px solid rebeccapurple;
text-decoration: none;
}
</style>
</head>
<body>
<div class="c1">
<ul class="J_categoryList">
<li><a href=""><span>红米</span></a></li>
<li><a href=""><span>电视</span></a></li>
<li><a href=""><span>笔记本</span></a></li>
<li><a href=""><span>家电</span></a></li>
<li><a href=""><span>小米手机</span></a></li>
</ul>
</div>
</body>
</html>
float属性：
float特性：
- 任何申明为float的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。
- 假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流（自上而下）中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
- 在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。
- 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
- 字围效果：文字内容会围绕在浮动元素周围。
- 浮动元素只能浮动至左侧或者右侧。
- 浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。
来一个案例，float位置随便改动进行测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
background-color: chartreuse;
/*float: left;*/
}
.c2{
width: 300px;
height: 200px;
background-color: coral;
float: left;
}
.c3{
width: 400px;
height: 200px;
background-color: rebeccapurple;
/*float: left;*/
}
</style>
</head>
<body>
<div class="c1">11111</div>
<div class="c2">22222</div>
<div class="c3">33333</div>
</body>
</html>
清除父级塌陷问题：
点击查看代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title></title>
<meta charset="utf8">
<style>
.header{
border: 1px solid red;
/*height: 80px;*/
}
.c1{
width: 200px;
height: 60px;
background-color: #336699;
float: left;
}
.c2{
width: 100px;
height: 60px;
background-color: orange;
float: left;
}
.c3{
width: 100px;
height: 80px;
background-color: lightskyblue;
float: right;
}
.content{
width: 100%;
height: 60px;
background-color: gray;
}
/*清除父级塌陷*/
.clearfix:after{
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div class="header clearfix">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
<div class="content">
content...
</div>
</body>
</html>
清除浮动的语法：
clear属性：
- left：在左侧不允许浮动元素
- right：在右侧不允许浮动元素
- both：在左右两侧均不允许浮动元素
- none：默认值。允许浮动元素出现在两侧。
position属性：
方位属性：
top：让元素相对于指定目标的顶部偏移指定的距离。
例如： top：10px; 表示距离顶部10像素
right：让元素相对于指定目标的右边偏移指定的距离。
例如： right：10px; 表示距离顶部10像素
bottom：让元素相对于指定目标的底部偏移指定的距离。
例如： bottom：10px; 表示距离底部10像素
left：让元素相对于指定目标的左边偏移指定的距离。
例如： left：10px; 表示距离顶部10像素
相对定位（relative）：
相对定位就是在正常文档流中，元素相对于自身位置使用left、right、top、bottom属性进行定位偏移。
示例：点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.c1{
width: 200px;
height: 200px;
background-color: indianred;
}
.c2{
width: 200px;
height: 200px;
background-color: orange;
position: relative;
left: 200px;
top: 200px;
}
.c3{
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
绝对定位（absolute）：
绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位
如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位
示例：点击查看代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf8">
<style>
*{
margin: 0;
padding: 0;
}
.lunbo{
width: 590px;
height: 470px;
border: 1px solid rebeccapurple;
margin: 100px auto;
position: relative;
}
.lunbo ul{
list-style: none;
}
.lunbo .img li{
position: absolute;
top: 0;
left: 0;
}
.lunbo .btn li{
font-size: 25px;
width: 40px;
height: 40px;
background-color: gray;
text-align: center;
line-height: 40px;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
color: white;
position: absolute;
top: 50%;
margin-top: -20px;
}
.lunbo .left_btn{
left: 0;
}
.lunbo .right_btn{
right: 0;
}
</style>
</head>
<body>
<div class="lunbo">
<ul class="img">
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f89261d8655d76f2ab2340e4a3738678.jpg?w=2452&h=920" alt=""></a></li>
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/73927a6ef08dacc1b828b8fa8b1727c3.jpeg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""></a></li>
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1226&h=460&f=webp&q=90" alt=""></a></li>
</ul>
<ul class="btn">
<li class="left_btn"> < </li>
<li class="right_btn"> > </li>
</ul>
</div>
</body>
</html>
固定定位（fixed）：
固定定位与绝对定位有点相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，所以当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了。
示例：点击查看代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf8">
<style>
body{
margin: 0;
}
.c1{
width: 100%;
height: 2000px;
background-color: lightgray;
}
.c2{
width: 200px;
height: 60px;
background-color: yellowgreen;
text-align: center;
line-height: 60px;
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了