02-CSS盒子模型

最新推荐文章于 2024-07-25 11:26:35 发布

扶羊人zz

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量85

点赞数 1

文章标签： html css3

本文链接：https://blog.csdn.net/apple_58595131/article/details/130012698

版权

CSS属性 - display

CSS中有个display属性，能修改元素的显示类型，有4个常用值

block ：让元素显示为块级元素
inline ：让元素显示为行内级元素
inline-block：让元素同时具备行内级、块级元素的特征
none ：隐藏元素
flex ：弹性盒子

display值的特性(非常重要)

◼ block元素:

 独占父元素的一行

 可以随意设置宽高，设置后依然独占一行

 高度默认由内容决定

◼ inline-block元素:

 跟其他行内级元素在同一行显示

 可以随意设置宽高

 可以这样理解

✓ 对外来说，它是一个行内级元素

✓ 对内来说，它是一个块级元素

◼ inline:

 跟其他行内级元素在同一行显示;

 不可以随意设置宽高;

 宽高都由内容决定;

编写HTML时的注意事项

块级元素、inline-block元素

 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）

 特殊情况， p元素不能包含其他块级元素，会导致样式错乱

行内级元素（比如a、span、strong等）

 一般情况下，只能包含行内级元素

元素隐藏方法

方法一: display设置为none

 元素不显示出来, 并且也不占据位置, 不占据任何空间 (和不存在一样);

方法二: visibility设置为hidden

 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间 ;

 默认为visible, 元素是可见的;

方法三: rgba设置颜色, 将a的值设置为0

 rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素 ;

方法四: opacity设置透明度, 设置为0

 设置整个元素的透明度, 会影响所有的子元素 ;

CSS属性 - overflow

overflow用于控制内容溢出时的行为

visible：溢出的内容照样可见
hidden：溢出的内容直接裁剪
scroll：溢出的内容被裁剪，但可以通过滚动机制查看，会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto：自动根据内容是否溢出来决定是否提供滚动机制

CSS样式不生效技巧

为何有时候编写的CSS属性不好使，有可能是因为

选择器的优先级太低
选择器没选中对应的元素
CSS属性的使用形式不对

元素不支持此CSS属性，比如span默认是不支持width和height的
浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
被同类型的CSS属性覆盖，比如font覆盖font-size

建议

充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

盒子模型(Box Model)

HTML中的每一个元素都 可以看做是一个盒子 ，如右下图所示，可以具备这4个属性

因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边:

在浏览器的开发工具中

内容 – 宽度和高度

设置内容是通过宽度和高度设置的:

宽度设置: width
高度设置: height

注意: 对于行内级非替换元素来说, 设置宽高是无效的!

另外我们还可以设置如下属性:

min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时, 可以设置最大宽度和最小宽度;

下面两个属性不常用:

min-height：最小高度，无论内容多少，高度都大于或等于min-height
max-height：最大高度，无论内容多少，高度都小于或等于max-height

padding属性 用于设置盒子的内边距, 通常用于设置 边框和内容之间的间距 ;

padding包括四个方向, 所以有如下的取值:

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

padding单独编写是一个缩写属性：

padding-top、padding-right、padding-bottom、padding-left的简写属性
padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

padding并非必须是四个值, 也可以有其他值;

边框 相对于content/padding/margin来说特殊一些:

边框具备宽度width;
边框具备样式style;
边框具备颜色color;

边框宽度

border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性

边框颜色

border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性

边框样式

border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性

边框的样式有很多, 我们可以了解如下的几个:

groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来

同时设置的方式

border-top
border-right
border-bottom
border-left
border：统一设置4个方向的边框

边框颜色、宽度、样式的编写顺序任意

圆角 – border-radius

数值: 通常用来设置小的圆角, 比如6px;
百分比: 通常用来设置一定的弧度或者圆形;
如果一个元素是正方形, 设置 border-radius大于或等于50%时，就会变成一个圆.

外边距 - margin

通常用于 元素和元素之间的间距 ;

margin包括四个方向, 所以有如下的取值:

margin-top：上内边距
margin-right：右内边距
margin-bottom：下内边距
margin-left：左内边距

margin单独编写是一个缩写属性：

margin-top、margin-right、margin-bottom、margin-left的简写属性
margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

margin也并非必须是四个值, 也可以有其他值;

上下margin的传递

margin-top传递 :如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递 :如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
如何防止出现传递问题？

给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC(block formating context): 设置overflow为auto

建议

margin一般是用来设置兄弟元素之间的间距
padding一般是用来设置父子元素之间的间距

上下margin的折叠

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
水平方向上的margin（margin-left、margin-right）永远不会collapse
折叠后最终值的计算规则:两个值进行比较，取较大的值
如何防止margin collapse？只设置其中一个元素的margin

上下margin折叠的情况