01-CSS3基础

CSS简介

• HTML 主要做结构, 显示元素内容

• css 是层叠样式表 主要做样式,用来美化 HTML ,布局网页

CSS 语法规范

• css规则主要有两个盒子模型主要部分构成: 选择器以及一条或多条声明.

• 属性和属性值以键值对的形式出现

• 属性和属性值之间用 “:” 分开

• 多个键值对中间用";" 进行区分

  

代码规范

• 空格规范:

•     p {
       
          color: #ff0000;
          font-size: 30px;
      }
  

  1. 属性值前面 , 冒号后面 ,保留一个空格
  2. 选择器 (标签) 和大括号中间保留空格

CSS 选择器

• 作用 : 选择标签用的

基础选择器

• 基础选择器是由单个选择器组成的
• 基础选择器包括: 标签选择器 . 类选择器 . id 选择器.和通配符选择器

标签选择器

• 标签选择器 : 是指用HTML 标签名做为选择器
• 作用 : 标签选择器可以把某一类标签全部选择出来.比如所有的 div
• 优点 : 能快速为页面中的同类型的标签统一模式.
• 缺点 : 不能差异化设置

   p {
    
       color: red;
   }

类选择器

• 差异化选择不同标签, 单独选一个或某几个标签, 可以使用类选择器

   .red {
    
       color: red;
   }
   .green {
    
       color: green;
   }

   <ul>
       <li class="red">学编程,来黑马</li>
       <li class="green">学编程,来黑马</li>
       <li class="red">学编程,来黑马</li>
   </ul>

• 类选择器口诀 : 样式点定义 , 结构类调用 (class) 一个或多个, 开发最常用
• 注意 : 长名称或词组可以使用中横线来为选择器命名.
• 不要使用纯数. 中文命名 , 尽量使用英文字母来表示.
• 命名规范

多类名

1. 多类名使用方式

   1. 在标签 class 属性中写多个类名
   2. 多个类名中间必须用空格分开

2. 多类名开发使用场景

   1. 可以把一些标签元素相同的样式放到一个类里面
   2. 这些标签都可以调用这个公共的类 , 然后再调用自己独有的类
   • 优点: 节省 CSS 代码 ,修改方便

      .box {
   
        width: 200px;
        height: 200px;
      }
      .red {
   
        background-color: red;
      }
      .green {
   
        background-color: green;
      }
      
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>

id 选择器

 #pink {
     color: pink;
 }

 <div id="pink">
     学编程 来黑马
 </div>

• id 选择器可以为特有定的 id 的HTML 元素指定特定的样式
• id 属性只能在每个HTML 文档中出现一次. 口诀: 样式＃定义，结构id 调用, 只能调用一次, 别人勿使用

id 选择器和类选择器的区别

1. 类选择器可以被多个人使用
2. id 选择器只能用一次 , 不得重复使用
3. id 选择器和类选择器最大的区别是使用次数上
4. 类选择器在修改样式中用的最多, id 选择器一般用于页面唯一性的元素上, 经常搭配 JavaScript 使用

通配符选择器

" * " 表示选取页面中所有元素.

    * {
        color: red;
    }

特殊情况才使用 , (清除所有的元素标签 的内外边距)

基础选择器总结

复合选择器

• 复合选择器是建立在基础选择器之上 ，对基本选择器进行组合形成的
• 复合选择器是由两个或多个基础选择器, 通过不同的方式组合而成的.
• 常用的复合选择器包括: 后代选择器 , 子代选择器 , 并集选择器 , 伪类选择器等

后代选择器

后代选择器又称为包含选择器 , 可以选择父元素里面的子元素

• 语法: 元素 1 元素 2 { 样式声明 }

  选择元素 1 里面的所有元素 2 ( 后代元素 )

  选择 ul 里面所有的 li 标签元素

      ul li {
       
          color: pink;
      }
  

• 元素 1 和元素 2 中间用空格隔开

• 元素 1 是父级 , 元素 2 是子级 , 最终选择的元素是元素 2

• 元素 2 可以是儿子 , 也可以是孙子 , 只要是元素 1 的后代即可

• 元素 1 和元素 2 可以是任意基础选择器

子代选择器

子代选择器只能选择离自身元素最近的一级子元素 . 就是亲儿子元素.

