一. 显示模式
作用：
1 块级元素div
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
2、行内元素span
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
3、行内块元素
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开
4、转换显示模式
把div和span进行显示效果的转换
属性display:
| 属性值 | 效果 |
|---|---|
| block | 转换为块级，独占一行，默认宽度是父级宽度的100% |
| inline-block | 行转换为行内块，一行显示多个，并且宽高属性生效 |
| inline | 行内标签 |
二、选择器扩展
后代选择器
父级标签 子标签{
样式属性}
}
ex:
<style>
div p{
background-color: #c24949;
}
</style>
</head>
<body>
<div>
<p>223</p>
<span> <p>224</p></span>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
子选择器（只显示子层）
父>子{
样式属性}
}
<style>
div p{
background-color: #c24949;
}
div>p{
background-color: #39c05b;
}
</style>
</head>
<body>
<div>
<p>223</p>
<span> <p>224</p></span>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
伪类选择器：
位置：
数字-选中第几个
2n-选中2的倍数的条数
2n-1-选中奇数条
5n-选中5的倍数
选择器：nth-child(位置){
样式属性
}
<style>
ul>li:nth-child(1){
background-color: #5f24ce;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
三 盒子模型
用于布局网页、摆放盒子和内容。
- 内容区域 – width & height
- 内边距 – padding（出现在内容与盒子边缘之间）
- 边框线 – border
- 外边距 – margin（出现在盒子外面）
1、边框线-border
可用边框线实现框格之间的间隙,(内边距margin也可以实现）
边框线的粗细：数字+px
边框线的样式：soild -实线、dashed-虚线、dotted-点线
| 属性值 | 线条样式 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
边框线的颜色：支持单词和rgb和十六进制的写法
ex：（border: 2px soild red）
- 单方向边框线 border-方向名词（top/l/r/bottom）
2、内边距
设置内容与盒子边缘之间的距离
- 属性名：pading/pading-方位名词
padding:数字+px；
padding-方位名词：数字+px
复合写法：top right bottom left(顺时针旋转，写四个数字就好）
ex:padding 10px 20px 30px 40px;距离上边10px,距离右边20px,距离下边30px,距离左边40px.
问题：盒子模型添加内边距会撑大盒子.
解决方法：
1、计算盒子撑大了多少，设置宽高的时候减去相应撑大的尺寸
2、通过添加css属性(内减模式）：box-sizing:border-box，会自动减去相应尺寸
- padding 多值取法 哪边缺损就参照对面的值
4、外边距
magin:数字+px
margin-方位名词：数字+px
复合写法：top right bottom left(顺时针旋转，写四个数字就好）
ex:magin 10px 20px 30px 40px;距离上边10px,距离右边20px,距离下边30px,距离左边40px.
5、版心居中
居中显示
margin:10px auto;
核心：margin 左右auto
.head1{
width: 300px;
height: 200px;
background-color: #797474;
}
.head1>div{
background-color: #cb17db;
width: 200px;
height: 100px;
margin:10px auto;
}
</style>
</head>
<body>
<div class="head1">
<div></div>
</div>
6、清除默认样式
*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
- 使用前后对比：
7、元素溢出
属性名：overflow:
| 属性值 | 效果 |
|---|---|
| hidden | 超出的时候隐藏 |
| scroll | 滚动-无论是否溢出都显示滚动条 |
| auto | 只有溢出的时候才显示滚动条 |
- hidden
- scroll
- auto
8、圆角
属性名：border-radius 属性值（为圆角半径）：数字+px/百分比，参考padding 多值写法：和padding一样，从右上角开始顺时针赋值
- 正圆形状
border-radius: 50px;
border-radius: 50%;
- 胶囊形状(给长方形设置盒子高度的一半）
width: 200px;
height: 100px;
background-color: #239968;
border-radius: 50px;
- 左下右上圆弧形
9盒子阴影效果
属性名：box-shadow
属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
- X 轴偏移量 和 Y 轴偏移量 必须书写
- 默认是外阴影，内阴影需要添加 inset
box-shadow: 20px 20px 20px 0px #957328 inset;
四、flex布局和基本使用（display:flex;/inline-flex）
display:flex 给父级容器设置弹性布局，可以拉伸和挤压
使用flex 布局，需要马上想到主轴与交叉轴。主轴就是flex-direction定义的，二另外一条则是垂直于它。默认横向轴为主轴。另外一条就是交叉轴
1、主轴的对齐排列方式
属性名：justify-content，用在父级
| 属性值 | 效果 |
|---|---|
| flex-start | 从盒子的起点位置开始排列【默认】 |
| flex-end | 从盒子的终点开始排列 |
| center | 沿着主轴居中排列 |
| space-between | 主轴方向均匀排列，空白间距分布在弹性盒子之间 |
| space-around | 主轴方向均匀排列，空白间距分布在弹性盒子两侧 |
| space-evenly | 主轴方向均匀排列，弹性盒子与容器之间间距相等 |
2、弹性盒子换行
默认情况下，弹性盒子都在一行显示
属性名：
flex-wrap:是否换行
| 属性值 | 功能 |
|---|---|
| wrap | 换行 |
| nowrap | 默认值，不换行 |
3、侧轴对齐
-
align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
-
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
| 属性值 | 效果 |
|---|---|
| stretch | 弹性盒子沿着侧轴拉伸铺满容器 |
| center | 侧轴居中对齐 |
| flex-start | 弹性盒子从起点开始排列 |
| flex-end | 弹性盒子从重点开始排列 |
- stretch
- center
- flex-start
- flex-end|
4、修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名：flex-direction
| 属性值 | 效果 |
|---|---|
| row | 默认值，主轴水平，侧轴垂直 |
| column | 主轴垂直，侧轴水平 |
| row-reverse | 主轴水平从右往左，侧轴垂直 |
| column-reverse | 主轴垂直，侧轴水平从下而上 |
5、行内对齐方式（对于单行的弹性盒子不生效）
属性名：align-content
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，从弹性盒子起点开始排列 |
| flex-end | 从弹性盒子重点开始排列 |
| center | 主轴居中排列 |
