CSS布局

概述

CSS布局分为两个方面，一是盒子模型，二是定位机制。

盒子模型决定页面元素的大小，边框，与其它元素的距离。（元素什么样）

定位机制决定文档流，浮动定位和层定位。（元素放在哪）

盒子模型

组成

盒子模型由几部分组成，内容content，高度height，宽度width，边框border，内边距padding，外边距margin(可以控制两个盒子之间的距离)

 

overflow属性

hidden:超出部分省略

scroll:滚动条
auto:自动设置

border属性

border-width:2px,thin,medium,thick

border-style:dashed(横线组成),dotted(点组成),solid(实线),double(双实线)

border-color

border:按顺序依次写出宽度风格和颜色的值

border-botton:和border属性一样，只是规定了边框的位置，也需要依次写出三个子属性的值

 

代码示例：

 1 <html>
 2     <head>
 3         <title>盒子模型示例</title>
 4         <style>
 5             #box{
 6                 height: 100px;
 7                 width: 100px;
 8                 border-width:5px;
 9                 border-style: dashed;
10                 border-color: red ;
11                 overflow:scroll;
12             }
13         </style>
14     </head>
15     <body>
16         <div id="box">
17             这是一个盒子模型
18         </div>
19     </body>
20 </html>

 

 padding属性和margin属性

在设置这两个属性前要把浏览器自带的padding和margin属性清零

*{
    margin:0;
    padding:0;
}

padding 和 margin 都可以设置子属性（四个方向）大小或者直接在自身属性后面加上大小

如果在自身后面加上大小，四个大小顺序为上,右,下,左，两个大小顺序为上下,左右

两个盒子上下margin会自动合并，取上面盒子的下方margin大小和下面盒子的上方margin大小的最大值作为二者中间的间隔，注意水平方向不会合并，只有垂直方向合并

 

文字和图片水平居中的时候使用text-align属性的center值，而div水平居中则需要设置margin，将其设置为两个值，第一个值代表上下，可以自行设定，第二个值设定为auto，表示自动水平居中对齐

 1 *{ 2 margin:10px,auto; 3 } 

posted @ 2021-02-02 16:09  _厨师沙拉  阅读(422)  评论(0)    收藏  举报