第十一章 前端开发-css

第十一章 前端开发-css

1.1.0 css介绍

css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中。

css优势

  • 内容与表现分离
  • 网页的表现统一,容易修改
  • 丰富的样式,使页面布局更加灵活
  • 减少代码量,增加网页浏览器速度,节省网路带宽
  • 运用独立页面的css,有利于网页被搜索引擎收录

如何用?

我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中通过link标签引用该CSS文件即可

这样浏览器在解析到该link标签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。

1.1.1 css语法

css语法分为2个部分:

1.选择器

2.声明

声明由属性和值组成,多个声明之间用分号分隔。

第十一章 前端开发-css

css注释:注释是代码之母

/*这是注释*/

1.1.2 css引入方式

1.1.2.1 内嵌样式

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css"> P{
color: green;
font-size: 15px;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>

1.1.2.2 行内样式表

<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签!</p>
</body>
</html>

1.1.2.3 外部样式表

  • 链接式 link标签

    #html文件
    <!doctype html>
    <html>
    <head>
    <meta charset="utf8">
    <link rel="stylesheet" href="index.css">
    </head>
    <body>
    <p>这是一个p标签!</p>
    </body>
    </html>
    #index.css文件
    p {
    color: green;
    }
  • 导入式

了解即可。

index.css

@import url(other.css)

注意:

@import url()必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中,再进行编译显示
3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的

1.1.2.4 三种引入方式的优先级

  • 行内样式>内嵌式和外接式
  • 内嵌和外接要看谁在后面,在后面的优先级高(代码从上到下执行,在后面的会把前面的覆盖)

1.1.3 css选择器

首先来说一下,什么是选择器。在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。

1.1.3.1 基础选择器

1.id选择器:特定属性的元素(标签)

  • 标识:#id名
  • 特征:唯一的

2.类选择器

  • 标识:.类名
  • 特征:可以重复,归类,类也可以设置多个
<style>
.box{
width:200px;
height:200px;
background-color:yellow;
}
.active{
border-radius: 200px;
}
</style> <div class='box active'></div>
<div class='box'></div>
<div class='box'></div>

3.标签选择器

  • 与标签有关的
div{}
p{}
ul
ol
...

1.1.3.2 高级选择器

第十一章 前端开发-css

1.后代选择器:中间是空格

  • eg:div下所有的标签都会选中
div p{
color: red;
}

2.子代选择器:中间是>号

  • 只找到div标签下面最近的一代
dic>p{
color:red;
}

3.组合选择器:中间用,连接

		p,span{
color: green;
font-size: 15px;
padding: 0;
margin: 0;
}

4.交集选择器:选择器1选择器2{}

div.active{
color: orange;
}

5.如何重置网页样式?

html,body,p,ul,ol{
margin: 0; /*去除外边距*/
padding: 0; /*去除内边距*/
}
/*通配符选择器*/
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none; /*去除下划线*/
}
input,textarea{
border: none; /*去除默认边框*/
outline: none; /*去除外线*/
}

1.1.3.3 伪类选择器

1.对于a标签

  • 如果想设置a标签的样式,要单独作用a标签
  • 对于继承来说,a标签不起作用的

2.爱恨准则:LoVe HAte

  • L:link
  • V:visited
  • H:hover,还可以作用在其他标签上(悬浮时)
  • A:active

3.符号: 使用一个冒号

/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
/*color: red;*/
}
/*a标签被访问后设置的属性*/
a:visited{
color:yellow;
}
/*a标签悬浮时设置的属性*/
a:hover{
color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
color: deepskyblue;
}

1.1.3.4 属性选择器

1.根据属性,选择符合条件的标签

2.示例:

/*设置所有文本输入框的属性*/
input[type='text']{
background-color: red;
}
/*设置所有多选框的属性*/
input[type='checkbox']{
}
/*设置所有提交按钮的属性*/
input[type='submit']{
}

