目录
简述
盒模型:
布局相关属性
简述
div是块级元素 (占用一整行) span是内联元素(占用内容的长度,也可以转换成块级元素)
DIV和SPAN存在的意义就是为了应用css样式
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>div{background-color: aqua;color: black;}span{background-color:black;color: aliceblue }/* body{margin: 0%;} */</style></head><body><div>学习是大头div:块级元素占用一整行</div><div>学习是大头div:块级元素占用一整行</div><span>学习真是大头span:占用内容长度</span><span>学习真是大头span:占用内容长度</span></body></html>
效果
盒模型:
整个页面可以看做一个盒模型
然后 在浏览器检查元素 F12 我们看到一个盒子类似的东西,他就是盒模型的表现
我们就可以设置对应的style属性
margin 盒子的外边距
border 边框
padding 盒子内边距
width 盒子宽度
height 盒子高度
float 浮动
如果要对齐的话把上面注释代码放开
效果
可以设置如下效果
布局相关属性
1.position 定位方式 r
elative 正常定位absolute 根据父元素进行定位left,right,top(上),bottom(下)z-index 0; 覆盖层优先级,值越大显示越靠前inherit 继承fixed 根据浏览器窗口进行定位 固定在浏览器的一个位置,当下拉网页的时候位置不变,一般是网页客服位置
2. display 显示属性
display: none 层不显示display:block 块状显示,在元素后面换行,显示下一个块元素 将span 转换为块级元素display:inline 内联显示,多块可以显示在一行内 将div转祸为 内联元素
3. fload 浮动属性
left ,right
4.clear 清除浮动
clear:both
5.overflow 移除处理
overflow:hedden 隐藏超出层大小的内容overflow:scroll 无论内容是否超出层大小都添加滚动条overflow:auto 超出时自动添加滚动条
