盒子模型笔记

最新推荐文章于 2023-08-09 21:57:51 发布
最新推荐文章于 2023-08-09 21:57:51 发布
阅读量194 收藏 1
点赞数 1
分类专栏： HTML/CSS 文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44066678/article/details/115623673
版权

盒子模型

盒子模型的组成

border 边框

content 内容

padding 内边距 就是内容距离盒子的距离

margin 外边距 盒子与盒子的距离

边框 border

border 可以设置元素的边框。边框有三部分组成：边框宽度(粗细)边框样式 边框颜色。

border : border-width || border-style || border-color
属性作用
border-width定义边框粗细，单位是px
border-style边框的样式
border-color边框颜色
<!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>
    <style>
      div {
        width: 300px;
        height: 100px;
        /* border-width 边框粗细 一般情况下使用 px */
        border-width: 5px;
        /* border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框 */
        border-style: solid;
        /* border-style: dashed; */
        /* border-style: dotted; */
        border-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

边框的复合写法 简写

border:1px solid red； 没有顺序

边框分开写法 可以自定义四条边框样式

border-top:1px solid pink;

border-bottom:10px dashed green;

表格的细线边框

border-collapse 属性控制游览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse:collapse;

collapse 单词是合并的意思

border-collapse:collapse;表示相邻边框合并到一起。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 500px;
        height: 249px;
      }
      table th {
        height: 35px;
      }
      table,
      td,
      th {
        border: 1px solid pink;
        /* 合并相邻单元格 */
        border-collapse: collapse;
        font-size: 14px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table border="1" cellspacing="0">
      <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
      </tr>
      <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td>↓</td>
        <td>345</td>
        <td>123</td>
        <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
      <tr>
        <td>2</td>
        <td>盗墓笔记</td>
        <td>↓</td>
        <td>124</td>
        <td>675432</td>
        <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
      <tr>
        <td>3</td>
        <td>西游记</td>
        <td>↑</td>
        <td>212</td>
        <td>7654</td>
        <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
      <tr>
        <td>4</td>
        <td>东游记</td>
        <td>↑</td>
        <td>23</td>
        <td>75645</td>
        <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
      <tr>
        <td>5</td>
        <td>甄嬛传</td>
        <td>↓</td>
        <td>121</td>
        <td>7676</td>
        <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
      <tr>
        <td>6</td>
        <td>水浒传</td>
        <td>↑</td>
        <td>576576</td>
        <td>1231421</td>
        <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
      <tr>
        <td>7</td>
        <td>三国演义</td>
        <td>↑</td>
        <td>234</td>
        <td>7686</td>
        <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
    </table>
  </body>
</html>

内边距 padding

padding 属性用于设置内边距，即边框与内容之间的距离。

是算入到宽高中的

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
<!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>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        padding-left: 10px;
        padding-top: 10px;
      }
    </style>
  </head>
  <body>
    <div>盒子模型的内边距</div>
  </body>
</html>

简写写法

值的个数表达意思
padding:5px;1个值，代表上下左右都有5像素内边距;
padding:5px 10px;2个值，代表上下内边距是5像素，左右内边距是10像素；
padding:5px 10px 20px;3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素；
padding:5px 10px 20px 30px;4个值，代表上内边距5像素，右内边距10像素，下内边距20像素，左内边距30像素。顺时针
<!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>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* padding-left: 10px; */
        /* padding-top: 10px; */
        /* padding 简写方式 */
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div>盒子模型的内边距</div>
  </body>
</html>

注意

当我们给盒子指定padding值之后，发生了2件事情：

1、内容和边框有了距离，添加了内边距。

2、padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

外边距 margin

margin 属性用于设置外边距,即控制盒子和盒子之间的距离

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

简写写法

