网页基础布局样式

块级元素和行内元素

• 转换成块级元素的属性是什么？

  ​ display:block

• 转换成行内块元素的属性是什么？

  ​ display:inline-block

• 转换成行内元素的属性是什么？

  ​ display:inline

定位的几种方式

解决子绝父相水平垂直居中的方法

transform:translate(-50%,-50%)

更改 定位 元素的层级

属性名：z-index

属性值：数字

• 数字越大，层级越高

position的属性值

属性值	说明
relative	相对定位
absolute	绝对定位
fixed	固定定位

• 相对定位的特点
  需要配合方位属性实现移动
  相对于自己原来的位置进行移动
  在页面中占位置，没有脱标
• 绝对定位的特点
  需要配合方位属性实现移动
  默认相对于浏览器可视区域进行移动
  在页面中不占位置，已经脱标
  应用场景：配合绝对定位组cp(子绝父相)
• 固定定位的特点
  需要配合方位属性实现移动
  相对于浏览器可视区域进行移动
  在页面中不占位置，已经脱标
  应用场景：让盒子固定在屏幕中的某个位置

overflow 溢出部分显示效果

属性值	效果
bisible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

表格

• 边框合并： border-collapse：collapse
• 跨行合并： rowspan : 合并个数
• 跨列合并： colspan : 合并列数
• 下拉菜单：
  option标签：是下拉菜单中的每一项
  selected属性：下拉菜单中的默认选中
• textarea 文本域
  cols：规定了文本域可见宽度
  rows：规定了文本域可见行数
• label 标签
  常用于绑定内容与表单标签的关系
  使用方法：
  使用label标签把内容包裹起来，在表单标签上添加id属性，在label标签的for属性中设置对应的id属性值
  直接使用label标签把内容（如：文本）和表单标签一起包裹起来，需要把lable标签的for属性删除即可
• input标签的type属性值

属性值	说明
text	文本框
password	密码框
radio	单选框
checkbox	多选框
file	文件选择，用于之后上传文件
submit	提交（按钮也有）
reset	重置（按钮也有）
button	普通按钮

垂直对齐方式

由于基线的问题，需要我们去解决行内/行内块元素垂直对齐问题

属性名	属性值	效果
vertical-align	baseline	基线对齐（默认）
vertical-align	top	顶部对齐
vertical-align	middle	中部对齐
vertical-align	bottom	底部对齐

光标类型

设置光标在元素上显示的样式

属性名	属性值	效果
cursor	default	默认值，箭头
cursor	pointer	小手效果，提示客户可以点击
cursor	text	工字型，提示客户可以选择文字
cursor	move	十字形，提示用户可以移动

缩放

• 属性名：transform：scale(x轴缩放的倍数，y轴缩放的倍数)
  scale值大于1表示放大，小于1表示缩小

Flex 布局

使用 flex布局，属性都是加在父级元素里面display：flex

justify-content 调节元素在主轴的对齐方式

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子，空间间隙均分在 盒子两侧
space-between	弹性盒子，空间间隙均分在 盒子之间
space-evenly	弹性盒子，弹性盒子于容器之间 间距相等

align-items 调节元素在侧轴的对齐方式

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器

flex-direction改变元素排列方向

• 主轴默认是水平方向，侧轴默认是垂直方向
• 修改主轴方向属性：flex-direction:column；

flex-wrap 盒子换行

• 弹性盒子默认是在一行，在弹性盒子的父元素添加此属性会有换行作用
• flex-wrap:wrap;

换行后调整对齐方式

• 属性：align-content
• 属性值于jusify-content差不多，但是没有evenly属性值

单独设置某个弹性盒子的侧轴对齐方式(在子级设置)

• 先使用伪类选择器选中盒子
• 添加属性：align-self:center
• 效果是：选中的盒子侧轴居中

新增布局标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章