• 语法: 元素 1 > 元素 2 {样式声明}

  选择元素 1 里面的所有直接后代元素 2

        div > a {
       
          color: yellow;
        }
  

• 元素 1 和元素 2 中间用大于号隔开

• 元素 1 是父级 , 元素 2 是子级 , 最终选择的是元素 2

• 元素 2 必须是亲儿子 , 孙子 , 重孙子之类都不归他管 , 可以叫亲儿子

并集选择器

并集选择器可以选择多组标签 , 同时为他们定义相同的样式 . 通常用于集体声明 .

• 语法 : 元素 1 , 元素 2 { 样式声明 }

  表示选择元素 1 和元素 2

        div,
        p,
        .pig li {
       
          color: pink;
        }
  

• 元素 1 和 元素 2 中间用逗号隔开

• 并集选择器通常用于集体声明

伪类选择器

链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果 , 比如给链接添加特殊效果 , 或选择第 1 个 , 第 n 个元素.

伪类选择器很多, 如有链接伪类 . 结构伪类等

链接伪类选择器	说明
a : link	选择所有未被访问的链接
a : visited	选择所有已被访问的链接
a : hover	选择鼠标指针位于其上的链接
a : active	选择活动链接 ( 鼠标按下未弹起的链接)

链接伪类选择器注意事项

• 按照 LVHA 的顺序声明 : link - visited - hover - active
• 记忆法 lv 包包 hao
• a 链接在浏览器中有默认样式 , 所以我们实际工作中都需要给链接单独指定样式

链接伪类实际工作中的写法

      a {
   
        color: gray;   
        text-decoration: none;  
        /* 去掉下划线 */
      }
      a:hover {
   
        color: lawngreen;
        text-decoration: underline;
        /* 鼠标经过添加下划线 */
      }

: focus 伪类选择器

: focus 伪类选择器用于选取获得的表单元素 , 主要针对表单 input 元素来说

• 去除输入框默认边框

输入框默认带有变宽
input{
border:0;
}

• 语法

      input:focus{
   
          background-color: greenyellow;
          /* 背景颜色 */
          color: red;
          /* 输入框中字符颜色 */
  }

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代	可以是子孙后代	较多	空格 .nav
子代选择器	选择最近一级元素	只选亲儿子	较小	大于 .nav > p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	.nav , header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	a{}和a:hover{}
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus

CSS 字体属性

font-family 字体

h1 {
 font-family: "宋体";
}
p {
 font-family:  "Microsoft Yahei" Arial;
}

• 各种字体之间必须使用英文转态下的逗号隔开
• 如有空格隔开的多个单词组成的字体 , 需加引号
• 尽量使用系统默认自带字体
• 开发中经常给 body 指定 font-family 字体 body {font-famil:""}

font-size 字体大小

h1 {
    
 font-size: 20px;
}

• 谷歌浏览器默认文字大小为16px
• 不同浏览器可能默认显示的字号大小不一致, 我们尽给一个明确的值, 不要使用默认大小
• 可以给 body 指定整个页面文字的大小
• 标题标签比较特殊 , 需要单独指定文字大小

font-weight 字体粗细

• css 使用 font-weight 给标签加粗

  .bold {
       font-weight: 700; 
       font-weight: 400;
       font-weight: normal;
   }

属性值	描述
normal	默认值( 不加粗 )
bold	加粗
100~900	400=normal , 700=bold

font-style 文字样式

css 使用 font-style 设置文本风格

   p {
     font-style: italic;
     font-style: normal;
   }

属性值	作用
normal	默认值 不倾斜
italic	文字倾斜

• 开发中需要给斜体标签 (em , i )改为不倾斜字体.

font 符合属性写法

• font : 字体样式 字重 字体大小 / 行高 设置字体

font : font-style font-weight font-size/line-height font-family
font : italic 400 20px/20px "Microsoft yahei"

• 使用 font 属性时 , 必须按照上面语法顺序写, 不能换顺序, 并且各个属性之间用空格隔开
• 不需要的属性可以省略( 取默认值 ),但必须保留 font-size 和 font-family 属性.

字体属性总结

CSS 文本属性

css Text(文本) 属性可以定义文本的外观 , 比如文本的颜色. 对齐文本. 装饰文本. 文本缩进. 行间距等

