CSS(基于Java基础学习)
CSS学习结构
1. CSS简介
层叠样式表（Cascading Style Sheets），是一种用来为HTML文档添加样式的语言，CSS文件的扩展名一般为.css，现在我们所学的版本是CSS3。
2. CSS语法
一个完整的CSS样式，由多部分构造，由：
选择器 {
属性1: 值;
属性2: 值;
属性n: 值;
}
例：
p {
background-color: #ffbda7;
color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写CSS的代码，每一个声明最好以“;”结尾
语法：
选择器{
属性1: 值;
属性2: 值;
属性n: 值;
} -->
<style>
h1{
color: aqua;
}
</style>
</head>
<body>
<h1>CSS</h1>
</body>
</html>3. CSS引入方式
1. 标签选择器（标签样式）
以标签名为选择器，如：p、a、h、body、ul、ol、table、tr、td等，那么HTML文档中的所有该标签都会应用该样式。
2. 类选择器（类样式）
以“.样式名”为选择器，如：.pp1。在HTML文档通过class属性来指定类选择器，如：<p class="pp1">
3. ID选择器
以“#ID名”为选择，如：#pp1。在HTML文档中通过id属性为指定ID选择器，如：<p id="pp1">
CSS引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<!--外部样式-->
<!-- 1.方式一<link rel="stylesheet" href="css/style.css" /> -->
<!-- 2.方式二 -->
<style>
#h1{
color:red;
}
</style>
</head>
<body>
<h1 id="h1">hello world !</h1>
<!-- 3.方式三 -->
<h1 style="color: red;">你好！世界。</h1>
</body>
</html>4.CSS选择器
4.1基本选择器
1. 标签选择器（标签样式）
以标签名为选择器，如：p、a、h、body、ul、ol、table、tr、td等，那么HTML文档中的所有该标签都会应用该样式。
2. 类选择器（类样式）
以“.样式名”为选择器，如：.pp1。在HTML文档通过class属性来指定类选择器，如：<p class="pp1">
3. ID选择器
以“#ID名”为选择，如：#pp1。在HTML文档中通过id属性为指定ID选择器，如：<p id="pp1">
标签/类/ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
/* id选择器 */
#p1{
/* 字体颜色 */
color: rgb(4, 6, 6);
}
/* 类选择器 */
.p2{
color: red;
}
/* 标签选择器 */
p{
/* 字体大小 */
font-size: 18px;
}
</style>
</head>
<body>
<p id="p1">秋去春来万物休，唯有柿子挂灯笼。</p>
<p class="p2">就算是believe,中间也藏了个lie。</p>
</body>
</html>4.2 层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
/* id选择器 */
#p1{
/* 字体颜色 */
color: rgb(4, 6, 6);
}
/* 类选择器 */
.p2{
color: red;
}
/* 标签选择器 */
p{
/* 字体大小 */
font-size: 18px;
}
/* 层次选择器 */
/* 后代选择器 */
body p{
/* 字体加粗 */
font-weight: bold;
}
/* 子选择器，一代 */
body>p{
/* 背景颜色 */
background-color: aquamarine;
}
/* 相邻兄弟选择器,选择一个 */
.p3+p{
background-color: blue;
}
/* 相邻兄弟选择器,选择所有 */
.p3~p{
font-size: 26px;
}
</style>
</head>
<body>
<p id="p1">秋去春来万物休，唯有柿子挂灯笼。</p>
<p class="p2">就算是believe,中间也藏了个lie。</p>
<div>
<p class="p3">这是个p标签!</p>
<p>我是你的邻居p呀!</p>
<p>我是你们的邻居p呀!</p>
</div>
</body>
</html>4.3 结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: aqua;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: blue;
}
/*选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！*/
p:nth-child(1){
background: orange;
}
/*选中父元素下的，第2个p元素*/
p:nth-of-type(2){
background: red;
}
a:hover{
color: green;
}
</style>
</head>
<body>
<a href="">123</a>
<p>这是第一个p</p>
<p>这是第二个p2</p>
<p>这是第三个p3</p>
<h3>这是第一个h3</h3>
<ul>
<li>1li1</li>
<li>1li2</li>
<li>1li3</li>
</ul>
<ul>
<li>2li1</li>
<li>2li2</li>
<li>2li3</li>
</ul>
<a href="www.baidu.com">百度</a>
</body>
</html>4.4 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
/* 左浮动 */
float: left;
/* 将行级标签转为块级标签 */
display: block;
/* 设置高度 */
height: 50px;
/* 设置宽度 */
width: 50px;
/* 设置边框边角 */
border-radius: 10px;
/* 设置背景颜色 */
background: aquamarine;
/* 设置内容居中 */
text-align: center;
/* 设置字体颜色 */
color: gray;
/* 设置无下划线 */
text-decoration: none;
/* 设置右外边距 */
margin-right: 5px;
/*line-height:50px;*/
font: bold 20px/50px Arial;
}
/*属性名，属性名=属性值（正则）
= 表示绝对等于
*= 表示包含
^= 表示以...开头
$= 表示以...结尾
存在id属性的元素
a[]{}
*/
a[id]{
background: yellow;
}
/*id=first的元素*/
a[id=first]{
background: green;
}
/*class 中有links的元素*/
a[class*="links"]{
background: bisque;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background: aquamarine;
}
/*选中href中以http开头的元素*/
a[href$=pdf]{
background: aquamarine;
}
</style>
</head>
<body>
<p class="demo">
<a href="" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank " title="test">2</a>
<a href="http:www.baidu.com" class="links item">3</a>
<a href="" class="links item">4</a>
<a href="" class="links item">5</a>
<a href="" class="links item">6</a>
<a href="pdf" class="links item">7</a>
<a href="" class="links item">8</a>
<a href="" class="links item">9</a>
<a href="" class="links item last">10</a>
</p>
</body>
</html>5. CSS背景
background-color 设置元素的背景颜色
background-image 设置元素的背景图案，格式：url('图片路径')
background-size: cover; 设置图片大小，cover整个覆盖
background-repeat 设置背景图案平铺方式，可选值有：
repeat【默认】 平铺
repeat-x 只在X方向进行平铺（水平平铺）
repeat-y 只在y方法进行平铺（垂直平铺）
no-repeat 不平铺
background-poistion 设置背景位置，格式：X方向对方 y方向对齐
x方向的可选值：left center right
y方向的可选值：top center bottom
background-attachment 设置背景图案的滚动方式，可选值有：
scroll【默认】
fixed 将图案固定在屏幕上，不会随滚动条而移动
简写：
background: 颜色值 url('图片路径') no-repeat 200px top fixed; CSS背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
body{
padding: 0;
margin: 0;
}
.p1{
width: 1200px;
height: 1000px;
/* 设置背景图 */
background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.itc.cn%2Fimages01%2F20201112%2F0d39c05194ff43e087bcd5e988dd0719.jpeg&refer=http%3A%2F%2Fp6.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664633351&t=453d80a3d7e9b610f3b5aadf17924163');
/* 背景图的大小 */
background-size: 600px;
/* 背景图平铺方式 */
background-repeat: no-repeat;
/* 设置背景颜色 */
background-color: aqua;
/* 设置背景位置 */
background-position: center center;
/* 设置背景图的滚动方式 fixed不随滚动条移动*/
/* background-attachment: fixed; */
}
.p2{
width: 800px;
height: 800px;
border: red 1px solid;
background-color: aquamarine;
/* 下面100px是左边距100px */
background: url("./h.png") no-repeat 100px center fixed;
}
</style>
</head>
<body>
<p class="p1">
</p>
<p class="p2">
</p>
</body>
</html>6. 字体样式
font-family 设置元素内文字的字体，注意：该样式取决于客户端是否安装了该字体。
font-size 设置元素内文字的字号大小，单位px，如：20px;
font-weight 设置元素内文字重量，可选值：
bold 加粗
font-style 设置元素内文字样式，可选值：
italic 倾斜
简写：
font: italic bold 20px "楷体";
color 设置元素内文字的颜色，该属性会渗透给子元素，格式：red或者#aabbcc;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
.p1{
width: 400px;
height: 100px;
background: rgb(171, 237, 237);
opacity: 0.5;
/* 字体设置 */
font-family:'宋体';
/* 字体大小 */
font-size: 18px;
/* 字体加粗 */
font-weight: bold;
/* 字体样式加斜 */
font-style: italic;
/* 字体溢出设置 */
overflow: auto;
}
.p2{
width: 400px;
height: 100px;
background: rgb(171, 237, 237);
opacity: 0.5;
font: italic bold 18px "宋体";
overflow: hidden;
}
</style>
</head>
<body>
<p class="p1">
熟悉了金字塔原理以后，在写一些不太复杂的工作文章时，
你应该可以顺利地在序言里使用“背景—冲突—疑问”建立问答对话，引出你的解决方案。
但是如果需要写篇幅长的复杂文章，例如项目规划、研究报告，难度可就不同了。
首先你需要花费较长的时间收集材料，还得将各种各样的数据、信息、观点分类和归纳，
光是对材料进行取舍就是个浩大的工程，整个写作过程可能持续一两周甚至一个月。在这个过程中，
你需要完成这些工作：分析材料、界定问题、得出解决方案、分享解决方案。
</p>
<p class="p2">
熟悉了金字塔原理以后，在写一些不太复杂的工作文章时，
你应该可以顺利地在序言里使用“背景—冲突—疑问”建立问答对话，引出你的解决方案。
但是如果需要写篇幅长的复杂文章，例如项目规划、研究报告，难度可就不同了。
首先你需要花费较长的时间收集材料，还得将各种各样的数据、信息、观点分类和归纳，
光是对材料进行取舍就是个浩大的工程，整个写作过程可能持续一两周甚至一个月。在这个过程中，
你需要完成这些工作：分析材料、界定问题、得出解决方案、分享解决方案。
</p>
</body>
</html>7. 文本样式
text-align 设置元素内文字的对齐方式，可选值有：
left【默认】 左对齐
center 居中对齐
right 右对齐
text-decoration 设置元素内文字的装饰，可选值有：
underline 显示下划线
none 去掉下划线
overline 显示上划线
line-through 显示删除线
text-indent 设置元素内文字的首先缩进，单位一般为em，如2em;
text-transfrom 设置元素内文字的大小写转换，可选值有：
capitalize 强制把每个单词首字母转为大写
uppercase 全部转为大写
lowercase 全部转为小写
direction 设置元素内文字的排列方向，可选值有：
ltr【默认】 从左至右
rtl 从右至左
line-height 设置元素内文本的行高（行距），值有两种写法：
1. 带单位的，比如px，根据指定的数值及单位进行设置行高。
2. 没带单位的，根据倍数来设置行高。
word-spacing 设置单词之间的间距，单位px，注意对汉字是无效的。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
p{
margin: 0 auto;
}
.p1{
width: 600px;
height: 300px;
/* 文字对齐方式 */
text-align: center;
/* 行高 */
line-height: 40px;
/* 首行缩进 */
text-indent: 2em;
}
.p2,.p3,.p4,.p5,.p6{
width: 600px;
height: 20px;
}
.p2{
/* 下划线 */
text-decoration: underline;
}
.p3{
/* 文字转换大小写 */
text-transform: lowercase;
}
.p4{
/* 文字排列方式从左到右、从右到左 */
direction: ltr;
}
.p5{
/* 文字间距针对英文 */
word-spacing: 10px;
}
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p class="p1">界定问题是个复杂的过程，导致一个现状的因素往往错综复杂，甚至存在迷惑成分，
一旦界定错误，就会误入歧途，给出效果堪忧的解决方案。我们先来看一个案例。
为了纪念托马斯•杰斐逊（美国历史上第三任总统），
美国在华盛顿修建了杰斐逊纪念堂（Thomas Jefferson Memorial）。
纪念堂建成于1943年，墙壁由白色大理石砌成，庄严优美。
但是曾经有一段时间，一个令人头痛的问题困扰着纪念堂的工作人员——纪念堂的墙壁受到严重的腐蚀，
经常开裂。维护人员为此感到十分为难，游客也经常抱怨。
</p>
<p class="p2">第一，是否存在或是否可能存在问题/机会？</p>
<p class="p3">Second, where are the problems/opportunities?</p>
<p class="p4">第三，为什么存在问题？</p>
<p class="p5">Fourth, what can we do?</p>
<span class="p6">第五，我们应该做什么？</span><img src="./h.png" width="100px">
</body>
</html>8. 渐变
渐变背景网址：Grabient 径向渐变、圆形渐变
body{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
9. 列表样式
list-style-type 设置列表项前面的符号类型，可选值有：
none 不显示符号
square 小正方型符号
circle 空心小圆圈
list-style-image 设置列表项前面的符号为指定的图案，格式：url("image/jt.png");
list-style-position 设置列表项前面的符号/图案的位置，可选值有：
outside【默认】 图案在ul区域外部
inside 图案在ul区域内部
简写：
list-style: circle url("image/jt.png") inside;列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
.ul1{
/* 设置符号类型 */
list-style-type: circle;
list-style-position: inside;
}
.ul2{
/* 设置符号类型为指定图像 */
list-style-image: url('./h.png');
}
.ul3{
/* 简写 */
list-style: circle url('xxx') inside;
}
</style>
</head>
<body>
<!-- ul无序列表 -->
<ul class="ul1">
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.sina.com">新浪</a></li>
<li><a href="http://www.sohu.com">搜狐</a></li>
<li><a href="http://www.163.com">网易</a></li>
</ul>
<ul class="ul2">
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.sina.com">新浪</a></li>
<li><a href="http://www.sohu.com">搜狐</a></li>
<li><a href="http://www.163.com">网易</a></li>
</ul>
<ul class="ul3">
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.sina.com">新浪</a></li>
<li><a href="http://www.sohu.com">搜狐</a></li>
<li><a href="http://www.163.com">网易</a></li>
</ul>
</body>
</html>10. border边框
border[-方向]-color 设置边框颜色
border[-方向]-width 设置边框宽度，单位px
border[-方向]-style 设置边框样式，可选值有：
none 隐藏边框
solid【默认】 实线
dashed 虚线
简称：
border[-方向]: 颜色值 宽度 样式;
border-collapse 设置将边框折叠为单一线条边框，可选值：
collapse 折叠
说明：以上的方向可选值有：top、bottom、left、right四个方向，且这些样式不只属于table，也可以作用于别的容器元素，如p、li、span、div等。
overflow 设置内容超出盒子边框时的显方式，可选值有：
visible【默认】 显示
hidden 隐藏超出部分
scroll 出现滚动条，无论内容是否超出盒子，都会出现滚动条
auto 自动模式，如果哪个方向超出就出来滚动条，反之就不出现
border-radius有四个参数（顺时针），左上开始
圆圈：圆角=半径<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
.p1{
width: 300px;
height: 200px;
opacity: 0.5;
/* 边框颜色 */
border-color: red;
/* 边框宽度 */
border-width: 2px;
/* 边框样式 */
border-style: solid;
}
.p2{
width: 300px;
height: 200px;
/* 简写边框样式 */
border: aqua 1px solid;
opacity: 0.5;
}
.p3{
width: 100px;
height: 100px;
/* 简写边框样式 */
/* border: aqua 1px solid; */
opacity: 0.5;
overflow: auto;
border-collapse:collapse;
}
</style>
</head>
<body>
<p class="p1">
议题树需要先指出一个主要问题，然后把这个问题进行拆分，形成一组和它存在内在逻辑关系的子议题。
在拆分主要问题的时候，需要充分考虑到各种影响因素，它们可能不会直接作用于主要问题，但是需要纳入制定解决方案的过程。
议题树最常使用的场合是问题的初期阶段，因为它的形式比较传统，不容易出现遗漏，可靠性高，但是也有实施进程较缓慢的缺陷。
</p>
<p class="p2">
议题树需要先指出一个主要问题，然后把这个问题进行拆分，形成一组和它存在内在逻辑关系的子议题。
在拆分主要问题的时候，需要充分考虑到各种影响因素，它们可能不会直接作用于主要问题，但是需要纳入制定解决方案的过程。
议题树最常使用的场合是问题的初期阶段，因为它的形式比较传统，不容易出现遗漏，可靠性高，但是也有实施进程较缓慢的缺陷。
</p>
<table class="p3" border="6px">
<tr>
<td>aaaaaa</td>
<td>bbbbbb</td>
<td>cccccc</td>
</tr>
<tr>
<td>dddddd</td>
<td>eeeeee</td>
<td>ffffff</td>
</tr>
</table>
</body>
</html>11. 伪类
伪类用来添加一些选择器的特殊效果。
用法：选择器:伪类{
样式属性
}
a:link{} 表示超连接未访问的状态【默认，可省略】
a:hover{} 表示鼠标移动到超连接上面时的状态，该样式不只属于超链接，其它元素也可以使用。
a:active{} 表示点击超连接时的状态
a:visited{} 表示点击之后超连接时的状态，备注：部分浏览器有兼容性问题
选择器:first-child 选择父元素的第一个子元素
cursor:鼠标悬浮样式。伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
a{
cursor: crosshair;
}
/* 超链接为访问状态 也是默认状态*/
a:link{
text-decoration: none;
color: rgb(48, 136, 165);
}
/* 悬停在超链接上 */
a:hover{
color: bisque;
}
/* 点击超链接的状态 */
a:active{
color: aquamarine;
}
/* 点击之后超链接状态 浏览器部分兼容性问题*/
a:visited{
color: aqua;
}
/* 鼠标悬浮样式 */
</style>
</head>
<body>
<!-- 伪类 -->
<a href="#">我是一个超链接！</a>
</body>
</html>12. 盒子
margin:外边距 padding:内边距 border:边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
p{
/* 设置外边距 */
margin: 20px auto;
width: 400px;
height: 300px;
/* 设置行高 */
line-height: 25px;
/* 设置border */
border: aqua 10px solid;
/* 设置内边距 */
padding: 30px;
}
</style>
</head>
<body>
<p>
在谈到如何解决问题时，我们用到了很多种结构，解决问题的过程，
就是找出结构中导致非期望结果的因素的过程。如果分析到最后，
确定是结构里的问题导致了我们不想看到的结果，对结构进行相应调整即可。
但是有时候我们会遇上令人费解的局面—我们无法找出明确的结构，
所以难以弄清楚结果。造成这种局面的原因大致有三种：使用了一种不存在的结构，
例如在时间机器创造出来之前，它的结构就是不存在的；使用的结构没有具体形式，
例如大脑能够针对种种现象分析出结果但是难以抓到形式；使用的结构无法解释结果，
例如经典的“两个铁球同时着地”的故事，亚里士多德所说的“重的物体比轻的物体下落速度快”
就无法解释两个铁球同时着地。
</p>
</body>
</html>内边距/外边距
padding-top 设置盒子与内容上方的内边距，单位px
padding-bottom 设置盒子与内容下方的内边距，单位px
padding-left 设置盒子与内容左方的内边距，单位px
padding-right 设置盒子与内容右方的内边距，单位px
简写1：
padding: 10px 20px 30px 40px; 设置盒子与内容四个方向的内边距，顺序分别为上、右、下、左，一个顺时针方向
简写2：
padding: 10px 20px; 设置盒子与内容四个方向的内边距，顺序分别为上和下、左和右
简写3：
padding: 10px; 设置盒子与内容四个方向的内边距
margin-top 设置盒子与内容上方的外边距，单位px
margin-bottom 设置盒子与内容下方的外边距，单位px
margin-left 设置盒子与内容左方的外边距，单位px
margin-right 设置盒子与内容右方的外边距，单位px
简写1：
margin: 10px 20px 30px 40px; 设置盒子与内容四个方向的外边距，顺序分别为上、右、下、左，一个顺时针方向
简写2：
margin: 10px 20px; 设置盒子与内容四个方向的外边距，顺序分别为上和下、左和右
简写3：
margin: 10px; 设置盒子与内容四个方向的外边距
margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/
盒子的计算方式：
margin+border+padding+内容的大小13. CSS显示&&透明
可以通过CSS样式来控制元素的显示或者隐藏
display 隐藏元素，隐藏后不再占位，可选值有：
none 隐藏元素
block 以块级元素方式来显示，宽度变为100%;
inline 以内联方式来显示
visibility 藏元素，但只是将元素透明化，隐藏后占位依然存在。可选值有：
visible【默认】 显示
hidden 隐藏元素
opacity 设置元素的透明度，它不仅对颜色有效，对图像或者页面中其它的元素也有效。display/visibility/opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
.div1{
margin: 0 auto;
width: 600px;
height: 300px;
border: red 1px solid;
text-align: center;
/* 设置透明度 */
opacity: 0.5;
}
.div1 .img1,.img2,.img3{
width: 400px;
}
.img1,.img3{
/* 设置元素是否显示，none不显示，会消去元素格式 */
display: none;
}
.div2{
width: 600px;
margin: 0 auto;
text-align: center;
}
.img4,.img5{
/* 设置元素是否显示，会有占位效果 */
visibility: hidden;
}
span{
/* 转化为块级元素 */
display: block;
}
.d1{
/* 转化为内联样式 */
display: inline;
}
</style>
</head>
<body>
<div class="div1">
<img class="img1" src="https://img-blog.csdnimg.cn/1254871354764d509a18e07049238f72.png">
<img class="img2" src="./AM.jpg">
<img class="img3" src="./GA.jpg">
</div>
<div class="div2">
<img class="img4" src="https://img-blog.csdnimg.cn/1254871354764d509a18e07049238f72.png">
<img class="img5" src="./AM.jpg">
<img class="img6" src="./GA.jpg">
</div>
<span>hello world !</span>
<span>你好！世界</span>
<div class="d1">爱玩不求所有的日子</div>
<div class="d1">Love to play not all the days</div>
</body>
</html>14. 浮动float
就是将元素向左或者向右浮动，周围其它元素也要重新排列。
float 可选值有：
left 向左浮动
right 向右浮动
块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong
display与float相比
1.display：方向不可以控制
2.float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。
clear：
right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
none：overflow及父级边框塌陷问题
方案一：增加父级元素的高度； 方案二：增加一个空的div标签，清除浮动 方案三：在父级元素中增加一个overflow：hidden 方案四：父类添加一个伪类:after 1.浮动元素增加空div----》简单、代码尽量避免空div 2.设置父元素的高度-----》简单，元素假设没有了固定的高度，就会超出 3.overflow----》简单，下拉的一些场景避免使用 4.父类添加一个伪类:after（推荐）----》写法稍微复杂，但是没有副作用，推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
div{
text-align: center;
}
.div1{
margin: 0 auto;
width: 600px;
border: red 1px solid;
/* 防止父类塌陷问题 */
/* 1.方式一 overflow: hidden; */
}
/* 2.方式二 :after伪类 */
.div1:after{
content:'';
display:block;
clear:both;
}
.div2{
width: 100%;
border: aqua 1px solid;
/* 左浮动left */
float: left;
}
</style>
</head>
<body>
<div class="div1">
盒子一
<div class="div2">盒子二</div>
</div>
</body>
</html>15. 定位position
position 可选值有：
static【默认】 静态的，4个坐标属性是无效的
absolute 绝对的，会从当前元素往外部去找拥有相对定位的元素作为参照容器进行定位，如果没有找到拥有相对定位的父容器，那么以浏览器可视窗口为参照容器。定位后会取消原有占位。
relative 相对的，是相对自己原本的位置。定位后会继续占有原来的位置。
fiexd 固定的，相对于浏览器窗口是固定定位的，不会因为滚动条的滚动而更换位置。
坐标属性有left、right、top、bottom<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
.div1{
margin: 0 auto;
width: 800px;
height: 600px;
border: red 1px solid;
}
.div2{
width: 400px;
height: 300px;
border: aqua 1px solid;
/* 相对位置，相对于原来位置 */
position: relative;
left: 100px;
top: 100px;
}
.div21{
width: 100px;
height: 100px;
background: rgb(94, 226, 226);
/* 绝对定位 */
position: absolute;
bottom: 20px;
right: 20px;
}
.div3 img{
width: 300px;
/* 固定定位 */
position: fixed;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div21">
</div>
</div>
</div>
<div class="div3">
<img src="https://img-blog.csdnimg.cn/1254871354764d509a18e07049238f72.png">
</div>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>16. CSS布局
flex/网格布局
采用Flex布局的元素，称为Flex容器，简称“容器”。它的所有子元素自动成为容器成员，也称为Flex项，简称“项”。
通过给元素的display样式指定为：flex就可以将元素定义为一个Flex容器。
容器的样式属性
flex-direction 决定主轴的方向（即项排列的方向），可选值有：
row【默认】 水平方向为主轴，起点在左端
row-reverse 水平方向为主轴，起点在右端
column 垂直方向为主轴，起点在顶端
column-reverse 垂直方向为主轴，起点在底端
flex-wrap 决定主轴方向的项是否换行，可选值有：
no-wrap【默认】 不换行
wap 换行
简写：flex-flow: <flex-direction> <flex-wrap>;
justify-content 决定项在主轴方向的对齐方式，可选值有：
flex-start【默认】 主轴起始端对齐
flex-end 主轴末尾端对齐
center 主轴方向居中
space-betwwen 两端对齐，每一个项之间等距相隔
space-round 每一个项之间等距相隔，包括两端也会有间距
align-items 决定项在交叉轴方向的对齐方式，可选值有：
flext-start 交叉轴起始端对齐
flex-end 交叉轴末尾端对齐
center 交叉轴方向居中
stretch【默认】 交叉轴方向占满，前提是项在交叉轴方向的尺寸不能固定
baseline 以第一个项的文字的基线对齐
项的样式属性
order 定义项的排列顺序，数值越小，排序越靠前，默认为0。
flex-grow 定义项在主轴方向的放大比例，默认为0，如果为0即使存在剩余空间，也不放大。在同一条主轴上，值越大占比就越大。wap的时候有效
flex-shrink 定义项在主轴方向的缩小比例，默认为1。nowap的时候有效
flex-basis 定义项在分配多余空间之前，占用的主轴的尺寸长度。默认为auto，auto就是指项原本的大小。
简写：flex: <flex-grow> <flex-shrink> <flex-basis>; 默认是：0 1 auto
也是一种用于布局的流行方式，它定义了风格的列和行。
采用Grid布局的元素，称为Grid容器，简称“容器”。它的所有子元素自动成为容器成员，也称为Grid项，简称“项”。
通过给元素的display样式指定为：grid就可以将元素定义为一个网格容器。
容器的样式属性
grid-template-columns 定义网格的列数，以及每一列的宽度占比，auto为自适应。 16.1 flex学习
网址：微信小程序之 flex 布局最详细讲解 ！！！ - 腾讯云开发者社区-腾讯云 (tencent.com)
<!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>Web Page Layout</title>
<style>
body{
/* 清除默认样式 */
padding: 0;
margin: 0;
background-color: rgb(70, 127, 108);
}
.header{
height: 60px;
background-color: rgb(53, 114, 114);
text-align: center;
font-size: 18px;
line-height: 3;
}
.main{
width: 800px;
height: 600px;
background-color:rgb(19, 70, 114);
margin: 0 auto;
display: flex;
/* 设置主轴方向 */
flex-direction: row;
/* 设置对齐方式 */
justify-content: space-between;
/* 设置是否换行 */
flex-wrap: wrap;
}
.main div{
width: 250px;
height: 100px;
color: white;
text-align: center;
}
.item1{
background-color: rgba(8, 238, 215, 0.44);
}
.item2{
background-color: chocolate;
}
.item3{
background-color: rgb(77, 74, 61);
}
.item4{
background-color: crimson;
}
.item5{
background-color: darkgray;
}
.summary{
text-indent: 2em;
background-color: rgb(164, 79, 96);
opacity: 0.5;
color: cyan;
}
</style>
</head>
<body>
<div class="header">Frozen only with snow </div>
<div class="main">
<div class="item1">Hello! I'm a little tired!</div>
<div class="item2">trust him</div>
<div class="item3">Heart has been broken</div>
<div class="item4">Perfect is not perfect</div>
<div class="item5">Brain injury</div>
<p class="summary">
If I could save time in a bottle
the first thing that I'd like to do
is to save every day until eternity passes away
just to spend them with you
If I could save time in a bottle
the first thing that I'd like to do
is to save every day until eternity passes away
just to spend them with you
If I could make days last forever
if words could make wishes come true
I'd save every day like a treasure and then
again I would spend them with you
</p>
</div>
</body>
</html>弹性布局可以使一个div下多个img水平排列，不换行。
扫一扫
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
