HTML之CSS——盒子模型

2019-09-29 本文已影响0人思君_4cd3

有关盒子模型的更多知识官网：
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；不平铺
注意：如果设置不平铺背景图片不随滚动条而滚动
}