1.1.3.5 伪元素选择器

  1. 通过伪元素添加的内容为行内元素

  2. 符号:使用两个冒号

    /*设置段落第一个字的属性*/
    p::first-letter{
    color: red;
    font-size: 20px;
    font-weight: bold;
    }
    /*在段落开头添加内容*/
    p::before{
    content:'@';
    }
    /*解决浮动布局常用的一种方法*/
    /*在段落结尾添加内容*/(可用于清楚浮动带来的影响)
    p::after{
    content:'$';
    }

1.1.4 层叠性和继承性

1.继承性:在css有某些属性是可以继承下来

2.可以继承下来的属性:

  • font-xxx:字体相关的属性
  • text-xxx:文本相关的属性
  • color:颜色相关的属性
  • line-height:行高
  • letter-spacing:文字之间的距离
  • word-spacing:英文单词之间的距离

3.权重比较规则:

  • 行列(行内式):1000 > id:100 > 类class:10 > 标签1(元素)选择器
  • 继承来的属性权重为0

4.总结:

  • 前提是选中了标签,权重比较
    • 数选择器:id 类 标签,谁大它的优先级就大,
    • 如果一样大,后面的回覆盖掉前面的属性
  • 选中的标签的属性优先级远远大于继承来的属性,没有可比性
  • 同时继承来的属性:
    • 谁描述的近,谁的优先级越高
    • 描述的一样近,这个时候才回归到数选择器的数量
  • !important:他设置当前的属性的权重无限大,但大不过行内样式的优先级

1.1.5 盒模型

1.任意一个元素都可以当作盒模型

2.盒子的大小由内容宽高(width/height)+边距(padding)+边框(border)

1.属性:

  • width:内容的宽度
  • height:内容的高度
  • padding:内边距,border到内容的距离
  • border:边框
  • margin:外边距

2.盒子模型示意图:

第十一章 前端开发-css

3.padding的设置方式:

  • 1、写小属性,分别设置不同方向的padding

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;

2、写综合属性,用空格隔开

padding: 20px 30px 40px 50px ;/*上 右 下 左*/
padding: 20px 30px 40px;/*上 左右 下*/
padding: 20px 30px;/*上下 左右*/
padding: 20px;/*上下左右*/

4.一些标签默认有padding

比如ul标签,有默认的padding-left值。

那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{
padding:0;
margin:0;
}

But,这种方法效率不高。

所以我们要使用并集选择器来选中页面中应有的标签(不同背,因为有人已经给咱们写好了这些清除默认的样式表,reset.css)

https://meyerweb.com/eric/tools/css/reset/

5.border边框三要素:粗细,线性样式,颜色

border: solid

如果颜色不写,默认是黑色。如果粗细不写,不显示边框。如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。

  • border-width:粗细,设置方式同padding一样
  • border-style:线性样式
    • solid:实线
    • dotted:点线
    • dashed:虚线
    • donble:双线
  • border-color:颜色
    • transparent:透明色
  • border-radius:设置圆角或圆、半圆 ( border-radius:5px;)上下左右
  • border-top:上
  • border-bottom:下
  • border-left:左
  • border-right:右

使用border来制作小三角

/*小三角 箭头指向下方*/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

6.margin

margin:外边距的意思。表示边框到最近盒子的距离。(兄弟之间)

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
margin-bottom: 100px;

外边距合并:

  • 有称塌陷,以设置的最大margin距离为基准
  • margin在水平方向上不会出现外边距合并现象
  • margin子垂直方式上回出现外边距合并现象

1.1.6 常用格式化排版

