文章目录

前言
一、盒模型
- 盒模型图例
- 盒子水平布局
- 盒子垂直布局
- 外边距的重叠
- 行内元素的盒模型
- 盒子的尺寸
- 轮廓和圆角
二、练习
- 练习1（图片的列表）
- 练习2（导航条）
- 练习3（列表）
总结

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、盒模型

盒模型图例

盒子的可见框的大小，由内容区内边距和边框共同决定

默认情况下设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素

盒子水平布局

一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度（必须满足）
如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足

这七个值中有三个值可设置为auto：width、margin-left、margin-right

盒子垂直布局

默认情况下父元素的高度被内容撑开
如果子元素的大小超过了父元素，则子元素会从父元素中溢出，使用 overflow 属性来设置父元素如何处理溢出的子元素：
visible，默认值子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁剪不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条

外边距的重叠

垂直外边距的重叠
- 相邻的垂直方向外边距会发生重叠现象
- 兄弟元素
- 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
特殊情况：
如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

父子元素
- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面的布局，必须要进行处理

行内元素的盒模型

行内元素不支持设置宽度和高度
行内元素可以设置padding、border、margin但是垂直方向padding、border、margin不会影响页面的布局
display 用来设置元素显示的类型
可选值：
-inline 将元素设置为行内元素
-block 将元素设置为块元素
-inline-block 将元素设置为行内块元素（行内块，既可以设置宽度和高度又不会独占一行）
-table 将元素设置为一个表格
-none 元素不在页面中显示

盒子的尺寸

box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
-content-box 默认值，宽度和高度用来设置内容区的大小
-border-box 宽度和高度用来设置整个盒子可见框的大小

轮廓和圆角

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
第一个值水平偏移量设置阴影的水平位置正值向右移动负值向左移动
第二个值垂直偏移量设置阴影的水平位置正值向下移动负值向上移动
第三个值阴影的模糊半径
第四个值阴影的颜色

 box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;

border-radius: 用来设置圆角圆角设置的圆的半径大小

将元素设置为一个圆形：

border-radius: 50%;

二、练习

练习1（图片的列表）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><style>body{background-color: antiquewhite;}.img-list{width: 190px;height: 470px;overflow: hidden;margin:100px auto;background-color: white;}.img-list img{width: 100%;}.img-list li{margin-bottom: 9px;}</style>
</head>
<body><ul class="img-list"><li><a href="https://www.bilibili.com/video/BV1gV411i7vq?share_source=copy_web"><img src="./img/01/1.jpg" alt=""></a></li><li><a href="https://www.bilibili.com/video/BV1gV411i7vq?share_source=copy_web"><img src="./img/01/2.jpg" alt=""></a></li><li><a href="https://www.bilibili.com/video/BV1gV411i7vq?share_source=copy_web"><img src="./img/01/3.jpg" alt=""></a></li></ul></body>
</html>

