html--div+css样式布局(div+span)

目录

简述

盒模型:

布局相关属性

---

简述

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 超出时自动添加滚动条