文本颜色 color

color 用来设置文本的颜色

   h1 {
    
    color: #d9ff00;
   }

文本对齐 text-align

text-align 属性用于设置元素内文本内容的水平对齐方式

   h1 {
    
     text-align: center;
     text-align: right;
     text-align: left;
   }

文本装饰 text-decoration

text-decoration 可以给文本添加下划线 删除线 上划线等

   h1 {
       text-decoration: none;
       text-decoration: underline;
       text-decoration: overline;
       text-decoration: line-through;
   }

• text-decoration: none; 取消超链接默认的下划线

文本缩进 text-indent

text-indent 用来给文本第一行首行缩进 , 段落首行缩进

   p {
    
     text-indent: 20px;
   }
   p {
    
     text-indent: 2em;
   }

• em 是一个相对单位 , 就是当前元素 ( font-size ) 1 个文字的大小, 如果当前元素没有设置大小, 则会继承父元素的 1 个文字大小.

行间距 line-height

line-height 属性用于设置行与行之间的距离( 行高 ), 可以控制文字行与行之间的距离.

   p {
    
     line-height: 20px;
   }

• 行间距由 文本高度, 上间距和下间距组成

设置字符间距 letter - spacing

letter - spacing : 10px

CSS 文本属性总结

CSS 三种引入方式

1. 内部样式表
   • 就是在 html 页面写样式, 单独写到 style 中
   • style 一般放到 head 中
2. 行内样式表
   • 在元素标签内部的 style 属性中设定 CSS 样式
3. 外部样式
   • 使用与样式比较多的情况下 , 样式单独写到CSS 样式中 在引入 HTML 页面
   • 新建后缀为 .CSS 的文件,用 标签引入 CSS 文件.

CSS 引入方式总结

调试工具使用:

如果点击元素 , 发现右侧没有样式引入 , 极有可能是类名或者样式引入错误

CSS 的元素显示模式

元素显示模式一般分为块元素和行内元素

块元素

常见的块元素: h1-h6 / p / div / ul / ol / dl / table / form

• 块元素特点
  1. 独占一行
  2. 宽度 . 高度 . 外边距和内边距可以修改
  3. 宽度默认是父级的宽度 ( 浏览器 ) 的100%
  4. 是一个容器 , 里面可以放行内或者块元素
• 文字类的元素不能使用块级元素
• < p > 标签主要用于放文字 , 因此 < p > 里面不能放块级元素 , 特别不能放 < div >
• < h1 >~< h6 > 也不能放块级元素

行内元素

常见的行内元素 a span strong b em i del s ins u

• 行内元素的特点

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

• 注意 : 链接里面不能在放链接

• a 里面可以放块级元素 , 给 a 转换一下块级模式最安全

行内块元素

常见的行内块元素 < img > < input > < button >< td > 它们同时具有块元素和行内元素的特点

• 行内块元素的特点
  1. 和相邻的行内元素( 行内块 ) 在一行上 , 它们之间会有空隙 , 一行可以显示多个 ( 行内元素特点 )
  2. 默认宽度就是它本身的宽度 ( 行内元素特点 )
  3. 可以设置宽度高度外内边距 ( 块元素特点)

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽高度	容器的100%	可以包含任何标签
行内元素	一行能放多个行内元素	不可以设置宽高度	它本身的宽度	容纳文字和其他行内标签
行内块元素	一行能放多个行内块级元素	可以设置宽高度	它本身内容的宽度

元素显示模式转换

• 转换为块元素 : display: block;

      a {
   
        display: block;
        /* 转为块元素 */
        width: 200px;
        height: 200px;
        background-color: green;
        text-decoration: none;
        /* 去掉下划线 */
      }

• 转换为行内元素 :display: inline;

      div {
   
        display: inline;
        /* 转为行内元素 */
        background-color: green;
      }

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

      span {
   
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: green;
      }

单行文字垂直居中原理

简单理解 : 行高的上空隙和下空隙把文字挤到中间了 , 如果行高小于文字的高度, 文字会偏上 , 如果行高大于文字的高度文字会偏下

CSS 背景

背景属性可以设置背景颜色 . 背景图片 . 背景平铺 . 背景图片位置 . 背景图像固定等

