css学习三大重点: css 盒子模型、 浮动、 定位
盒模型主体思路:边框、内边距、外边距
网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
看透网页布局的本质:
首先利用CSS设置好盒子的大小,然后摆1放盒子的位置。
最后把网页元素比如文字图片等等,放入盒子里面。
以上两步 就是网页布局的本质
我们明白了,盒子是网页布局的关键点,所以我们更应该弄明白 这个盒子有什么特点。
所谓盒子模型:
就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
总结:
盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。
盒子里面的文字和图片等元素是 内容区域
盒子的厚度 我们成为 盒子的边框
盒子内容与边框的距离是内边距(也叫填充)
盒子与盒子之间的距离是外边距
示图:
语法:
border : border-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框的样式:
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线
dotted:边框为点线
div {
width: 200px;
height: 200px;
background-color: red;
border-width: 10px;
border-style: solid;
border-color: green;
}
border : border-width border-style border-color
例如:
border: 1px solid red; 没有顺序
很多情况下,我们不需要指定4个边框,我们是可以单独给4个边框分别指定的。
上边框 | 下边框 | 左边框 | 右边框 |
---|---|---|---|
border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
注意:
当盒子添加外边框之后,会变大,给容器的宽和高是给内容设置的。
border-top-color: green;
border-top-width: 5px;
border-top-style: solid;
border-top: 20px solid orange;
border-bottom: none solid blue;
border-right: 20px solid orchid;
border-left: 20px solid green;
语法:
其中每一个值可以为 数值或百分比的形式。
border-radius:length;
/* border-radius: 50%; */
Document