1盒模型
1.1css宽度
定义
width属性设置元素的宽度
说明:这个属性定义元素内容区的宽度,在内容区外面可以增加内边框、内边距、外边框、外边距
取值
auto 元素实际宽度
length 设置像素级px宽度
%基于父级元素的百分比
inherit 从父级继承宽度,也就是说等于父级宽度
1.1.2用法
.auto {
width:auto;
}
.length {
width:200px;
}
.pct {
width:100%;
}
.inherit {
width:inherit;
}
1.2css高度
定义
height属性值设置元素的高度
取值
- auto 元素实际高度
- length 设置像素级px高度
- % 基于父级元素的百分比高度
- inherit 从父级元素继承高度,也就是等于父级元素的高度
1.3css内边距
定义
padding简写属性在一个元素中设置所有内边距属性
取值
- 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;
}
1.4css外边框
定义
margin简写属性在一个声明中设置所有外边距属性
取值 (可以为负值)
- 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.5css边框
定义
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;
}
1.6border-radius
border-radius属性是一个简写属性,用于设置四个直角弧度
2.1 定义
盒模型通过一个模型来描述元素在页面中占用的空间。
- W3C 标准模型 元素的设置宽度和设置高度指内容的宽度和高度
- 元素总宽度=设置宽度+左填充+右填充+左边框+右边框+左边距+右边距
- 元素总高度=设置高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
- IE模型 元素的设置宽度和设置高度包括内容的宽度和内边距以及边框宽高
- 元素总宽度=设置宽度+左边距+右边距
- 元素总高度=设置高度+上边距+下边距
2.2 box-sizing属性
box-sizing 属性允许您以特定的⽅式定义匹配某个区域的特定元素。 取值:
- content-box 指定盒模型为 W3C 标准模型,元素的宽度 = 设置宽度 + 边框宽度 + 内边距
- border-box 指定盒模型为 IE模型,元素的宽度 = 设置宽度 - 边框宽度 - 内边距
- inherit 从父元素继承 box-sizing 属性值
/* 设置盒子模型为ie盒⼦模型 */
.container {
box-sizing:border-box;
}
/* 设置盒子模型为标准盒⼦模型 */
.container {
box-sizing:content-box;
}
2.3内边框
outline是绘制元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
outline简写属性在一个声明中设置所有的轮廓属性
可以设置的属性分别是(按顺序):outline-color, outline-style, outline-width