CSS盒子模型: 盒子模型( Box Model)组成 ,边框, 表格的细线边框 ,内边距(padding) 边框会影响盒子的实际大小, 外边距 (margin) 外边距合并, 清除内外边距

本文主要是介绍CSS盒子模型: 盒子模型( Box Model)组成 ,边框, 表格的细线边框 ,内边距(padding) 边框会影响盒子的实际大小, 外边距 (margin) 外边距合并, 清除内外边距,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 盒子模型:
      • 盒子模型( Box Model)组成
      • 边框
      • 表格的细线边框
      • 内边距(padding)
      • 边框会影响盒子的实际大小
      • 外边距 (margin)
      • 外边距合并
      • 清除内外边距

盒子模型:

页面布局要学习三大核心:盒子模型,浮动和定位

页面布局过程:

  1. .先准备好相关的网页元素,网页元素基本都是盒子Box。
  2. 利用CSS设置好盒子的样式,然后摆放到相应位置。
  3. 往盒子里面装内容。
    网页布局的核心本质:就是利用CSS摆盒子。

盒子模型( Box Model)组成

所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容。
在这里插入图片描述
在这里插入图片描述

边框

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

语法:

border : border-width || border-style || border-color
属性作用
border-width定义边框粗细,单位是px
border-style边框的样式
border-color边框的颜色

边框样式 border-style可以设置如下值:

  • none: 没有边框即忽略所有边框的宽度(默认值)。
  • solid: 边框为单实线(最为常用)。
  • dashed: 边框为虚线
  • dotted: 边框为点线

例子:

 <style>div {width: 300px;height: 200px;/*border-width 边框的粗细,一般情况下用 px*/border-width: 5px;/*border-style 边框的样式  solid实线边框 dashed  虚线边框  dotted点线边框*/border-style: solid;/* border-style: dashed;  *//* border-style: dotted;  *//* border-color 边框的颜色 */border-color: pink}</style>
</head><body><div></div>
</body>

边框简写:

boder:1px solid red;没有顺序

例子:

 <style>div {width: 300px;height: 200px;/* border-width: 5px;border-style: solid;   border-color: pink; *//*边框的复合写法 简写:*/border: 5px solid pink;}</style>
</head><body><div></div>
</body>

边框分开写法:

border-top: 1px solid red; /*只设定上边框,其余同理*/

案例:
设置一个200*00的盒子,设置上边框的颜色为红色,其余边框为蓝色(提示:一定注意边框的层叠性)

<style>div {width: 200px;height: 200px;/* border-top: 1px solid red;border-bottom: 1px solid blue;border-left: 1px solid blue;border-right: 1px solid blue; *//*boder 包含四条边*/border: 1px solid blue;/*层叠性 只是层叠了上边框    利用就近原则*/border-top: 1px solid red;}</style>
</head><body><div></div>
</body>

表格的细线边框

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

语法:

border-collapse:collpase;

例子:

<head><style>table {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px solid pink;/*合并相邻的边框*/border-collapse: collapse;}</style>
</head>
<body><table align="center" cellspacing="0" ><thead><tr><th>排名</th><th>关键词</th><th>封面</th></tr></thead><tbody><tr><td>1</td><td>靠近你会掉刺</td><td><img src="images/1.jpg"></td></tr><tr><td>2</td><td>魔尊要抱抱</td><td><img src="images/2.jpg"></td></tr><tr><td>3</td><td>触碰的旋律</td><td><img src="images/3.jpg"></td></tr><tr><td>4</td><td>穿越成反派要如何活命</td><td><img src="images/4.jpg"></td></tr></tbody>
</table>

展示图:

在这里插入图片描述

  • collapse单词是合并的意思
    - border-collapse: collapse:表示相邻边框合并在一起

内边距(padding)

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

属性作用
padding-left左内边距
padding-rigth右内边距
padding-top上内边距
padding-bottom下内边距

padding属性(简写属性)可以有一到四个值。

值得个数表达意思
padding:5px1个值,代表上下左右都有5像素内边距;
padding:5px 10px2个值,代表上下边距是5像素 左右内边距是10像素
padding:5px 10px 20px3个值,代表上边距5像素,左右内边距10像素,下边距20像素;
padding:5px 10px 20px 30px;4个值,上是5像素,右10像素,下20像素,左是30像素,顺时针

练习:

