HTML之CSS——盒子模型

有关盒子模型的更多知识官网：
https://www.runoob.com/css/css-boxmodel.html
https://www.w3school.com.cn/css/css_boxmodel.asp

一.div

可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。

示例

点击右键后点击检查（检查元素）或者按F12出现此界面。

示例

二.盒子模型

1.简介：

每个div可以看成一个盒子。
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

2.属性：

一个盒子中主要的属性有5个：width,height,padding,border,margin.

示例

Margin(外边距) -盒子和盒子之间的距离。 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 内容和盒子边框之间的距离，清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
width(内容的宽度)-CSS中width指的是内容的宽度，而不是盒子的宽度。盒子宽度=内容宽度+padding+border。
height(内容的高度)-CSS中height指的是内容的高度，而不是盒子的高度，盒子的高度=内容的高度+padding+border。

• 设置边框属性：
  eg:
  border：1px solid red;
  1px代表边框的粗细，solid代表实线，dashed代表虚线。

  
  
  示例
  
  
  示例
  
  
  示例
  
  
  示例
  
  
  示例
  
  

  网页居中对齐：
  margin:0px auto;

  
  
  示例

• 例子：

  
  
  示例

三.默认样式

1.元素默认样式

很多标签都有自己的默认样式
在谷歌浏览器中运行时，可以通过开发者工具（CTRL+shift+l）来一个个审查元素，来看他们的默认样式

2.元素默认样式

标签的margin为8px

3.

元素默认样式

标签的上下外边距为16px

4.

元素默认样式

标签的上下外边距为21.44px

5.

元素默认样式

标签的上下外边距为16px,左内边距也为40px

6.重置默认样式

示例

四.元素分类

1.行级（内联）元素
2.块级元素
3.内块元素

1.行级元素




内嵌元素的特点：
1.默认同行可以继续跟同类型标签
2.内容撑开宽度
3.不支持宽高
4.不支持上下的margin

是一个特殊的行级标签，和

（块级标签）一样，没有任何语义（样式）
通常用来着重显示某行文字中的某个单词。




示例

2.块级元素







~




~
1. 
   
   ~
   • 
     

     
     块元素的特性：
     1.默认独占一行显示
     2.没有宽度时，默认撑满一排
     3.支持所有css命令

     内联块元素——代表元素img

     inline-block的特点：
     元素在一行显示，支持宽高，没有宽度的时候内容撑开宽度

     
     

     示例

     控制元素的显示和隐藏
     块级元素与行级元素的转变

     
     

     属性

     
     

     示例

     • 行级转块级：
       display：block；
     • 块级转行级：
       display:inline;
     • 设置元素隐藏：
       display：none;

     五.背景图片

     • 背景图像 background-image属性
     • 背景重复方式 background-repeat属性

     • 背景定位 background-position属性
       background-image：url（图片路径）；
       repeat：沿水平和垂直两个方向平铺
       no-repeat：不平铺，即只显示一次
       repeat-x：只沿水平方向平铺
       repeat-y：只沿垂直方向平铺

       
       
       属性
       
       

       相对定位：

       
       
       示例
       
       
       示例
       
       
       结果
       
       如果出现下面情况：
       
       示例
       
       将background-repeat: no-repeat;删除即可
       
       示例
       
       总结：
       

       设置背景图片：
       例如：
       body{
       background-image：url("图片路径")；
       background-size：100%；
       background-repeat：no-repeat；不平铺
       注意：如果设置不平铺背景图片不随滚动条而滚动
       }

     （此文章仅作为个人学习笔记使用，如有错误欢迎指正~）