背景颜色

• background-color: 一般情况下元素背景颜色默认是 transparent ( 透明)

•     div {
       
        display: block;
        width: 230px;
        height: 40px;
        background-color: transparent;
        /* 背景颜色透明 */
        background-color: green;
      }
  

背景颜色半透明

• 最后一个参数透明度取值范围是 0 ~ 1
• 0 可以省掉 .4
• 只能将盒子背景半透明 , 盒子里的内容不受影响
• 从0.0（完全透明）到1.0（完全不透明）

   body {
   
    background: rgba(0, 0, 0, 0.4);
   }

背景图片

• background-image: 开发中常用于 logo 或者一些装饰的小图片或者超大的背景图片

• 优点 : 非常便于控制位置 ( 精灵图也是一种运用场景 )

•     div {
       
        width: 230px;
        height: 40px;
        /* 背景颜色透明 */
        background-image: url(./);
      }
  

  background-image: none | url ;

  参数值	作用
  none	为背景图
  url	使用绝对或相对指定背景图

背景平铺

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

      div {
   
        width: 230px;
        height: 240px;
        background-image: url(./bg1.png);
        background-repeat: repeat-y;
        /* 背景平铺 */
      }

参数值	作用
repeat	横线纵向平铺
no-repeat	不平铺
repeat-x	沿着 x 轴平铺
repeat-y	沿着 y 轴平铺

背景位置

利用 background-position: x y 属性可以改变图片在背景中的位置

参数代表意思 : x 坐标和 y 坐标 , 可以使用方位名词或者精确单位

      div {
        width: 230px;
        height: 240px;
        background-image: url(./bg1.png);
        background-repeat: repeat-y;
        /* 背景平铺 */
        background-position: left center;
        /* /背景位置 */
      }

参数值	说明
length	百分数 | 数字 |单位
position	center | top | bottom | left | right |

1. 参数是方位名词
   • 两个值如果都是方位词 他们的前后顺序无关.
   • 如果只写了一个方位名词 , 另一个省略 ,默认是居中的
2. 参数是精确单位
   • 第一个坐标是 X 坐标 , 第二个坐标是 Y 坐标
   • 如果只写一个, 另一个默认垂直居中 left center
3. 参数是混合单位(精确单位 , 方位名词)
   • 第一个坐标是 X 坐标 , 第二个坐标是 Y 坐标 20px left center 20px

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

background - attachment 属性设置背景图片是否固定或随着页面的其余部分滚动 , 后期可以制作视差滚动的效果

• background - attachment : scroll | fixed

  参数	作用
  scroll	背景图像随内容滚动
  fixed	背景图像固定

        body {
       
          background-attachment: fixed;
          background-attachment: scroll;
        }
  

背景属性复合写法

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

      body {
   
        background: black url(./bg.jpg) no-repeat fixed center top ;
      }

背景总结

属性	作用	值
background - color	背景颜色	颜色 / RGB / 十六进制
background - image	背景图片	url ( 图片路劲 )
background - repeat	是否平铺	repeat / no-repeat / repeat -x /repeat- y
background - position	背景位置	量词 / 方位词 x 和 y 坐标
background - attachment	背景附着	scroll ( 滚动 ) fixed ( 固定)
背景简写		背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置
背景色半透明		background: rgba(0, 0, 0, 0.4); 后面必须是 4 个值

透明设置

• rbga()设置单颜色的透明，a是alpha透明，取值范围0-1,0.5的0可以省略
• opacity:设置元素整体的透明度，取值范围0-1
  • opacity: 1; 指定不透明度。从0.0（完全透明）到1.0（完全不透明）

两者的区别：opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

opacity : 是作用元素的 , 以及元素内所有的内容都会有效果

rgba : 作用元素的颜色或背景色

CSS 三特性

CSS 有三个重要的特性 : 层叠性 , 继承性 , 优先级

层叠性

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

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

继承性

子标签会继承父标签中的某些样式 , 如文本样色和字号 .

• 恰当地使用继承可简化代码 , 降低 CSS 样式的复杂性
• 子元素可以继承父元素的样式 ( text- , font- , line- 这些元素开头的可以 , 和 color
• a 标签不继承颜色，h 系列标签不继承字体大小。

行高的继承

        color: pink;
        /* font: 12px/24px 'Microsoft Yahei'; */
        font: 12px/1.5 "Microsoft Yahei";
        /* 行高是当前字体的 1.5 倍 */
      }

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

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

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

