一.css语法
1.class与id选择器:id 选择器适用范围只有一个元素,而class可以有多个元素。
二.盒子模型
1.内容cotent:盒子的内容,如文本、图片等
2.内边距padding:即内容和边框之间的区域。
例如:padding-left,padding-right,padding-top,padding-bottom.(简写默认顺时针方向)
3.边框border:默认不显示
4.外边距margin:边框以外与其它元素的区域
三.定位
1.relative:相对定位,元素相对于他的静态(正常)位置进行偏移。
2.broad:占位区域。请将浏览器窗口改变大小,看看右下角的按钮发生了什么?(即使改变浏览器串口大小)
3.fixed:这个按钮是固定的。
4.absolute:绝对定位,将使元素相对于其最近设置了定位属性(非static)的父元素进行偏移。
四.溢出
-
visible 默认值,溢出部分不被裁剪,在区域外面显示
-
hidden 裁剪溢出部分且不可见
-
scroll 裁剪溢出部分,但提供上下和左右滚动条供显示
-
auto 裁剪溢出部分,视情况提供滚动条
-
-
五.浮动
float:让某元素水平方向上向左或右进行移动,其周围的元素也会重新排列。
<html>
<head>
<style>
.example-float-right {
float: right;
}
</style>
</head>
<body>
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
modi nam vero!</p>
</body>
</html>
六.伪元素
a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ /* 鼠标移到段落则改变背景颜色 */ p:hover {background-color: rgb(226, 43, 144);} p:first-line{color:blue;} /* 段落的第一行显示蓝色 */ p:first-letter{font-size: xx-large;} /* 段落的第一个字超大 */ h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */ h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */
举例:
`
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>第一行会变成红色鸭yayayayyayayayyayayayayya!,第二行就是黑色啦啦啦啦啦啦</p>
</body>
</html>
`运行结果: