盒子模型主要由四个部分组成
content（内容）：对应盒内内容
border（边框）：对应包装盒的外壳，有厚度
margin（外边距）：位于边框外部，是边框与外部的间隙
padding（内边距）：位于边框内部，是内容与边框的距离，对应包装壳的填充部分

border

1.边框线
border-width：设置边框线宽度
border-style：设置边框线样式
border-color：设置边框线颜色

<html>
<head><meta charset="utf-8"><title>边框线</title><meta charset"utf-8"><style>div{width: 200px;height: 200px;/* border-width: 5px;border-style: dashed;border-color: #0000FF; */border: 3px double #FF0000;/* 控制四条边的样式（上） *//* border-top-color: red;border-top-width: 5px;border-top-style: dotted; */border-top: red 5px dotted;}</style></head><body><div></div></body>
</html>

2.背景样式
background-color：设置背景颜色
background-image：设置背景图片
background-position：设置背景图片的位置
background-size：设置背景图片的大小
background-repeat：设置背景图片是否重复
background-attachment：设置背景图片相对浏览器的定位位置

<html>
<head><meta charset="utf-8"><title>背景样式</title><meta charset=""utf-8><style>div{width: 2000px;height: 1000px;/* background-color: #0000FF; background-image: url(./image.jpg);background-size: 500px 500px;background-position: center;background-repeat: no-repeat;background-attachment: fixed; */background: #008B8B url(image.jpg);}</style></head><body><div></div></body>
</html>

margin

margin-top：距离盒子顶部的距离
margin-right：距离盒子右侧的距离
margin-bottom：距离盒子底部的距离
margin-left：距离盒子左侧的距离

<head><meta charset="utf-8"><title>外边距</title><style>*{margin: 0;padding: 0;}div{width: 500px;height: 500px;background-color: #0000FF;}div{margin: 0 auto;//让元素在水平方向居中}p,h4{width: 100px;height: 100px;}p{background-color: #FF0000;margin-bottom:50px ;margin-left: 50px;}h4{background-color: #8A2BE2;margin-top: 50px;margin-left: 50px;}</style></head><body><div><p></p><h4></h4></div></body>

注意：当对父元素中的第一个子元素使用margin-top时，会出现margin塌陷的问题（父元素会随着第一个子元素整体下沉）
解决方法：
1.不让其作为第一个子元素不合适（添加了空元素有内容时会影响实际的距离）
2.给父元素添加一条边框线不合适（边框线的大小也会影响元素占据的位置大小）
3.使用内边距代替

padding

padding简写方式（margin简写方式也相同）
padding:20px 10px 15px 25px;分别代表上右下左
padding:20px 10px 15px;分别代表上左右下
padding:20px 10px;分别代表上下左右
padding:20px;上下左右

<head><meta charset="utf-8"><title>内边距</title><style>*{margin: 0;padding: 0;}div{width: 500px;height: 500px;background-color: #0000FF;}div{margin: 0 auto;//让元素在水平方向居中}p{width: 100px;height: 100px;}p{background-color: #FF0000;}div{padding: 200px;}</style></head><body><div><p></p></div></body>

display属性

用于改变元素的生成类型
display:none;隐藏元素
display:block;将元素变为块元素
display:inline;将元素变为行元素
display:inline-block;将元素变为行内块元素

使用display属性实现导航栏效果

<head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 200px;margin: 100 auto;background-color: #0000FF;}p{width: 100px;height: 100px;background-color: #FF0000;}div:hover p{/* display:none; */visibility: hidden;}a{text-decoration: none;//下划线color: white;}ul{list-style: none;font-size: 0;}ul li{display:inline-block;width: 100px;height: 30px;text-align: center;line-height: 30px;color: white;background-color:pink;}ul li{font-size: 15px;}ul li:hover{background-color: #008B8B;}ul li:hover a{color: #483D8B;}</style></head><body><div><p></p></div><hr ><ul><li><a href="">B站主页</a></li><li><a href="">游戏中心</a></li><li><a href="">漫画</a></li><li><a href="">番剧</a></li></ul></body>

HTML中的盒子模型相关推荐

CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
JAVA web中的盒子模型
JAVA web中的盒子模型 1.认识盒子模型:所谓盒子模型,就是把HTML页面中的元素,看作是一个个矩形的盒子,也就是一个个盛装内容的容器.每个矩形都由元素的内容.内边距.边框.外边距组成. 例: ...
12CSS中的盒子模型
页面布局要学习三大核心,盒子模型.浮动和定位.学好盒子模型能非常好的帮助我们布局. 1.看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子Box: 利用CSS设置好盒子样 ...
html中怎么让盒子模型居中,通过box盒子模型给元素内容设置居中
老版本语法 div{ display: -webkit-box; -webkit-box-align:center; //垂直居中 -webkit-box-pack:center;//水平居中 } 新 ...
css中盒子模型的布局
目录一水平布局二垂直布局 css中的盒子模型布局分为两种:水平布局和垂直布局一水平布局盒子模型中水平方向影响因素有7个,分别是:margin-left border-left padd ...
CSS中的标准盒子模型和怪异盒子模型
一.什么是盒子模型(Box Model) 盒子想必大家都是知道的吧! 生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着. 模型是什么呢? 它是主观意识借助实体或者虚拟 ...
css盒子模型、文档流、相对与绝对定位、浮动与清除模型
一.CSS中的盒子模型标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...
php盒子模型,CSS盒子模型介绍
什么是CSS盒子模型?CSS盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型一.什么是CSS? CSS(Cascading Style S ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

HTML中的盒子模型

border

margin

display属性

HTML中的盒子模型相关推荐

最新文章

热门文章