目录
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 | 指定弹性容器内所选项目的对齐方式。 |