ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css盒子模型

2021-10-06 15:04:07  阅读:148  来源: 互联网

标签:盒子 margin 模型 元素 边框 padding 设置 border css


文章目录

引入

文档流:
-网页是一个多层结构,一层叠一层
-通过css可以分别为每一层来设置样式
-作为用户来讲只能看到最顶层
-这些层中,最底层称为文档流,文档流是基础
我们所创建的元素都是在文档流中进行排列
-对于我们来说元素主要有两个状态:
在文档流中
不在文档流中

元素在文档流中的特点:
-块元素:
块元素在页面中独占一行,自上而下垂直排列
默认宽度为父元素的全部
默认高度是被内容撑开

-行内元素:
行内元素不会独占一行,只占自身大小
行内元素在页面中从左向右水平排列,如果一行之中不能承载,
则换到下一行继续排列
行内元素的默认高度和宽度都是被内容撑开

一、盒子模型

盒子模型、盒模型、框模型(box model)
-css将页面中的所有元素都设置了一个矩形盒子
-将元素设置为一个矩形盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置
-每一个盒子都由以下几个部分组成
内容区(content)
内边距(padding)
边框(border)
外边距(margin)
在这里插入图片描述

1、内容区(content)

元素中的所有子元素和文本内容都在内容区中排列
内容的大小由width和height两个属性来设置
width设置内容区的宽度
height设置内容区的高度

2、边框(border)

边框属于盒子边缘,边框里面属于盒子内部,出了边框就是盒子的外部
边框的大小会影响到整个盒子的大小
要设置边框,需要至少设置三个样式:
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style(实线or虚线)

边框的默认值是三个像素,就是可以省略不写也是有边框显示的,推荐写上,因为可能有的浏览器不一样

i、border-width

可以用来指定四个方向的边框宽度
值的情况:(border-width后可跟不一数量的值)值所代表的意义如下:
四个值:上 右 下 左
三个值:上 左右 下
两个值:上下 左右
一个值:上下左右
例如 : border-width: 10px;代表四个方向都是10px
除此之外还有border-width还有border-xxx-width来表示单独的边框宽度
xxx可以表示为top right bottom left

ii、border-color

用来指定边框的颜色,同样可以分别指定四个边的颜色
规则和border-width一样
四个值:上 右 下 左
三个值:上 左右 下
两个值:上下 左右
一个值:上下左右
当不写的时候就是默认黑色,或者指定color生效

iv、border-style

指定边框的样式
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
也可写四个,规则同上
四个值:上 右 下 左
三个值:上 左右 下
两个值:上下 左右
一个值:上下左右
当写上none时就没有边框样式了

以上的边框是分别设置的也可以简写:border: pink 10px solid;
ps:里面的属性可以根据实际情况改变
border 还可单独设置边框颜色:
border-top
border-right
border-bottom
border-left

border-top: 10px red solid ; border-right:yellow 20px solid ; border-bottom:blue 30px solid; border-left:chocolate 30px solid;
以上是通过改变每一个边框的数据,也可以修改个别不要的数据,例如:
border: 10px pink solid; border-right: none;

3、内边距(padding)

-内容区和边框区之间的距离
-一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
padding-top: 100px; padding-right: 100px; padding-bottom: 100px; padding-left: 100px;
等于
padding:100px;

-背景颜色会延申到内边距上
-内边距的设置会影响到盒子的大小
一个盒子的可见大小是由内容区,内边距和边框共同决定的
所以在计算盒子大小的时候,需要将三个区域加到一起计算

4、外边距(margin)

-一共有四个方向的外边距:
margin-top
-上外边距,设置一个正值,其下边的元素会向下移动
margin-right
margin-bottom
-下外边距,设置一个正值,其下边的元素会向下移动
margin-left
-左外边距,设置一个正值,元素会向右边移动
-margin也可以简写,和前面一样,写一个值即可。

-若把上述的值改成负值,则和原来的移动的方向会和原来的相反
-外边距不会影响盒子可见框的大小
-但是会影响盒子的位置
-元素在页面中是按照自左向右的顺序排列, 所以默认情况下,如果我们设置左和上外边距则会移动元素本身。
而设置下和右外边距是移动其他元素

