一般
在html文件中输入<link href=".../xxx.css" rel="stylesheet"/>
通过这样的外部样式联系 css
<!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>Document</title>
<link href="css/index.css" rel="stylesheet" /> <!-- 在这里输入 -->
</head>
<body>
</body>
</html>
四个区域
内容区：width height
填充区：padding 10px 上下左右
padding 10px 20px 上下 左右
padding 10px 20px 30px 上 左右 下
padding 10px 20px 30px 40px 上 下 左 右
上1 top
left 左4 右2 right 顺时针
下3 bottom
边框区：border (复合属性)
基本同上 还有三方面:
border-style ：xxx 边框样式
border-width：10px 粗细
border-color ：red 颜色
可以写在一起 border：xxx 10px red 无顺序之分
none 去掉某一边 (-top,-bottom,-left,-right)
margin：基本 同上
margin= auto 居中
选择器：class 和 id
class选择器：类标记 .xxx 。可以其他元素同名，用于为HTML元素指定一个或多个类名；class属性可用于任何HTML元素。CSS和JavaScript可以使用类名来为具有指定类名的元素执行某些任务。
html: <div class="xxx"></div>
css: .xxx{ }
id选择器：唯一标记 #xxx 。 不可与其他同名，用于指定文档的唯一标识符；因而，可以使用id在页面中区分不同的模块。CSS和JavaScript使用 id属性来为唯一元素执行特定任务。在CSS中，id属性使用＃符号后跟id编写。
html: <div id="xxx"></div>
css: #xxx{ }
css:
写css时可以先填入
*{
margin：0；
padding：0;
}
因为网页编辑调试时会发现 编辑出的东西与页面显示部分的顶部 还有一些空白间隙，输入这两行将空白间隙去除。有多少间隙咱们自己说了算！。
块级一层层嵌套时，比如：
<div class="dad">
<div class="son1"> son1</div>
<div class="son2"> son2</div>
</div>
.dad{
display:flex
}
弹性盒子布局：嵌套使用
父级中
display:flex
子级中若多个块 总占比超出父级 会各个块等比例压缩
常用的：
1.横向布局
.dad{
display:flex;
flex-direction:row; 横向布局（不打时 默认）
: row-reverse 横向布局反过来 123 变为 321
:column 竖向布局 1 3
:column-reverse 竖向布局反过来 2 变为 2
3 1
}
2
.dad{
display:flex;
flex-wrap:wrap; 换行
}
3.排列方向分布
.dad{
display:flex;
justity-content:flex-start(默认)左侧开头
:flex-end 容器最右侧开头
:space-between 父级留有空白，在中间显示 均匀在子级间 
：space-around 同上边类似 但两边还会留出一段空白 均分分布
：center 内容集中在容器中间，空白两边均匀分配
}
4.排列方向垂直方向对齐方式
.dad{
display:flex;
align-itms:flex-start （默认）顶端对齐
：flex-end 底端对齐
：center 居中对齐
:baseline 基准线对齐 值的底部 补充 值 显示的大小 font-size: (数字) px
纵向的分布方式 所以要先换行
与 justity-content 类似 只不过是纵向的
align-content: flex-start
:flex-end
:center
:space-between
:space-around
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
