有关盒子模型的更多知识官网：
https://www.runoob.com/css/css-boxmodel.html
https://www.w3school.com.cn/css/css_boxmodel.asp
一.div
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。
示例
点击右键后点击检查（检查元素）或者按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.<body>元素默认样式
<body>标签的margin为8px
3.<p>元素默认样式
<p>标签的上下外边距为16px
4.<h1>元素默认样式
<h1>标签的上下外边距为21.44px
5.<ul>元素默认样式
<ul>标签的上下外边距为16px,左内边距也为40px
6.重置默认样式
示例
四.元素分类
1.行级（内联）元素
2.块级元素
3.内块元素
1.行级元素
<a>
<strong>
<em>
内嵌元素的特点：
1.默认同行可以继续跟同类型标签
2.内容撑开宽度
3.不支持宽高
4.不支持上下的margin
<span>
<span>是一个特殊的行级标签，和<div>（块级标签）一样，没有任何语义（样式）
通常用来着重显示某行文字中的某个单词。
示例
2.块级元素
<p>
<div>
<h1>~<h6>
<ol>~<li>
<ul>~<li>
<dl><dt><dd>
块元素的特性：
1.默认独占一行显示
2.没有宽度时，默认撑满一排
3.支持所有css命令
内联块元素——代表元素img
inline-block的特点：
元素在一行显示，支持宽高，没有宽度的时候内容撑开宽度
示例
<dispaly>
控制元素的显示和隐藏
块级元素与行级元素的转变
属性
示例
- 行级转块级：
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；不平铺
注意：如果设置不平铺背景图片不随滚动条而滚动
}
（此文章仅作为个人学习笔记使用，如有错误欢迎指正~）
网友评论