优先级

当同一个元素指定多个选择器 , 就会有优先级的产生

• 选择器相同 , 则执行层叠性
• 选择器不同 , 则根据选择器权重执行
• 从左到右进行比较

选择器权重表

选择器	权重
继承 或者 *0	0
元素(标签)选择器	1
类选择器 , 伪类选择器	10
ID 选择器	100
行内样式 style=""	1000
!important 重要的	∞ 无穷大

• 通配符和继承权重为 0 , 标签选择器为 1 , 类/伪类选择器为10 , id 选择器为 100 , 行内样式表为 1000 , !important 无穷大

      div {
   
        color: pink !important;
      }

• 继承的权重为 0 .

权重叠加

权重叠加 : 如果复合选择器 , 则会有权重叠加 , 需要计算权重 .

      /* ul li 权重  0 0 0 1 + 0 0 0 1  2 */
      ul li {
   
        color: green;
      }
      /*  li 权重  0 0 0 1  1 */
      li {
   
        color: red;
      }
      /* nave li 权重 0 0 1 0 + 0 0 0 1  11   */
      .nave li {
   
        color: yellow;
      }

• div ul li ------ 0 , 0 , 0 , 3
• .nav ul li ------0 , 0 , 1 , 2
• a:hover -------0 , 0 , 1 , 1
• .nav a ----------0 , 0 , 1 , 1

CSS 盒子模型

• 页面布局的三大核心 : 盒子模型 , 浮动 , 定位

• 网页布局过程

  1. 准备好相关的网页元素 , 网页元素基本就是box盒子
  2. 利用 cSS 设置好盒子样式 , 然后摆到相应位置
  3. 往盒子里装内容

  网页布局的核心本质 :　就是利用 CSS 摆盒子 .

盒子模型组成

• 封装周围的 HTML 元素 包括 : 内容 边框 , **外边距和内边距 **

边框

• border : border-width border-style border-color

   div {
    
     border-width: 5px;
     border-style: solid;
     /* solid 实线边框  dashed 虚线边框  dotted 点线边框*/
     border-color: green;
   }

• 边宽的复合写法 : border : 5 px solid green

   div {
    
     color: 5px solid green;
   }

• 边框分开写法 : border-top: 5px solid green;

   div {
    
     border-top: 5px solid green;
     /* 只设定上边框 */
   }

   div {
    
     width: 200px;
     height: 200px;
     border: 1px solid blue;
     /* 设置边框 */
     border-top: 1px solid green;
   }

• 表格的细线边框 : border - collapse ,属性控制浏览器绘制表格边款的方式 . 控制相邻单元格的边框
• 语法 : border - collapse : collapse
• collapse 是合并的意思 , 把相邻边框合并在一起

   table,
   td,
   th {
    
     border: 2px solid green;
     border-collapse: collapse;
     /* 合并相邻边框 */
   }

• 边框会影响盒子的实际大小
  1. 测量盒子大小的时候 , 不要测量边框
  2. 如果测量的时候包含了边框 , 则需要 width / height 减去边框的宽度

内边距 paddiing

• padding 盒子边框与内容之间的距离

   div {
    
     width: 200px;
     height: 200px;
     background-color: green;
     padding-left: 20px;
   }

属性	作用
padding - left	左内
padding - right	右内
padding - top	上内
padding - bottom	下内

• padding 复合性写法

   div {
    
     width: 200px;
     height: 200px;
     background-color: green;
     padding-left: 20px;
     padding: 20px;
     padding: 5px 10px;
     padding: 5px 10px 20px;
     padding: 5px 10px 20px 30px;
   }

值得个数	表达意思
padding : 5px ;	1 个值 ; 上下左右5 px
padding : 5px 10px;	2 个值 ; 上下内边距 5 px , 左右内边距 10px
padding : 5px 10px 20px	3 个值 ; 上 5 px , 左右 10 px , 下 20 px
padding : 5px 10px 20px 30px;	4 个值 ; 上 5 px , 右 10 px , 下 20 px 下30 px

