盒子模型
组成
作用：布局网页，摆放盒子和内容
内容区域--width&height
内边距 -- padding（出现在内容与盒子边缘之间）
属性名：padding/padding-方位名词
.div1{
width: 100px;
height: 100px;
background: pink;
padding: 20px;
}
.div2{
width: 100px;
height: 100px;
background: pink;
}
.div3{
width: 100px;
height: 100px;
background: pink;
padding-left:50px;
padding-top: 10px;
padding-right: 60px;
padding-bottom: 40px;
}
padding多值写法
| 取值个数 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding：10px； | 四个方向内边距均为10px |
| 四个值 | padding：10px 20px 40px 80px； | 上：10px；右：20px；下：40px；左：80px |
| 三个值 | padding：10px 40px 80px； | 上：10px；左右：40px；下：80px |
| 两个值 | paddingL:10px 80px； | 上下：10px；左右：80px |
记忆方法：顺时针转圈，没有值的取对面的值
边框线 -- border
属性名：border（bd）
属性值：边框线粗细 线条样式 颜色 （不区分顺序）
常用线条样式
| 属性值 | 线条样式 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
.div1{
width: 100px;
height: 100px;
background: pink;
border: 2px solid #000;
}
.div2{
width: 100px;
height: 100px;
background: pink;
border: 3px dashed red;
}
.div3{
width: 100px;
height: 100px;
background: pink;
border: 4px dotted green;
}
设置单方向边框线
属性名：border-方位名词（bd+方位名词首字母）
属性值同border
.div1{
width: 100px;
height: 100px;
background: pink;
border-top: 4px solid #000;
border-right: 4px dashed red;
border-bottom: 4px solid blue;
border-left: 4px dotted green;
}
外边距 -- margin（出现在盒子外面）
不会撑大盒子
属性名：margin/margin-方位名词
与padding语法类似，与padding多值写法一样
.div1{
width: 100px;
height: 100px;
background: pink;
border: 2px solid #000;
margin: 50px;
}
版心居中
.div1{
width: 500px;
height: 100px;
background: pink;
margin: auto;
}
外边距问题-合并现象
场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中的较大值生效
.div1{
width: 100px;
height: 100px;
background: pink;
margin-bottom: 20px;
}
.div2{
width: 100px;
height: 100px;
background: pink;
margin-top: 60px;
margin-bottom: 60px;
}
.div3{
width: 100px;
height: 100px;
background: pink;
margin-top: 30px;
}
外边距-塌陷问题
场景：父子级的标签，子级的添加上外边距会产生場陷问题 现象：导致父级一起向下移动
.father{
width: 300px;
height: 300px;
background: pink;
}
.son{
width: 100px;
height: 100px;
background: red;
margin-top: 50px;
}
解决方法： 取消子级margin ，父级设置padding 父级设置overflow:hidden 父级设置border-top
.father{
width: 300px;
height: 300px;
background: pink;
padding-top: 50px;
box-sizing: border-box;
}
.son{
width: 100px;
height: 100px;
background: red;
margin-top: 50px;
}
或者用以下两种
.father{
width: 300px;
height: 300px;
background: pink;
overflow: hidden;
}
.father{
width: 300px;
height: 300px;
background: pink;
border-top: 1px solid #000;
}
尺寸计算
盒子尺寸=内容尺寸+border尺寸+内边距尺寸（默认）
给盒子加border/padding会撑大盒子(结论)
解决：手动做减法：减掉border/padding的尺寸；
内减模式：box-sizing：border-box
.div1{
width: 100px;
height: 100px;
background: pink;
padding: 20px;
box-sizing: border-box;
}
.div2{
width: 100px;
height: 100px;
background: pink;
padding: 20px;
}
清除默认样式
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style:none;
}元素溢出
作用：控制溢出元素的内容的显示方式
属性名：overflow
| 属性值 | 效果 |
|---|---|
| hidden | 溢出隐藏 |
| scroll | 溢出滚动（无论是否溢出，都显示滚动条位置） |
| auto | 溢出滚动（溢出才显示滚动条位置） |
.div1{
width: 100px;
height: 100px;
background: pink;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
background: pink;
overflow: scroll;
}
.div3{
width: 100px;
height: 100px;
background: pink;
overflow: auto;
}
行内元素-内外边距问题
场景：行内元素添加margin和padding,无法改变元素垂直位置 解决方法：给行内元素添加line-height可以改变垂直位置
span{
margin: 50px;
padding: 20px;
line-height: 100px;
}
圆角
作用：设置元素的外边框为圆角。 属性名：border-radius（用法与padding多值写法类似） 属性值：数字+px/百分比 提示：属性值是圆角半径
.div1{
width: 100px;
height: 100px;
background: pink;
margin: 20px auto;
border-radius: 10px 20px 40px 80px;
}
常见应用一正圆形状 给正方形盒子设置圆角属性值为宽高的一半/50%
img{
width: 200px;
height: 200px;
border-radius: 100px;
}
常见应用一胶囊形状 给长方形盒子设置圆角属性值为盒子高度的一半
div{
width: 200px;
height: 80px;
background: pink;
border-radius: 40px;
}
阴影
作用：给元素设置阴影效果 属性名：box-shadow 属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影 注意： X轴偏移量和Y轴偏移量必须书写 默认是外阴影，内阴影需要添加inset
div{
width: 200px;
height: 80px;
background: pink;
box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.5);
}
标准流
标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。
浮动
作用：让块元素水平排列。 属性名：float 属性值 left:左对齐 right:右对齐
拓展：浮动本质作用是实现图文混排效果
浮动后的盒子的特点
1.顶对齐 2.具备行内块特点 3.脱标
.div1{
width: 100px;
height: 100px;
background: pink;
float:left;
}
.div2{
width: 100px;
height: 100px;
background:orange;
float: left;
}
.div3{
width: 100px;
height: 100px;
background: pink;
float: right;
}
清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱） 解决方法：清除浮动（清除浮动带来的影响）
.d{
width: 500px;
background: green;
margin: 10px auto;
}
.div1{
width: 100px;
height: 100px;
background: pink;
float:left;
}
.div2{
width: 100px;
height: 100px;
background:orange;
float: left;
}
.div3{
width: 100px;
height: 100px;
background: pink;
float: right;
}
.bottom{
height: 100px;
background: black;
}
解决办法一：额外标签法
在父元素内容的最后添加一个块级元素，设置CSS属性clear:both
.d{
width: 500px;
background: green;
margin: 10px auto;
}
.div1{
width: 100px;
height: 100px;
background: pink;
float:left;
}
.div2{
width: 100px;
height: 100px;
background:orange;
float: left;
}
.div3{
width: 100px;
height: 100px;
background: pink;
float: right;
}
.bottom{
height: 100px;
background: black;
}
.clearfix{
clear: both;
}
二：单伪元素法
.clearfix::after{
content: "";
display: block;
clear: both;
}三：双伪元素法（推荐）
before解决外边距塌陷问题
after清除浮动影响
.clearfix::before,
.clearfix::after{
display:table;
content: "";
}
.clearfix::after{
clear: both;
}四：overflow 父元素添加CSS属性overflow:hidden
.d{
width: 500px;
background: green;
margin: 10px auto;
overflow: hidden;
}Flex布局
FlX布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。 Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
Flex-组成
设置方式：给父元素设置display:flex,子元素可以自动挤压或拉伸 组成部分： 弹性容器 弹性盒子 主轴：默认在水平方向 侧轴/交叉轴：默认在垂直方向
<style>
.box{
display: flex;
border: 4px dotted #000;
height: 300px;
}
.box div{
width: 200px;
height: 100px;
background: pink;
}
</style>
<body>
<!--.box为弹性容器-->
<!--自动挤压-->
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<style>
.box{
display: flex;
border: 4px dotted #000;
height: 300px;
}
.box div{
width: 200px;
background: pink;
}
</style>
<!--自动拉伸-->
主轴对齐方式
属性名：justify-content
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
侧轴对齐方式
属性名：
align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置） align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
| 属性值 | 效果 |
|---|---|
| stretch | 弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸） |
| center | 弹性盒子沿侧轴居中排列 |
| flex-start | 弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
<style>
.box{
display: flex;
border: 4px dotted #000;
height: 300px;
align-items: center;
}
.box div{
width: 200px;
height: 100px;
background: pink;
}
.box div:nth-child(2){
align-self: self-start;
}
.box div:nth-child(3){
align-self: flex-end;
}
</style>
修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向 属性名：flex-direction
| 属性值 | 效果 |
|---|---|
| row | 水平方向，从左向右（默认） |
| column | 番直方向，从上向下 |
| row-reverse | 水平方向，从右向左 |
| column-reverse | 垂直方向，从下向上 |
<style>
.box{
display: flex;
background: pink;
border: 4px dotted #000;
height: 200px;
width: 200px;
flex-direction: column;
justify-content: center;
align-items: center;
}
img{
width: 100px;
height: 100px;
}
</style>
弹性伸缩比
作用：控制弹性盒子的主轴方向的尺寸。 属性名：flex 属性值：整数数字，表示占用父级剩余尺寸的份数。
<style>
.box{
display: flex;
border: 4px dotted #000;
height: 200px;
flex-direction: column;
}
.box div{
background: pink;
}
.box div:nth-child(1){
width: 100px;
}
.box div:nth-child(2){
flex: 1;
}
.box div:nth-child(3){
flex: 2;
}
</style>
弹性盒子换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。 属性名：flex-wrap 属性值 wrap:换行 nowrap:不换行（默认）
<style>
.box{
display: flex;
border: 4px dotted #000;
height: 300px;
justify-content: space-between;
flex-wrap: wrap;
}
.box div{
width: 200px;
height: 100px;
background: pink;
}
</style>
行对齐方式
属性名：align-content
对单行不起作用
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
定位
作用：灵活的改变盒子在网页中的位置
实现：（两个都要写） 1.定位模式：position 2.边偏移：设置盒子的位置 left right top bottom
相对定位
<style>
div{
position: relative;
top: 100px;
left: 50px;
}
</style>特点：
1.改变位置的参照物是自己原来的位置 2.不脱标，占位
3.标签显示模式特点不变
绝对定位
使用场景：子级绝对定位，父级相对定位（子绝父相）
<style>
img{
width: 200px;
}
.new{
position: relative;
width: 200px;
height: 300px;
background: white;
}
.new span{
position: absolute;
top:0;
right: 0;
display: block;
background: rgba(0, 0,0,0.6);
width: 70px;
height: 30px;
text-align: center;
color: white;
line-height: 30px;
}
</style>
<body>
<div class="new">
<img src="./1.png" alt="">
<span>小猫ld</span>
<p>第一段文字</p>
</div>
</body>特点：
1.脱标，不占位 2.参照物：先我最近的己经定位的祖先元素：如果所有祖先元素都没有定位， 参照浏览器可视区议位理 3,显示模式特点改变：宽高生效（具备了行内块的特点）
定位居中
实现步骤： 1.绝对定位 2.水平、垂直边偏移为50% 3.子级向左、上移动自身尺寸的一半 左、上的外边距为 - 尺寸的一半（负号表示相反方向） transform:translate(-50%,-50%)
<style>
.new{
position: relative;
width: 200px;
height: 200px;
background: pink;
}
.new img{
width: 100px;
height: 100px;
position: absolute;
left:50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>上述为用margin实现
<style>
.new{
position: relative;
width: 200px;
height: 200px;
background: pink;
}
.new img{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
固定定位
position:fixed
场景：元素的位置在网页滚动时不会改变
div{
position: fixed;
top: 0;
right: 0;
}特点：
1.脱标，不占位 2.参照物：览馨窗口 3。显示模式特点具备行内块特点
堆叠层级z-index
默认效果：按照标签书写顺序，后来者居上 作用：设置定位元素的层级顺序，改变定位元素的显示顺序
<style>
div{
position: absolute;
width: 200px;
height: 200px;
}
.d1{
background: pink;
z-index: 1;
}
.d2{
background: skyblue;
left: 150px;
top: 150px;
z-index: 3;
}
.d3{
background: green;
left: 70px;
top: 70px;
z-index: 2;
}
</style>
CSS精灵
CSS精灵，也I叫CSS Sprites,是一种网时图片应用处理方式把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
实现步骤： 1.创建盒子，盒子尺寸与小图尺寸相同 2.设置盒子背景图为精灵图 3.添加background-position属性，改变背景图位置 3.1使用PxCook测量 3.2取负数坐标为background-position属性值（向左上移动图片位置）
字体图标
展示的是图标，本质是字体
https://www.iconfont.cn/
.iconfont{
font-size:200px;
color:orange;
}
.svg结尾
扫一扫
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
