简介

层叠样式（cascading style sheets）的简称
标记语言
美化与布局

写在html的<head>中，加入<style> </style>

语法规范

h1 {color:red; font-size:25px}

h1 选择器

{color:red; font-size:25px;}

color:red; 键值对 ===>>> color 属性: red 值;

代码风格

​ 展开式风格

p  {
            color:  red;
            font-size:  12px;  
        }

小写书写代码

注意空格

基础选择器

标签选择器

HTMl标签名作为选择器

标签名 {
   属性1: 属性值；
   属性2: 属性值;
   ····
}

能快速选择相同标签的样式设置

具体有某个独

类选择器

差异化选择不同的标签，单独选一个或者某几个标签

.red{
   属性1: 属性值；
   属性2: 属性值;
   ····
}
-------------------------------------
<ul>
        <li class="red">111</li>
        <li class="red">111</li>
</ul>

样式点定义，结构类（class）调用，一个或多个，开发最常用

尽量用英文来命名，有意义，类命名规范手册

一个标签 多类名

使用 <div class=”red font20”>亚瑟</div>

在标签class属性中写多个类名

多个类名中间必须用空格分开

id选择器

html元素以id属性设置id选择器，CSS中id选择器以“#”来定义

 #nav {
            color: red;
             属性2：属性值2
        }
// 将id为nav元素中的内容设置为红色
----------------------------------------
<div id="pink">泰勒·斯威夫特</div>

样式用#定义，结构id调用，只能调用一次，别人切勿使用

通配符选择器

使用“*”定义，它表示选取页面中所有的元素（标签）。

<style>
        * {
            color: red;
        }
    </style>
-------------------------------
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>    
        <li>还是我的</li>
    </ul>
</body>

将div span li 内所有内容都应用这种属性

不需要调用，自动给所有元素使用样式

选择器属性

CSS字体属性-粗细/大小

字体

p { font-family: "微软雅黑",sans-serif}
div {font-family: Arial, "Microsoft YaHei", "微软雅黑",serif}

多个字体是为了兼容

  • 各种字体必须使用英文状态下的逗号隔开

  • 一般情况下，如果有空格隔开的多个单词组成的字体要加引号

  • 尽量使用系统默认的字体，保证在任何用户的浏览器中能正常显示

各种字体必须使用英文状态下的逗号隔开

常见字体

