CSS宽度(width)
1. 定义
width 属性设置元素的宽度 说明:这个属性定义元素内容区的宽度,在内容区外⾯可以增加内边距、边框和外边距 取值:
-
auto 元素实际宽度
-
length 设置像素级px宽度
-
% 基于父级元素的百分比宽度
-
inherit 从父级元素继承宽度,也就是等于父级元素的宽度
.auto {
width:auto;
}
.length {
width:200px;
}
.pct {
width:100%;
}
.inherit {
width:inherit;
}
CSS高度(height)
1. 定义
height属性设置元素的⾼度 注意:height属性不包括填充,边框,或边距 取值:
-
auto 元素实际高度
-
length 设置像素级px高度
-
% 基于父级元素的百分比高度
-
inherit 从父级元素继承高度,也就是等于父级元素的高度
.auto {
height:auto;
}
.length {
height:200px;
}
.pct {
height:100%;
}
.inherit {
height:inherit;
}
CSS边框 (border)
1. 定义
border 简写属性在⼀个声明设置所有的边框属性 可以按顺序设置如下属性:
-
border-width
-
border-style
-
solid 实线
-
dotted 点状线
-
double 双实线
-
dashed 虚线
-
-
border-color
/* 设置四条边框的样式 */
p {
border:5px solid #ff0000;
}
/* 设置每⼀条边框的样式 */
p {
border-top:10px solid red;
border-left:20px dotted green;
border-right:30px double orange;
border-bottom:40px dashed red;
}
/* css画一个三角形 */
div {
width:0;
height:0;
border:10px solid transparent;
border-top-color:red;
}
2. border-radius[CSS3]
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
border-radius: 1-4 length|% / 1-4 length|%;
CSS内边距(padding )
1.定义
padding 简写属性在⼀个声明中设置所有内边距属性
说明:这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。⾏内⾮替换元素上设置的内边距不会影响⾏⾼计算。如果⼀个元素既有内边距⼜有背景,从视觉上看可能会延伸到其他⾏,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。
补充:
-
非替换元素:如果元素的内容包含在文档中,则称之为非替换元素。比如一个段落的文本都在该元素本身之内,这个段落就是一个非替换元素。
-
替换元素:作为其他内容占位符的一个元素称为替换元素,根据标签和属性的值来显示内容的元素。比如img元素,它只是指向一个图像文件,这个文件插入到文档流中。大多数表单元素(input,根据type属性来显示内容)也是替换元素。
注意:不允许指定负边距值。
取值:
-
auto 自动计算内边距
-
length 设置像素级px内边距
-
% 基于父级元素宽度的百分比的内边距
-
inherit 从父级元素继承内边距
p {
/* 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px */
padding:10px 5px 15px 20px;
/*上内边距是 10px 右内边距和左内边距是 5px 下内边距是 15px */
padding:10px 5px 15px;
/* 上内边距和下内边距是 10px 右内边距和左内边距是 5px */
padding:10px 5px;
/*4 个内边距都是 10px */
padding:10px;
}
CSS外边距(margin)
1. 定义
margin 简写属性在⼀个声明中设置所有外边距属性。该属性可以有 1 到 4 个值,与内边距相同 说明:这个简写属性设置⼀个元素所有外边距的宽度,或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并,⽽⾏内元素实际上不占上下外边距,⾏内元素的的左右外边距不会合并。同样,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使⽤时要⼩⼼。 注意:允许使⽤负值。
取值:
-
auto 自动计算外边距
-
length 设置像素级px外边距
-
% 基于父级元素宽度的百分比的外边距
-
inherit 从父级元素继承外边距
p {
/* 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px */
margin:10px 5px 15px 20px;
/*上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px */
margin:10px 5px 15px;
/* 上外边距和下外边距是 10px 右外边距和左外边距是 5px */
margin:10px 5px;
/* 4 个外边距都是 10px */
margin:10px;
}
盒模型
1. 定义
盒模型通过一个模型来描述元素在页面中占用的空间。
-
W3C 标准模型 元素的设置宽度和设置高度指内容的宽度和高度
-
元素总宽度=设置宽度+左填充+右填充+左边框+右边框+左边距+右边距
-
元素总高度=设置高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
-
-
IE模型 元素的设置宽度和设置高度包括内容的宽度和内边距以及边框宽高
-
元素总宽度=设置宽度+左边距+右边距
-
元素总高度=设置高度+上边距+下边距
-
2. box-sizing属性
box-sizing 属性允许您以特定的⽅式定义匹配某个区域的特定元素。 取值:
-
content-box(标准盒子) 指定盒模型为 W3C 标准模型,元素的宽度 = 设置宽度 + 边框宽度 + 内边距
-
border-box(怪异盒子) 指定盒模型为 IE模型,元素的宽度 = 设置宽度 - 边框宽度 - 内边距
-
inherit 从父元素继承 box-sizing 属性值
3. 用法
/* 设置盒子模型为ie盒⼦模型 */
.container {
/* 怪异盒子 */
box-sizing:border-box;
}
/* 设置盒子模型为标准盒⼦模型 */
.container {
box-sizing:content-box;
}
4. outline外边框
outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline简写属性在一个声明中设置所有的轮廓属性。
可以设置的属性分别是(按顺序):outline-color, outline-style, outline-width
<style>
p {
border: 1px solid #f00;
outline: 1px solid green;
}
</style>
<p>hello</p>
案例
外边距合并
情况一:两个盒子上下并列,上面盒子设置下边距,下面盒子设置上边距,两个距离会合并在一起,两个值不一样,会使用大值
<style>
.div1{
width: 300px;
height: 300px;
background-color: #f00;
margin-bottom: 30px;
}
.div2{
width: 300px;
height: 300px;
background-color: aqua;
margin-top: 50px;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
</style>
情况二:当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并
<style>
.div1{
width: 300px;
height: 300px;
background-color: #f00;
margin-top: 30px;/*距离外边的盒子30px*/
}
.div2{
width: 100px;
height: 100px;
background-color: aqua;
margin-top: 30px;/*盒子并没有发生改变*/
}
</style>
<div class="div1">
<div class="div2"></div>
</div>
情况三:假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并
<style>
.div1{
margin-top: 30px; /*盒子会距离上面30px*/
margin-bottom: 30px; /*盒子不会改变,距离进行两合并*/
}
.div2{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
注意:有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并,所以想要让外边距合并消失,可以设置float属性