css、html、js是前端的 三剑客 学习好css,这能让前端页面‘妆扮’成更加美丽!
行内元素(display:inline)
span a bi em label input select textarea img br code strong front
块内元素 (display:block)
div h h1 h2 h3 h4 h5 h6 p ul form fieldset hr pre table dl
一般来说,行内元素与块内元素可以相互转化:
display:inline --> 行内元素(设置宽高无效)
display:inline-block --> 行内块元素(能设置宽高
)
display:block --> 块级元素(能设置宽高)
注意:加定位(position)或者展示方式(display),会影响行内元素,使其宽高属性生效。
定位
css中,定位方式有如下几种:
position:static;
这个是默认的文档流定位方式,按从左到右,上到下的方式组织文档流的元素。
position: absolute;
这个是绝对定位方式,元素相对于第一个非static的祖先元素进行定位,没有父元素,则定位与body。当然,实际上,如果父元素没有内容,他才是相对于第一个非static的祖先元素进行定位,但是,如果祖先元素有内容,他会相对于内容下面进行定位。看例子:
<!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>Document</title>
</head>
<body>
<div class="div1">
dddd
</div>
<div class="div2">
div2
</div>
</body>
<style>
.div1{
color:blue;
width:50%;
height: 50%;
background-color: rgb(9, 216, 112);
}
.div2{
height: 100px;
position: absolute;
width:100px;
background-color: rgb(180, 169, 169);
}
</style>
</html>
position: relative;
相对定位。它是相对于自己在文档流的原来位置而定位,通常搭配top,left,bottom,right(用两对来确定坐标)来使用。
注意的是:你定位别的位置去了,文档流还会保留你原来的位置。如:
<!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>Document</title>
</head>
<body>
<div class="div1">
dddd
</div>
<div class="div2">
div2
</div>
</body>
<style>
.div1{
color:blue;
position: relative;
top:100px;
left:100px;
width:50%;
height: 50%;
background-color: rgb(9, 216, 112);
}
.div2{
height: 100px;
position: absolute;
width:100px;
background-color: rgb(180, 169, 169);
}
</style>
</html>
position:fixed;
这个固定定位,是固定于浏览器定位。那些弹窗广告通常用这种方式定位,无论你鼠标滑倒哪里去,只要你不关闭,它就一直固定在你的窗口。
position: sticky;
粘性定位:是css3新增的一个position属性。于position:fixed的区别:我们都知道常用的几个定位(static、absolute、relative、fixed),如果没有额外的js处理,只要写上,页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件的处理,当页面滚动到相对应的元素上,就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时,定位效果就会消失。
适用场合:一开始不显示,滚动到一定位置需要显示的元素。
注意:
1.父元素不能有overflow属性
2.left、top、right、bottom必须要有一个
3.仅在父元素内生效,父元素的高度必须大于sticky元素的高度
<!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>Document</title>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
<div class="div3"></div>
</body>
<style>
.div1{
width:100vw;
height: 120vh;
position: relative;
background-color: rgb(9, 216, 112);
}
.div2{
height: 100px;
position: sticky;
width:100px;
left:100px;
top:100px;
background-color: rgb(180, 169, 169);
}
.div3{
height: 120vh;
width: 20vw;
background-color: blue;
}
</style>
</html>
css3一些新特性
文本换行: 默认情况下,英文单词、数字、汉字等会被当成一个完整的字(word),完整的字永远在同一行,这会造成溢出。用 word-wrap:break-word;
能在超出容器的宽度下自动换行。
word-break:break-all;
能实现和word-wrap:break-word;
一样的效果。
word-break:normal;
能保持完整的字不被分割成两行。
word-break:normal;
中日韩完整的字,不会被分割,直到遇到空白符或者标点才换行。
(盒子)阴影:box-shadow:x-shadow y-shadow blur spread color inset;
(选)x-shadow: 阴影水平偏移值,可负值。必填
(选)y-shadow: 阴影垂直偏移值,可负值。必填
blur: 值越大,阴影越大。选填
spread:阴影扩散的面积,默认和原边框一致。选填
(选)color:阴影颜色。选填
inset:阴影默认为外阴影,设置inset将是内阴影。选填
一般开发,选 box-shadow:x-shadow y-shadow color;
边框圆角: border-radius:**px;
如:
盒子居中模型
最近弄项目,要用原生的css代码编写样式,用到最多的是盒子的居中模型。现在我就给大家总结一下有哪些方法可以实现盒子的居中模型。前面我会介绍只有父子关系的居中,后面我会介绍三种关系的居中(图片和文字)!!!
1、利用position属性、margin、left、top、right和bottom。
<!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>Document</title>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
<style>
.div1{
width: 400px;
height: 400px;
background-color: red;
position: relative;
border: 1px solid green;
}
.div2{
width: 200px;
height: 200px;
position: absolute;
right: 0;
left: 0;
bottom: 0;
top: 0;
margin:auto;
background-color: rgb(15, 15, 15);
}
</style>
</html>
2、质心计算,利用数学方法。如果知道了父子元素的宽高,通常采用的是这种方式。
公式是:( fatherWidth - sonWidth + fatherHeight - sonHeight)/ 2
注意:利用这种方法,关键是父元素设置border属性和利用margin-left、margin-top。
即margin要有外边框才能生效。
<!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>Document</title>
</head>
<body>
<div class="div1">
<div class="div2 center"></div>
</div>
</body>
<style>
.div1{
width: 400px;
height: 400px;
background-color: red;
border: 1px solid green;
}
.div2{
width: 200px;
height: 200px;
background-color: rgb(15, 15, 15);
}
.center{
margin-left: 100px;
margin-top: 100px;
}
</style>
</html>
3、利用display: flex 属性。
<!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>Document</title>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
<style>
.div1{
width: 400px;
height: 400px;
background-color: red;
border: 1px solid green;
display: flex;
/*flex-direction: column; 可不写,默认对齐方向*/
justify-content: center;
align-items: center;
}
.div2{
width: 200px;
height: 200px;
background-color: rgb(15, 15, 15);
}
</style>
</html>
4、利用偏移的方法,transform:translate(x,y)和定位。
这种方法我最常用,因为代码最短逻辑最清楚,哈哈!不过关键是利用定位!因为父元素只有relative或者absolute才能让子元素top和left属性生效。它的思想是利用子元素 偏移父元素的宽高的一半 再减去自身宽高的一半。
<!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>Document</title>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
<style>
.div1{
width: 400px;
height: 400px;
background-color: red;
border: 1px solid green;
position: absolute;
}
.div2{
width: 200px;
height: 200px;
background-color: rgb(15, 15, 15);
top:50%; /*偏移父元素的height一半*/
left:50%;/*偏移父元素的width一半*/
transform: translate(-50%,-50%);/*再偏移掉自己宽高的一半*/
position: relative;
}
</style>
</html>
5、利用css3的新增属性table-cell, vertical-align:middle。
<!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>Document</title>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
<style>
.div1{
width:400px;
height:400px;
border: 1px solid wheat;
background-color: red;
display: table-cell;
vertical-align:middle;
}
.div2{
width:200px;
height:200px;
background-color: rgb(24, 22, 22);
margin: auto;
}
</style>
</html>
文字永远和图片中间对齐(案例开发种常用到)
文字和图片通常不在一个元素内,且文字通常是行内元素,img通常被设置成块内元素,这让他们俩永远对齐,还真困难!这关键的思路,就是,
让他们都变成块级元素,宽度一致(包含padding计算在内),文字居中显示!
上案例!
<!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>Document</title>
</head>
<body>
<div class="div">
<img src="../icon/1.jpg"/>
<span>溜溜狗</span>
</div>
</body>
<style>
.div{
border: 1px solid wheat;
background-color: antiquewhite;
border-radius: 10px;
width:204px;
}
img{
width:200px;
height:200px;
border-radius: 200px;
padding: 2px;
background-color: white;
display: inline-block;
}
span{
width:204px;
display: inline-block;
text-align: center;
}
</style>
</html>
好了,希望能帮到大家,我们共同学习!^_^