本文详细介绍了CSS的各种属性，包括字体、文字、边框、display、浮动、溢出、定位等，并探讨了它们在网页布局中的影响和解决办法。重点讲解了浮动带来的父元素塌陷问题及其解决方案，以及如何使用定位实现元素的精确控制。此外，还提到了z-index用于处理元素叠加，以及透明度和模态框的创建。内容深入浅出，适合初学者和进阶者学习。
文章目录
css
字体属性
<style>
p{
font-family: 'Ubuntu', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif; /* 字体 */
font-size: 24px; /* 字体大小 */
font-weight: lighter; /* bolder加粗 lighter变细 */
/*color: orange; !* 字体颜色可以直接写颜色英文 或者 颜色编号 或者三基色*!*/
/*color: #FFA500; !* 编号 *!*/
/*color: rgb(255, 165, 0); !* 三基色 *!*/
color: rgba(255, 265, 0, 0.5); /* 第四个参数是颜色透明的 */
}
</style>
文字属性
<style>
p{
/*text-align: center; !*居中对齐*!*/
/*text-align: right; !*右对齐*!*/
/*text-align: left;
text-align: justify; /*两端对齐*/
/*text-decoration: underline; !* 下划线*!*/
/*text-decoration: overline; !* 上划线*!*/
/*text-decoration: line-through; !* 删除线*!*/
/*text-decoration: none; !* 没有任何样式 *!*/
font-size: 16px; /* 实现首行缩进两个字 */
text-indent: 32px; /* 因为设置了每个字体16px大小 因此缩进32px达到缩进两个字体的效果 */
/* 在html中很多标签渲染出来的效果是一样的 只是语义不一样 */
}
a{
text-decoration: none; /* 专门来给a标签取消掉下划线的 需要掌握*/
}
</style>
边框
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
border-width: 5px; /* 边框厚度 */
border-style: solid; /* 边框类型 */
border-color: greenyellow; /* 边框颜色 */
}
div{
border: red 3px solid; /* 三者位置可以任意换 对应的是 color width style */
}
#d1{
height: 400px;
width: 400px;
background-color: orange;
border-radius: 50%; /* 直接写50%即可 只要长宽一致就是圆 */
}
</style>
</head>
<body>
<p>
穷人 被diss 到了 哭泣.png
</p>
<div>
妈了个巴子妈了个巴子 妈了个巴子
</div>
<div id="d1"></div>
</body>
display
# 能够让标签具有自身没有的属性和特征
display
none 隐藏 并且原来的位置也没有了
inline 将块儿级标签变为行标签 同时失去调节长宽的功能
block 将行标签变为块儿标签
inline-block 行和块儿的功能都有
ps:visibility: 只隐藏 位置还在
盒子模型
# 任何标签可以分成四个部分
# 1.外边距 （标签与标签的距离） margin 调节标签与标签的距离就用margin
# 2. 边框 border
# 3. 内边距、内填充 padding 调节标签与文本的距离就用padding
# 4. 内容 content
body标签自带8像素的margin
margin: 有四个参数 可以写任意个 对应的意思如下
10 上下左右（10）
10 20 上下（10） 左右（20） 下面同理
10 20 30 上 左右 下
10 20 30 40 上 右 下 左
padding: 跟margin一模一样的
浮动
前期页面布局 一般都是采用浮动来设计页面
浮动的元素 没有块儿级一说 本身多大浮起来就占多大
浮动带来的影响
会造成父标签塌陷的问题
解决浮动带来的影响
解决浮动
1.自己加一个div设置高度
2.利用clear属性
#d4{
height: 400px;
width: 400px;
background-color: black;
clear: left; /* 该标签的左边（地面和空着）不能有浮动元素 right右边不能有 both两边不能有 */
}
3.通用的解决浮动带来的影响
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after{
content: "";
display: block;
clear: both;
}
之后只要标签出现了塌陷的问题 那就给该标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
溢出属性
<style>
p{
height: 100px;
width: 100px;
border: 3px red solid;
/*overflow: visible; !* 默认溢出 还是溢出 *!*/
/*overflow: hidden; !* 溢出的就隐藏 别展示了 *!*/
/*overflow: scroll; !* 设置成上下滚动条的形式 *!*/
overflow: auto;
}
</style>
定位
- 静态
所有的标签默认都是静态的static ，无法改变位置 - 相对定位 （了解）
相对于标签原来的位置做移动relative - 绝对定位 （常用）
相对于已经定位过的父标签做移动（如果没有父标签，那就以body为参照）
当你不知道页面其它标签的位置和参数，只给你一个父标签的参数， 让你基于该标签做定位 - 固定定位 （常用）
相对于浏览器窗口固定在某个位置
<style>
body{
margin: 0px;
}
#d1{
height: 200px;
width: 200px;
background-color: orange;
left: 100px; /* 从左往右移动100像素 */
top: 100px; /* 从上往下移动100像素 */
/*position: static; !* position默认是static static是无法修改位置的 *!*/
position: relative; /* 相对定位 标签有static变为relative 它的性质就从原来的没有定位的标签变成了已经定位了的标签 */
}
#d2{
height: 100px;
width: 200px;
background-color: red;
position: relative; /* 相对定位 没有left top让其改变位置 但是它已经变为定位标签了 */
}
#d3{
height: 200px;
width: 400px;
background-color: green;
position: absolute; /* 绝对定位 前提是夫标签已经是定位标签了 */
left: 200px;
top: 100px;
}
#d4{
position: fixed; /* 写了fixed之后 定位就是依据于浏览器窗口 */
bottom: 200px;
right: 30px;
height: 50px;
width: 100px;
border: black solid 3px;
}
</style>
验证浮动和定位是否脱离文档流（原来的位置是否还保留）
'''
浮动
相对定位
绝对定位
固定定位
# 不脱离文档流
1.相对定位
# 脱离文档流
1.浮动
2.绝对定位
3.固定定位
'''
z-index模态框
eg: 百度登录页面 其实是三层结构
1.最顶层是正常内容（z=0） 最远的
2.黑色的透明去（z=99） 中间层
3.白色的注册区域 （z=100）离用户最近
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.cover{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(127,127,127,0.6);
z-index: 99;
}
.modal{
background-color:white;
height: 200px;
width: 600px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -300px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<button>登录</button>
</div>
透明度opactiy
# 它不单单可以修改颜色的透明度 还可以修改字体的透明度
rgba 只能影响颜色
而opacity能修改颜色和字体
博客园搭建
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客园</title>
<link rel="stylesheet" href="blog.css"> /* 放css样式文件路径 */
</head>
<body>
<div class="blog-left">
<div class="blog_tx">
<img src="cc.png" alt="暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片 暂无图片"> /* 头像路径 最好是正方形图片 */
</div>
<div class="blog_name">
<p>车王冰</p>
</div>
<div class="blog_detail">
<p>车门以上锁 准备发车！</p>
</div>
<div class="blog_link">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="blog_tag">
<ul>
<li><a href="">#python</a></li>
<li><a href="">#java</a></li>
<li><a href="">#golang</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article">
<div class="title">
<sapn class="article-title">开车的重要性</sapn>
<sapn class="date">2021.5.29</sapn>
</div>
<div class="body">
<p>不开车是不可能的</p>
</div>
<hr>
<div class="bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="title">
<sapn class="article-title">开车的重要性</sapn>
<sapn class="date">2021.5.29</sapn>
</div>
<div class="body">
<p>不开车是不可能的</p>
</div>
<hr>
<div class="bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="title">
<sapn class="article-title">开车的重要性</sapn>
<sapn class="date">2021.5.29</sapn>
</div>
<div class="body">
<p>不开车是不可能的</p>
</div>
<hr>
<div class="bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="title">
<sapn class="article-title">开车的重要性</sapn>
<sapn class="date">2021.5.29</sapn>
</div>
<div class="body">
<p>不开车是不可能的</p>
</div>
<hr>
<div class="bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="title">
<sapn class="article-title">开车的重要性</sapn>
<sapn class="date">2021.5.29</sapn>
</div>
<div class="body">
<p>不开车是不可能的</p>
</div>
<hr>
<div class="bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
</div>
</body>
</html>
css代码
/*这是博客园首页的样式文件*/
/*通用样式*/
body{
margin: 0px;
background-color: #eeeeee; /* 页码整体颜色乳白色 */
}
a{
text-decoration: none; /* 不要a标签下划线 */
}
ul{
list-style-type: none; /* 不要圆点 */
padding-left: 0;
}
/*左侧样式*/
.blog-left{
float:left;
width: 20%;
height: 100%;
position: fixed; /* 绝对定位 */
background-color: #4e4e4e;
}
.blog_tx{
border: solid 5px wheat;
height: 200px;
width: 200px;
border-radius: 50%; /* 50%就是画圆 */
margin: 20px auto;
overflow: hidden; /* 超出隐藏 */
}
.blog_tx img{
max-width: 100%; /* 图片占div100% */
}
.blog_detail p,.blog_name p{ /* 名字、简介样式 */
color: darkgray;
font-size: 18px;
text-align: center;
}
.blog_link,.blog_tag{
font-size: 24px;
text-align: center; /* 文本居中 */
margin-top: 60px; /* 距离顶部距离 */
}
.blog_link a,.blog_tag a{ /* a标签颜色 */
color: darkgray;
}
.blog_link a:hover,.blog_tag a:hover{ /* a标签悬浮态样式 */
color: orange;
}
/*右侧样式*/
.blog-right{
float:right;
width: 80%;
height: 1000px;
background-color: #ffc9bf
}
.article{
margin: 10px 30px 20px 10px;
/*background-color: white;*/
border-right: 3px darkgray solid;
border-bottom: 3px darkgray solid;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5); /*阴影*/
background-color: #86ffee;
}
.article-title{
font-size: 36px;
}
.date{
float: right; /* 靠右浮动*/
margin: 20px 20px;
font-weight: bolder;
}
.title{
border-left: 5px red solid; /* 左侧红边框 */
text-indent: 16px; /* 缩进 */
}
.body{
text-indent: 20px; /* 缩进 */
}
.bottom{
padding-left: 20px;
padding-bottom: 8px; /* 文本距离 内边框的距离*/
}
扫一扫
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