1.1.6.1 字体属性

  1. font-family:设置字体

    body{
    font-family:'Microsoft Yahei','宋体','黑体';
    }

    如果设置成inherit,则表示继承父元素的字体。

  2. font-size:设置字体大小

    • 字体大小单位
      • px:绝对单位,也叫固定单位,不管在多少尺寸的屏幕下,始终是当前的尺寸
      • em:相对单位,相对于当前盒子的字体大小
      • rem:相对单位,相对于html的字体大小
  3. font-size:设置字体样式

    • normal:正常
    • italic:斜体
    • 如果设置成inherit,则表示继承父元素的字体。
  4. font-weight:设置字体粗细 100-900

取值范围:

描述
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值

5.font-color:

设置内容的字体颜色。

支持三种颜色值:

  • 十六进制值 如: #FF0000
  • 一个RGB值 如: RGB(255,0,0) 红黄蓝三要素
  • 颜色的名称 如: red
p {
color: red;
}

1.1.6.2 文本属性

  1. text-align:设置文本水平排列方式 只是在行内元素生效

    • left:水平靠左
    • right:水平靠右
    • center:居中
    • justify:两端对齐,只限于英文
  2. vartical-align:设置文本垂直排列方式 display设置table-cell

    • top:垂直向上
    • middle:垂直居中
    • bottom:垂直向下
  3. line-height 行高 设置和height一样高,效果为水平垂直居中

  4. text-decoration

    文字装饰。

    描述
    none 默认。定义标准的文本。
    underline 定义文本下的一条线。
    overline 定义文本上的一条线。
    line-through 定义穿过文本下的一条线。
    inherit 继承父元素的text-decoration属性的值。
  5. text-indent:设置文本缩进

    • 常用单位:em
    • 根据字体的大小进行取值
    • 首行缩进相当于设置字体大小的两倍
  6. letter-spacing:设置文字间的距离

  7. word-spacing:设置英文单词之间的距离

    #box p:hover{
    /*文本修饰*/
    text-decoration: underline;
    }
    #box2{
    /*字体大小*/
    font-size: 20px;
    /*设置文本缩进*/
    text-indent: 2em;
    letter-spacing: 2px;
    word-spacing: 10px;
    }

1.1.7 display属性

display:显示方式

  • none:盒子隐藏
  • block:转化为块
  • inline:转化为行内
  • inline-block:转化为行内块
  • table-cell:转化为表格

1.1.8 背景属性

常用背景相关属性:

属性 描述
background-color 规定要使用的背景颜色。
background-image 规定要使用的背景图像。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-position 规定背景图像的位置。
inherit 规定应该从父元素继承background属性的设置。

background-repeat取值范围:

描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承background-repeat属性的设置。

background-attachment取值范围:

描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承background-attachment属性的设置。

background-position取值范围:

描述
top left top center top right center left center center center right bottom left bottom center bottom right 如果只设置了一个关键词,那么第二个值就是"center"。 默认值:0% 0%。
x% y% 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果只设置了一个值,另一个值就是50%。
xpos ypos 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果只设置了一个值,另一个值就是50%。 可以混合使用%position值。

示例:

body {
background-color: red;
backgraound-image: url(xx.png);
background-size: 300px 300px;
background-repeat: no-repeat; /*不平铺*/
background-position: center
background-position-x:100px;
background-position-y:100px;
background-position: 100px 100px; (x轴,y轴) 0 0 是左上角 ,可以在网页上进行调试,一般0 -100 用的多 裁剪照片(-100是从-100的位置开始裁剪设置的图片宽高) }

简写:

body {
background: red url(xx.png) no-repeat fixed center/300px 300px;
}

雪碧图技术(精灵图技术)

CSS雪碧 即[CSS Sprite](https://baike.baidu.com/item/CSS Sprite),也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理:

只有一张大的合并图, 每个小图标节点如何显示单独的小图标呢?

其实就是 截取 大图一部分显示,而这部分就是一个小图标。

使用雪碧图的好处:

1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;

2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便

不足:

1)CSS雪碧的最大问题是内存使用

2)拼图维护比较麻烦

3)使CSS的编写变得困难