• padding 影响了盒子实际大小 , 如果盒子已经有了宽高 , 此时在指定内边框 , 会撑大盒子 .
• padding 不会影响盒子大小 : 如果盒子本身没有指定 width / height 属性 , 则此时 padding 不会撑开盒子大小 .
• 解决方案 : 需要 width / height 减去多出来的内边距大小即可
• padding 应用 : 新浪导航栏

外边距 margin

• margin 控制盒子和盒子之间的距离

   div {
    
     width: 200px;
     height: 200px;
     background-color: green;
     margin-bottom: 20px;
   }

属性	作用
margin - left	左内
margin - right	右内
margin- top	上内
margin - bottom	下内

• margin 复合性写法

div {
    
  width: 200px;
  height: 200px;
  background-color: green;
  margin-left: 20px;
  margin: 20px;
  margin: 5px 10px;
  margin: 5px 10px 20px;
  margin: 5px 10px 20px 30px;
}

值得个数	表达意思
margin : 5px ;	1 个值 ; 上下左右5 px
margin : 5px 10px;	2 个值 ; 上下外边距 5 px , 左右外边距 10px
margin : 5px 10px 20px	3 个值 ; 上 5 px , 左右 10 px , 下 20 px
margin : 5px 10px 20px 30px;	4 个值 ; 上 5 px , 右 10 px , 左 20 px 下30 px

外边距典型应用

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

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

   div {
    
     width: 200px;
     height: 200px;
     background-color: green;
     margin: 0 auto;
   }		

行内元素或者行内块元素水平居中给其块级父元素添加 : text-align: center;即可

外边距合并

使用 margin 定义块级元素的垂直外边距时 , 可能出现外边距的合并 . 主要有两种情况

1. 相邻块元素垂直外边距的合并

   相邻块元素设置了margin-buttom , margin-top 取两个值汇总较大者,这种现象被称为相邻块元素垂直外边距的合并

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

2. 嵌套块元素垂直外边距的塌陷

   两个嵌套关系 ( 父子关系 ) 的块元素 , 父元素有上外边距同时子元素也有上外边距 , 此时父元素会塌陷较大的外边距值

   解决方案

   1. 为父元素定义上边框
   2. 为父元素定义上内边距
   3. 为父元素添加 overflow : hidden

      .father {
         
        width: 200px;
        height: 200px;
        background-color: green;
        margin-top: 50px;
        border-top: 1px solid transparent;
        padding-top: 1px;
        overflow: hidden;
      }
   

   overflow : heiden 不会撑大盒子

   其他办法浮动 , 固定 , 绝对定位的盒子不会有塌陷问题

清除内外边距

      * {
    
        margin: 0;
        /* 清除外边距 */
        padding: 0;
        /* 清除内边距 */
      }

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

竖杆 |怎么写: < em>|< em>

   .info em {
    
     font-style: normal;
     color: grey;
     margin: 0 6px 0 15px;
   }

CSS 3新增

圆角边框

border-radius 用于设置元素的边框圆角 , 参数可以是数字也可以是百分比 .

border-radius: 10px / 50%;

半径越大 , 圆角越圆

1. 圆形的做法 : 设置为正方形的一半

      .one {
         
        width: 200px;
        height: 200px;
        border-radius: 100px;
        /* 设置正方形的一半 */
        border-radius: 50%;
        background-color: green;
      }	
   

2. 圆角矩形的做法 : 设置为高度的一半

      .one {
         
        width: 500px;
        height: 200px;
        background-color: green;
        border-radius: 100px;
        /* 设置为高度的一半 */
      }
   

3. border-radius 简写

   属性	值
   border-radius: 10px;	四个角
   border-radius: 10px 20px;	对角线
   border-radius: 10px 20px 30px 40px;	左上角 右上角 右下角 左下角

   分开写 , 顺序不能颠倒

   属性	值
   border-top-left-radius: 10px;	左上角
   border-top-right-radius: 20px;	右上角
   border-bottom-right-radius: 30px;	右下角
   border-bottom-left-radius: 40px;	左下角

盒子阴影

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

水平 垂直阴影是必须写的