值的个数表达意思
margin:5px;1个值，代表上下左右都有5像素外边距;
margin:5px 10px;2个值，代表上下外边距是5像素，左右外边距是10像素；
margin:5px 10px 20px;3个值，代表上外边距5像素，左右外边距10像素，下外边距20像素；
margin:5px 10px 20px 30px;4个值，代表上外边距5像素，右外边距10像素，下外边距20像素，左外边距30像素。顺时针
<!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>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .one {
        margin-bottom: 20px;
      }
      .two {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="one">one</div>
    <div class="two">two</div>
  </body>
</html>

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件。

1、盒子必须指定了宽度(width)

2、盒子左右的外边距都设置为 auto

.header{width:960px;margin:0 auto;}

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给父元素添加text-align:center 即可

外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

1、可以为父元素定义上边框

2、可以为父元素定义上内边距

3、可以为父元素添加 overflow：hidden；

清除内外边距

网页元素很多都带有默认的内外边距，而且不同游览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

<style>
    *{
        padding:0;/*清除内边距*/
        margin:0; /*清除外边距*/
    }
</style>

<!--
	注意:行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以。
-->

圆角边框

在这里插入图片描述

<!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>
    <style>
      div {
        width: 300px;
        height: 150px;
        background-color: pink;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

在这里插入图片描述

<!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>
    <style>
      .yuanxing {
        width: 200px;
        height: 200px;
        background-color: pink;
        border-radius: 50%;
      }
      .juxing {
        width: 300px;
        height: 100px;
        background-color: pink;
        border-radius: 50px;
      }
      .radius {
        width: 200px;
        height: 200px;
        background-color: pink;
        border-radius: 10px 20px 30px 40px;
      }
    </style>
  </head>
  <body>
    <h1>圆形的做法</h1>
    <div class="yuanxing"></div>
    <h1>圆角矩形的做法</h1>
    <div class="juxing"></div>
    <h1>可以设置不同的圆角</h1>
    <div class="radius"></div>
  </body>
</html>

盒子阴影

在这里插入图片描述

<!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>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

文字阴影

在这里插入图片描述

<!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>
    <style>
      div {
        font-size: 50px;
        color: orangered;
        font-weight: 700;
        text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div>你是阴影，我是火影</div>
  </body>
</html>
郭大胖ovo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3弹性盒模型开发笔记（三）
12-03
本文介绍了CSS3弹性盒模型，供大家参考，大家亦可以结合CSS3弹性盒模型开发笔记（一）、CSS3弹性盒模型开发笔记（二）进行学习，具体内容如下 box-pack和box-align属性 当弹性元素和非弹性元素混合排版时，有可能会...
CSS3弹性盒模型开发笔记（一）
01-21
弹性盒模型（Flexible Box Moudle），该模型用于决定元素在盒子中的分布方式以及处理盒子的可用空间。这与XUL（Firefox浏览器的用户交互语言）相似，其他语言也使用相同的盒模型。如XAML，GladeXML等。通过弹性盒...
前端html和css基础知识
weixin_44897872的博客
09-16 2869
第一天 常用的浏览器和内核 1.谷歌（chrome）前端工程师必备 2.firefox 火狐 3.safari iphone ipad 苹果 4.IE/Edge微软 5.Opera 欧鹏 HTML骨架 都是双标签 <html></html> ​​ <body></body> 常用标签 段落标签 <p></p> 换行标签：单标签 ​ 大盒子 一行显示一个 ​ <span></sapn>小
margin带不同数量参数各代表什么？
weixin_44775228的博客
03-31 2483
margin:10px;/*代表上下左右外边距各为10px*/ margin:10px 20px;/*代表上下外边距为10px，左右外边距为20px*/ margin:10px 20px 30px;/*代表上边距为10px，左右边距为20px，下边距为30px*/ margin:10px 20px 30px 40px;/*代表上右下左（按顺时针）边距分别为10 20 30 40 */ ...
盒子模型笔记整理
m0_74359055的博客
08-09 178
​ 如图，盒子模型包括中间黄色区域的内容，内边距（padding），边框（border），外边距（margin）。
第五章 盒子模型和表单 ① 笔记
Liu_wen_wen的博客
06-11 140
盒子模型 margin外边距 W3C盒子 IE盒子 浮动框架 position 静止定位 相对定位 绝对定位 固定定位 表单 input select option textarea
前端css 属性
qq_18246731的博客
08-14 769
目录 一、字体属性 字体种类(font-family) 字体大小(font-size) 字重(字体粗细)(font-weight) 文本颜色(color) 文字对齐(text-align) 文字装饰(text-decoration ) 首行缩进(text-indent) 二、背景属性 背景颜色(background-color) 背景图片(background-imag...
HTML网页设计基础笔记 • 【第7章 盒子模型】
01-08
7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流概述 7.2.2 display 属性 7.2.3 visibility 属性 7.3 盒子浮动 7.3.1 float 属性 7.3.2 清除浮动 7.4 ...
CSS3弹性盒模型开发笔记（二）
12-13
本文为大家继续分享CSS3弹性盒模型开发笔记第二篇，之前一篇以及为大家引入了CSS3弹性盒模型的相关介绍，点击查看：CSS3弹性盒模型开发笔记（一） box-flex属性 box-flex属性能够灵活地控制子元素在盒子中的显示空间...
CSS盒子模型详解.pdf
04-15
CSS盒子模型详解，自己学习总结的，希望对你有用。自己也做个笔记
笔记记录：06盒子模型
cat113488637的博客
03-22 331
0、回顾知识 1、对于文本样式text-indent（首行缩进）需要在块元素当中，如div、p、li、h2这种可以是用，span、b、em这种行内标签是不生效的。 2、当浏览器存在历史记录时，我们的a标签如果指向路径在历史记录中，那么他的a：link伪类（未点击）是无法展示出效果的，我们需要使用Ctrl+Shift+Delete键（该快捷键为谷歌浏览器）删除历史记录，并且删除时，记得选择时间长度： 是无法展示出效果的，我们 3、对齐方式 若文本如上图中样式，左侧为居中对齐，..
CSS外边距
weixin_55243810的博客
07-07 341
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白” 设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。 CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性。 margin 属性接受任何长度单位，可以是像素、英寸、毫米或em。 margin 可以设置为 atuo 。更常见的做法是为外边距设置长度值。下面的声明在h1元素的各个边上设置了1/4英寸的空白： 下面的例子为 h1
HTML 盒子模型（基础笔记）
weixin_46685628的博客
04-23 278
-内容区（content） 内边距（padding） 边框（border） 外边框（margin） 内容区主要用 width /height 设置背景颜色background-color:"#bfa"; 设置边框 设置边框必须指定三个样式 border-width(边框的宽度) berder-color（边框的颜色） berder-style（边框的样式） *可以后面跟四个值（上右下左）三个值（上...
盒子模型（自学笔记）
zmhxuexi的博客
07-28 184
看透网页布局的本质 把网页元素比如图片文字等等，放入盒子，然后利用css摆盒子的过程，就是网页布局 盒子模型 盒子边框（border） 属性 作用 值 border-width 边框粗细 像素值 border-style 边框样式 solid(实线)；dashed（虚线）；dotted(点线) border-color 边框颜色 red;blue等 连写一般按照以下顺序书写： border:width style color; 在border后加入方位就可以指定单边的边框样式如
6.盒模型
前端学习笔记
04-05 400
盒子5个主要属性（width/height/margin/border/padding)//真实高度/宽度不等于占有高度/宽度 padding：外边距 border：边框 margin：内边距 width：CSS中指内容宽度，不是盒子 height：CSS中指内容高度，不是盒子 盒子占有宽度=padding*2+border*2+width //实际宽度不包含margin 盒子占有高度=paddi...
盒子模型基础笔记
weixin_44213625的博客
08-02 660
盒子模型 什么是盒子模型 对于每幅画来说，都有一个边框，在英文中称为border,每个画框中，画和画框通常都会有一定 的距离，这个距离称为内边距，在英文中称padding,每一幅画之间不是紧挨着的，也存在一些距离，称为外边距，在英文中称为margin. 因此，padding-border-margin模型是一个极其通用的描述矩形队形布局形式的方法。这些矩型对象统称为盒子，英文为box。 在CSS中，一个独立的盒子模型由content（网页内容）、border（边框）、padding（内边距）、margin
第三章 盒子模型笔记
Mr.qiu的专栏
06-14 254
1.盒子模型-border    组成宽度、颜色、样式：    border-width: 2px;/*边框宽度*/    border-color: pink;/*边框颜色*/    border-style: solid;/*边框样式*/    复合写法border: 1px solid pink;    left：    right：    top：    bottom；  代码示例： ...
CSS---盒子模型笔记
qq_43766304的博客
03-06 135
写给自己：笔记在代码注释中，把上面的图案记下来，才能学好盒子模型。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
线性回归模型笔记整理
最新发布
10-12
下面是线性回归模型的笔记整理： 1. 线性回归模型的基本形式为：y = wx + b，其中y为因变量，x为自变量，w为权重，b为偏置。 2. 线性回归模型的目标是最小化预测值与真实值之间的误差，通常使用均方误差（MSE）...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值