4)CSS 雪碧调用的图片不能被打印

background-attach

设置fixed之后,该属性固定背景图片不随浏览器的滚动而滚动

案例:

<!DOCTYPE html>
<html>
<head>
<title>淘宝列表导航案例</title>
<style type="text/css"> .taobao_list{
border-top:1px solid #eee;
float: left;
}
.taobao_list ul{
width: 292px;
overflow: hidden;
padding:0;
margin: 0;
}
.taobao_list ul li{
list-style: none;
width: 71px;
height: 75px;
border: 1px solid #eee;
float: left;
border-top-color: transparent;
border-left-color: transparent;
}
.taobao_list ul li a {
text-decoration: none;
text-align: center;
display: block;
font-size: 12px;
color: #888;
} span{
display: block;
width: 24px;
height: 24px;
background:url(image/site.png) no-repeat 0 0 ;
background-size: 24px 595px;
margin-left: 22px;
margin-top: 10px;
}
.span1{
background-position: 0 0;
}
.span2{
background-position: 0 -44px;
}
.span3{
background-position: 0 -88px;
}
.span4{
background-position: 0 -132px;
}
.span5{
background-position: 0 -176px;
}
</style>
</head>
<body>
<div class="taobao_list">
<ul>
<li>
<a href="#">
<span class="span1"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<span class="span2"></span>
<p>旅行</p>
</a>
</li>
<li>
<a href="#">
<span class="span3"></span>
<p>车险</p>
</a>
</li>
<li>
<a href="#">
<span class="span4"></span>
<p>游戏</p>
</a>
</li>
<li>
<a href="#">
<span class="span5"></span>
<p>彩票</p>
</a>
</li>
</ul>
</div> </body>
</html>

第十一章 前端开发-css

1.1.8 浮动

1.1.8.1 什么是标准文档流

宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”。而设计软件 ,想往哪里画东西,就去哪里画

标准文档流下 有哪些微观现象?

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

2.高矮不齐,底边对齐

文字还有图片大小不一,都会让我们页面的元素出现高矮不齐的现象,但是在浏览器查看我们的页面总会发现底边对齐

3.自动换行,一行写不满,换行写

如果在一行内写文字,文字过多,那么浏览器会自动换行去显示我们的文字。

