CSS（基于Java开发的学习）

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 righty方向的可选值：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 dois to save every day until eternity passes awayjust to spend them with youIf I could save time in a bottlethe first thing that I'd like to dois to save every day until eternity passes awayjust to spend them with youIf I could make days last foreverif words could make wishes come trueI'd save every day like a treasure and thenagain I would spend them with you</p></div>
</body>
</html>

弹性布局可以使一个div下多个img水平排列，不换行。

16.2 网格布局

网址：CSS 网格布局 | 菜鸟教程 (runoob.com)

CSS（基于Java开发的学习）相关推荐

HTML（基于Java开发的学习）
HTML学习结构 1. 了解前端知识 1.1 B/S架构 C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Serv ...
祖玛java代码_androidzuma 基于java开发的安卓祖玛龙珠游戏代码，可帮助的学习。 Develop 238万源代码下载- www.pudn.com...
文件名称: androidzuma下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 1174 KB 上传时间: 2013-11-27 下载次数: 1 提供者: ...
B2C商城项目源码，基于Java开发的高可用分布式B2C商城系统，Java+Spring MVC+Dubbo+Zookeeper+MySQL+Redis+FastDFS+Nginx+Solr
目录前言 B2C商城-AIYOU 一.项目总体架构二.系统软硬件设施总体规划 1.系统服务规划 2.应用服务规划 3.应用系统域名规划三.系统运行环境构建四.项目数据库创建五.项目拉取六. ...
基于JAVA计算机在线学习管理系统-计算机毕业设计源码+系统+mysql数据库+lw文档+部署
基于JAVA计算机在线学习管理系统-计算机毕业设计源码+系统+mysql数据库+lw文档+部署基于JAVA计算机在线学习管理系统-计算机毕业设计源码+系统+mysql数据库+lw文档+部署本源码技 ...
基于Java毕业设计在线学习平台源码+系统+mysql+lw文档+部署软件
基于Java毕业设计在线学习平台源码+系统+mysql+lw文档+部署软件基于Java毕业设计在线学习平台源码+系统+mysql+lw文档+部署软件本源码技术栈: 项目架构:B/S架构开发语言: ...
基于JAVA英语课程学习网站计算机毕业设计源码+系统+mysql数据库+lw文档+部署
基于JAVA英语课程学习网站计算机毕业设计源码+系统+mysql数据库+lw文档+部署基于JAVA英语课程学习网站计算机毕业设计源码+系统+mysql数据库+lw文档+部署本源码技术栈: 项目架构 ...
基于Java毕业设计在线学习系统源码+系统+mysql+lw文档+部署软件
基于Java毕业设计在线学习系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计在线学习系统源码+系统+mysql+lw文档+部署软件本源码技术栈: 项目架构:B/S架构开发语言: ...
初学Java开发的学习路线图是什么？
初学Java开发的学习路线图是什么?下面和小编一起来看看吧! 1.面向对象 Java是一个面向对象的开发语言,熟悉面向对象对学习Java很有必要,要了解对象,类;封装,多态,继承;抽象类,接口.如何体 ...
基于JAVA在线多媒体学习社区的设计与实现计算机毕业设计源码+系统+数据库+lw文档+部署
基于JAVA在线多媒体学习社区的设计与实现计算机毕业设计源码+系统+数据库+lw文档+部署基于JAVA在线多媒体学习社区的设计与实现计算机毕业设计源码+系统+数据库+lw文档+部署本源码技术栈: ...

CSS（基于Java开发的学习）

CSS(基于Java基础学习)

1. CSS简介

2. CSS语法

3. CSS引入方式

4.CSS选择器

4.1基本选择器

4.2 层次选择器

4.3 结构伪类选择器

4.4 属性选择器

5. CSS背景

6. 字体样式

7. 文本样式

8. 渐变

9. 列表样式

10. border边框

11. 伪类

12. 盒子

13. CSS显示&&透明

14. 浮动float

15. 定位position

16. CSS布局

16.1 flex学习

16.2 网格布局

CSS（基于Java开发的学习）相关推荐

最新文章

热门文章

CSS（基于Java开发的学习）

CSS(基于Java基础学习)

1. CSS简介

2. CSS语法

3. CSS引入方式

4.CSS选择器

4.1基本选择器

4.2 层次选择器

4.3 结构伪类选择器

4.4 属性选择器

5. CSS背景

6. 字体样式

7. 文本样式

8. 渐变

9. 列表样式

10. border边框

11. 伪类

12. 盒子

13. CSS显示&&透明 ​

14. 浮动float

15. 定位position

16. CSS布局

16.1 flex学习

16.2 网格布局

CSS（基于Java开发的学习）相关推荐

最新文章

热门文章

13. CSS显示&&透明