body { font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';}

字体大小

font-size：20px；
尽量明确字体大小
可以给整个页面body文字定义大小
标题标签比较特殊，需要特殊指定大小

字体粗细

font-weight：400=normal/700=bold；
让标题不加粗
实际开发中用数字表示粗细

字体样式

p {font-weight: normal;}
italic 斜体
normal 默认值
平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不斜体字体

字体符合属性

p {
        /* font：font-style font-weight font-size/line-weight font-family； */
        font: italic 700 16px/10 "microsoft yahei"
        }

复合属性有顺序，不能颠倒，各个属性以空格隔开
不需要的属性为默认值，必须保留font-size和font-family属性，否则不起作用

CSS的文本属性-颜色/对齐

文本颜色

div{ color：red；
}

  • 预定义颜色：red green blue pink

  • 十六进制 #ff0000

  • RGB代码 rgb（255，0，0）

  • rgba(255,255,255,0.5) 带有透明度

  • hsla(0-360, 50%,50%,1) 对应: 色相, 饱和度(鲜艳度), 亮度,不透明度. 改变颜色亮度拥有这个值合适

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。div本质是一个盒子

div{text-align：center；}

  • left 默认值
  • center
  • right

装饰文本

text-decoration属性规定添加文本的修饰。可以给文本添加下划线、删除线、上划线

  • none 默认，没有装饰线（最常用） 取消超链接a的下划线
  • underline 下划线
  • overline 上划线
  • line-through 删除线

文本缩进

text-indent属性用来指定文本的第一行缩进，通常将段落的首行缩进
text-indent：20px；

text-indent：2em；

em是相对当前文字像素两倍大小的缩进距离

行间距

line-height属性用于设置行间的距离（行高）。可以控制文字行与文字行之间的距离。

​ 行高=上间距+文本高度+下间距

​ 上下两行字基准线之间的距离

line-height: 26px; ==>>> 26=5（上间距）+16（文本默认高度）+5（下间距）

通常用来让文字垂直居中显示

CSS的引入方式

内部样式表（嵌入式）

写在html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中

<style>
  div{ color: red;
  font-size: 12px;
}
</style>

​ 一般放在<head>标签中

行内样式表（行内式）

<div style="color: red; font-size: 12px">青春不常在</div>

小修改,适合简单样式

外部样式表（链接式）

单独放到css文件中

两步骤

  1. 建立.css文件
  2. 在HTMl页面中，使用<link>标签引入这个文件
    1. <link rel="stylesheet" href="css文件路径">
    2. 放在html的<head>标签当中

开发中最常用，可以控制多个页面

Emmet语法

使用缩写，来提高html/css的编写速度

快速生成HTML结构语法

  • 生成标签：直接输入标签名 按tab键即可
  • 如果想生成多个相同的标签 加上*就可以 比如div*3 就可以有三个div组
  • 如果有父子级关系的标签，可以用> 比如ul>li就可以了
  • 如果有兄弟关系的标签，用+就可以 比如div+p

如果生成带有类名或者id的名字，再按下Tab键

.red
<div class="red"></div>
#red
<div id="red"></div>
p.red
<p class="red"></p>
ul>li.red

<ul>
       <li class="red"></li>
   </ul>

生成的div类名是有顺序的，可以用自增符号$

.demo$*5

<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

如果想要生成的标签内部内容可以用{}表示

div{我是大人}
<div>我是大人</div>
div{我是谁}*5

<div>我是谁</div>
   <div>我是谁</div>
   <div>我是谁</div>
   <div>我是谁</div>
   <div>我是谁</div>

div{我是$}*5 

<div>我是1</div>
   <div>我是2</div>
   <div>我是3</div>
   <div>我是4</div>
   <div>我是5</div>

快速生成CSS样式语法

tac TAB text-align: center
titext-indent: ;
w width: ;
h height: ;
w100 width: 100px;
h200 height: 200px;
ti2em text-indent: 2em;
lh26 line-height: 26px;
tdn text-decoration: none;

格式化文档

vscode shift-alt-F

CSS的复合选择器

由两个或者多个基础选择器，通过不同的方式组合而成

后代选择器

元素1 元素2 { 样式说明 }

  • 元素1和元素2中间用空格隔开
  • 元素1是父级 元素2是子级
  • 元素2可以是儿子 也可以是孙子 只要是元素1的后代就可以
  • 可以是任意基础选择器的组合
<ol>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
</ol>
ol li{ color：pink}
<ol>
     <li><a href="#">我是ol的孩子</a></li>
</ol>
ol li a{
            color: red;
        }

我是ol的孩子(红色)

并集选择器

  • 可以选择多组标签,同时为他们定义相同的样式. 通常用于集体声明
  • 元素1, 元素2{样式属性} ——————- div,p{ color: pink;}
  • 标签用英文逗号分割, 最后选择器不需要加逗号
  • 可以任何形式的选择器并列, 书写时竖着书写
div,
p,
.pig li { color: red;}

子代选择器

元素1>元素2{样式声明}

  • 选择元素1里面的所有直接后代（子元素）元素2
  • 不包含第三級的元素

伪类选择器

  • 向某些选择器添加特殊的效果, 比如添加特殊效果, 或者选择第一个, 第n个元素
  • 最大特点是用冒号( : ) 表示, 比如:hover :firt-child :focus

链接伪类—不限于a标签, 可以是任何标签

a:link
选择所有未访问的链接
a:visited
选择已被访问的链接
a:hover
选择鼠标指针位于其上的链接
a:active
选择活动链接(鼠标按下未弹起的链接)
鼠标点着链接不松开,设置其表现的颜色等

为了确保生效,请按照LVHA的顺序书写:link visited hover active
因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式

实际开发中只用指定链接样式和链接经过变色 这两个属性就可以

input:focus{ color=red; border:1px solid black }在输入框获取焦点后, 设置样式

a链接 也可以触发focus状态, 没有blur

    <style>
        a:focus {
            border:1px solid red
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">你们好</a>
</body>
a { color: #333;}
a: hover {
    color:#369;
	text-decoration: underline;
}

:focus伪类选择器

用于选取获得焦点的表单元素
焦点就是光标,一般情况下<input>类表单元素才能获取,因此这个选择器也主要针对表单元素来说.

input:focus {
backgrou-color: yellow;
}

表单伪类

结构伪类

元素显示模式

标签很多,不同地方会用到不同标签,了解他们的特点可以更好的布局我们的网页

元素或标签以什么方式进行显示

HTML的元素分类

块元素

<h1-h6>,<p>,<div> <ul> <ol><li>, 其中<div>标签是最典型的块元素

特点

  1. 比较霸道,独占一行
  2. 高度,宽度,外边距以及内边距都可以控制
  3. 宽度默认容器(父级宽度)的100%
  4. 是一个容器及盒子,里面可放行内或者块级元素

注意

文字类元素不能使用块级元素

<p> <h1-h6>等文字类的标签里面不能放<div>这样的块级元素

内行元素

<a><strong><b><em><i><del><s><ins><u><span>等,其中<span>标签是最典型的行内元素.有地方也将行内元素成为内联元素.

注意

  1. 相邻行内元素在一行上,一行可以显示多个.
  2. 高,宽直接设置无效
  3. 默认宽度就是本身内容的宽度
  4. 行内元素只能容纳文本或其他行内元素

注意

  • 链接里面不能再放链接
  • 特殊情况<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全

行内块元素

在行内元素中几个特殊的标签中<img><input><td> ,他们同时具备块元素和行内元素的特点.

特点

  1. 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙.一行可以显示多个(行内元素特点)
  2. 默认宽度就是它本身内容的宽度(行内元素特点)
  3. 高度,行高,外边距以及内边距都可以控制(块级元素特点)

元素显示模式的转换

特殊情况下,我们需要元素模式的转换,简单理解:一种模式的元素需要另一种模式的特性.
! 例如想要增加链接<a>的触发范围

转换为块元素display:block

转换为行内元素 display:inline

转换为行内块元素 display:inline-block

应用

单行文字在盒子里面垂直居中的代码

让文字的行高等于盒子的高度

  • height: 40px;
  • line-height: 40px;

CSS的背景

背景颜色

background-color:颜色;
默认是transparent 透明颜色

半透明写法

background: rgba (0,0,0,0.3)

hsla(0,100%,50%,1)

  • 色相 饱和度 亮度 透明度
  • 最后一个参数alpha透明度,取值在0-1之间
  • 可以把0.3 写成.3

背景图片

background-image 属性描述了元素的背景图像.实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)
background-image: none| url(图片地址) 图片默认平铺

背景平铺

background-repeat: repeat| no-repeat| repeat-x| repeat-y

背景图片的位置

background-position: x y; x, y可以使用方位名词或者精确单位

位置 写法
上中 top center
横竖剧中 center center
一个值,第二个值默认居中 一个值,第二个值默认居中
top 上中
left 左中
right 右中

坐标单位与方位词可以混合使用

背景图像固定(背景附着)

background-attachment属性设置背景图像是否固定fixed总是显示 或者随着原页面的其余部分滚动scroll,褪去

后期可以制作视差滚动效果

backbround-attachmen: scroll | fixed

CSS的三大特性

层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠行主要解决样式冲突的问题.

层叠性原则

  • 样式冲突,遵循的原则是就近原则,那个样式结构近,就执行哪个样式
  • 样式不冲突,就不会层叠

继承性

  • 父标签的某些样式属性会传给子标签, 产概念为字体相关的样式
  • 例如文本颜色和字号, text- font- line-这些元素开头的可以继承 以及color属性
  • 恰当使用继承可以简化代码,降低CSS样式的复杂性

行高的继承

body {font: 12px/1.5 Microsoft Yahei;}

行高可以跟单位 也可以不跟单位

如果子元素没有设置行高,则会继承父元素行高的1.5倍

此时子元素的行高是: 当前子元素的文字大小*1.5

用于动态调整行高:body行高1.5 这样的写法最大的优势就是里面的子元素可以根据自己的文字大小自动调整行高

优先级

选择器相同,则会执行层叠性

选择器不同,则根据选择器权重执行

越详细,权重越大

  • 继承或者* 0000
  • 元素选择器 0001
  • 类选择器,伪类选择器 0010
  • ID选择器 0100
  • 行内样式 style=”” 1000
  • !important 重要的 ∞ 无穷大

继承性的权重是0
如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都为0

body指定的样式不能赋予a链接 是因为浏览器专门指定a的样式 要修改 我们要特别的单独指定a的样式

复合选择器由权重累加现象

ul li {} ul+ li 0001+0001=0002
li {} 0001
.nav li {} 0010+0001=0011

权重会叠加,但是不会进位

权重相同,则体现层叠性

背景复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片的位置

属性顺序无要求

background: transparent url(.jpg) repeat-y fixed top

盒子

盒子模型

网页布局要学习三大核心

  • 盒子模型: 帮助我们布局页面
  • 浮动
  • 定位

看透网页布局的本质

布局过程:

  • ​ 先准备好相关的网页元素,网页元素基本就是盒子Box
  • ​ 利用CSS设置好盒子样式,然后摆放到相应位置
  • ​ 往盒子里面装内容

网页布局的核心:利用CSS摆盒子

本质

  • 就是把html页面中的布局元素看作是一个矩形盒子,也就是装内容的容器.
  • CSS盒子模型封装周围的HTML元素,它包括:边框border\外边距margin\内边距padding\和实际内容content.

盒子模型四样式

  1. 边框border

边框简写 border: 1px solid red 无顺序

边框分开写 boeder-top: 1px solid red; 设置上边框,其余同理

作业:写一个100*100的盒子,设置上边框位红色,其余边框位蓝色 先写共性 再写个性

border: 10px solid blue;
border-top: 10px solid red;

**表格的细线边框: **border-collapse: collapse; 表示相邻边框合并在一起 collapse合并

!!! 边框会额外增加盒子的实际大小,因此解决方案

  • 测量盒子大小时,不量边框
  • 如果测量的时候包含了边框,则需要width/hright减去边框宽度
  • 使用c3盒子模型
  1. 内边距padding

盒子边框与内容之间的距离
上下左右padding-left/right/top/bottom

padding的简写

padding : 5px
四周都是5px
padding: 5px 10px;
上下为5px
左右为10px
padding:5px 10px 20px
上5
左右10
下20
padding: 5px 10px 15px 20px
上/右/下/左

!!!注意
padding影响盒子实际大小
不给单个盒子宽度, 容纳多种字体个数的情况, 给盒子固定的padding值

padding不会撑开盒子
如果没给盒子指定宽度width或高度height属性
此时padding不会撑开盒子的大小

  1. 外边距margin

控制盒子与盒子之间的距离
属性 margin-left/right/top/bottom

简写 margin: 5px 10px 15px 20px 上/右/下/左

典型应用场景

  1. 外边距可以放块级盒子水平居中,但是必须满足两个条件

    盒子必须指定宽度
    盒子左右的外边距都设置为auto

  2. 盒子居中显示

    margin: 0 auto;
    margin: auto
    margin-left: auto; margin-right: auto;
    注意:以上方式是让块级元素水平居中,行内元素或者行内块元素水品居中给其父元素添加text-align: center;即可

Q: 使用margin定义块元素的垂直外边距时,可能会出现外边距合并

A: 当上下两个块元素设置了上面的块元素的下边距时20px,下面的块元素的上边距为10px, 则下面块元素的上边距不显示或者说无效

A: 解决方案,尽量只给一个盒子添加margin值

Q: 嵌套块元素边距塌陷

​ A: 可以为父元素定义上边距
​ 为父元素定义内边距
​ 为父元素添加overflow: hidden
​ 当盒子由浮动,固定,绝对定位就不会有塌陷的问题

清除边距

网页元素很多默认的内外编剧,并且浏览器不默认的也不一样.因此我们在布局前,首先要清除网页元素的内外边距

* {margin:0; padding: 0}
注意:
行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距.但是转换为块级和行内块元素就可以了.

圆角边框(CSS3)

border-radius: length;
参数值可以为数值也可以为百分比

  1. 圆形

    • 先设置正方形的盒子

    • 把radius的值设置为正方形边长的一半

    • 50% 就是宽度就是高度的一半

  2. 圆角矩形 50% 就是宽度就是高度的一半
    四个值
    左上角 右上角 右下角 左下角
    两个值
    左上+右下 右上和左下

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset

  • h-shadoow 必须,水平阴影 允许负值 px
  • v-shadows 必须.垂直阴影的位置,允许负值 px
  • blur 可选.模糊距离 px
  • spread 可选.阴影的尺寸 px
  • color 可选,阴影的颜色 参照CSS颜色值
  • inset 可选,将外部阴影(outset)改为内部阴影

注意

​ 默认的是外阴影outset,但是不可以写这个单词,否则倒是阴影无效
​ 阴影不占空间,不会影响其他盒子排列

鼠标经过出现影子
div:hover {box-shadow: 10px 10px 10px -4px rgba (0,0,0, .3)}

文字阴影

text-shadow: h-shadow v-shadow blur color
text-shadow: 5px 5px 6px rgba (0,0,0, .3)

CSS浮动

浮动

铺垫

传统布局的三种网页布局方式

本质: css摆放到相应位置

  1. 普通流/标准流–标签按照规好默认方式排列

    块级元素独占一行,从上到下依次排序

    • 常用元素: div hr h1-h6 ul ol dl form tabel

    行内元素会按照顺序,从左到右排序,碰到父级元素边缘则自动换行:

    • 常用元素: span a i em

  2. 浮动 float

  3. 定位 position

很多的布局效果,标准流没有办法完成,此时就可以利用浮动来布局.因为浮动可以改变元素标签的默认排列方式.

浮动的典型应用:可以让多个块级元素一行内排列显示

网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动

float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘及包含块或另一个浮动框的边缘

浮动的特性

浮动元素会脱离标准流(脱标)

  1. 脱离标准普通流的控制(浮)移动到指定的位置(动),俗称脱标
  2. 浮动的盒子不再保留原先的位置
  3. 上面浮动的盒子会压住上来的盒子

浮动的元素会一行内显示并且元素顶端对齐

  1. 窗口变小会把右边的盒子挤到下一行

浮动的元素会具有行内块元素的特性

  1. 任何元素都有浮动,都会有行内块元素特性, 可以自由设置宽高 背景颜色等
  2. 如果行内元素有了浮动,则不需要转换为块级或行内块元素 就可以直接给高度和宽度

注意

  1. 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,他的大小根据内容来决定
  2. 浮动的盒子中间没有缝隙,是紧挨着的
  3. 行内元素同理

经验

浮动元素经常和标准流父级搭配使用
先用标准的父元素排列上下位置,之后内部子元素采取浮动排左右位置,符合页面布局第一准则
网页布局第二准则:先设置盒子的大小,之后设置盒子的位置

浮动布局的注意点

浮动和标准流的父盒子搭配

  • 先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

一个元素浮动了,理论上其余的兄弟元素也要浮动

  • 一个盒子里面有多个盒子,如果其中一个盒子浮动了,那么其他兄弟也可以浮动,可防止引起问题.
  • 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

清除浮动

为什么
+ 由于父级盒子需要根据子盒子的大小灵活显示高度,所以不方便给高度,但是盒子浮动又不占位置,最后父级盒子高度为0,就会影响下面的标准流盒子.

  • 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响

清除浮动的本质
+ 清除浮动元素造成的影响

办法

选择器 {clear : 属性值;}

属性值
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响

在实际工作中,几乎只用(clear:both;)

闭合浮动

清除浮动的方法

额外标签法也成为隔墙法,是W3C推荐的做法

额外标签法会在浮动元素末尾添加一个空标签. 例如<div style="claer: both"></div> 或者其他标签(如<br />等)
优点:通俗易懂书写方便
缺点:添加许多无意义的标签,结构化较差
!!!添加的盒子必须是块级元素,不能是行内元素

父级添加overflow属性

其属性值设置为hidden auto 或者scroll
优点:代码简洁
缺点:无法显示溢出的部分

父级添加after伪元素

.clearfix:after {
content: "";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
*zoom:1;
}

优点:没有增加标签,结构更简单
缺点::照顾低版本浏览器
代表网站:百度 淘宝网 网易

父级添加双伪元素

.clearfix:before,.clearfix:after {
content:"";
display:table; 
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

优点:代码更简洁
缺点:照顾低版浏览器
代表网站 小米 腾讯

CSS书写顺序

  1. 布局定位属性:display/position/float/clear/visibility/overflow(建议display第一个写,毕竟关系到模式)
  2. 自身属性:width/height/margin/padding/border/background
  3. 文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
  4. 其他属性(CSS3):content/cusor/border-radius/box-shadow/text-shadows/background: linear-gradient…

页面布局的整体思路

为提高网页制作的效率,布局时通常有以下的整体思路

  1. 必须确定页面的版心(可视区),我们测量可得知
  2. 分析页面中的行模块,以及每个行模块中的列模块. 是页面布局的第一准则
  3. 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置.页面布局第二准则
  4. 制作HTML结构.我们还是遵循,先有结构,后有样式的原则. 结构永远最重要.
  5. 所以,先清除布局结构,再写代码尤为重要. 这需要我们多写多积累.

CSS定位

定位

为什么需要定位

浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列的盒子
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其它盒子

定位组合

将盒子定再某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子.

定位=定位模式+边偏移

定位模式

定位模式决定元素的定位方式,通过CSS的position属性来设置,其值为四个

static 静态定位

了解,默认模式
选择器 {position:static}
按照标准流特性摆放位置,没有边偏移

relative 相对定位

重要 相对于它原来的位置来说
选择器 {position:relative;}

特点:

  1. 它是相对自己原来的位置移动
  2. 原来的标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)

因此,相对定位并没有脱标.它的最典型的应用是给绝对定位当爹

absolute 绝对定位

重要 绝对定位是元素再移动位置的时候,是相对于它祖先元素来说的
选择器 {position:absolute;}

特点

  1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
  2. 如果祖先元素有定位(相对\绝对\固定定位),则以最近一级的有定位的祖先元素为参考点移动位置
  3. 绝对定位不再占有原先的位置 不脱标

绝对定位与相对定位的使用场景: 为什么说相对定位给绝对定位当爹?

  • 子绝父相——子级是绝对定位的话,父级要用相对定位
    子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子
    父盒子需要加定位限制子盒子在父盒子内显示
    父盒子布局时,需要占有位置,因此父亲只能是相对定位
  • 子绝父相不是绝对的,如果父元素不需要占有位置,子绝父绝也会遇到

fixed 固定定位

主要使用场景:可以在浏览器页面滚动时元素的位置不会改变
语法:选择器 {position:fixed};

特性 :

  • 以浏览器的可视窗口为参照点移动
  • 跟父元素没有任何关系
  • 不随着滚动条的滚动而滚动
  • 固定定位不占有原先的位置,脱标

sticky 粘性定位

相对定位和固定定位的混合
选择器{position:sticky; top:10px;}

以浏览器的可视窗口为参照点移动元素
固定定位的特点
粘性定位占有原先额位置
相对定位特点
必须添加top.left, right, bottom其中一个才有效

边偏移

定位盒子移动的最终位置

top 顶部偏移值,定义元素相对于其父元素上边线的距离
bottom
left
right

页面布局总结

通过盒子模型,清除知道大部分HTML标签是一个盒子

通过CSS浮动,定位可以让盒子排列称为网页

一个完整的网页是标准流\浮动\定位一起完成布局的,每个都有自己的专门做法.

标准流: 可以让盒子上下排列或者左右排列,处置的块级盒子显示就用标准流布局
浮动: 可以多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
定位: 定位最大的特点就是层叠的概念,就是可以让多个盒子前后叠压显示.如果元素自由在某个盒子内移动就用定位布局.

元素的显示与隐藏

让一个元素在页面中颖仓或者显示出来

display 显示隐藏

display:none; 隐藏对象 位置不保留
display:block; 除了转换为块级元素之外,同时还有显示元素的意思; 后面应用极其广泛,搭配js可以左很多的页面特效

visibility显示隐藏

visibility:visibe; 元素可视 保留位置
visibility: hidden; 元素隐藏
inherent 继承父元素的可见性

overflow溢出

visible 默认溢出
auto 超出显示滚动条,没溢出不显示滚动条
hidden 溢出的部分隐藏
scroll 显示滚动条
!!!注意
但是如果有定位的盒子,请慎用overflow:hidden因为它会隐藏多余的部分

​ 配合溢出显示省略号使用

CSS高级技巧

精灵图

将很多小图片集成在一张图片中 这个大图片叫做sprites 精灵图或者雪碧图

为了有效减少服务器接收和发送请求的次数,提高页面的加载速度

移动背景图片位置,此时可以使用background-position

移动的距离就是这个目标图片的x和y轴坐标.注意网页中的坐标有所不同

一般情况 往上往左移动 数值都是负值

总结:

精灵图主要针对小的背景图片使用
主要借助背景位置来实现—background–position

background: url() no-repeat-182px 0;

字体图标iconfont

主要用于显示网页中通用, 常用的一这些小图标

精灵图部分缺点

  • ​ 图片文件还是比较大.
  • ​ 图片本身放大与缩小会失真
  • ​ 一旦图片制作完毕想更换非常复杂

展示是图标,本质是字体

优点

  • 小,减少服务器请
  • 灵活 改变颜色,阴影,透明,旋转

使用, 官网查询

追加新的字体图标 上传selection.jason

CSS三角

S``Q73VSRX~EZQN1@7EQLLB.jpg

_Q8R5T@_TLP_3U_O_ZEAD8C.jpg

左边出现一个的等腰三角形, 顶角为正方形对角线交点

.box2 {
            width: 0px;
            height: 0px;
            line-height: 0;
            font-size: 0;
            border: 50px solid transparent;
            border-left-color: pink;
        }
<style>
        .box {
            position: relative;
            width: 500px;
            height: 300px;
            background-color: green;
        }
        .box span {
            position: absolute;
            left: 500px;
            top: 50px;
            width: 0px;
            height: 0px;
            border: 15px solid transparent;
            border-left-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <span></span>
    </div>
</body>

CSS用户界面样式

更改用户的鼠标样式cursor

<li style="cursor: default;">默认小白鼠标</li>
<li style="cursor: pointer;">小手</li>
<li style="cursor: move;">移动</li>
<li style="cursor: text;">文本</li>
<li style="cursor: not-allowed">禁止</li>

表单轮廓

给表单添加outline:0/none; 去掉默认蓝色选中边框

input, textarea {outline: none;}

防止表单域拖拽

textarea { resize: none; }

vertical-align属性应用

场景:经常用于设置图片或者表单(行内块元素)和文字垂直居中

vertical-align: top; 文字顶端对齐
vertical-align: bottom; 文字底端对齐
vertical-align: middle;  与文字中间对齐

用于设置一个元素的垂直对齐方式,但是只针对于行内元素或者行内块元素有效

场景:图片底侧有一个空白缝隙,原因是行内块元素会和文字的基线对齐

解决

  • 给图片添加vertical-align:middle/top/bottom等
  • 将图片改成行内块元素

溢出的文字显示省略号

单行文本溢出显示省略号

<style>
        div {
            width: 100px;
            height: 60px;
            background-color: green;
            margin: 100px auto;
            /* 强制一行显示 */
            white-space: nowrap;
            /* 溢出不显示 */
            overflow: hidden;
            /* 溢出部分显示省略号 */
            text-overflow: ellipsis;

        }
    </style>
</head>
<body>
    <div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈great哈哈哈哈</div>
</body>

多行文本溢出显示省略号

div {
            width: 100px;
            height: 43px;
            background-color: green;
            margin: 100px auto;
            /* 溢出不显示 */
            overflow: hidden;
            /* 溢出部分显示省略号 */
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本行数 */
            -webkit-line-clamp: 2;
            /* 设置或检查伸缩盒子对象的子元素的排列方式 */
            -webkit-box-orient: vertical;

 }

更推荐让后台人员来做这个效果,应为后台人员可以设置多少个字,操作更简单,无兼容性问题

常见布局技巧

margin负值的运用

  • 多个矩形边框相邻不增加厚度

让每个盒子margin往左移动-1 px正好压相邻盒子边框

ul li {
            float: left;
            width: 150px;
            height: 100px;
            border: 1px solid red;
            list-style: none;
            margin-left: -1px;
  }
  • 多个矩形边框 鼠标经过 四个边框不被遮盖
ul li {
            position: relative;
            float: left;
            width: 150px;
            height: 100px;
            border: 1px solid red;
            list-style: none;
            margin-left: -1px;
        }
/* 如果li都有定位，则利用z-index提高层级 */
ul li:hover {
            z-index: 1;
            border: 1px solid blue;

文字围绕浮动元素

场景 一个盒子里面左侧是图片 右侧是文字

实现:巧妙运用左侧浮动的图片不会压住盒子里面的文字 而是文字围绕图片的特点

<style>
.box {
            width: 300px;
            height: 100px;
            background-color: green;
            padding: 10px;
        }
        img {
            float: left;
            vertical-align: middle;
            height: 100%;
            margin-right: 10px;
        }
 </style>
</head>
<body>
    <div class="box">
        <img src="images/abcd.jpg" alt="">
        大家都是好朋友啊呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪
    </div>
</body>

行内块的巧妙运用

写一排页面跳转按钮

CSS三角强化

_________________________________________
|            /                           |
|____红色____/______________白色___________|

怎么做这个梯形 在红色矩行为长方形的右边放一个直角三角形

 /|
/_|
/* 写法一 */
        .box1 {
            width: 0;
            height: 0;
            border-top: 200px solid transparent;
            border-bottom: 0px solid green;
            border-left: 0px solid blue;
            border-right: 100px solid red;

            /* 左边和右边的宽度为0   上面的宽度为右边的宽度的两倍 */
        }
 /* 写法二 */
        .box1 {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }

CSS初始化

消除不同浏览器对html文本呈现的差异,照顾浏览器的兼容

每个网页必须进行CSS初始化

CSS3新特性

现状

  • 移动端好于PC端
  • 新增选择器,盒子模型,其他特性

新增选择器

属性选择器

不借助类或者id选择器

类型

[att] 选择具有att属性的E元素
[att="val"] 选择具有att属性且属性值等一val的E元素
[att^="val"] 匹配具有att属性且值以val开头的E元素
[att$="val"] 匹配具有att属性且值以val结尾的E元素
[att*="val"] 匹配具有att属性且值中含有val的E元素

权重为10

[title] 选中具有属性名为title的标签
[class="demo"]

结构伪类选择器

主要根据文档结构来选择元素,常用于根据父级选择器选择里面的子元素

e:first-child 匹配父元素E中的第一个子元素e ul li:first-child { }
e:last-child 匹配父元素E中的最后一个子元素e

e:nth-child(n)

匹配父元素E中的第n个子元素

(n)可以是数字,关键词,公式

/* 选择第n个，n位数字  */
:nth-child(n)

/* 选择列表中的偶数标签 */
:nth-child(2n)

/*选择列表中的奇数标签 */
:nth-child(2n-1)

/*选择前几个元素 */
/*【负方向范围】选择第1个到第6个 */
:nth-child(-n+6){}

/*从第几个开始选择*/
/*【正方向范围】选择从第6个开始的，直到最后  */
:nth-child(n+6){}

/*两者结合使用，可以限制选择某一个范围 */
/*【限制范围】选择第6个到第9个，取两者的交集【感谢小伙伴的纠正~】 */
 :nth-child(n+6):nth-child(-n+9)

/*选择列表中的倒数第n个标签 n为数字 */
:nth-last-child(n) 

/*选择倒数最后n个 */
item:nth-last-child(-n+2){}

ul li:nth-child(2) { }

child 先把ul下面的子元素标序号, 然后再选是否与li匹配 不匹配则不能执行

E e:first-of-type
E e:last-of-type
E e:nth-of-type(n)

type 选择所有e的类型之后 标序号 匹配序号

小结: nth-child与nth-of-type的区别 前者是选择一类元素的指定元素, 后者是选择指定元素的子类元素

伪元素选择器

::before
在元素内部的前面插入内容
::after
在元素内部的后面插入内容

注意

  • before和after创建一个元素,但是属于行内元素
  • 新创建的这个元素在文档树中时找不到的,
  • 语法 element::before {}
  • before和after必须有content属性
  • before在父元素的前面创建元素,after在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样,权重为1
  • 网页结构更简单

可用于清除浮动

盒子模型CSS3

box-sizing:border-box 包含内边距和边框

解决padding border的粗度增大盒子的问题

默认为盒子属性是:box-sizing: content-box

使得盒子不会因为设置内边距和边框而变大

CSS3其他特性

图变模糊

CSS3滤镜filter

filter:函数();
filter:blur(5px); blur模糊处理 数值越大越模糊
数值要加单位
鼠标经过不模糊 数值改0

兼容盒子宽度:calc函数

width:calc(100%-80px)

+ - * /

CSS3过渡

!!! 经常和:hover一起搭配使用

transition:要过度的属性 花费时间 运动曲线 何时开始

  • 属性 宽度 高度 背景 颜色 内外边框等. 所有的都变化就写all

  • 花费时间 单位秒s 0.5s

  • 运动曲线 默认是ease 可以省略

linear
	匀速
ease
	逐渐慢下来
ease-in
	加速
ease-out
	减速
ease-in-out
	先加速后减速
  • 何时运动

必须写单位 单位是秒 可以数值 延迟出发时间 默认是0s 可以省略

谁做过渡给谁加

transition: width 3s ease-in, height 3s;