1.1.8.2 什么是浮动?

  1. 浮动:在css样式表中,用float来表示

  2. float属性:

    • none:表示不浮动,默认不浮动
    • left:左浮动
    • right:右浮动
    • inherit:继承父元素的浮动属性
  3. 浮动的作用:实现元素并排

  4. 浮动对盒子产生的现象:

    • 文字环绕:设置浮动属性的初衷
    • “脱标”现象:脱离标准文档流,不在页面上占位置
    • “贴边”现象:给盒子设置了浮动,会找浮动盒子的边
      • 如果找不到浮动盒子的边,会贴到父元素的边
      • 如果找到了浮动盒子的边,就会贴到浮动盒子的边
    • 收缩效果
  5. 浮动带来的问题:撑不起父盒子的高度

  6. 清楚浮动的方式:

    1. 给父盒子设置高度
    2. clear:both
    3. 伪元素清除法
    4. overflow:hidden
    • 给父元素添加固定高度

      • 存在的问题:不灵活,后期不易维护
      • 应用:万年不变导航栏
    • 内墙法:给最后一个浮动元素的后面添加一个空的块级标签(为的是不影响布局,所以为空),并且设置该标签的属性为clear:both;(当前元素左右两边不允许有浮动元素)

      • 存在的问题:冗余

      • clear:both

        clear:意思就是清除的意思。

        有三个值:

        left:当前元素左边不允许有浮动元素

        right:当前元素右边不允许有浮动元素

        both:当前元素左右两边不允许有浮动元素

      <style>
      *{
      padding: 0;
      margin: 0;
      }
      .father{
      width: 800px;
      margin: 100px auto;
      border: 1px solid #000;
      }
      .child1{
      /*width: 200px;*/
      height: 400px;
      background-color: red;
      float: left;
      }
      .child2{
      /*width: 300px;*/
      height: 200px;
      background-color: green;
      float: right;
      }
      .clear{
      clear: both;
      }
      </style> <!--内墙法:给最后一个浮动元素的后面添加一个空的块级标签,并且设置该标签的属性为clear:both;-->
      <div class="father">
      <div class="child1">mjj</div>
      <div class="child2">wusir</div>
      <div class="clear"></div>
      </div>
    • 伪元素清除法(推荐使用)

      • 在内墙法的基础上做的优化,使用了伪元素选择器中的::after

      • 给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix的类,然后设置

      • <style>
        *{
        padding: 0;
        margin: 0;
        }
        .father{
        width: 800px;
        margin: 100px auto;
        border: 1px solid #000;
        }
        .child1{
        /*width: 200px;*/
        height: 400px;
        background-color: red;
        float: left;
        }
        .child2{
        /*width: 300px;*/
        height: 200px;
        background-color: green;
        float: right;
        }
        .clearfix::after{ /*新浪推荐写法*/
        content:'';
        display: block; 加入的这个元素是行内元素,转换为块级元素*/
        clear: both;
        /*visibility: hidden; 内容隐藏*/
        /*height: 0;*/
        }
        </style> <div class="father clearfix">
        <div class="child1">mjj</div>
        <div class="child2">wusir</div>
        </div>
      • .clearfix:after{
        /*必须要写这三句话*/
        content: '.';
        clear: both;
        display: block;
        }
      • overflow:hidden(常用)

        • 因为overflow:hidden;会形成BFC区域,形成BFC区域后,内部有它的布局规则——计算BFC的高度时,浮动元素也参与计算

          • 使用过程中,注意overflow:hidden;本身的含义:超出部分内容隐藏

          • overflow的值及其含义:

            • visible:默认可见
            • hidden:超出部分内容隐藏
            • scroll:内容滚动
            • inherit:继承父类的overflow属性

            父元素里面设置overflow:hidden可以让父元素也参与计算,可以清除浮动带来的破坏性

          <style>
          *{
          padding: 0;
          margin: 0;
          }
          .father{
          width: 800px;
          margin: 100px auto;
          border: 1px solid #000;
          /*一旦设置一个Box盒子 除了overflow:visible;它会形成一个BFC,BFC它有布局规则: 它会让内部浮动元素计算高度*/
          overflow: hidden;
          }
          .child1{
          /*width: 200px;*/
          height: 400px;
          background-color: red;
          float: left;
          }
          .child2{
          /*width: 300px;*/
          height: 200px;
          background-color: green;
          /*float: right;*/
          /*overflow: hidden;*/
          float: left;
          }
          </style> <div class="father ">
          <div class="child1">mjj</div>
          <div class="child2">wusir</div>
          </div>

        11.2.6.2 BFC

        参考 https://blog.csdn.net/riddle1981/article/details/52126522

        1. BFC的定义
          • BFC(Block formatting context),直译为”块级格式化上下文”
          • 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干
        2. BFC的布局规则
          • 内部的Box会在垂直方向,一个接一个地放置,即块级标签,独占一行
          • Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠,即外边距合并(塌陷)
          • 每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此,即贴边现象
          • BFC的区域不会与float元素重叠
          • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此
          • 计算BFC的高度时,浮动元素也参与计算
        3. 哪些元素会生成BFC?
          • 根元素
          • float属性不为none,即设置了浮动
          • position的值为 absolute(绝对定位)或 fixed(固定定位)
          • display的值为 inline-block,即设置为行内块
          • overflow不为visible,其他的均可,常用的是:overflow:hidden;

1.1.8.3 盒子居中:margin:0 auto;