<style>/*1.要求盒子有一个内边距是5像素*/div {padding-left: 5px;}/*2./*要求简写的形式写出 一个盒子上下是25像素 左右是15像素*/div {padding:25px 15px;}/*要求简写的形式写出一个盒子 上内边距是12像素 下内边距是0 左内边距是25像素 有内边距是10像素*//*上右下左*/div {padding: 12px 10px 0 25px;}</style>

边框会影响盒子的实际大小

当我们给盒子指定padding值之后,发生了2件事:

1.内容和边框有了距离,添加内边距。
2.padding影响了盒子实际大小。
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。

我们有两种方案解决:

1.测量盒子大小的时候,不量边框。
2.如果测量的时候包含了边框,保证盒子跟效果图一致,则需要 width/heigth减去边框宽度。

例子:


<head><style>div {/* width: 200px;height: 200px; */width: 160px;height: 160px;background-color: pink;padding: 20px;}</style>
</head><body><div>你没对象,你没钱,你还秃,你没对象,你没钱,你还秃,你没对象,你没钱,你还秃,你没对象,你没钱,你还秃</div>
</body>

展示图:
在这里插入图片描述

案例:新浪导航案例 -padding影响盒子好处

1.padding内边距可以撑开盒子。
2.因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适。

案例分析:
1.上边框为3像素,颜色为#ff8500
2.下边框为1像素 ,颜色为#edeef0
3.盒子高度为41像素,背景颜色为 #fcfcfc
4.文字的颜色为#4c4c4c。

案例:

<head><style>.nav {/*高度*/height: 41px;/*上边框*/border-top: 3px solid #ff8500;/*下边框*/border-bottom: 1px solid #edeef0;/*背景颜色*/background-color: #fcfcfc;/*文字垂直居中*/line-height: 41px;}.nav a {/*a 属于行内元素,此时必须要转换 行内块元素*/display: inline-block;/*高度为41像素,不给宽度,因为字数不一样,直接用padding撑大盒子*/height: 41px;/*内边距:上下0像素,左右20像素*/padding: 0 20px;/*字体12像素,颜色为#4c4c4c*/font-size: 12px;color: #4c4c4c;/*取消链接的下划线*/text-decoration: none;}/*链接伪类样式*/.nav a:hover {/*鼠标经过的背景色*/background-color: #eeeeee;/*鼠标经过的字体颜色*/color: #ff8500;}</style>
</head><body><div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">电脑端</a></div>
</body>

展示图:
在这里插入图片描述

案例:小米导航案例修改 -padding影响盒子大小的计算。

  1. padding内边距可以撑大盒子,有时候,也可以让我们去修改宽度。
  2. 所以小米侧边栏这个案例,文字距离左侧的距离不应该用 text-indent这样不精确。
  3. 实际开发的做法是给padding值,这样更加准确。

例子:

 <head><title>简单版小米侧边栏</title><style>a {/*转换为块级元素*/display:block;/*宽高*//* width: 230px; *//*因为左内边距的为30px,所以230-30=200*/width: 200px;height: 40px;/*背景颜色*/background-color: #55585a;/*字体大小*/font-size: 14px;/*字体颜色*/color: #fff;/*链接取消下划线*/text-decoration: none;/*首行缩进两厘米*//* text-indent: 2em; *//*这样的写法在实际开发中不准确*//*左内边距为30px*/padding-left: 30px;/*让文字居中*/line-height: 40px;}/*鼠标经过的颜色*/a:hover {background-color: #ff6700;}</style></head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 显示器</a><a href="#">家电 插线板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">电源 配件</a><a href="#">健康 儿童</a><a href="#">耳机 音箱</a><a href="#">生活 箱包</a></body>

如何盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小?

例子:

<head><style>div {width: 300px;height: 100px;background-color: plum;}/*没右指定宽高,孩子和父亲一样宽*/div p {/*如果再写100%,此时会多出60像素*//* width: 100%; */padding: 30px;background-color: skyblue;}</style>
</head><body><div><p></p></div>
</body>

外边距 (margin)

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

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

margin简写方式代表的意义跟padding完全一致。

例子:

<head><style>div {width: 200px;height: 200px;background-color: pink;}/* .one {margin-bottom: 20px;} */.two {margin-top: 20px;}</style>
</head><body><div class="one">1</div><div class="two">2</div>
</body>

展示图:
在这里插入图片描述

外边距典型运用

外边距可以让块级盒子 水平居中,但是必须满足两个条件:
1.盒子必须指定了宽度(width)
2.盒子左右的外边距都设置为auto

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

常见的写法,以下三种都可以:

  • 只要左右为auto,就可以实现水平居中
  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto; (上下为0,左右auto,用最多)

例子:

<head><style>.header {width: 900px;height: 200px;background-color: pink;margin: 0 auto;}</style>
</head><body><div class="header"></div>
</body>

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

例子:

<head><style>.header {width: 900px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;}</style>
</head><body><div class="header"><span>好饿啊</span></div><div class="header"><img src="images/xie.jpg" alt=""></div>
</body>

展示图:
在这里插入图片描述

外边距合并

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

主要有两种情况:

1.相邻块元素垂直外边距的合并

当上下相邻的两块元素(兄弟关系)相遇时,如果上面的元素有下外边距mrgin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和。

取两值中的较大者这种现象被称为相邻元素垂直外边距的合并。
在这里插入图片描述

例子:

<head><style>.milk_cap, .cake{width: 200px;height: 200px;background-color: pink;}.milk_cap {margin-bottom: 100px;}.cake {margin-top: 200px;}/*下的外边距为100,上的外边距200,以大的为准,意思是100+200=200*/</style>
</head><body><div class="milk_cap">奶盖</div><div class="cake">蛋糕</div>
</body>

解决方案:
尽量给一个盒子添加 margin 值。

2.嵌套块元素垂值外边距的塌陷

对于两个嵌套的关系(父子关系)的块元素,父元素有上外边距同时子元素也有上边距。此时父元素会塌陷较大的外边距值。
在这里插入图片描述
塌陷的例子:


<head><style>.father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;}.son {width: 200px;height: 200px;background-color: pink;margin-top: 100px;}</style>
</head><body><div class="father"><div class="son"></div></div></body>

解决方案:

  1. 可以为父元素定义上边框。
  2. 可以为父元素定义上内边距。
  3. 可以为父元素添加 overflow:hidden

例子:

<head><style>.father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;/*边框*//* border:1px solid red; *//*边框*//* border: 1px solid transparent; *//*内边距*//* padding: 1px; *//*可以为父元素添加 overflow:hidden。可以避免外边距合并或塌陷问题*/overflow: hidden;}.son {width: 200px;height: 200px;background-color: pink;margin-top: 100px;}</style>
</head><body><div class="father"><div class="son"></div></div>
</body>

