【CSS基础语法】CSS基础语法知识学习笔记汇总
CSS基础语法
-
- 前言
- 一、样式定义方式
-
- 1.html
- 2.css
- 二、选择器
-
- 1.html
- 2.css
- 三、颜色
-
- 1.html
- 2.css
- 四、文本
-
- 1.html
- 2.css
- 五、字体
-
- 1.html
- 2.css
- 六、背景
-
- 1.html
- 2.css
- 七、边框
-
- 1.html
- 2.css
- 八、元素展示格式
-
- 1.html
- 2.css
- 九、内边距与外边距
-
- 1.html
- 2.css
- 十、盒子模型
-
- 1.html
- 2.css
- 十一、位置
-
- 1.html
- 2.css
- 十二、浮动
-
- 1.html
- 2.css
- 十三、flex布局
-
- 1.html
- 2.css
前言
html类似于一个毛坯房骨架，css类似于给毛坯房进行装饰
代码文件整理：
static文件夹一般用来存放各种资源，比如图片、音频视频、css文件
index.html为骨架
css全称为层叠样式表，作用：修饰html标签
html与css：
在html标签中，最基础的就是div和span标签，其他绝大部分标签都是从这两个标签上扩展出来的，扩展的时候其实就是在div和span标签的基础上加了一些css样式
即有很多标签是在基础标签的基础之上加了一些css样式得到的，只不过这些样式很常用就把他们单独拿出来作为单独的标签使用
css与js：
同理：在css中有一些常用的固有属性，绝大部分属性都是用js实现出来，所以也把js中一些常用逻辑单独拿出来作为css的一些常用属性
html、css、js三者关系：
html最上层(表层)
css 较下层
js最深层(底层)
现在学的都是基础语法，基础语法一定要学，等以后写项目工程时其实都是用框架，就像在写程序是没有必要手写汇编一样
一、样式定义方式
1.html
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>Documenttitle>
head>
<body>
<img width="300" src="/Learn2-css基础/static/images/mountain.jpg" alt="山">
<img src="/Learn2-css基础/static/images/mountain.jpg" alt="山" style="width: 300px;">
<div>yxcdiv>
<div style="width: 300px; height: 300px; background-color: lightblue;">div>
body>
html>
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>Documenttitle>
<style>
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
style>
<style type="text/css">
p {
width: 50px;
height: 50px;
background-color: lightgreen;
}
.blue-p {
background-color: lightblue;
}
style>
head>
<body>
<style>
.big {
width: 70px;
height: 70px;
}
style>
<img class="big" src="/Learn2-css基础/static/images/logo.png" alt="">
<img src="/Learn2-css基础/static/images/mountain.jpg" alt="">
<p class="blue-p">1p>
<p class="big">2p>
<p class="blue-p big">3p>
<p>4p>
body>
html>
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>Documenttitle>
<link rel="stylesheet" href="/Learn2-css基础/static/css/2.1.3style1.css" type="text/css">
<link rel="stylesheet" href="/Learn2-css基础/static/css/2.1.3style2.css" type="text/css">
head>
<body>
<img class="big" src="/Learn2-css基础/static/images/logo.png" alt="">
<img src="/Learn2-css基础/static/images/mountain.jpg" alt="">
<p class="blue-p">1p>
<p class="big">2p>
<p class="blue-p big">3p>
<p>4p>
body>
html>
2.css
p {
width: 50px;
height: 50px;
background-color: lightgreen;
/* css文件注释方式，可以注释单行 */
/*
也可以注释多行，与c++中注释类似
*/
}
.blue-p {
background-color: lightblue;
}
.big {
width: 70px;
height: 70px;
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
二、选择器
1.html
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>Documenttitle>
<link rel="stylesheet" href="/Learn2-css基础/static/css/2.2选择器style.css">
head>
<body>
<div>div 1div>
<div>div 2div>
<div>div 3div>
<div>div 4div>
<div id="mydiv">div 5div>
<div class="red-tag big-tag">div 6div>
<div class="big-tag">div 7div>
<div class="effect">div 8div>
<a href="/Learn2-css基础/html/about1.html">about1a>
<a href="/Learn2-css基础/html/about2.html">about2a>
<a href="/Learn2-css基础/html/about3.html">about3a>
<a href="/Learn2-css基础/html/about4.html">about4a>
<button href="/Learn2-css基础/html/about1.html">about1button>
<button href="/Learn2-css基础/html/about2.html">about2button>
<button href="/Learn2-css基础/html/about3.html">about3button>
<button href="/Learn2-css基础/html/about4.html">about4button>
<input type="text" name="" id="">
<p>p 1p>
<p>p 2p>
<p>p 3p>
<p>p 4p>
<p id="myp">p 5p>
<p class="red-tag">p 6p>
<p>p 7p>
<p>p 8p>
<p>p 9p>
<a href="#myp1">我的标签a>
<p>p 10p>
<p>p 11p>
<p id="myp1">p 12p>
<div class="real">div 1div>
<div class="big">div 2div>
<div class="big real">div 3div>
<div>div>
<p>p 1p>
<p id="myp2" class="big">p 2p>
<p>p 3p>
<p>p 4p>
<ul>
<li>1
<ul>
<li>1.1li>
<li>1.2li>
<li>1.3li>
ul>
li>
<li>2li>
<li>3li>
ul>
<input type="text" name="">
<input type="number" name="" id="">
<p>锄禾日当午，p>
<p>汗滴禾下土。p>
<p>谁知盘中餐，p>
<p>粒粒皆辛苦。p>
<h1>悯农h1>
<h1>咏柳h1>
<h1>枫桥夜泊h1>
<h1>滕王阁序h1>
body>
html>
2.css
/*
1.标签(元素)选择器：
*/
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin-bottom: 10px;
}
p {
width: 50px;
height: 50px;
background-color: lightgreen;
/* p标签自带外边距，div默认不带外边距 */
}
/*
2.ID选择器：
(1)每个标签都可以设置id属性名，一般同一个页面中给标签设置的id是不同的
(2)形式：#+标签id的名字。（一般与id相关的都是用#号）
*/
#mydiv {
background-color: lightcoral;
}
#myp {
background-color: lightsalmon;
}
/*
3.类选择器：
(1)第一种和第二种不常用，最常用的是第三种类选择器，class非常灵活，一般做项目只用前四种就够了
(2)每一个标签里都可以定义class属性，class里可以存若干个用空格隔开的类名
(3)class与id的区别：
id和class在逻辑上没有任何区别，所有的区别都是人为定义的
①同一页面中的每个标签设置id名一般来讲是唯一的，但多个标签可以用同一个class
②class里可以存若干个用空格隔开的类名：同一个标签同时可以具有多个class，但一般只能具有一个id
(4)形式：.+类名（一般与类有关的都加.）
.+类名表示类，#+id名表示id，什么都不加表示标签
(5)class渲染时的顺序：
与声明顺序无关，与css中class的定义顺序有关。按顺序表达最后一个
*/
.red-tag {
background-color: red;
}
.big-tag {
width: 120px;
height: 120px;
}
/*
4.伪类选择器
又叫状态选择器
(1)链接伪类选择器
:hover：鼠标悬停时的样式
:link：链接访问前的样式
:visited：链接访问后的样式
:active：鼠标点击后长按时的样式
:focus：聚焦后的样式
(2)位置伪类选择器：
:nth-child(n)：选择是其父标签第n个子元素的所有元素。
(3)目标伪类选择器：
:target：当url指向该元素时生效。
*/
.effect:hover {
transform: scale(1.2);
/*鼠标方上去之后变大多少倍*/
transition: 200ms;
/*鼠标方上去之后实现渐变的效果，表示用多长时间渐变过去*/
}
#mydiv:hover {
/*伪类型选择器可以加到任意选择器后面*/
background-color: lightgreen;
transition: 2000ms;
}
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: orange;
}
a:active {
color: purple;
}
button:link {
color: red;
background-color: blue;
/* color是字体颜色，background-color是背景颜色 */
}
button:visited {
color: green;
}
button:hover {
color: orange;
background-color: aquamarine;
}
button:active {
color: purple;
background-color: chartreuse;
}
input:focus {
/*focus聚焦，每个页面都有一个光标，就是按键盘的时候光标出现在什么地方，光标所在的元素被称为聚焦，聚焦常与输入框input常用
悬停与聚焦的区别：
聚焦需要鼠标或键盘点击，悬停不用
*/
background-color: lightblue;
width: 100px;
}
input:hover {
transform: scale(1.2);
}
p:nth-child(24) {
/*
nth-child()是一状态，即bool函数，依次判断每一个p是不是父节点body的第n个儿子，如果是就执行下面css样式
注意父节点是body，下标从1开始
不要理解为选择第n个p标签，即父节点body的第n个儿子(虽然是这样),要理解为是状态，是一个bool函数判断是不是满足这个条件
*/
background-color: lightslategray;
}
p:nth-child(2n+1) {
/*
an+b:an+b必须是正整数
odd:表示奇数块
even:表示偶数块
*/
background-color: blue;
}
p:target {
transform: scale(1.2);
color: orange;
transition: 2s;
}
/*
5.复合选择器
有可能存在多个标签公用同一个状态，没有必要定义很多遍，使用复合选择器可以实现
element1, element2：同时选择元素element1和元素element2。
element.class：选则包含某类的element元素。
element1 + element2：选择紧跟element1的element2元素。
element1 element2：选择element1内的所有element2元素。
element1 > element2：选择父标签是element1的所有element2元素。
*/
div,
p {
background-color: lightblue;
}
div:hover,
p:hover {
background-color: lightblue;
}
div.big {
transform: scale(1.2);
}
div.big.real {
/*
.也可以串联，只有同时满足big和real才能执行
以下三种等价
*/
transform: scale(1.2);
}
.big.real {
/* 不加div也一样，与上面那个等价 */
transform: scale(1.2);
}
#myp2.big.real {
transform: scale(1.2)
}
div+p {
background-color: lightgreen;
/* +表示紧跟在谁的后面才会执行 */
}
p+p {
background-color: brown;
}
#myp2+p {
background-color: black;
}
li ul li {
/* 表示如果一个li他的祖先节点是li的话就会触发这个样式，不一定是父节点*/
color: red
/* 如果某一个样式的字体颜色变了，那么他的字体颜色是可以继承给它的子节点的 */
/* 基于双指针的贪心算法匹配的 */
}
li>ul>ul {
/* 表示如果一个ul他的父节点是li的话就会触发这个样式*/
color: red
}
/*
6.通配符选择器
*：选择所有标签
[attribute]：选择具有某个属性的所有标签
[attribute=value]：选择attribute值为value的所有标签
*/
* {
/* *就是选择所有标签 */
font-size: 24px;
}
input[id] {
background-color: lightblue;
}
input:id {
background-color: lightblue;
/* 与上面等价 */
}
input[type=text] {
/* 按照属性选择标签 */
background-color: lightblue;
}
/*
7.伪元素选择器
将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。
::first-letter：选择第一个字母
::first-line：选择第一行
::selection：选择已被选中的内容
::after：可以在元素后插入内容
::before：可以在元素前插入内容
*/
p::first-letter {
color: red;
font-size: 110%;
}
p::selection {
color: yellow;
background-color: blueviolet;
}
h1::before {
content: "《";
color: red;
}
h1::after {
content: "》";
}
/*
样式渲染优先级：
不必深究这些特殊情况，一般不会用到
越具体越优先，执行越晚越优先
*/
三、颜色
1.html
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>Documenttitle>
<link rel="stylesheet" href="/Learn2-css基础/static/css/2.3颜色style.css" type="text/css">
head>
<body>
<p>1p>
<p>2p>
<p>3p>
<p>4p>
body>
html>
2.css
/*
1.预定义的颜色值
black、white、red、green、blue、lightblue等。
2.16进制表示法
使用6位16进制数表示颜色，例如：#ADD8E6。
其中第1-2位表示红色，第3-4位表示绿色，第5-6位表示蓝色。
简写方式：#ABC，等价于#AABBCC。
3.RGB表示法
rgb(173, 216, 230)。
其中第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。
4.RGBA表示法
rgba(173, 216, 230, 0.5)。
前三个数同上，第四个数表示透明度。
取色方式
网页里的颜色，可以在chrome的调试模式下获取
其他颜色可以使用QQ的截图软件：
直接按c键，可以复制rgb颜色值
按住shift再按c键，可以复制16进制颜色值
*/
p {
width: 50px;
height: 50px;
}
p:nth-child(1) {
background-color: lightblue;
}
p:nth-child(2) {
background-color: #add8e6;
color: #ABC
/*#AABBCC的简写形式*/
}
p:nth-child(3) {
background-color: rgb(173, 216, 230);
}
p:nth-child(4) {
background-color: rgba(173, 216, 230, 0.5);
}
四、文本
1.html
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>Documenttitle>
<link rel="stylesheet" href="/Learn2-css基础/static/css/2.4文本style.css" type="text/css">
head>
<body>
<h4>悯农h4>
<div class="mydiv">
<p>锄禾日当午，p>
<p>汗滴禾下土。p>
<p>谁知盘中餐，p>
<p>粒粒皆辛苦。p>
div>
<div style="font-size: 2em;">
第一层
<div style="font-size: 2em;">
第二层
<div style="font-size: 2em;">
第三层
div>
div>
div>
<div style="font-size: 2rem;">
第一层
<div style="font-size: 2rem;">
第二层
<div style="font-size: 2rem;">
第三层
div>
div>
div>
<div class="mydiv1">
div>
<div class="mydiv2">
<p>锄禾日当午，p>
<p>汗滴禾下土。p>
<p>谁知盘中餐，p>
<p>粒粒皆辛苦。p>
div>
<div class="mydiv3">
<p>锄禾日当午，锄禾日当午，锄禾日当午，
锄禾日当午，锄禾日当午，锄禾日当午，
锄禾日当午，锄禾日当午，锄禾日当午，
锄禾日当午，锄禾日当午，锄禾日当午，
p>
<p>汗滴禾下土。汗滴禾下土。汗滴禾下土。
汗滴禾下土。汗滴禾下土。汗滴禾下土。
汗滴禾下土。汗滴禾下土。汗滴禾下土。
汗滴禾下土。汗滴禾下土。汗滴禾下土。
p>
<p>谁知盘中餐，p>
<p>粒粒皆辛苦。p>
div>
<a href="/about.html">Abouta>
body>
html>
2.css
h4 {
text-align: center;
/*
text-align 相当于word中的对齐
左右对齐：除了最后一行之外，左右都对齐
文字对齐是可以继承的，子标签可以继承父标签的对齐方式
*/
}
.mydiv {
text-align: center;
font-size: 20px;
}
/*
网页中常用的长度单位：
px：绝对值，屏幕上一个像素点的长度，第一层默认是16px
以下都是相对值,用的比较多，
% 相对于父元素的百分比
em 相对于当前元素的字体大小,em永远都是相对值，所以只需要修改初始值，就可以让整个页面等比例放大缩小了
rem 相对于根元素的字体大小
vw 相对于视窗宽度的百分比，把浏览器窗口平均分成100份，1vw表示窗口宽度的百分之一
vh 相对于视窗高度的百分比，1vh表示窗口高度的百分之一，vw和vh可以实现与浏览器等比例缩放
*/
.mydiv {
text-align: center;
font-size: 200%;
}
.mydiv1 {
width: 50vw;
height: 50vw;
background-color: lightblue;
}
.mydiv2 {
text-align: center;
line-height: 200px;
/*
line-height是行高，行高就是每一行的高度，可以认为是行与行之间的距离
a*b：a是宽度，b是高度
行高常应用于字体竖直居中，因为字在渲染会默认放到行的中间
*/
background-color: lightblue;
height: 200px;
letter-spacing: 1.5em;
/* 字间距，字和字之间的距离，1.5表示字和字之间隔着1.5个字的距离*/
}
.mydiv3 {
text-indent: 2em;
/* 缩进常应用于段落，此时单位常用em */
}
.mydiv3>p:nth-child(1) {
text-decoration: underline dotted;
/*
文本修饰，有下划线等很多
常应用于删掉链接中的下划线
*/
text-shadow: 3px 3px 2px grey;
/*
实现阴影效果
有四个参数：阴影效果x方向的偏移量,阴影效果y方向的偏移量,阴影模糊r半径,color颜色
注意css中的x,y的正方向，x向右为正方向，y向下为正方向与数中相反
r可以省略，不写就是不模糊
可以同时加多个阴影效果,即一个字可以有任意多个阴影效果，css中所有并列的项都是用空格隔开的
*/
text-shadow: -5px -5px 2px gray, 5px -5px 2px red;
}
a {
text-decoration: none;
}
五、字体
1.html
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>Documenttitle>
<link rel="stylesheet" href="/Learn2-css基础/static/css/2.5字体style.css" type="text/css">
head>
<body>
<h4>悯农h4>
<div class="mydiv">
<p>锄禾日当午，p>
<p>汗滴禾下土。p>
<p>谁知盘中餐，p>
<p>粒粒皆辛苦。p>
div>
<pre>
#include
using namespace std;
int main()
{
int a,b;
cin >> a >> b;
cout << a+b;
return 0;
}
pre>
body>
html>
2.css
h4 {
text-align: center;
}
.mydiv {
text-indent: 3em;
}
.mydiv>p:nth-child(1) {
font-size: 1.5rem;
/* 字体型号，默认是16px */
font-style: italic;
/* 字体样式是否斜体：italic是斜体，normal是正常*/
font-weight: 1000;
/* 字体粗细：可以填1~1000中的值，没有单位，数越大越粗，也可以填一些文字选项，bolder，lighter等等*/
font-family: serif;
/* 字体种类：选项都不用倍，用啥去MDN官网查就行，比如等宽字体，带衬线字体,宋体... */
/* 字体也可以自己上传 */
color: blue;
/* color就是字体颜色 */
}
pre {
font-family: monospace;
}
六、背景
1.html
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>Documenttitle>
<link rel="stylesheet" href="/static/css/2.6背景style.css" type="text/css">
head>
<body>
<div class="mydiv">
div>
<div class="mydiv1">
div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div class="mydiv2">
div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
body>
html>
2.css
/*
背景是说某一个标签的底色是什么
*/
.mydiv {
width: 200px;
height: 200px;
background-color: lightblue;
/* 通过backgound-color给背景设置背景颜色 */
background-image: url(/static/images/mountain.jpg);
background-image: linear-gradient(rgba(0, 0, 255, 0.5));
/*
引入一个图片作为背景，背景图片比背景颜色优先级高，即背景图片的图层一定在背景颜色图层的上面
也可以由渐变色替换图片
*/
background-size: 50px 50px;
background-size: 50% 50%;
/*
设置背景背景图片的大小，宽跟高度
background-size 的cover选项可以让图占满div
*/
background-repeat: no-repeat;
/*
设置背景图片要不要重复
背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
repeat-x只重复行
repeat-y只重复列
*/
background-position: 50px 10px;
/*
背景图片偏移量：x向右，y向下
如果x,y有一维不写，这一维会默认居中
background-position:50px 等价于background-position:50px center
也可以写成rigth和left控制左右，top和bottom控制上下
*/
background-position: right bottom;
}
.mydiv1 {
/*
一张图里可以加很多图片，不一定只加一张图片
多个图片也可以覆盖有优先级，定义越靠前的，图片越靠上
*/
width: 200px;
height: 200px;
background-color: lightblue;
background-image: url(/static/images/mountain.jpg), url(/static/images/logo.png);
background-size: 100px 200px, 100px 200px;
background-repeat: no-repeat;
background-position: left top, 100px top;
}
div {
height: 200px;
}
.mydiv2 {
/*
一张图里可以加很多图片，不一定只加一张图片
多个图片也可以覆盖有优先级，定义越靠前的，图片越靠上
*/
width: 200px;
height: 200px;
background-color: lightblue;
background-image: url(/static/images/mountain.jpg), url(/static/images/logo.png);
background-size: 100px 200px, 100px 200px;
background-repeat: no-repeat;
background-position: left top, 100px top;
background-attachment: fixed;
/* scroll随着div一起滚 fixed位置固定，不随着div滚 */
opacity: 0.2;
/* 透明度：可以设置元素的透明度，不仅可以把背景变透明，也可以让图片变透明 */
}
七、边框
1.html
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>Documenttitle>
<link rel="stylesheet" href="/static/css/2.7边框style.css" type="text/css">
head>
<body style="margin: 0;">
<img src="/static/images/mountain.jpg" alt="">
<div>div><br>
<div>div><br>
<div>div><br>
<div>div><br>
<div>div><br>
div>
<table>
<tbody>
<tr>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
tr>
tbody>
table>
body>
html>
2.css
div {
width: 100px;
height: 100px;
background-color: lightblue;
border-style: solid dotted inset;
/* 设置边框的样式：solid是实现，dotted是点 */
/*注意css边界可以写四个方向：
可以按照上右下左的顺序来写的
如果只写一个默认是四个方向都是同一个格式，
如果写两项就是上下和左右
(其实上是按照上下左右的顺序来写，没写的那一项就取对边值)
*/
border-width: 2px 4px 6px;
/* 设置边框的粗细 */
border-color: red green blue;
/* 设置边框颜色 */
border-radius: 5px 0 0 0;
/*设置外边框的边角，很常用，5px表示边角半径的长度 */
}
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
td {
border-style: solid;
border-width: 3px;
width: 20px;
height: 20px;
}
table {
border-style: solid;
border-width: 3px;
border-collapse: collapse;
/* 把table元素的边框都重合到一块，separate 是分开*/
}
八、元素展示格式
1.html
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>Documenttitle>
<link rel="stylesheet" href="/static/css/2.8元素展现格式style.css" type="text/css">
head>
<body style="margin: 0;">
<div>abcdiv>
<div>abcdiv>
<div>abcdiv>
<br>
<span>第一个元素span>
<span>第二个元素span>
<img src="/static/images/mountain.jpg" alt="">
<img src="/static/images/mountain.jpg" alt="">
<img src="/static/images/mountain.jpg" alt="">
<div class="mydiv">
锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
div>
<div class="mydiv1">
#include
using namespace std;
int main()
{
int a,b;
cin >> a >> b;
cout << a + b ;
return 0;
}
div>
body>
html>
2.css
div {
background-color: lightblue;
width: 100px;
height: 100px;
margin: 10px;
/* 外边距可以认为是距离周围其他元素的距离 */
padding: 20px;
/* 内边距可以认为是内部的元素距离边框的距离，可以改变整个元素的大小 */
}
span {
background-color: lightblue;
width: 500px;
height: 200px;
/* 发现上面的修改没有任何改变 */
margin-top: 10px;
padding-top: 10px;
/* 发现上面的修改没有改变,水平方向的margin与padding有效，竖直方向的margin与padding无效*/
margin-left: 10px;
padding-left: 10px;
}
span {
display: inline-block;
/* 可以强制修改为别的类型标签,所以三类标签之间可以相互转化 */
background-color: lightblue;
width: 500px;
height: 200px;
margin-top: 10px;
padding-top: 10px;
margin-left: 10px;
padding-left: 10px;
}
img {
width: 50px;
height: 100px;
}
.mydiv {
width: 100px;
height: 100px;
background-color: lightblue;
white-space: nowrap;
/* white-space处理元素中的空白和换行：
nowrap就是不换行 */
overflow-x: hidden;
overflow-y: scroll;
/* 滚轮，hidden是隐藏，scroll是出现，如果什么都不写默认是auto，同时控制直接可以用overflow*/
text-overflow: ellipsis;
/* 长度如果超出行宽的话，就用三个点代替 */
}
.mydiv1 {
width: 200px;
height: 200px;
background-color: lightblue;
white-space: pre;
/* 所以pre也是在div的基础上扩展出来的 */
}
九、内边距与外边距
1.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=S, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" href="/static/css/2.9内边距与外边距.css" type="text/css">
head>
<body style="margin: 0;">
<div class="div-outer">
<div class="div-inner">div>
<div class="div-inner-2">div>
div>
body>
html>
2.css
/*
1.外边距 margin：
margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。
可以接受1~4个值（上、右、下、左的顺序）
可以分别指明四个方向：margin-top、margin-right、margin-bottom、margin-left
css边界可以写四个方向：
可以按照上右下左的顺序来写的
如果只写一个默认是四个方向都是同一个格式，
如果写两项就是上下和左右
(其实上是按照上下左右的顺序来写，没写的那一项就取对边值)
可取值：
①length：固定值
②percentage：相对于包含块的宽度，以百分比值为外边距。
③auto：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。auto可以实现水平居中，上下居中实现不了
*/
.div-outer {
width: 300px;
height: 300px;
background-color: lightblue;
margin: 50px;
/* 外边距的两种边界问题 */
/*
边界问题1：
父元素与后代元素：当父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。
解决方法：
子元素的margin-top连带影响父元素的上外边距解决方法
① 父元素加一个边框：border: 1px solid;
② 父元素加内边距：padding-top: 1px;
③ 父元素加上overflow属性 overflow: hidden;
④ 在父元素前面加一个空内容：.div-outer::before {content: “”;display: table;}
*/
}
.div-outer::before {
content: "";
display: table;
}
.div-inner {
width: 100px;
height: 100px;
background-color: red;
margin: 20px auto;
/* auto可以实现水平居中，上下居中实现不了 */
margin-bottom: 20px;
margin-left: 20px;
}
.div-inner-2 {
width: 100px;
height: 100px;
background-color: darkgreen;
margin-top: 30px;
margin-left: 30px;
/*
边界问题2：
发现两个元素的外边距上下发生了重叠，此时取外边距的最大值。
这种外边距重叠的情况只出现在上下，左右外边距是不会出现外边距重叠的情况的
解决方法：
为了不出现这种歧义的情况，尽可能只定义元素下外边距就可以了，最好不要上下边距同时定义，同理左右边距也是这样
*/
}
/*
2.内边距：padding
padding CSS 简写属性控制元素所有四条边的内边距区域。
可以接受1~4个值（上、右、下、左的顺序）
可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left
可取值：
①length：固定值
②percentage：相对于包含块的(即父级元素的)宽度，以百分比值为内边距。
注意：元素的大小是和内边距相关的，即元素的宽度和高度都会加上内边距
即 width=content+ padding +border
*/
.div-outer {
padding-top: 20px;
padding-left: 30px;
padding: 20px 0 0 30px;
}
十、盒子模型
1.html
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>Documenttitle>
<link rel="stylesheet" href="/static/css/2.10盒子模型style.css" type="text/css">
head>
<body style="margin: 0;">
<div class="div-outer">
<div class="div-inner">
123
div>
div>
body>
html>
2.css
/*
一个元素有以下边界属性：
content：内容区
padding：内边距，内容区距离边框的距离
border：边框
margin：外边距，边框距离周围元素的距离
元素是由：content+ padding +border 构成
内容是由：content 构成
*/
/*
盒子模型：box-sizing
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
增加
content-box：是默认值，设置border和padding均会增加元素的宽高。
border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。
*/
.div-outer {
width: 300px;
height: 400px;
background-color: lightblue;
padding: 20px 0 0 30px;
}
.div-outer::before {
content: "";
display: table;
}
.div-inner {
width: 100px;
height: 100px;
background-color: darkred;
color: white;
box-sizing: border-box;
padding: 20px 0 0 10%;
border: 10px solid black;
}
十一、位置
1.html
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>Documenttitle>
<link rel="stylesheet" href="/static/css/2.11位置style.css" type="text/css">
head>
<body style="margin: 0;">
<div class="div-outer">
<div class="div-inner-1">
1
div>
<div class="div-inner-2">
2
div>
<div class="div-inner-3">
3
div>
<div class="div-inner-4">
回到顶部
div>
div>
body>
html>
2.css
/*
position:指定一个元素在文档中的定位方式(右四种定位类型，五种取值)
(1)static:默认定位，如果不设置的话，默认为static类型，即位置是从上往下一行一行正常摆
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
(2)relative:相对定位，相对于初始位置(static位置下)可以做上下左右四个方向的偏移
(3)absolute:绝对定位，相对于上一个非static类型的块元素定位，固定在文档的某一个位置上，所以元素的位置在屏幕滚动时会随之改变
(4)fixed:绝对定位，又叫固定定位(窗口定位)相对于上一个非static类型的块元素定位，固定在屏幕视窗上，跟文档是脱离的，所以元素的位置在屏幕滚动时不会改变
(5)sticky:粘性定位，元素根据正常文档流进行定位，然后相对它的最近滚动祖先进行偏移，不偏移的话跟static是一样的
*/
.div-outer {
width: 300px;
height: 3000px;
background-color: lightblue;
padding: 20px 0 0 30px;
}
.div-outer::before {
content: "";
display: table;
}
.div-inner-1 {
width: 100px;
height: 100px;
background-color: darkred;
color: white;
margin: 10px;
display: inline-block;
}
.div-inner-2 {
width: 100px;
height: 100px;
background-color: darkgreen;
color: white;
margin: 10px;
display: inline-block;
position: relative;
top: 30px;
left: -100px;
}
.div-inner-3 {
width: 100px;
height: 100px;
background-color: yellow;
color: white;
margin: 10px;
display: inline-block;
position: absolute;
top: 100px;
left: 20px;
}
.div-inner-4 {
width: 30px;
height: 100px;
background-color: lightcoral;
color: white;
margin: 10px;
display: inline-block;
position: fixed;
top: 200px;
right: 0;
}
十二、浮动
1.html
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>Documenttitle>
<link rel="stylesheet" href="/static/css/2.12浮动style.css" type="text/css">
head>
<body style="margin: 0;">
<div class="div-outer">
<div class="div-inner-1">
1
div>
<div class="div-inner-2">
2
div>
<div class="div-inner-3">
3
div>
<div class="div-inner-4">
div>
div>
body>
html>
2.css
/*
浮动：就是让某一块浮起来
浮动的元素，不再占用空间，会脱离普通文档流层，且浮动元素的层级要高于普通元素
(1)应用：如果想让不同的div放在同一行时，并且中间不想有空隙时，
可以设置改变其与元素展现格式display:inline-block，但这种中间还是会有间距空隙
可以直接设置float属性，float：left是左浮动，就是左对齐
(2)注意：
clear:清除浮动的影响
left：清除左侧浮动。
right：清除右侧浮动。
both：清除左右两侧浮动
理解：网页布局是分层的，分三层
1.最底层：普通文档流
不加float时，默认为普通文档流,即一个网页body
普通文档流中是分块级和内联的。
2.中间层：浮动层
元素浮动，设置float以后会提升到浮动层
所有浮动层的元素默认横向排列
浮动层中不分块级和内联，都可以定义宽高，都是横向排列。
3.最高层：定位层
设置postiton后就在定位层了
什么时候要清除浮动？
1.子级浮动，父级一定要清除浮动
2.有时，你可能想要强制元素移至任何浮动元素下方。
比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。
如何清除浮动？
1.overflow:hidden
2.clear:both
*/
.div-outer {
width: 100%;
height: 3000px;
background-color: lightblue;
}
.div-outer::before {
content: "";
display: table;
}
.div-inner-1 {
width: 100px;
height: 100px;
background-color: darkred;
color: white;
float: left;
}
.div-inner-2 {
width: 100px;
height: 100px;
background-color: darkgreen;
color: white;
float: left;
}
.div-inner-3 {
width: 100px;
height: 100px;
background-color: yellow;
color: white;
float: left;
}
.div-inner-4 {
width: 300px;
height: 300px;
background-color: black;
position: relative;
z-index: 3;
clear: both;
}
十三、flex布局
1.html
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>Documenttitle>
<link rel="stylesheet" href="/static/css/2.13flex布局style.css" type="text/css">
head>
<body>
<div class="div-flex">
<div class="div-flex-item">1div>
<div class="div-flex-item">2div>
<div class="div-flex-item">3div>
<div class="div-flex-item">4div>
<div class="div-flex-item">5div>
<div class="div-flex-item">6div>
<div class="div-flex-item">7div>
<div class="div-flex-item">8div>
<div class="div-flex-item">9div>
<div class="div-flex-item">10div>
div>
body>
html>
2.css
/* flex是弹性盒子
作用：让我们更好的布局页面中的各个模块的,可以让我们更好的控制块的摆放方式
优势：可以更方便的实现元素水平居中和竖直居中
水平居中实现方式：
(1)可以把margin设置左右方向设置设置成auto
margin-left:auto;
margin-right:auto;
(2)
display:flex;
justify-content: center;
竖直居中实现方式：
(1)
position:relative
top:50%
transform:translateY(-50%)
(2)
display:flex;
align-items: center;
*/
.div-flex {
width: 50%;
height: 500px;
background-color: lightgray;
display: flex;
/* 1.设置flex的方式，只需要在父元素上把display改成flex即可 */
/*
2.设置flex的摆放顺序的：
(1)flex-direction
(2)flex-wrap
(3)flex-flow
*/
flex-direction: row-reverse;
/*
row：按行摆，从左往右摆，不加默认也是row
row-reverse：从右往左摆
column：按列摆，从上往下摆
column-reverse：从下往上摆
把页面变窄，所有的模块会有一个压缩效果
*/
flex-wrap: wrap;
/*
wrap是包裹的意思，即换行，定 flex 元素单行显示还是多行显示
默认值为nowrap
*/
flex-flow: row-reverse wrap;
/* flex-flow 属性是 flex-direction 和 flex-wrap 的结合起来一起写。默认值为：row nowrap*/
/*
3.设置flex元素对齐方式的：
flex布局有两个轴，行从左往右为弹性容器主轴(或者网格行轴) ，列从上往下为交叉轴(列轴)
这个对齐是跟flex-direction是有关系的，会相互影响
(1)justify-content：主轴对齐方式
列轴上的对齐
(2)align-items：将所有行在交叉轴上对齐
(3)align-content：与items类似，区别主要有两点
*/
justify-content: flex-end;
/*
flex-start 默认左对齐
flex-end：右对齐
center:每一行居中
space-between：左右两段对齐，每一行左右两端对齐，中间均匀分布
space-around：两端的距离等于中间的一般
space-evenly：两端的距离跟中间一样，即把所有的空隙均匀分布
*/
align-items: flex-end;
/*
flex-start 默认上对齐，从上往下
flex-end：下对齐
center:每一行居中
stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度
*/
align-content: flex-end;
/*
与aligin-items的区别：
①多行时，行与行之间没有距离
②单行时，会顶行，竖直不会居中
*/
}
/*
之前是定义在flex的父元素上，现在定义在每个flex元素的内部
*/
.div-flex-item {
width: 100px;
height: 100px;
}
.div-flex-item:nth-child(odd) {
background-color: lightpink;
order: 1;
/* 定义flex项目的顺序，值越小越靠前 */
flex-flow: 3;
/* 放大：设置 flex 项主尺寸 的 flex 增长系数 */
flex-shrink: 3;
/* 缩小 */
flex-basis: 10%;
/* 设置flex元素的宽度，比初始宽度优先级大 */
flex: auto;
/*
flex-grow、flow-shrink、flex-basis的缩写。
auto：flex: 1 1 auto
none：flex: 0 0 auto
*/
}
.div-flex-item:nth-child(even) {
background-color: lightgreen;
order: 2;
flex-grow: 1;
flex-shrink: 1;
}