<!DOCTYPE html>
<html>
<head>
<title>
盒子居中
</title>
<style type="text/css">
.site-header{
background-color: orange;
width: 100%;
height: 100px;
}
.in{
background-color: red;
width: 800px;
height: 100px;
margin: 0 auto;
/*水平居中盒子*/
text-align: center;
/*水平居中文字*/
}
</style>
</head>
<body>
<div class="site-header">
<div class="in">
水平居中文字
</div>
</div>
</body>
</html>

使用margin:0 auto;注意点:

1.使用margin: 0 auto;水平居中盒子必须有width,要有明确width,文字水平居中使用text-align: center;

2.只有标准流下的盒子 才能使用margin:0 auto;

当一个盒子浮动了,固定定位,绝对定位(后面会讲),margin:0 auto; 不能用了

3.margin:0 auto;居中盒子。而不是居中文本,文字水平居中使用text-align: center;

另外大家一定要知道margin属性是描述兄弟盒子的关系,而padding描述的是父子盒子的关系

1.1.9 定位

1.1.9.0 几种定位方式

  1. 静态定位:position:static; 默认值
  2. 相对定位:position:relative;
    • 特征:
      • 与标准流下的盒子没有任何区别
      • 留坑,会影响页面布局
    • 设置相对定位之后,我们才可以使用四个方向的属性: top、bottom、left、right
    • 作用:做‘子绝父相“布局方案的参考
    • 参考点:以原来的盒子的位置坐参考点进行移动

3.绝对定位:position:absolute;

  • 特征:

    • 脱标,不在页面上占位置
    • 压盖现象
    • 子绝父相:以最近的父元素的左上角为参考点进行定位
  • 参考点

    • 如果单独设置一个盒子为绝对定位

      • 用top来描述,它的参考点是以body的0,0 为参考点
      • bottom,参考点是以游览器的左下角为参考点
    • 以父辈盒子作为参考点

    • 1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。

      2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点

      3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点

      注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。

      还要注意,绝对定位的盒子无视父辈的padding

      应用:

    • 第十一章 前端开发-css

绝对定位的盒子居中

当做公式记下来吧!

*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px;
/*设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中*/
}

4.固定定位:position:fixed;

固定当前的元素不会随着页面滚动而滚动

  • 特征:

    • 脱标
    • 固定不变
    • 提高层级,遮盖现象
  • 参考点:

    设置固定定位,用top描述。那么是以浏览器的左上角为参考点

    如果用bottom描述,那么是以浏览器的左下角为参考点

  • 作用: 1.返回顶部栏 2.固定导航栏 3.小广告

1.1.9.1 父相子绝:(重点)

  1. 子绝父相:以最近的父元素的左上角为参考点进行定位

  2. 示例:

    <style>
    *{
    padding: 0;
    margin: 0;
    }
    body{
    color: #fff;
    }
    ul{
    list-style: none;
    }
    #box{
    width: 1226px;
    height: 100px;
    margin: 0 auto;
    background-color: #000;
    }
    #box ul{
    /*overflow: hidden;*/
    padding: 12px 0 0 30px;
    /*width: 500px;*/
    height: 88px;
    /*background-color: red;*/
    }
    #box ul li{
    float: left;
    width: 60px;
    height: 58px;
    /*padding-top: 30px;*/
    }
    #box ul li.active{
    width: 100px;
    height: 88px;
    background-color: green;
    position: relative;
    }
    #box ul li.active .box{
    position: absolute;
    width: 234px;
    height: 600px;
    background-color: rgba(0,0,0,.5);
    top: 88px;
    left: -30px;
    }
    .clearfix:after{
    content: '';
    clear: both;
    display: block;
    }
    </style> <div id="box">
    <ul class="clearfix">
    <li class="active">
    <div class="box"></div>
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </ul>
    </div>

1.1.9.2 z-index

使用条件:只适用与定位的元素

