本文全面解析CSS，涵盖选择器、盒模型、浮动、定位等核心概念，深入探讨CSS的继承性、层叠性及常见布局技巧。
文章目录
CSS
CSS介绍
CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
-
HTML的缺陷：
不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大
-
CSS的优点：
使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。
CSS的引入方式
-
行内式(不推荐使用)
<p style="color:green">张国程</p> -
内接样式(页面比较小,***)
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color:yellow; } </style> </head> <p>张国程</p> -
外接样式–链接式(***)
<link rel="stylesheet" href="index.css">必须要写一个css 文件.(
index.css) -
外接样式–导入式
不建议使用,加载延迟
<style> @import url('index.css'); </style>
选择器
css优先级,指的是浏览器加载css样式的先后顺序.
基本选择器
- 标签选择器(标签名称)
标签选择器可以选中所有的标签元素，比如div，ul，li，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 “共性” 而不是 ”特性“。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器*/
div{
!*font-size:100px;*!
color: green;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<!--标签选择器-->
<div>
<p>alex</p>
<p>egon</p>
</div>
<a href="javascript:void(0);">fgfdgfdgf</a>
</body>
-
类选择器(.+类名)
.加选中class名称所谓类：就是class.
class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器*/
.yi{
color:green;
font-size: 40px;
}
.er{
color: green;
text-decoration: underline;
}
.san{
font-size: 40px;
text-decoration: underline;
}
.lv{
color: green;
}
.xia{
text-decoration: underline;
}
.da{
font-size: 40px;
}
</style>
</head>
<body>
<!--类选择器-->
<!--为下面的段落设置相关属性：-->
<!--段落一 绿色、40px-->
<!--段落二 绿色、下划线-->
<!--段落二 40px、下划线-->
<div>
<p class="yi lv da">段落一</p>
<p class="er lv xia">段落二</p>
<p class="san da xia">段落三</p>
</div>
</body>
-
id选择器(#+id名称)
#加选中id名称同一个页面中
id不能重复。任何的标签都可以设置
id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器*/
#span_id{
color: red;
}
</style>
</head>
<body>
<!--id选择器-->
<div>
<span id="span_id">我是span</span>
</div>
</body>
CSS优先级，指的是浏览器加载CSS样式的先后顺序。
怎么区分谁的优先级高，很简单，大家只需记住三个数即可。
| 选择器 | 权值 |
|---|---|
| 标签选择器 | 1 |
| 类选择器 | 10 |
| id选择器 | 100 |
高级选择器
- 后代选择器(空格)
顾名思义，父元素的后代（包括儿子，孙子，重孙子） - 子代选择器(
>)
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子…)元素p。 - 并集选择器(
,)(or)
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器 - 交集选择器(两个选择器连着写)(
and)
两个选择器没有连接符号表示交集选择器。
比如有一个<span class="sun">alex</span>这样的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
/*通配符选择器8*/
margin: 0;
padding: 0;
}
div{
background: green;
}
/*后代选择器*/
.father .box1 span{
!*21*!
color:green;
}
/*子代选择器*/
.father>.box1{
color:red;
}
/*并集选择器*/
div,span{
color: red;
}
/*交集选择器*/
span.sun{
color: #ff6700;
}
</style>
</head>
<body>
<div class="father">
yuan
<p class="box1">
egon
<span class="sun">alex</span>
</p>
</div>
<span>wusir</span>
</body>
</html>
属性选择器
- 属性名称匹配
[key] - 完整匹配(
key=val) - 以什么开头(
key^=val) - 以什么结尾(
key$=val) - 包含什么(
key*=val) - 指定标签的属性
input[name=xxx]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*通过属性名称定位*/
[for]{
color:green;
}
/*完整匹配*/
[for='username']{
color: red;
}
/*以……开头*/
[for^='pw']{
color: green;
}
/*以什么结尾*/
[for$="e"]{
color: blue;
}
/*包含什么（后面的字符串）*/
label[for*="nam"]{
color: yellow;
}
</style>
</head>
<body>
<p><label for="username">用户名：</label><input type="text" id="username"></p>
<p><label for="pwd">密码：</label><input type="text" id="pwd"></p>
</body>
</html>
伪类选择器
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器
爱恨准则
:link
:visited
:hover(***)鼠标悬浮时,触发
:active
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link {
color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited {
color: red;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover {
color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active {
color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1"><a href="#">没有被访问</a></li>
<li class="item2"><a href="">访问过后</a></li>
<li class="item3"><a href="">鼠标悬停</a></li>
<li class="item4"><a href="">鼠标摁住</a></li>
</ul>
</div>
</body>
</html>
伪元素选择器
- first-letter 首字母设置样式
- before 在什么之前设置样式,结合content(了解)
- after 在什么之后设置样式,结合content(***. 结合清除浮动使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
}
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>egon</p>
</body>
</html>
CSS的继承性和层叠性
-
继承性
面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。
继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
记住：有一些属性是可以继承下来 ：
color、font-*、text-*、line-*。主要是文本级的标签元素。但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
-
层叠性
层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
谁的权重大？ 非常简单就是小学的数数。
数：
id的数量class的数量 标签的数量，顺序不能乱
/*1 0 0 */显示红色
#box{
color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
<p class="container" id="box">啊啊啊</p>
加深难度
先看HTML代码结构：
<div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色？</p>
</div>
</div>
</div>
再看下CSS代码：
#box1 #box2 p{
color: yellow;
}
#box2 .wrap3 p{
color: red;
}
div div #box3 p{
color: purple;
}
div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}
答案：蓝色
CSS:
#box2 .wrap3 p{
color: yellow;
}
#box1 .wrap2 p{
color: red;
}
答案：红色。结论：当权重一样的时候 是以后来设置的属性为准，前提必须权重一样 。‘后来居上 ’。
CSS：
#box1 #box2 .wrap3{
color: red;
}
#box2 .wrap3 p{
color: green;
}
答案：绿色。哈哈，是不是感觉快懵掉了。其实大家只要记住这点特性就可以。第一条css设置的属性值，是通过继承性设置成的红色，那么继承来的属性，它的权重为0。它没有资格跟我们下面选中的标签对比。
那大家猜想一下如果都是被继承来的属性，那么字会显示什么颜色呢？
#box1 #box2 .wrap3 {
color: red;
}
.wrap1 #box2 {
color: green;
}
小案例证明：权重都是0:那么就是"就近原则" ： 谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近。
-
总结：
先看标签元素有没有被选中，如果选中了，就数数 （
id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0 : “就近原则” ： 谁描述的近，就显示谁的属性
注意：!important的使用。
!important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局。切记！
盒模型
-
盒模型属性
-
width：内容的宽度 -
height: 内容的高度 -
padding：内边距，边框到内容的距离 -
border: 边框，就是指的盒子的宽度 -
margin：外边距，盒子边框到附近最近盒子的距离
-
padding（内边距）
padding：就是内边距的意思，它是边框到内容之间的距离-
写小属性,分别设置不同方向的padding
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; -
写综合属性，用空格隔开
/*上 右 下 左*/ padding: 20px 30px 40px 50px ; /*上 左右 下*/ padding: 20px 30px 40px; /* 上下 左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px; -
注意：一些标签默认有
padding。比如
ul标签，有默认的padding-left值。那么我们一般在做站的时候，是要清除页面标签中默认的
padding和margin。以便于我们更好的去调整元素的位置。html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
-
-
border（边框）
border:边框的意思，描述盒子的边框
边框有三个要素： 粗细 线性样式 颜色border-width: 3px; border-style: solid; border-color: red; border-width: 5px 10px; border-style: solid(实线) dotted(点) double(双实线) dashed(虚线); border-color: red green yellow; -
margin（外边距）
margin：外边距的意思。表示边框到最近盒子的距离。/*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px; /*表示盒子向左移动了70px*/ margin-right: 70px; /*表示盒子向上移动了100px*/ margin-bottom: 100px;
块级与行内相互转换
从HTML的角度来讲，标签分为：
-
文本级标签：
p、span、a、b、i、u、em。 -
容器级标签：
div、h系列、li、dt、dd。
从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
-
行内元素：除了
p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。 -
块级元素：所有的容器级标签都是块级元素，还有
p标签。
特殊的行内块级标签:input和img
- 行内转换成块级:
display: block; - 块级转换成行内:
display: inline; - 转换成行内块:
display: inline-block;
浮动
float：表示浮动的意思。
-
属性值：
-
none: 表示不浮动，默认 -
left: 表示左浮动 -
right：表示右浮动
浮动的元素脱标
脱标：就是脱离了标准文档流
什么叫标准文档流:
- 空白折叠现象
- 高矮不齐，底边对齐
- 自动换行写，一行写不了，换行写
设置浮动的元素,不管是块级还是行内,都可以设置宽高.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2 {
width: 400px;
height: 400px;
background-color: yellow;
}
span {
background-color: green;
float: left;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div class="box1">小红</div>
<div class="box2">小黄</div>
<span>小姐姐</span>
<span>小姐姐</span>
</body>
</html>
-
效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。
-
原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。
-
原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高。
浮动元素互相贴靠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 400px;
float: left;
background-color: red;
}
.box2 {
width: 150px;
height: 450px;
float: right;
background-color: yellow;
}
.box3 {
width: 300px;
height: 300px;
float: right;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
效果发现：
- 如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
- 如果没有足够的空间，那么3哥就会自己靠边，如果再没有足够的空间靠着1哥，2哥也会往边靠。
浮动元素字围效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
float: left;
}
p {
background-color: #666;
}
</style>
</head>
<body>
<div>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2121206715,2955288754&fm=26&gp=0.jpg" alt="" width="150">
</div>
<p>
123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
</p>
</body>
</html>
效果发现：
- 所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。
浮动元素紧凑效果
收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
float: left;
background-color: red;
}
</style>
</head>
<body>
<div>
alexcxvxcvvxcvxcvxcv
</div>
</body>
</html>
- 关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动。
清除浮动
- 给父盒子设置高度
这个方法使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.father {
width: 1126px;
/*子元素浮动 父盒子一般不设置高度*/
/*出现这种问题，我们要清除浮动带来影响*/
height: 400px;
}
.box1 {
width: 200px;
height: 400px;
float: left;
background-color: red;
}
.box2 {
width: 300px;
height: 200px;
float: left;
background-color: green;
}
.box3 {
width: 400px;
float: left;
height: 100px;
background-color: blue;
}
.father2 {
width: 1126px;
height: 600px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
</body>
</html>
clear:both
clear：意思就是清除的意思。
-
有三个值：
-
left：当前元素左边不允许有浮动元素 -
right：当前元素右边不允许有浮动元素 -
both：当前元素左右两边不允许有浮动元素
给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
div {
width: 400px;
}
div ul li {
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box {
width: 200px;
height: 100px;
background-color: yellow;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div>
<ul>
<li>Python</li>
<li>web</li>
<li>linux</li>
<!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响-->
<!-- 无缘无故加了div元素 结构冗余 -->
<div class="clear"></div>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
- 伪元素清除法(常用)
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.box div {
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box2 {
width: 350px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box clearfix">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
<div class="box2"></div>
</body>
</html>
overflow：hidden(常用)
给浮动子元素的父盒子，也就是不浮动元素，设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.box div {
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box {
overflow: hidden;
}
.box2 {
width: 350px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
<div class="box2"></div>
</body>
</html>
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
margin的用法
- margin塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.father {
width: 400px;
overflow: hidden;
border: 1px solid gray;
}
.box1 {
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;
float:left;
}
.box2 {
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
margin:0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 300px;
height: 200px;
background: green;
padding-top:100px;
}
.box{
width: 100px;
height: 100px;
margin: 0 auto;
/*margin-top:100px;*/
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
</body>
</html>
使用margin：0 auto;注意点：
- 使用
margin: 0 auto;水平居中盒子必须有width，要有明确width - 只有标准流下的盒子 才能使用
margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto;不能用了 margin：0 auto居中盒子。而不是居中文本，文字水平居中使用text-align: center;
另外大家一定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系
- 善于使用父亲的padding
我们要善于使用父亲的padding，而不是margin。
定位
-
定位有三种：
- 相对定位 : 不脱标,默认参考点左上角的原点
- 绝对定位 : 脱标, 父相子绝,参考点是父亲的左上角.
- 固定定位 : 脱标, 参考点是左上角.
相对定位
相对定位:相对于自己原来的位置定位
现象和使用：
- 如果对当前元素仅仅设置了相对定位，那么与标准流的盒子没什么区别。
- 设置相对定位之后，我们才可以使用四个方向的属性：
top、bottom、left、right
用途：
- 微调元素位置
- 做绝对定位的参考（父相子绝）绝对定位会说到此内容。
参考点：自己原来的位置做参考点。
绝对定位
特性：
- 脱标
- 做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
参考点(重点)：
- 单独一个绝对定位的盒子
- 当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
- 当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
- 以父辈盒子作为参考点
- 父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
- 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
- 不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意，绝对定位的盒子无视父辈的padding
作用：页面布局常见的“父相子绝”，一定要会！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 300px;
height: 300px;
background: green;
position: relative;
}
.box{
width: 100px;
height: 100px;
background: red;
position:absolute;
/*position:fixed; 固定定位 */
top: 100px;
/*left: 100px;*/
/*margin: 0 auto;*/
left: 50%;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
</body>
</html>
固定定位
固定当前的元素不会随着页面滚动而滚动
特性:
- 脱标
- 遮盖，提升层级
- 固定不变
参考点：
- 设置固定定位，用
top描述。那么是以浏览器的左上角为参考点 - 如果用
bottom描述，那么是以浏览器的左下角为参考点
作用：
- 返回顶部栏
- 固定导航栏
- 小广告
z-index
-
z-index值表示谁压着谁，数值大的压盖住数值小的。 -
只有定位了的元素，才能有
z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index。 -
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。 -
从父现象：父亲怂了，儿子再牛逼也没用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.father1{
width: 300px;
height: 300px;
background: green;
position:relative;
z-index: 9;
}
.box1{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:270px;
left: 350px;
z-index: 3000;
}
.father2{
width: 300px;
height: 300px;
background: blue;
position: relative;
z-index:10;
}
.box2{
width: 100px;
height: 100px;
background: yellowgreen;
position: absolute;
left: 350px;
z-index:20;
}
</style>
</head>
<body>
<div class="father1">
<div class="box1"></div>
</div>
<div class="father2">
<div class="box2"></div>
</div>
</body>
</html>
扫一扫
1242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