值	描述
h-shadow	必需 : 水平阴影 ,允许负值
v-shadow	必需 : 垂直阴影 ,允许负值
blur	可选 : 模糊度
spread	可选 :阴影大小
color	可选 : 阴影颜色
inset	可选 : 将外部阴影改为内部阴影

盒子阴影应用 : 鼠标经过添加阴影

问题 : 怎样给盒子下边框加阴影

.one:hover {
    
     box-shadow: 10px 10px 10px 10px black;
   }

文字阴影

text-shadow : h-shadow v-shadow blur color

值	描述
h-shadow	必需 : 水平阴影 ,允许负值
v-shadow	必需 : 垂直阴影 ,允许负值
blur	可选 : 模糊度
color	可选 : 阴影颜色

CSS 浮动

• 为什么需要浮动

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

• 浮动最典型应用

  可以让多个块级元素一行内 , 排列显示

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

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

1. 标准流 ,( 普通流 , 文档流)

   标签按照规定好默认方式排列 .

2. 浮动

3. 定位

float: none;

.son {
    
     float: none;
  }

属性值	描述
none	不浮动
left	左浮动
right	右浮动

浮动特点

1. 浮动元素会脱离标准流 , 不再保留原来的位置
2. 浮动元素会一行内显示并且元素顶部对齐
   • 浮动的元素是相互贴靠在一起的不会有缝隙 , 如果父级盒子宽度装不下这些浮动的盒子 , 多出的盒子会另起一行
3. 浮动元素具有行内块元素的特性 , 任何元素都可以浮动
   • 如果块级盒子没有设置宽度 , 默认宽度和父级一样宽 , 但是添加浮动后 , 它的大小根据内容来决定

• 浮动元素经常和标准流父级搭配使用
  • 先用标准流的父元素排列上下的位置 , 之后内部子元素采用浮动左右排列位置 , 符合网页布局第一准则
  • 先设置盒子大小 , 之后设置盒子的位置 , 网页布局第二准则
• 通栏的盒子不需要指定宽度 , 宽度和浏览器一样宽

浮动布局注意点

1. 浮动和标准流的父盒子搭配使用
   • 先用标准流的父元素排列上下的位置 , 之后内部子元素采用浮动左右排列位置
2. 一个元素浮动了 , 理论上其余兄弟也要浮动 , 以防止引起盒子排列问题
   • 浮动的盒子只会影响浮动盒子后面的标准流 , 不会影响前面的标准流

为什么要清除浮动

• 由于父盒子很多情况下 ， 不方便给高度 ， 但是子盒子浮动又不占有位置 ， 最后父级盒子高度为 0 ，就会影响下面的标准流盒子
• 由于浮动的元素不再占有位置 ， 所以它会影响后面的元素排版方

1. 清除浮动的本质是
   • 清除浮动元素脱离标准流造成的影响
2. 清除浮动策略
   • 闭合浮动，只让浮动在盒子内部影响，不影响盒子外面的其他盒子

清除浮动

clear: both;

   .box {
    
     clear: both;
   }

属性	描述
left	清除左侧浮动
right	清除右侧浮动
both	清除左右两侧浮动

清除浮动方法

1. 额外标签法 (隔墙法)

   • 在元素末尾添加一个空的标签 ，如 <div style="clear: both"></div>
   • 新添加的盒子必须是块级元素，不能是行内元素学

2. 父级添加 overflow: hidden; ( 别用 )

3. ：after伪元素

   • 是额外标签法的升级版，也是给父元素添加的

   /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
      .tudou:hover:before {
         
        display: block;
      }
      /* 而是显示元素 */
   
      .clearfix:after {
         
        /* 伪元素必须写的属性 */
        content: "";
        /* 伪元素是行内元素 , 插入的元素必须是块级 */
        display: block;
        /* 不要看见这个元素 */
        height: 0;
        /* 核心代码清除浮动 */
        clear: both;
        /* 不要看见这个元素 */
        visibility: hidden;
      }
      .clearfix {
         
        /* IE6、7 专有 */
        *zoom: 1;
      }
   

4. : 双伪元素清除浮动 ( 建议用 )

   • 也是给父元素添加

   .clearfix:before,.clearfix:after {
         
   content:"";
   /* 转化为块级元素 并且一行显示 */
   display:table; 
   }
   .clearfix:after {
         
   clear:both;
   }
   .clearfix {
         
   *zoom:1;
   }
   