这个东西非常简单,它有四大特性,每个特性你记住了,页面布局就不会出现找不到盒子的情况。

  • z-index 值表示谁压着谁,数值大的压盖住数值小的,
  • 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
  • z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
  • 从父现象:父亲怂了,儿子再牛逼也没用
  • 通常布局我们使用父相子绝,比较的是父元素的z-index值,哪个父元素的z-index值高,表示子元素的层级越高

1.2.0 box-shadow 阴影

1.box-shadow:水平距离 垂直距离 模糊程度 颜色(默认外设outset)

2.默认是外阴影,设置内阴影再在后面加inset

3.水平距离和垂直距离一般设置0

4.补充:transition:all .2s linear;表示设置动画(平滑移动)

<!DOCTYPE html>
<html>
<head>
<title>边框阴影</title>
<style type="text/css">
body{
padding:0;
margin:0;
}
.shadow{
position: relative;
width: 200px;
height: 200px;
margin:50px auto;
background-color: purple;
/*box-shadow: 20px 20px 50px red inset;*/
}
.shadow:hover{
/*position: absolute;*/
top:-4px;
box-shadow:0 0px 15px #e0e0e0;
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>

1.2.1 单列和多列布局

<!DOCTYPE html>
<html>
<head>
<title>单列布局</title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0;
padding:0;
} .header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: black;
}
.container{
width: 1200px;
height: 100%;
margin: 0 auto;
background-color: green;
}
.header .container{
height: 60px;
background-color: orange;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
background-color: red;
}
.footer{
width: 100%;
height: 60px;
}
.footer .container{
/*height: 200px;*/
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
header
</div>
</div>
<div class="wrap">
<div class="container">
11
</div>
</div>
<div class="footer">
<div class="container"> </div>
</div> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>多列布局</title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0;
padding:0;
} .header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: black;
}
.container{
width: 1200px;
height: 100%;
margin: 0 auto;
background-color: green;
overflow: hidden;
}
.header .container{
height: 60px;
background-color: orange;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
background-color: red;
}
.wrap .container .left{
float: left;
width: 200px;
height: 100%;
background-color: purple;
}
.wrap .container .right{
float: right;
width: 200px;
height: 100%;
background-color: #333;
}
.wrap .container .center{ height: 100%;
background-color: yellowgreen; }
.footer{
width: 100%;
height: 60px;
}
.footer .container{
/*height: 200px;*/
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
header
</div>
</div>
<div class="wrap">
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
</div>
<div class="footer">
<div class="container"> </div>
</div> </body>
</html>

1.2.2 DIV+CSS规范命名大全集合

http://www.divcss5.com/jiqiao/j4.shtml

1.2.3 行内元素水平垂直居中

text-align:center 水平居中

vertical-align:middle 垂直居中

1.2.4 块级元素水平垂直居中

1.position+margin:

<!DOCTYPE html>
<html>
<head>
<title>
块级元素水平居中1
</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative; }
.child{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="child"> </div>
</div> </body>
</html>

2.display: table-cell; 将块级元素转为单元格形式,同事设置水平,垂直居中

<!DOCTYPE html>
<html>
<head>
<title>
块级元素水平居中2
</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 100px;
}
.child{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
aa
</div>
</div> </body>
</html>

3.纯定位计算 positon

<!DOCTYPE html>
<html>
<head>
<title>
块级元素水平居中3
</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative;
vertical-align: middle;
text-align: center;
line-height: 100px;
}
.child{
width: 100px;
height: 100px;
position: absolute;
background-color: green;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
aa
</div>
</div> </body>
</html>

补充:text-align起作用的元素

text-align不是只对文字和图片起作用,比较准确的说法是:text-align对文字,inline元素(行内元素)以及inline-block元素(行内块元素)起作用,但对块元素不起作用。

上一篇:UVa 11552 Fewest Flops (DP)


下一篇:dp暑假专题 训练记录