三、box 盒子模型

梦里梦外; 2022-02-23 09:40 356阅读 0赞

三、

## 1、边框 border ##

颜色 border-color  
粗细 border-width  
样式 border-style  
solid  
实线的  
dashed  
虚线  
dotted  
点状线  
举例  
border: 1px solid red ;  
4个边框都是红色的实线  
border-top: 1px dashed pink;  
top left right bottom  
border-top-color: skyblue;  
上边框线的颜色 天蓝色  
border: none  
去掉边框

## 2、内边距 padding ##

padding 盒子内部的距离  
padding 会撑开盒子 我们一般情况下用 width 和高度 减去 多出来的padding  
有的盒子我们没有给宽度，此时一般情况padding不会撑开  
四种写法  
padding: 10px;  
4个内边距都是10  
padding: 10px 20px;  
上下 10 左右 20  
padding: 10px 20px 30px;  
上 10 左右 20 下 30  
padding: 10px 20px 30px 40 px  
上右下左 顺时针

## 3、外边距 margin ##

margin 让块级盒子居中对齐  
块级  
有宽度  
让div整体在页面水平居中：  
①给div设置宽度  
②给div设置marign：margin 左右auto就可以了  
margin： 0 auto;  
margin： auto  
margin-left: auto;  
margin-right: auto;  
margin外边距的特殊现象（合并 塌陷）  
上下的外边距才有合并的问题  
嵌套关系的盒子会有塌陷  
给父盒子 border  
给父盒子 padding 上  
给父盒子 overflow:hidden;

## 4、宽高 width,height ##

盒子模型的经典应用  
1、去掉所有标签默认的内填充和外填充  
\* \{  
margin: 0;  
padding: 0;  
\}  
body, div,span, h1,h2,h3,h4,h5,h6,pul,li,ol,dl,dt,dd,table,tr,td,th,form,input,select,textarea \{  
margin: 0;  
padding: 0;  
\}  
2、如何让一个块盒子水平居中  
要求  
1、给盒子设宽度  
2、margin左右自动  
margin-left: atuo;  
margin-right: auto;  
margin: auto;  
margin: 0 auto;  
margin: 50px auto;  
上下50px的外填充，左右自动  
举例  
div \{  
width: 1000px;  
margin: 0 auto;  
\}

发表评论取消回复

表情：

评论列表（有 0 条评论，356人围观）

还没有评论，来说两句吧...

相关阅读

相关盒子Box UVA1587

1. \include<cstdio> 2. \include<set> 3. \include<string.h> 4. using namespace std; 5

刺骨的言语ヽ痛彻心扉/ 2024年02月17日 18:44/ 0 赞/ 87 阅读

相关 CSS--盒子模型(box)--使用/教程/实例

原文网址：[CSS--盒子模型(box)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_box_--_IT_-CSDN] 简介说明本文介绍

左手的ㄟ右手/ 2023年10月01日 10:12/ 0 赞/ 16 阅读

相关 css总结三(盒子模型)

故心故心故心故心小故冲啊 -------------------- 文章目录 1.盒子模型 1.1盒子模型（Box Model）

红太狼/ 2023年01月03日 04:24/ 0 赞/ 153 阅读

相关 [CSS三] 盒子模型

1. 盒子模型的介绍所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(

小咪咪/ 2022年11月26日 05:00/ 0 赞/ 157 阅读

相关盒子(Box)

给定6个矩形的长和宽wi和hi（1<=wi,hi<=1000),判断它们能否构成长方体的六个面。 include<iostream> include<algo

亦凉/ 2022年11月24日 12:56/ 0 赞/ 139 阅读

相关 CSS 盒子模型(Box Model)

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一

Dear 丶/ 2022年06月09日 14:44/ 0 赞/ 198 阅读

相关盒子模型（Box Model）

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影

骑猪看日落/ 2022年03月21日 05:22/ 0 赞/ 236 阅读

相关布局的核心之一：盒子模型（Box Model）

目录一、盒子模型在网页中的呈现二、盒子模型各个部分的介绍 1、盒子边框（border） 2、内边距（padding） 3、外边距（margin） -

﹏ヽ暗。殇╰゛Y/ 2022年03月16日 00:52/ 0 赞/ 380 阅读

相关三、box 盒子模型

三、 1、边框 border 颜色 border-color 粗细 border-width 样式 border-style solid 实线的 d

梦里梦外;/ 2022年02月23日 09:40/ 0 赞/ 357 阅读

相关 CSS：盒子模型和box-sizing属性

目录一、W3C盒子模型（标准盒子模型）二、IE盒子模型（怪异盒模型）示例： -------------------- 盒子模型：W3C盒子模型、IE盒子模

偏执的太偏执、/ 2021年07月25日 11:55/ 0 赞/ 397 阅读