为什么要清除浮动

1. 父盒子没有高度 , 影响下面的标准流盒子
2. 浮动的元素不再占有位置 , 影响后面元素的排版

学成在线案例

常见的图片格式

1. jpg图像格式 : 高清 颜色较多 产品图较多
2. gif图像格式 : 小动画
3. png图像格式 : 背景透明
4. PSD图像格式 : 设计稿文件

CSS 书写顺序(重点)

CSS 编写顺序

1. 设置布局定位属性
2. 设置宽度或高度
3. 设置背景色或边框
4. 设置 padding 或 margin
5. 设置字体的样式

页面布局整体思路

导航栏

导航栏注意点 :

• 实际开发中 , 我们不会直接用 a 链接而是用li+a链接的做法

下划线制作

• 把 a 标签转换为行内块元素

• 给 a 标签设置左右 padding 撑开盒子

• 给 a 添加一个下边框

  .goods ul li a {
        
  display: inline-block;
  padding: 0 30px;
  font-size: 16px;
  color: #050505;
  border-left: 1px solid gray;
  }
  

光标聚到输入框时去掉边框

input{
   
outline: none;
}

input:focus {
outline: none;
}

定位

定位可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置 , 并可以压住其他盒子

定位组成

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

定位 = 定位模式 + 边偏移

1. 定位模式

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2. 边偏移

   边偏移就是盒子移动的最终位置 .

边偏移属性	示例	描述
top	top :80px	顶端偏移量 , 定义元素相对于其父元素上边的距离
bottom	bottom:80px	底部偏移量 , 定义元素相对于其父元素下边的距离
left	left :80px	左侧偏移量 , 定义元素相对于其父元素左边的距离
right	right :80px	右侧偏移量 , 定义元素相对于其父元素右边的距离

静态定位 static

静态定位是元素的默认定位方式 , 无定位的意思

position: static;

相对定位 relative

相对定位是元素在移动位置的时候 , 是相对于它原来的位置来说的

position: relative;

相对定位的特点

1. 它是相对于自己原来的位置来移动的

2. 原来在标准流的位置继续占有 , 后面的盒子任然标准流的方式对待它 ( 不脱标 , 继续保留原来的位置)

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

绝对定位 absolute

绝对定位是元素在移动位置的时候 , 是相对于它祖先元素来说的

position: absolute;

绝对定位的特点

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

• 子绝父相

  子级是绝对定位的话 , 父级要用相对定位

  1. 子级绝对定位 , 不会占有位置 , 可以放到父盒子里面的任何一个地方 , 不会影响其他兄弟盒子
  2. 父盒子需要加定位限制子盒子在父盒子内显示
  3. 父盒子布局时 , 需要占有位置 , 因此父亲只能是相对定位

  相对定位经常用来作为绝对定位的父级

  总结 : 因为父级需要占有位置 , 因此是相对定位 , 子盒子不需要占有位置 , 则是绝对定位

固定定位 fixed

固定定位是元素固定于浏览器可视区域的位置 . 主要使用场景浏览页面滚动时元素的位置不会变

position: fixed;

固定定位的特点

1. 以浏览器的可视窗口为参照点移动元素

   • 跟父元素没有任何关系
   • 不随滚动条滚动

2. 固定定位不在占有原先的位置

   固定定位也是脱标的 , 其实固定定位可以看做一种特殊的绝对定位

固定定位小技巧 : 固定装置版心右侧位置

小算法 :

1. 让固定定位的盒子 left50% ,走到浏览器可视区 (可看做版心) 的一半位置 .
2. 让固定定位的盒子 margin -left 版心宽度的一半距离 . 多走版心宽度的一半位置 , 就可以让固定定位的盒子贴着版心右侧对齐了

.fixed {
    
     position: fixed;
     left: 50%;
     /* 走浏览器宽度的一半 */
     margin-left: 405px;
     /* 利用margin走版心盒子的一半 */
     width: 50px;
     height: 50px;
     background-color: greenyellow;
   }

粘性定位 sticky (了解)

position: sticky;
     top: 10px;

粘性定位的特点

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

跟页面滚动搭配使用, 兼容性较差 , IE 不支持

• 粘性定位 用