css 盒子模型(第六天)
盒子模型(CSS重点)
CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。
盒子边框(border)
边框就是拼图时外面的框子,固定了里面的空间大小
语法:
border : border-width || border-style || border-color
边框样式(border-style)常用属性值如下:
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线
边框样式(border-style)
设置内容 | 样式属性 | 常用属性值 |
---|---|---|
上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | |
下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; | |
左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; | |
右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | |
样式综合设置 | border-style:上边 [右边 下边 左边]; | none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线 |
宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
边框综合设置 | border:四边宽度 四边样式 四边颜色; |
表格的细线边框
table{ border-collapse:collapse; } collapse 单词是合并的意思
border-collapse:collapse; 表示边框合并在一起
圆角边框(CSS3)
语法格式:
border-radius: 左上角 右上角 右下角 左下角;
代码:
<!DOCTYPE html>
<!--
@Author jinliwei
@Date 2019/9/17 10:22
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
div:first-child{
border-radius: 10px;
}
/* 50%取宽度和高度的一半,则会变成一个圆形 */
div:nth-child(2){
border-radius: 50%;
}
/* 左上角和右下角10px 右上角和左下角40px */
div:nth-child(3){
border-radius: 10px 40px;
}
/* 左上角10px 左上角和右上角40px 左下角80px */
div:nth-child(4){
border-radius: 10px 40px 80px;
}
/* 左上角10px 右下角40px 右上角80px 左下角100px */
div:nth-child(5){
border-radius: 10px 40px 80px 100px;
}
/* 左上角,右下角,右上角和左下角100px */
div:nth-child(6){
border-radius: 100px;
height: 100px;
}
div:nth-child(7){
border-radius: 100px 0;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
图片:
内边距(padding)
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
注意: 后面跟几个数值表示的意思是不一样的。
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
2个值 | padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
3个值 | padding:上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
4个值 | padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
外边距(margin)
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
CSS 内边距和外边距 代码:
<!DOCTYPE html>
<!--
@Author jinliwei
@Date 2019/9/17 10:34
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 内边距和外边距</title>
<style type="text/css">
div{
color: red;
border: blue solid 1px;
padding-top: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<p>
今天周二,明天周三
</p>
</div>
</body>
</html>
图片:
盒子模型布局稳定性
按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)。
width > padding > margin
原因:
- margin 会有外边距合并 还有 ie6下面margin 加倍的bug(讨厌)所以最后使用。
- padding 会影响盒子大小, 需要进行加减计算(麻烦) 其次使用。
- width 没有问题(嗨皮)我们经常使用宽度剩余法 高度剩余法来做。
清除元素的默认内外边距
代码:
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
盒子阴影
语法格式:
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 但是不能写 默认 想要内阴影 inset