块级元素:
- 主要的块级元素
<div><p><li><h1><h2><h3><h4><h5><h6>
<form><header><hr><ol><address><article>
<aside><audio><canvas><dd><dl><fieldset>
<section><ul><video>
特点:
- 比较霸道,自己独占一行。
- 高度,宽度、外边距以及内边距都可以控制。
- 宽度默认是容器(父级宽度)的100%。
- 是一个容器及盒子,里面可以放行内或者块级元素。
注意:只有文字才能组成段落因此 p 里面不能放块级元素,特别是 p 不能放div,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
行内元素:
- 主要的行内元素
<span><a><lable><strong><b><small><abbr><button>
<input><textarea><select><code><img><br>
<q><i><cite><var><kbd>
<sub><bdo>
特点:
- 相邻行内元素在一行上,一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或则其他行内元素。
两者区别:
1.占有空间上的区别,
- 块级元素:占有整一个父元素的空间。
- 行内元素:占有其对应标签的空间,即使根据其内容的多少,占有父级元素多少的空间。
2.多个同级元素使用时的区别
- 块级元素:即使在设置宽度的情况下,都直接新起一行。
- 行内元素:除非所占父元素行空间已满,否则都不会换行,在行内向右排列,即使是同级的子标签都是如此。
3. 包含嵌套关系的区别
- 块级元素:包含行内元素和块级元素。
- 行内元素:只能包含行内元素,不能包含块级元素。
CSS常见的布局方式
1.盒子布局
如图所示盒子模型有以下几个属性:
margin:外边据 可以改变元素上下左右的边距。
- margin-left :调整左边距。
- margin-right:调整右边距。
- margin-top:调整上边距。
- margin-bottom:调整下边距。
padding:内边距
- padding:内边距 可以改变元素内部上下左右的边距。
- padding-left :调整左边距。
- padding-right:调整右边距。
- padding-top:调整上边距。
- padding-bottom:调整下边距。
注意:css中隐藏元素的方式:
- dispaly:none;
- width:0;height:0;
- overflow:hidden表示超出部分隐藏。
- visible表示显示隐藏部分(这个一般在系统中是默认值)。
border:边框
边框主要有以下几种属性:
(1)color:颜色
例如:border-top-color表示上边框的颜色,也可调整其他几个方向的(bottom下,left左,right右)
style:样式
例如:border-top-style表示上边框的样式,可以是实线(solid),圆点(dotted),虚线(dashed)等等。
width:宽度
thin 表示细 medium 表示中等 thick 表示粗 也可使用像素来表示。
例如:border-width:xxpx。
height:高度。
例如:border-height:xxpx利用像素来设置高度。
radius:圆角边框(设置边框弧度)。
例如:border-radius:xxpx。
除此以外盒子模型还有浮动,清除浮动,定位等属性,
如下一一作答:float:浮动我们在做静态网页的时候经常会遇到某一块的图形不受控制,会超出我们所规定的范围,这时候我们就可以使用浮动。
2.浮动布局
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
语法:
float: none|left|right;
文档流
指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列。添加浮动会脱离文档流,对后续元素产生影响。
1.空间丢失
第一个div设置浮动,第二个未设置。第一个会脱离文档流,第二个div向前填充。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素</title>
<style>
div {
width: 200px;
height: 200px;
}
div:nth-of-type(1) {
border: solid 2px red;
/* 浮动后脱离文档流,会对后续元素产生影响 */
float: left;
}
div:nth-of-type(2) {
background: blue;
}
</style>
</head>
<body>
<div >
</div>
<div>
</div>
</body>
</html>
若只有第二个div浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素</title>
<style>
div {
width: 200px;
height: 200px;
}
div:nth-of-type(1) {
border: solid 2px red;
}
div:nth-of-type(2) {
background: blue;
float: left;
}
</style>
</head>
<body>
<div >
</div>
<div>
</div>
</body>
</html>
2.同时浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素</title>
<style>
div {
width: 200px;
height: 200px;
}
div:nth-of-type(1) {
border: solid 2px red;
float: left;
}
div:nth-of-type(2) {
background: blue;
float: left;
}
</style>
</head>
<body>
<div >
</div>
<div>
</div>
</body>
</html>
3.定位布局
语法:
position: static|absolute|fixed|relative|sticky|initial|inherit;
没开定位时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 600px;
height: 600px;
border: 5px solid rgb(56, 56, 56);
}
.box1 {
width: 100px;
height: 100px;
background-color: yellow;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
}
.box3 {
width: 100px;
height: 100px;
background-color: green;
}
.s1 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
开启定位后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 600px;
height: 600px;
border: 5px solid rgb(56, 56, 56);
}
.box1 {
width: 100px;
height: 100px;
background-color: yellow;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
}
.box3 {
width: 100px;
height: 100px;
background-color: green;
position:relative;
left: 90px;
bottom: 50px;
}
.s1 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
4.Flex布局
justify-content:设置主轴上的子元素的排列方式。
align-items:设置交叉轴上的子元素的排列方式(单行)。
flex-direction:设置水平方向的排列方式。
flex-wrap:设置子元素是否可以换行。
flex-flow:简写属性,相当于flex-direction和flex-wrap的缩写形式。
align-content:设置交叉轴上的子元素的排列方式(多行)。
一 、justify-content
此属性控制项目在主轴上的对齐方式,设置给容器。
flex-start:默认值,靠左对齐。
center:居中对齐。
flex-end:靠右对齐。
span-between:两端对齐,两端不留空间。
space-evenly:分散对齐,所有元素都平局空间。
space-around:跟space-evenly类似,但是左右两边的留白为平分空间的1/2。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.flex-contain {
width: 400px;
height: 350px;
background-color: rgb(255, 0, 93);
display: flex;
justify-content: space-around;
}
.flex-item {
width: 100px;
height: 100px;
background-color: rgb(60, 0, 255);
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</di>
</div>
</body>
</html>
二 、align-items
控制元素在 交叉轴 上的对齐方式(单行)( 单行项目使用 align-items 控制,如果项目占据了多行,此属性无效 )。
stretch:默认值,它会自动把子元素拉伸成容器的高度,只要设置容器的align-items的值,他就会变成内容的高度(如果子元素本身设置了高度,stretch属性无效)。
center:居中对齐。
flex-start:元素位于容器的中心。
flex-end:元素位于容器的结尾。
baseline:元素位于容器的基线上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.flex-contain {
width: 400px;
height: 350px;
background-color: rgb(0, 255, 136);
display: flex;
align-items: baseline;
}
.flex-item {
width: 100px;
height: 100px;
background-color: rgb(255, 0, 221);
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
</html>
三、 align-content
设置交叉轴上的子元素的排列方式(多行),当有多行项目,使用align-content替换align-items设置项目在交叉轴上的排列方式,两行之间就会有空隙。
flex-start:默认值,在交叉轴靠左对齐。
center:在交叉轴居中对齐。
flex-end:在交叉轴靠右对齐。
space-around:分散对齐,但是上下两边的留白为平分空间的1/2。
span-between:两端对齐,两端不留空间。
四、 flex-direction
此属性控制着水平方向是主轴还是交叉轴
flex-direction 属性的默认值是 row ,也就是说主轴与行一个方向,也就是水平方向是主轴。
flex-direction 如果设置为 column ,则垂直方向是主轴,水平方向就是交叉轴了。
(若flex-direction=column此时向控制项目水平对齐方式,应该使用 align-items ,垂直方向对齐方式,应使用 justify- content 属性)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.flex-contain {
width: 400px;
5.6.3 flex-wrap nowrap ---- 默认值,规定弹性元素不会换行 wrap ---- 弹性元素在需要的时候会换行 wrap-reverse ------ 会换行,但是是反方向 height: 350px;
background-color: orange;
display: inline-flex;
flex-direction: column-reverse;
}
.flex-item {
width: 100px;
height: 100px;
background-color: rgb(217, 255, 0);
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
</html>
五、 flex-wrap
如果子元素有固定宽度,并且超出了容器的宽度,还不允许收缩的话,那么可以使用 flex-wrap 属性来 让元素进行折行排列。
nowrap:默认值。规定弹性元素不会换行。
wrap:弹性元素在需要的时候会换行。
wrap-reverse:会换行,但是是反方向。
5.特殊样式
transform属性
transform 属性可以让元素在一个坐标系统中变形,这个属性包含一系列变形函数、可以进行无素的移动、旋转和缩放。默认值为none。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: rgb(0, 157, 255);
float: left;
margin: 50px;
}
.one{
transform: rotate(30deg); /*旋转30度*/
}
.two{
transform: translate(20px,20px); /* 向右向下移动20px*/
}
.three{
transform: scale(2,1.5); /*宽度为原来两倍,高度为原来1.5倍*/
}
.four{
transform: skew(30deg,20deg); /*在X轴上和Y轴上倾斜20度和30度*/
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>