a、外边距的折叠

垂直外边距的折叠
-相邻的垂直方向外边距会发生重叠,比如盒子1的下外边距会和盒子2的上外边距重叠
-兄弟元素
-兄弟元素间的相邻垂直外边距会取两者间的较大值(两者都是正值)
-特殊情况:
如果相邻的外边距一正一负,则取两者的和
如果相邻的外边距都是负值,则取两者之间绝对值较大的

-兄弟元素之间的外边距重叠,对于我们的开发是有利的,所以外面不需要进行处理

-父子元素
-父元素相邻的外边距,子元素会传递给父元素(上外边距)
-父元素外边距的折叠会影响页面的布局,需要进行处理

二、元素的水平布局

元素在其父元素中的水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

一个元素在其父元素中,水平布局必须要满足以上元素相加的等式;
如果这七个值中设有auto的情况下,则浏览器会自动调整margin-right值以使等式满足

这三个值可以设为auto:
width(就算不设置,宽度也是默认的auto)
margin-left
margin-right
如果某个值是auto 则会自动调整为auto的那个值以使等式成立
*如果将一个宽度和一个外边距设置为auto,则宽度调整到最大,设置为auto的外边距会自动为0
*如果将三个值都设置为auto 则外边距都是0,宽度最大
*如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值
所以外面经常利用这个特点来使一个元素在其父元素中水平居中
示例:
width:xxxpx;
margin:0 auto;

三、元素的垂直布局

子元素是在父元素的内容区中排列的;
如果子元素的大小超过了父元素的大小,则子元素会从父元素中溢出
使用overflow 属性来设置父元素如何处理溢出的子元素

              可选值:
                visib,默认值 子元素会从父元素中溢出,在父元素外部的位置显示
                hiiden 溢出内容将会被剪裁不会显示
                auto 根据需要生成滚动条
                scroll 生成两个滚动条,通过滚动条来查看完整的内容
                自动设置的有
                overflow-x;
                overflow-y;                                          

例如:

<style>
.box1{

            width: 200px;
            height: 200px;
            background-color: #bfa;
               overflow: auto;
 }
 </style>

四、行内元素的盒模型

行内元素的盒模型
-行内元素不支持设置宽度和高度
-行内元素可以设置padding,垂直方向padding不会影响页面的布局
-行内元素可以设置border,垂直方向也不会影响页面的布局
-行内元素可以设置margin,垂直方向不会影响页面的布局

行内元素不可以独占一行除非被内容撑开,如果需要换行则需要以下属性:

display 用来设置元素显示的类型
可选值:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素
行内块,既可以设置宽度和高度也不会独占一行
table 将元素设置为一个表格
none 元素不在页面中显示

visiblity 用来设置元素的显示状态
可选值
visible 默认值,元素在页面中正常显示
hidden 元素在页面中隐藏,不显示,但依然占据页面的位置

五、浏览器默认样式

默认样式:
通常情况下,浏览器都会为元素设置一些默认样式,例如p元素的内容之间会有空格等。
默认眼视光hi的存在会影响页面的布局。
通常情况下编写网页时必须要去除浏览器的默认样式(pc端)

一般情况下默认样式都是通过改变margin和padding来实现的,由以下几种方式进行修改:

方法一:
通过代码的检查进行逐个修改
body{
margin: 0%;

}
p{
margin: 0%;
}
ul{
margin: 0%;
padding: 0%;
list-style: none;
/* list-style是去除项目的符号 * /
方法二:
(用*去除所有元素的margin和padding,但是会有残留,所以不怎么用)
*{
margin: 0%;
padding: 0%;
}
方法三:
引入reset或者normal,这是已经写好的代码,直接上浏览器搜索复制下来新建css文件,在需要用的时候引用即可。
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="normalize.css">

二者引用其一即可,但是二者有所不同。reset是将所有浏览器的默认样式都去掉,而normalize是对样式的统一。

引用normalize:

在这里插入图片描述

引用reset:
在这里插入图片描述

标签:盒子,margin,模型,元素,边框,padding,设置,border,css
来源: https://blog.csdn.net/weixin_56233059/article/details/120623361

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有