9.前端之CSS盒子能装啥

盒子模型
在这里插入图片描述

width
height
padding
border
margin

宽度∶
width:长度值│百分比|auto
最大宽度﹔
max-width:长度值│百分比|auto
最小宽度∶
min-width:长度值│百分比| auto

说明∶设置块级元素和替换元素的内容宽度

ie6不支持最大最小宽度/高度

块级标签占一整行，充满背景颜色，可以设置宽高

高度:
height:长度值│百分比|auto
最大高度:
max-height:长度值│百分比|auto
最小高度:
min-height:长度值|百分比| auto

说明∶设置块级元素和替换元素的内容高度

在这里插入图片描述

边框属性：
边框宽度border-width
边框颜色border-color
边框样式border-style

border-width:thin | medium | thick |长度值
border-color: 颜色|transparent
在这里插入图片描述
设置border-style,border-color,border-widht边框的四个方向样式一样
缩写：
border:宽度样式颜色
border-left:宽度样式颜色

.one{
    
    border: 10px #e899ee solid;}
.two{
    
    
border-top:5px red solid;
border-Left:1epx blue dotted;
border-right:1epx blue dotted;
border-bottom :5px red solid;
}

内边距属性值不能为负值
在这里插入图片描述
盒子在网页中占的空间，不单单与width和height属性有关，还与padding有关。

在这里插入图片描述

.one{
    
    width:300px;height:308px;background-color: #acacac;padding : 20px 10px 10px;}
.content{
    
    width:100%;height:100%;background-color:#ececec;}

外边距
在这里插入图片描述
margin的缩写和padding一样类似

默认情况下，相应的html块级元素存在外边距,body默认8px
通常覆盖默认样式

body,h1,h2,h3,h4,h5,h6,p{
    
    margin:0;}

外边距值为auto，实现水平方向居中显示效果
由浏览器计算外边距

margin塌陷
在这里插入图片描述
标准盒子宽度和高度计算：

除了标准的，还有IE盒子

在这里插入图片描述
那网页到底选哪个呢？
其实有doctype文档类型声明则用标准，否则浏览器自己选

HTML元素分类：
块级元素，独占一行
p div h1~h6 ul li ol dl dt dd等

行内元素（内联元素），则一行依次显示
span a em 等
行内元素不具有宽高属性设置
还有特殊的img 是inline-block行内块元素，呈现为inline，但具有block相应特性

display:none则不会显示

那可不可以通过设置把块级设置成行内元素呢，答案是肯定的。

可以用display属性来设置
在这里插入图片描述

<head>
.one{font-size:Opx;}
div{dispLay:inline;
font-size:16px;}
</head>
<div class="one">
	<div>display </div>
	<div>display </div>
	<div>display </div>
</div>

对于行内元素之间有空隙除了可以删除换行来解决外，还可以通过上面设置相应css属性来实现

在这里插入图片描述

总结

在这里插入图片描述

NEXT:
float浮动！
每日一单词：
prevalent/fashionable 替换 popular

在这里插入图片描述

9.前端之CSS盒子能装啥

总结

猜你喜欢