练习2（导航条）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><style>body{background-color: #bfa;}.left-list{width: 190px;height: 450px;padding: 10px 0;background-color: #fff;margin: 50px auto;}.left-list .item{height: 25px;line-height: 25px;padding-left: 18px;font-size: 12px;}.item .line{padding-left: 0 2px;}.item:hover{background-color: #d9d9d9;}.item a{font-size: 14px;color: #333;text-decoration: none;}.item a:hover{color: rgb(210, 51, 51);}</style>
</head><body><nav class="left-list"><div class="item"><a href="#">家用电器</a></div><div class="item"><a href="#">手机</a><span class="line">/</span><a href="#">运营商</a><a href="#">数码</a></div><div class="item"><a href="#">电脑</a><span class="line">/</span><a href="#">办公</a></div><div class="item"><a href="#">家居</a><span class="line">/</span><a href="#">家具</a><a href="#">家装</a><spanclass="line">/</span><a href="#">厨具</a></div><div class="item"><a href="#">男装</a><span class="line">/</span><a href="#">女装</a><span class="line">/</span><ahref="#">童装</a><span class="line">/</span><a href="#">内衣</a></div><div class="item"><a href="#">美妆</a><span class="line">/</span><a href="#">个人护洁</a><span class="line">/</span><ahref="#">宠物</a></div><div class="item"><a href="#">女鞋</a><span class="line">/</span><a href="#">箱包</a><span class="line">/</span><ahref="#">钟表</a><span class="line">/</span><a href="#">珠宝</a></div><div class="item"><a href="#">男鞋</a><span class="line">/</span><a href="#">运动</a><span class="line">/</span><a href="#">户外</a></div><div class="item"><a href="#">房产</a><span class="line">/</span><a href="#">汽车</a><span class="line">/</span><ahref="#">汽车用品</a></div><div class="item"><a href="#">母婴</a><span class="line">/</span><a href="#">玩具乐器</a></div><div class="item"><a href="#">食品</a><span class="line">/</span><a href="酒类"></a><a href="#">生鲜</a><span class="line">/</span><a href="#">特产</a></div><div class="item"><a href="#">艺术</a><span class="line">/</span><a href="#">礼品鲜花</a><span class="line">/</span><ahref="#">农资绿植</a></div><div class="item"><a href="#">医药保健</a><span class="line">/</span><a href="#">计生情趣</a></div><div class="item"><a href="#">图书</a><span class="line">/</span><a href="#">文娱</a><span class="line">/</span><ahref="#">电子书</a></div><div class="item"><a href="#">机票</a><span class="line">/</span><a href="#">酒店</a><span class="line">/</span><ahref="#">旅游</a><span class="line">/</span><a href="#">生活</a></div><div class="item"><a href="#">理财</a><span class="line">/</span><a href="#">众筹</a><span class="line">/</span><ahref="#">白条</a><span class="line">/</span><a href="#">保险</a></div><div class="item"><a href="#">安装</a><span class="line">/</span><a href="#">维修</a><span class="line">/</span><ahref="#">清洗</a><span class="line">/</span><a href="#">二手</a></div><div class="item"><a href="#">工业品</a></div></nav></body></html>

练习3（列表）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><style>a{text-decoration: none;}.news-wrapper{width: 300px;height: 360px;margin: 50px auto;background-color: #bfa;border-top: 1px solid #ddd;}.news-title{display: inline-block;height: 30px;border-top: 1px red solid;margin-top: -1px;padding-top: 10px;}.news-title a{font-weight: bold;color: #40406b; }.news-img{height: 150px;}.news-img .img-title{margin-top: -30px;color: #fff;font-weight: bold;margin-left: 10px;}.news-list{margin-top: 20px;padding-left: 14px;}.news-list li{margin-bottom: 15px;}.news-list li a{font-size: 14px;color: #666;}.news-list li::before{content: "·";color: #666;font-size: 18px;margin-right: 4px;}.news-list li a:hover{color: red;}</style>
</head>
<body><div class="news-wrapper"><h2 class="news-title"><a href="#">英雄联盟</a></h2><div class="news-img"><a href="#"><img width="300px" height="150px" src="./img/03/xioahu.jpeg" alt="销户"><h3 class="img-title">销户剑指s8</h3></a></div><ul class="news-list"><li><a href="#">销户杰斯爆炸输出终结SKT</a></li><li><a href="#">麻辣香锅蛇皮走位秀翻对手</a></li> <li><a href="#">某ad状态不佳坐饮水机旁</a></li> <li><a href="#">ming绝命神勾1换5终结比赛</a></li>   </ul></div></body>
</html>

总结

学习了盒模型的基本结构、怎样为一个盒子设置尺寸和样式。

HTML5+CSS3基础学习day3盒模型相关推荐

前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
1.html5+css3基础学习笔记(上)
1 HTML简介 1.1 W3C标准伯纳斯李1994年建立万维网联盟( W3C ),W3C的出现为了制订网页开发的标准,以使同一个网页在不同的浏览器中有相同的效果.所以,我们需要制订我们编写的网页都 ...
HTML5+CSS3基础学习笔记：2
文档的使用  <!DOCTYPE html> <!-- html的跟标签(元素),网页的所有内容都是写跟元素的里边 --& ...
HTML5+CSS3的学习(五)
HTML5+CSS3的学习(五) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
HTML5+CSS3的学习(六)
HTML5+CSS3的学习(六) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
HTML5+CSS3的学习(一)
HTML5+CSS3的学习(一) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
HTML5+CSS3的学习(四)
HTML5+CSS3的学习(中) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
HTML5+CSS3的学习(二)
HTML5+CSS3的学习(二) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
CSS基础语法和盒模型
CSS基础语法和盒模型 CSS简介 Cascading Style Sheet 层叠样式表用于给HTML标签添加样式 CSS3是CSS的最新版本增加了大量的样式/动画/3D特效以及移动端特性前端 ...

HTML5+CSS3基础学习day3盒模型