目录
1.盒子模型
div又叫盒子模型，在本质上是一个盒子用于封装周围的HTML元素。包括边框、边距、填充和内容。
1.盒子模型的重要属性---border
- border------指定代表某一元素的盒子边框如何呈现。
| border-width | 规定边框的宽度 | thin | 定义细的边框 |
| medium | 默认值，定义中等边框 | ||
| thick | 定义粗的边框 | ||
| length | 允许您自定义边框宽度 | ||
| border-style | 规定边框的样式
| none | 定义无边框 |
| hidden | 与none相同，应用于表时除外，在表中，hidden用于解决边框冲突 | ||
| dotted | 定义点状边框 | ||
| dashed | 定义虚线边框 | ||
| solid | 定义实线 | ||
| double | 定义双线 | ||
| groove | 定义3D凹槽边框 | ||
| ridge | 定义3D垄状边框 | ||
| inset | 定义3Dinset边框 | ||
| outset | 定义3Doutset边框 | ||
| border-color | 规定边框颜色 | color_name | 规定颜色值为颜色名称的边框颜色 |
| hex_number | 规定颜色值为十六进制的边框颜色 | ||
| rgb_number | 规定颜色值为rgb代码的边框颜色 | ||
| transparent | 默认值，边框为透明 |
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
.top{
width: 300px;
height: 40px;
border-width: thick;
border-style: double;
border-color: blue;
}
</style>
</head>
<body>
<div class="top">
</div>
</body>效果展示：
- border-botton------把下边框的所有属性设置到一个声明中。
| border-bottom-width | 属性设置元素的下边框的宽度 |
| border-bottom-style | 设置元素下边框的样式 |
| border-bottom-color | 设置元素的下边框的颜色 |
| border-bottom-left-radius | 定义左下角边框的形状 |
| border-bottom-right-radius | 定义右下角边框的形状 |
-
border-image----插入图片
| border-image-source | 用在边框的图片的路径。 |
| border-image-slice | 图片边框向内偏移。 |
| border-image-width | 图片边框的宽度。 |
| border-image-outset | 边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
-
border-left和border-right
| border-left | 规定左边框 | border-left-width | 规定左边框的宽度。 |
| border-left-style | 规定左边框的样式。 | ||
| border-left-color | 规定左边框的颜色。 | ||
| border-right | 规定右边框 | border-right-width | 规定右边框的宽度。 |
| border-right-style | 规定右边框的样式。 | ||
| border-right-color | 规定右边框的颜色。 |
- border-top----规定上边框
| border-top-width | 规定上边框的宽度。 |
| border-top-style | 规定上边框的样式。 |
| border-top-color | 规定上边框的颜色。 |
| border-top-left-radius | 定义左上角边框的形状。 |
| border-top-right-radius | 定义右下角边框的形状。 |
注释：border-top-left-radius和border-top-right-radius 属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。
- 其他属性
| border-collapse | 设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。 |
| border-radius | 一个简写属性，用于设置四个 border-*-radius 属性。 |
| border-spacing | 设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。 |
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
.top{
width: 700px;
height: 100px;
border-width: thick;
border-style: double;
border-color: blue;
background-image: url(10.jpg);
border-image-repeat: repeated;
border-bottom-left-radius: 2em;
border-spacing: 10px 50px;
}
</style>
</head>
<body>
<div class="top">
</div>
</body>效果展示：
2.浮动布局----float
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
| none | 不浮动 |
| left | 左浮动，会对后面元素产生影响 |
| right | 右浮动 |
浮动布局的时候，左浮动会造成后面元素的布局错乱的现象，我们需要用clear清除浮动。
| none | 默认值，允许两边有浮动 |
| left | 不允许有左浮动 |
| right | 不允许有右浮动 |
| both | 不允许两边有浮动 |
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
#all{
width: 400px;
height: 200px;
border-style: solid;
border-color: #956;
}
.top{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.mid{
width: 100px;
height: 100px;
background-color: blue;
float: right;
}
.foot{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="all">
<div class="top">第一个div</div>
<div class="mid">第二个div</div>
<div class="foot">第三个div</div>
</div>
</body>效果展示：
注释：因为第一个div是左浮动，第三个div没有浮动，所以第三个div在第一个div下面。
3.定位布局----position
| static | （默认值） 静态定位 |
| absolute | 绝对定位 ：将对象从文档流分离出来，通过设置top、left、right、bottom这四个 方向的值进行定位（相较于父级的定位），如果没有这样的父级，默认的父级是body |
| relative | 相对定位:对象不从文档流里面分离，通过设置top、left、right、bottom这四个方向 的值进行定位（相较于自身的定位） |
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
#all{
width: 400px;
height: 200px;
border-style: solid;
border-color: #956;
}
.top{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.mid{
width: 100px;
height: 100px;
background-color: blue;
}
.foot{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="all">
<div class="top">第一个div</div>
<div class="mid">第二个div</div>
<div class="foot">第三个div</div>
</div>
</body>效果展示：
4.溢出效果----overflow
| visible | 默认值，溢出没有被剪裁，内容在元素框外渲染 |
| hidden | 溢出被剪裁，其余内容将不可见 |
| scroll | 溢出被剪裁，同时添加滚动条以查看其余内容 |
| auto | 与 scroll 类似，但仅在必要时添加滚动条（总是显示滚动条） |
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
.top{
width: 100px;
height: 100px;
border-width: thick;
border-style: double;
border-color: blue;
background-image: url(10.jpg);
border-image-repeat: repeated;
overflow: scroll;
}
</style>
</head>
<body>
<div class="top">
</div>
</body>效果展示：
5.缩放-----zoom
zoom的语法结构： zoom : number 百分比
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
.top{
width:600px;
height: 100px;
border-width: thick;
/* border-style: double; */
border-color: blue;
background-image: url(10.jpg);
border-image-repeat: repeated;
/* overflow: scroll; */
zoom:0.5;
}
</style>
</head>
<body>
<div class="top">
</div>
</body>效果展示：
6.弹性盒子-----display属性
利用display属性定义flex（设置属性的时候是在父元素上设定的）
| 属性 | 值 | ||
| flex-direction | 定义盒子显示方式 | row | (默认值）从左到右显示 |
| row-reverse | 从右到左显示 | ||
| column | 从上到下显示 | ||
| column-reverse | 从下到上显示 | ||
| flex-wrap | 定义换行方式 | wrap | 必要的时候自动换行 |
| nowrap | （默认值）不换行 | ||
| wrap-reverse | 需要的时候换行以相反方向换行 | ||
| flex-flow | 同时设置显示方式和换行方式（结合flex-direction和flex-wrap） | flex-flow: flex-direction flex-wrap|initial|inherit; | |
<style type="text/css">
.all{
display: flex;
flex-direction:row-reverse;
width: 400px;
height: 200px;
border: 0px solid red;
}
.all>div{
width: 100px;
height: 100px;
background-color: #e42ff3;
}
</style>效果展示：
其他属性：
| 属性 | 值 | ||
| justify-content | 对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。 | center | 居中对齐 |
| flex-start | 默认值，左对齐 | ||
| flex-end | 末端对齐 | ||
| space-around | 每个盒子都设置空格 | ||
| space-between | 盒子与盒子之间有空格 | ||
| align-items | 为弹性容器内的项目指定默认对齐方式。 | 垂直方向上的居中 | |
| flex-start | 容器顶部对齐 | ||
| flex-end | 容器底部对齐 | ||
| stretch | 拉伸盒子适应容器，前提是盒子没有设置高度 | ||
| baseline | 基线对齐 | ||
| align-content | 修改 flex-wrap 属性的行为。它与 align-items 相似，但是它不对齐弹性项目，而是对齐弹性线。 | center | 容器之间打包 |
| flex-start | 盒子顶部对齐 | ||
| flex-end | 盒子底部对齐 | ||
| stretch | 拉伸盒子适应容器 | ||
| space-between | 每行均匀分布 | ||
| space-around | 每行均匀分布在弹性容器中，两端各占一半。 | ||
| flex-grow | 规定在相同的容器中，项目相对于其余弹性项目的增长量。（没有设置盒子高宽的时候可以设置大小） | ||
| flex-shrink | 固定在相同的容器中，项目相对于其余弹性项目的收缩量。 | ||
| flex-basis | 规定弹性项目的初始长度。 | ||
| align-self | 指定弹性容器内所选项目的对齐方式。 | ||
扫一扫
2745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