还有其他的方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题。

清除内外边距

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

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

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

这篇关于CSS盒子模型: 盒子模型( Box Model)组成 ,边框, 表格的细线边框 ,内边距(padding) 边框会影响盒子的实际大小, 外边距 (margin) 外边距合并, 清除内外边距的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/800509

相关文章

使用Python合并 Excel单元格指定行列或单元格范围

《使用Python合并Excel单元格指定行列或单元格范围》合并Excel单元格是Excel数据处理和表格设计中的一项常用操作,本文将介绍如何通过Python合并Excel中的指定行列或单... 目录python Excel库安装Python合并Excel 中的指定行Python合并Excel 中的指定列P

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

Golang的CSP模型简介(最新推荐)

《Golang的CSP模型简介(最新推荐)》Golang采用了CSP(CommunicatingSequentialProcesses,通信顺序进程)并发模型,通过goroutine和channe... 目录前言一、介绍1. 什么是 CSP 模型2. Goroutine3. Channel4. Channe

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3

C#中图片如何自适应pictureBox大小

《C#中图片如何自适应pictureBox大小》文章描述了如何在C#中实现图片自适应pictureBox大小,并展示修改前后的效果,修改步骤包括两步,作者分享了个人经验,希望对大家有所帮助... 目录C#图片自适应pictureBox大小编程修改步骤总结C#图片自适应pictureBox大小上图中“z轴

基于C#实现PDF文件合并工具

《基于C#实现PDF文件合并工具》这篇文章主要为大家详细介绍了如何基于C#实现一个简单的PDF文件合并工具,文中的示例代码简洁易懂,有需要的小伙伴可以跟随小编一起学习一下... 界面主要用于发票PDF文件的合并。经常出差要报销的很有用。代码using System;using System.Col

Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

《Python中requests与aiohttp在实际项目中的选择策略详解》本文主要介绍了Python爬虫开发中常用的两个库requests和aiohttp的使用方法及其区别,通过实际项目案... 目录一、requests 库二、aiohttp 库三、requests 和 aiohttp 的比较四、requ