CSS（学习自用-day1）
目录
一、实现CSS的三种方式
1、引入外部CSS样式
2、内部样式
3、内联样式
二、CSS修饰各种标签使用方式
1、通用
2、指定id
3、指定属性
4、指定class
5、全选择器
6、子代选择器，指定某个标签内部的标签
三、边框及各种边距
四、CSS的position定位
1、static
2、relative
3、absolute
4、fixed
5、sticky
6、非定位祖先元素
一、实现CSS的三种方式
1、引入外部CSS样式
使用link标签引入
2、内部样式
写在head的style标签里。
3、内联样式
写在某个具体标签中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部css样式 -->
<link href="css/easyD.css" rel="stylesheet"/>
<!-- 样式从上往下会被覆盖掉 -->
<style>
/* 内部样式 写在html文档内部 */
*{
color: red;
}
</style>
</head>
<body>
<!-- css可以写在三个位置 -->
<!-- 内联样式 写在标签中 -->
<img src="image/pubu.png" style="height: 100px"/>
<span style="color: orange;">123</span>
</body>
</html>上面代码中span里的123会显示orange颜色，因为css样式从上往下会依次被覆盖掉。
二、CSS修饰各种标签使用方式
1、通用
直接div、span
/* 元素标签选择器 */
div{
border: 1px solid deeppink ;
height: 100px;
width: 100px;
background-color: aquamarine;
}2、指定id
使用#
/* 对指定id的div标签修饰 */
#div1{
background-color: blanchedalmond;
}3、指定属性
/* 属性选择器（选择属性中有name的） */
[name="password"]{
outline: none;
}4、指定class
使用.
/* 类选择 class等于多少 */
.box{
border-radius: 10px;
background-color: azure;
}5、全选择器
/* 全选择器 */
*{
margin: 0;
}6、子代选择器，指定某个标签内部的标签
使用>
/* 子代选择器 指定div内部的标签 */
.box>span{
color: red;
/* 字体大小 */
font-size: 30px;
/* 字体加粗 bold或者600以上*/
font-weight: bold;
}
/* 只修饰子类 */
.boxb>.boxc{
border-width: 5px;
}
/* 修饰所有的后代 */
.boxb .boxc{
border-radius: 5px;
}三、边框及各种边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#easy{
width: 400px;
height: 300px;
background-color: aquamarine;
border-style: solid;
border-color: black;
}
.box{
width: 100px;
height: 100px;
background-color: antiquewhite;
border-style: solid;
/* border-left-width: 5px; */
border-color: red;
/* 顺序为上-右-下-左 顺时针*/
border-width: 5px 10px 15px 20px;
/* 上-左右-下 */
border-width: 5px 10px 20px;
/* 上下-左右 */
border-width: 5px 10px;
/* 四条边都一样 */
border-width: 5px;
/* 内边距 内部空间--边框的距离 */
padding: 20px;
/* 外边距 边框距离其他组件的距离*/
margin: 50px;
/* 垂直方向的没有间隔的外边距会合并成一个,取最大值 盒模型塌陷*/
}
</style>
</head>
<body>
<!-- 盒模型 将块级标签抽象为一个盒子-->
<div id="easy">
<div class="box">
你好
</div>
</div>
<div style="margin: 100px;padding: 50px;">
你好
</div>
</body>
</html>四、CSS的position定位
1、static
static（默认值）
行为：元素按照正常的文档流进行布局，不会受到top、right、bottom、left等偏移属性的影响。
用途：通常不需要特殊定位时使用。
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
position: static; /* 默认值 */
}
</style>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
2、relative
行为：元素相对于其正常位置进行偏移，但不会影响其他元素的布局。元素仍然占据原来的位置。
用途：常用于微调元素的位置，同时不影响页面的整体布局。
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
.relative {
position: relative;
top: 20px;
/* 向下偏移20px */
left: 20px;
/* 向右偏移20px */
}
</style>
3、absolute
行为：元素相对于其最近的已定位（非static）祖先元素进行偏移。如果没有祖先元素，则相对于初始包含块（通常是<html>元素）。
用途：常用于将元素从文档流中脱离出来，进行精确的布局。
<style>
.container {
position: relative; /* 作为绝对定位的参照物 */
width: 300px;
height: 300px;
background-color: lightgray;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
.absolute {
position: absolute;
top: 50px; /* 距离容器顶部50px */
right: 50px; /* 距离容器右侧50px */
}
</style>
<div class="container">
<div class="box">Box 1</div>
<div class="box absolute">Box 2</div>
</div>
4、fixed
行为：元素相对于浏览器窗口进行偏移，即使滚动页面，元素位置也不会改变。
用途：常用于创建固定导航栏、悬浮按钮等。
<style>
.fixed {
position: fixed;
top: 20px; /* 距离窗口顶部20px */
right: 20px; /* 距离窗口右侧20px */
width: 100px;
height: 100px;
background-color: lightcoral;
z-index: 1000; /* 确保在最上层 */
}
.content {
height: 1000px; /* 让页面可以滚动 */
background-color: lightgray;
}
</style>
<div class="fixed">Fixed Box</div>
<div class="content">
<p>滚动页面看看固定定位的效果。</p>
<p>...</p>
</div>
5、sticky
行为：元素在页面滚动到一定位置时，会“粘”在指定位置（类似于fixed），但在其他位置时仍然按照正常文档流布局。
用途：常用于创建粘性导航栏、侧边栏等。
<style>
.sticky {
position: sticky;
top: 0; /* 距离窗口顶部0px时变为固定定位 */
width: 100%;
height: 50px;
background-color: lightgreen;
z-index: 1000;
}
.content {
height: 1000px; /* 让页面可以滚动 */
background-color: lightgray;
}
</style>
<div class="sticky">Sticky Box</div>
<div class="content">
<p>滚动页面看看粘性定位的效果。</p>
<p>...</p>
</div>
6、非定位祖先元素
