web前端学习（3）
1.1 盒子模型
1.1.1 基本结构
1.内边距（padding）
1个值, 4个方向一样
2个值，上下、,左右
3个值,上 、左右 、下
4个值, 上、右、下、左
1.1.2 外边框
boder：线条样式：dashed（虚线） / solid（单实线） /double（双实线） /dotted（点划线）
注意：
border在写多个属性时要注意顺序：线宽 线型 线颜色
border:1px solid red
1.1.3 外边框
属性：margin 可以取到负值
利用其margin：0 auto；可以快速地将块水平对齐
常见问题：
1.兄弟关系，两个盒子水平外边距问题和 垂直外边距问题？
对于水平外边距问题：外边距会是一个外边距相加
对于 垂直外边距问题：外边距是取他们两个值之间较大的值
2.父子关系，给子加外边距没用，怎么解决？？
- 给父元素加
padding修改其多出来的宽度及高度- 给父元素加
overflow：hidden；- 加浮动（使其中一位脱离文本流）
- 给父元素添加边框，但是盒子要修改其多余的宽高
2.1 flex布局
2.1.1 flex弹性盒子含义
1.如何触发弹性盒子
给父元素添加display属性：flex；
例如：display：flex；
2.特点：
第一个特点:
父元素触发弹性盒子过后，子元素会默认横向显示，类似于浮动，但是不是浮动，与浮动没关系，但是与他的孙子没关系
例如：
<!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>
<style>
.box{
width: 300px;
height: 300px;
display: flex;
border: 1px solid red;
}
.box div{
width: 100px;
height: 100px;
border: 1px dashed #000 ;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</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>Document</title>
<style>
.box{
width: 300px;
height: 300px;
display: flex;
border: 1px solid red;
}
.box b{
width: 100px;
height: 100px;
border: 1px dashed #000 ;
}
</style>
</head>
<body>
<div class="box">
<b>1</b>
<b>2</b>
<b>3</b>
</div>
</body>
</html>
第三个特点：
触发弹性盒子后，如果只有一个子元素，在设置
margin：auto；后，子元素会位于水平垂直居中位置显示。
例如：
<!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>
<style>
.box{
width: 300px;
height: 300px;
display: flex;
border: 1px solid red;
}
.box div{
width: 100px;
height: 100px;
border: 1px dashed #000 ;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
</div>
</body>
</html>
2.1.2 flex基础概念
- 基础概念：
- flex容器（container）：采用flex布局的元素的父元素；
- flex项目：（item）：采用布局容器里面的子元素；
- 横轴：水平方向的线；
- 纵轴： 垂直方向的线；
- 主轴： 触发弹性盒子之后，项目排列的方向；
- 侧轴： 触发弹性盒子过后，与主轴垂直的方向；
注意：触发弹性盒子过后，默认水平方向为主轴，（这个可以修改主轴方向）
2.1.3 修改主轴方向
修改主轴方向
属性:flex-direction
row:==========主轴在横向，并且以开始位置显示
row-reverse ==主轴在横向，并且以相反方向位置显示
column =======主轴在纵向，并且以开始位置显示
column-reverse ===主轴在纵向，并且以相反方向位置显示
display:flex; flex-direction:row;这个为默认方向主轴为水平
display:flex; flex-direction:row-reverse;改为向右排列
display:flex; flex-direction:column改为了纵向为主轴
display:flex; flex-direction:column-reverse;改为了向下反向排列
2.1.4 修改主轴之间的距离
- 属性：
justify-content：用来调整主轴上面的对齐方式；
- flex-start====主轴的开始位置显示(项目之间是没有间距的)
- flex-end======主轴的结束位置显示(项目之间是没有间距的)
- center========主轴居中位置显示(项目之间是没有间距的)
- space-around==主轴的两端环绕,项目与项目之间距离是首尾项目与容器之间距离的2倍
- space-between=主轴的两端对其
- space-evenly==主轴的间距平分
1.
flex-start：
2.
flex-end
3.
center
4.
space-around
face-between
space-evenly
2.1.5 修改侧轴的排列位置
属性：align-item:
- flex-start=侧轴的开始位置显示
- flex-end===侧轴的结束位置显示
- center=====侧轴的居中位置显示
- baseline===侧周的基线位置显示,效果与开始位置一致,实际开发的时候不会使用该属性值
- stretch====默认的拉伸效果，前提，项目不需要设置高度
2.1.6 折行属性
属性：flex-wrap：
1.no-wrap：不折行，若空间不足，其会将每个块的空间压缩排列。
2.wrap：折行显示，若不设置高，其会出现高度平分的效果
1.
no-wrap：
wrap
2.1.7 调节行间距
属性：`align-content：
- flex-start==========侧轴的开始位置显示(没有行间距的
- flex-end============侧轴的结束位置显示(没有行间距的
- center==============侧轴的居中位置显示(没有行间距的
- space-between=======两端对其
- space-around========两端环统
- space-evenly========行间距均分
1.flex-start:
2.
flex-end
center
space-arroubd
space-between
6.
space-evenly
2.1.8 单独侧轴设置其位置
属性：align-self：
align-self: flex-start; 侧轴开始位置（1）
align-self: flex-end; 侧轴的结束位置 （2）
align-self: center; 侧轴的居中位置（3）
align-self: baseline; 侧轴的基线位置（4）
align-self: stretch; 侧轴默认拉伸（5）前提是没有设置块高度
一一对应以下块元素：
3.1.9 调整项目的顺序
属性：order
后面可以接数字，数字可以为负数，也可以为正数，数值越大越靠后，默认的为 auto
即：.box1{order:5} .box5{ order:-1}
2.1.10 占据其所剩余空间
属性：flex：1
分两种情况：
1.主轴在横向：
若该项目不设置高度，默认拉伸；
若项目添加flex:1;实现的是占剩余空间宽度的所有
- 主轴在纵向：
若该项目不设置高度，默认拉伸；
若项目添加flex:1;实现的是占剩余空间高度所有
1.主轴在横向：
给第二个添加flex:1;
若为都加flex:1;
2.若主轴在纵向：
给第二个添加
flex:1;
若为都加flex:1;
2.1.11 不挤压不折行效果
flex-shrink属性应用
制作移动端横向滚动区域
- flex属性 是一个复合属性是由: flex-grow、flex-shrink、flex-basis三个属性的缩写。
- flex-grow:定义项目的的放大比例;默认为0，即 即使存在剩余空间，也不会放大，所有项目的flex-grow为1: 等分剩余空间(自动放大占位)flex-grow为n的项目，占据的空间(放大的比例)是flex-grow为1的n倍
- flex-basis:定义在分配多余空间之前，项目占据的主轴空间(main size)浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值,默认值为auto
- flex-shrink: 定义项目的缩小比例取值为0/1
<!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>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 100px auto;
display: flex;
overflow: auto;
}
.box div{
width: 50px;
height: 50px;
border: 2px dashed red;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
</div>
</body>
</html>
3.1 文本溢出
属性：over：visible/hidden/scroll/auto/inherit；
visible:默认值，溢出值会显示在元素之外；
hidden：溢出内容隐藏
scroll：滚动，溢出内容以滚动的形式显示
auto：如果有溢出部分添加滚动条，没有溢出就正常显示、
inherit：规定应该遵循从父元素继承overflow属性值
overflow-x：x轴溢出； overflow-y：y轴溢出
hidden：
scroll:
3.1.1 空余空间
说明：
white-space: normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白
normal: 默认值，空白会被浏览器忽略
nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/ >标签为止;
<!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>
<style>
.box{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: yellow;
white-space: nowrap;/*强制文本不换行*/
overflow: hidden;/*使得文本的溢出部分隐藏*/
text-overflow: ellipsis;/*使得隐藏部分显示为省略号*/
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Aliquid facilis explicabo deserunt vel odit esse vitae,
alias sequi illo ipsum nesciunt praesentium porro, totam nemo? Officia nam voluptates repellat doloremque?
</div>
</body>
</html>
当单行文本溢出显示省略号需要同时设置以下声明:
- 容器宽度: width: 200px;
- 强制文本在一行内显示:white-space: nowrap;
- 溢出内容为隐藏: overflow: hidden;
溢出文本显示省略号: text-overflow: ellipsis;
3.1 元素类型
3.1.1 块元素
块元素(block element)
A）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
B）默认情况下，块状元素都会占据一行;默认情况下，块状元素会按顺序自上而下排列。
C)块状元素都可以定义自己的宽度和高度。
D)块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子
例如：<div> <p> h1-h6 <ol> <li> <ul> <dd> <dt> <dl>等
3.1.2 行内元素
行内(内联）元素
A)内联元素的表现形式是始终以行内逐个进行显示;横着排
B)内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状;
C)内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效
例如：<a> <b> <em> <i> <span> <strong>
注意：
- 行边距只能适应于左右，不能适用于上下边距
3.1.3 行块元素
行内块元素
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点
例如：<img> <input>
4.1 二级菜单
利用属性：display：none/block
<!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 rel="stylesheet" href="./111.css">
<style>
*{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
.cart{
width: 300px;
height: 100px;
margin: 0 auto;
}
.cart>li{
height: 100px;
line-height: 100px;
text-align: center;
background-color: aqua;
}
.cart>li:hover{
background-color:yellow;
color: #234;
}
.cart>li>ul{
display: none;
/*使其元素类型变为无，使其隐藏*/
}
.cart>li:hover>ul{
display: block;
/*这里表示在鼠标划过li时，使其变为块，所以出现了*/
}
</style>
</head>
<body>
<div class="header">
<ul class="cart">
<li>
数字
<ul>
<li>123</li>
<li>456</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
4.1 定位属性及属性值
属性：position：static（默认值） / absolute / relative / sticky
4.1.1 绝对定位（absolute）
解释：
- 会脱离文档流
- 偏移位置：
- 如果有父元素且父元素有定位，按照父元素的位置进行定位
- 如果没有父元素或着父元素没有定位，那么就按照浏览器的窗口第一屏定位
可以让一个内联元素变为一个块级元素
4.1.2 固定定位（fixed）
解释：
- 会脱离文档流（不占据原来的空间位置）
- 偏移的位置：浏览器当前窗口
一般适用于做网页的固定位置元素
4.1.3 相对定位（relative）
解释：
- 不脱离文本流
- 偏移位置：相对于自己的位置进行定位
4.1.4 粘性定位（sticky）
解释：
一般用于吸顶效果，但是兼容性不好（所以常用js处理）
4.1.5 层级
属性：z-index：（数字）
解释：
- 一般是后来者居上
- 如果要使下面的元素优先显示，那么加上比上面元素大的z-index
<!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>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
}
.box1{
background-color: antiquewhite;
position: relative;
top: 100px;
left: 100px;
z-index: 15;
}
.box2{
background-color: blueviolet;
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
总结：1. 内联–>块
display:block;float:left;position:absolute;
2.float与定位的区别
- float：是半脱离，可以做文字围绕效果
- 定位：全脱离，不会出现文字围绕效果
5.1 锚点
法一：
<a href="#1">X</a>
<a href="#2">XX</a>
<a href="#3">XXX</a>
<h2 id="1">X</h2>
<p>段落</p>
<p>段落</p>
<h3 id="2">XX</h3>
<p>段落</p>
<p>段落</p>
<h4 id="3">XXX</h4>
<p>段落</p>
<p>段落</p>
法二：
<a href="#1">X</a>
<a href="#2">XX</a>
<a href="#3">XXX</a>
<a name="1"></a>
<h2>X</h2>
<p>段落</p>
<p>段落</p>
<a name="2"></a>
<h3>XX</h3>
<p>段落</p>
<p>段落</p>
<a name="3"></a>
<h4>XXX</h4>
<p>段落</p>
<p>段落</p>
6.1 精灵图（雪碧图）
为什么要使用雪碧图（操作复杂）而不是利用多个图片插入（简单）：
优势：
- 通过图片的整合来减少服务器的请求次数，从而提高浏览器的加载速度
- 通过整合图片来减少图片的体积
属性：background-position：
找到图片所在的位置，加上定位，就可以找到照片的位置
7.1 宽高自适应
高度塌陷解决方案：
上下排列:clear属性，表示清除浮动的，left、right、 both
嵌套排列:
- 固定宽高:
不推荐，不能把高度固定死，不适合做自适应的效果。- 父元素浮动:
不推荐,因为父容器浮动也会影响到后面的元素。
3.overflow :
hidden (BFC规范)，如果有子元素想溢出，那么会受到影响。- display :
inline-block（BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签︰
不推荐，会多添加一个标签。
after伪类∶
推荐，是空标签的加强版，目前各大公司的做法。 clear属性只会操作块标签，对内联标签不起作用)
让元素隐藏：
display：none不会占据原来的空间（看不见，摸不着）visibility：hidden会占据原来的空间位置（看不见，摸得到）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
