Sejinda

CSS学习笔记

CSS 学习

资料，参考

HTML

HTML简介

特殊符号

meta标签

元素类型

css引入方式

选择器

基础选择器

元素选择器

类选择器

ID选择器

属性选择器

通配选择器选择所有元素

交集选择器

并集选择器

关系选择器

子元素选择器

后代元素选择器

兄弟选择器

伪类选择器

伪元素选择器

练习

样式的继承

单位

长度

像素

百分比

rem

视窗单位

颜色

角度

deg

turn

grad

rad

盒子模型

内容区content

边框border

内边距padding

外边距margin

块元素的盒子模型

盒子的水平布局

盒子的垂直布局

外边距的折叠

行内元素的盒子模型

display

盒子的大小 box-sizing

练习

1、京东图片列表

2、网易新闻列表

轮廓&阴影&圆角

轮廓

阴影

圆角

图像边框

布局

float（浮动）

简介

特点

clear

简单总结

文档流

高度塌陷问题

如何解决高度塌陷？

解决高度塌陷和外边距重叠

练习

flex弹性盒子

弹性容器

弹性元素

练习

定位

相对定位

绝对定位

绝对定位的布局

固定定位

粘滞定位

元素的层级

练习

字体与文字

文字字体

字体相关的样式

使用网络字体

字体格式

图标字体

Font Awesome 使用步骤

图标字体的使用方式

阿里图标库使用步骤

图标字体库

行高

字体简写属性

文字常用属性

font-size

font-weight自重

font-style 字体风格

text-align 文本对齐方式

vertical-align

text-decoration 设置文本修饰

white-space 设置网页如何处理空白

overflow 设置父元素如何处理溢出的子元素

text-overflow 属性规定当文本溢出包含元素时发生的事情。

文字常用效果

文字超过父元素大小时自动省略

练习

背景

background-color 设置背景颜色

background-image 设置背景图片

background-repeat 设置背景的重复方式

background-position 用来设置背景图片的位置

雪碧图CSS-Sprite

设置背景的范围

background-clip 设置背景的边界

background-origin 背景图片的偏移量计算的原点

background-size 设置背景图片的大小

background-attachment背景图片是否跟随元素移动

背景图片简写属性

渐变

线性渐变

径向渐变

练习

表格

语义化表格

表格的合并

table-cell

表格的样式

表单

Form

Input

input type属性表

input type属性总结

1.单行文本框

2.密码框

3.单选按钮

5.多选框checbox

6.提交按钮submit

7.image

8.file

9.hidden

10.常用属性

下拉列表select

多行文本输入框textarea

按钮button

lable

fieldset

optgroup

datalist

动画

过渡效果 transition

transition-property: 指定要执行过渡的属性

transition-duration: 指定过渡效果的持续时间

transition-timing-function:设置过渡过程的加速曲线

transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡

简写属性

动画 animation

@keyframes关键帧

animation-duration: 动画的执行时间

animation-delay动画的延时，等待一段时间后在执行动画

animation-timing-function设置元素移动速度

animation-iteration-count 动画执行的次数

animation-direction指定动画运行的方向

animation-play-state: 设置动画的执行状态

animation-fill-mode: 动画的填充模式

animation简写

变形 transform

平移 translate

旋转 rotate

缩放 scale

设置3d变形效果

Z轴

练习

效果

元素透明效果

less

原声css对变量的支持

easy less插件

层级后代关系

注释

变量

选择器

混合函数

移动端

像素

视口 viewport

移动端完美视口

完美视口问题

VW单位

VW适配

练习

响应式布局

媒体查询

媒体特性

资料，参考

尚硅谷css3：

W3Cschool

菜鸟教程

http://img.zhaojishun.cn

MDN:MDN Web Docs

CSS3参考手册：点点范文网_范文大全_工作总结_个人工作总结

选择器游戏：CSS Diner - Where we feast on CSS Selectors!

及其中引入的链接

HTML

HTML及CSS补充

HTML简介

HTML 超文本标记语言 Hypertext Text Markup Language

特殊符号

在HTML中有些时候，我们不能直接书写一些特殊符号比如：多个连续的空格，比如字母两侧的大于和小于号

  空格         
> 大于号      >
< 小于号      <
© 版权符号    ©
®            ®

meta标签

charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

description 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中

title标签的内容会作为搜索结果的超链接上的文字显示

元素类型

块元素（block element）

在网页中一般通过块元素来对页面进行布局

行内元素（inline element）

行内元素主要用来包裹文字

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素

块元素中基本上什么都能放

p元素中不能放任何的块元素

css引入方式

1. 链接外部样式表



//"开发最佳，将样式编写到外部的CSS文件中，
可以使用浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验

2. 内联样式

2333

<问题：内联样式只针对单个标签，维护非常不便

3.定义内部样式表



<问题：只能对一个网页起作用

4. 嵌入外部样式表

选择器

MDN官方文档：如何构建 CSS - 学习 Web 开发 | MDN

基础选择器

元素选择器

div{
    border: aqua solid 2px;
}

类选择器

.demo01{
    border: aqua solid 0.3125rem;
}

ID选择器

ID选择器，id名字不能有空格
#demo01{
    border: aqua solid 0.3125rem;
}

属性选择器

官方文档Attribute selectors - CSS: Cascading Style Sheets | MDN

  /* 选择有type属性的元素 */
            [type] {
                color: #00FFFF;
            }
            /* 选择type属性是hello的元素 */
            [type="hello"] {
              
                color: cornflowerblue;
            }
            /* 选择title属性包含hello的元素 */
            [title*="hello"] {
                color: cornflowerblue;
            }
            /* 选择title属性是hello开头的元素 */
            [title^="hello"] {
                color: cornflowerblue;
            }
            /* 选择title属性是hello结尾的元素 */
            [title$="hello"] {
                color: cornflowerblue;
            }

通配选择器选择所有元素

*{
    color: #00FFFF;
}

交集选择器

选中既是div又class为red的元素

div.red{
    color: royalblue;
}

交集选择器如果有元素选择器，必须元素选择器在开头

并集选择器

作用：同时选择多个选择器对应的元素语法：选择器1,选择器2,选择器3,选择器n{}

span,a{
    color: skyblue;
}

关系选择器

父元素

        直接包含子元素的元素叫做父元素

子元素

        直接被父元素包含的元素是子元素

祖先元素

        直接或间接包含后代元素的元素叫做祖先元素

        一个元素的父元素也是它的祖先元素、

后代元素

        直接或间接被祖先元素包含的元素叫做后代元素

        子元素也是后代元素

兄弟元素

        拥有相同父元素的元素是兄弟元素


        我是div
            
                我是p元素
                我是p元素中span元素
            
            我是span元素

子元素选择器

直接被父元素包含的元素是子元素

选择div中span子元素

div > span {
    color: slateblue;
}

后代元素选择器

直接或间接被祖先元素包含的元素叫做后代元素

子元素也是后代元素

div span{
    color: steelblue;
}

兄弟选择器

拥有相同父元素的元素是兄弟元素

选择下一个兄弟


        我是div
            
                我是p元素
                我是p元素中span元素
            
            我是span元素
            我是span元素
            我是span元素
        

p + span{
    color: tan;
}

选择所有兄弟

p ~ span{
    color: tan;
}

伪类选择器

Pseudo-classes - CSS: Cascading Style Sheets | MDN

伪类（不存在的类，特殊的类）

    超链接伪类必须按 L V H A 的顺序书写    -

 *伪类用来描述一个元素的特殊状态
    比如：第一个子元素、被点击的元素、鼠标移入的元素...
      
       伪类一般情况下都是使用`:`开头
            :first-child  选择器匹配其父元素中的第一个子元素。
            :last-child   选择器用来匹配父元素中最后一个子元素。
            :nth-child()  选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

                n 可以是一个数字，一个关键字，或者一个公式。
               特殊值：
                   n 第n个 n的范围0到正无穷
                   2n 或 even 表示选中偶数位的元素
                   2n+1 或 `odd` 表示选中奇数位的元素
                - 以上这些伪类都是根据所有的子元素进行排序

            `:first-of-type` 选择器匹配元素其父级是特定类型的第一个子元素
            `:last-of-type`选择器匹配元素其父级是特定类型的最后一个子元素。
            `:nth-of-type()`选择器匹配元素其父级是特定类型的第n个子元素。
                - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序
                      
            - :not() 否定伪类
                      
            - 将符合条件的元素从选择器中去除
          
               
          
             `:link` 用来表示没访问过的链接（正常的链接）

*
 a:link{
      color: red;      
 }

:visited 用来表示访问过的链接 由于隐私的原因，所以visited这个伪类只能修改链接的颜色

 a:visited{
     color: orange; 
     /* font-size: 50px;   */
 }
:hover 用来表示鼠标移入的状态

a:hover{
      color: aqua;
      font-size: 50px;
 }
:active用来表示鼠标点击

a:active{
       color: yellowgreen;           
}

--------------------------------------------------------------------
 ul>span:first-child{
       color: rgb(27, 90, 214);
 }
 ul>li:nth-child(even):not(:last-child){
       color: darkcyan;
}
/*      只有最后一个孩子是span才生效 */
 ul>span:last-child{
       color: rgb(245, 26, 26);
}
-----------------------------------------------------------------------

        老父亲
        老大
        老二
        老三
        老四
        老幺

伪元素选择器

Pseudo-elements - CSS: Cascading Style Sheets | MDN

/* 伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置） 伪元素使用 :: 开头

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
- before 和 after 必须结合content属性来使用
               
    ```
/* 选择第一个字母*/     
  p::first-letter{
        font-size: 50px;
}
    ```
      
    ```
/*选择第一行 */           
  p::first-line{
         background-color: yellow; 
 }
    ```
                        
    ```
/*选中内容的样式 */ 
   p::selection{
          background-color: greenyellow;
}
    ```
         
    ```
/*元素的开始 */
    div::before{
          content: 'abc';
          color: red;
 }
    ```
         
    ```
/*元素的最后 */
     div::after{
           content: 'haha';
           color: blue;
 } 
    ```
选择器权重
样式的冲突
     - 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重
                内联样式        1,0,0,0
                id选择器        0,1,0,0
                类和伪类选择器   0,0,1,0
                元素选择器       0,0,0,1
                通配选择器       0,0,0,0
                继承的样式       没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,
                /*选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器*/
                如果优先级计算后相同，此时则优先使用靠下的样式
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，
                注意：在开发中(!important)一定要慎用！

练习

选择器在线游戏：CSS Diner - Where we feast on CSS Selectors!

样式的继承

样式的继承，我们
为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先和后代之间的
继承的设计是为了方便我们的开发，
                利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
                    这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承：
                比如 背景相关的，布局相关等的这些样式都不会被继承。

    
        我是一个p元素
        我是p元素中的span
    

    我是p元素外的span

    
        我是div
        
            我是div中的span
            我是span中的em
        
    

 p{
     color: red;
     background-color: orange;
}

 div{
      color: yellowgreen
}

单位

长度

像素

像素    
- 屏幕（显示器）实际上是由一个一个的小点点构成的    
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰    
- 所以同样的200px在不同的设备下显示效果不一样

百分比

百分比                       
- 也可以将属性值设置为相对于其父元素属性的百分比                       
- 设置百分比可以使子元素跟随父元素的改变而改变

em

em                       
- em是相对于元素的字体大小来计算的                       
- 1em = 1font-size（默认16px）                      
- em会根据字体大小的改变而改变

rem

rem                       
- rem是相对于根元素的字体大小来计算

ch

ch 
-1ch = 数字0的宽度

视窗单位

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）  
vh：视窗高度的百分比  
vmin：取当前Vw和Vh中较小的那一个值  
vmax：取当前Vw和Vh中较大的那一个值 
 
vh和vw相对于视口的高度和宽度， 1vh 等于1/100的视口高度， 1vw 等于1/100的视口宽度  

比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易实现与同屏幕等高的框。

颜色


颜色单位：
    颜色名：
        比如：red、orange、yellow、blue、green ... ...
        但是在css中直接使用颜色名是非常的不方便

    RGB值：
        - RGB通过三种颜色的不同浓度来调配出不同的颜色
        - R red，G green ，B blue
        - 每一种颜色的范围在 0 - 255 (0% - 100%) 之间
        - 语法：RGB(红色,绿色,蓝色)

    RGBA:
        - 就是在rgb的基础上增加了一个a表示不透明度
        - 需要四个值，前三个和rgb一样，第四个表示不透明度
         1表示完全不透明   0表示完全透明  .5半透明

    十六进制的RGB值：
        - 语法：#红色绿色蓝色
        - 颜色浓度通过 00-ff
        - 如果颜色两位两位重复可以进行简写  
          #aabbcc --> #abc
                  
    HSL值 HSLA值
          H 色相(0 - 360)
          S 饱和度，颜色的浓度 0% - 100%
          L 亮度，颜色的亮度 0% - 100%
                        
    HSLA
          A 透明度

角度

${\color{Red} }90deg = 100 grad = 0.25turn$

deg

度（Degress）。一个圆共360度

transform:rotate(90deg);

turn

转、圈（Turns）。一个圆共1圈

transform:rotate(.5turn);

grad

梯度。90度等于以100梯度

rad

弧度。

盒子模型

盒模型、盒子模型、框模型（box model）

1，CSS将页面中的所有元素都设置为了一个矩形的盒子

2，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

3，每一个盒子都由一下几个部分组成：内容区（content）内边距（padding）边框（border）外边距（margin）

内容区`content`

内容区（content），元素中的所有的子元素和文本内容都在内容区中排列

内容区的大小由width 和 height两个属性来设置，行内元素无法设置宽高，其大小被内容撑开

width 设置内容区的宽度

height 设置内容区的高度

边框`border`

/*
**边框**
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style

border-width: 10px; 

border默认值:一般都是 3px
*/
border-width可以用来指定四个方向的边框的宽度
值的情况
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右

/*
除了border-width还有一组 border-xxx-width
  xxx可以是 top right bottom left
  
用来单独指定某一个边的宽度
border-width: 10px; 
border-top-width: 10px;
border-left-width: 30px; 
color: red;
border-color用来指定边框的颜色，同样可以分别指定四个边的边框
                    规则和border-width一样
border-color也可以省略不写，如果省略了则自动使用color的颜色值
border-color: orange red yellow green;
border-color: orange;
*/             
border-style 指定边框的样式
                    solid 表示实线
                    dotted 点状虚线
                    dashed 虚线
                    double 双线
                    
border-style的默认值是none 表示没有边框
/*
border-style: solid dotted dashed double;
             border-style: solid; 

             border-width: 10px;
             border-color: orange;
             border-style: solid;

border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
除了border以外还有四个 border-xxx
                    border-top
                    border-right
                    border-bottom
                    border-left
*/
 border: solid 10px orange; 
              border-top: 10px solid red;
              border-left: 10px solid red;
              border-bottom: 10px solid red; 

              border: 10px red solid;
              border-right: none;

内边距`padding`

内容区和边框之间的距离是内边距

一共有四个方向的内边距：

内边距的设置会影响到盒子的大小背景颜色会延伸到内边距上

一个盒子的可见框的大小，由内容区内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算

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

padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width 一样

padding: 10px 20px 30px 40px;
padding: 10px 20px 30px ;
padding: 10px 20px ;
padding: 10px ;

外边距`margin`

外边距要点
外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置
一共有四个方向的外边距： `margin-top` 上外边距，设置一个正值，元素会向下移动 `margin-right`默认情况下设置margin-right不会产生任何效果 `margin-bottom`下外边距，设置一个正值，其下边的元素会向下移动 `margin-left`左外边距，设置一个正值，元素会向右移动
margin也可以设置负值，如果是负值则元素会向相反的方向移动

元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们 `设置的左和上外边距会移动元素自身` 而 `设置下和右外边距会移动其他元素`

margin的简写属性 margin 可以同时设置四个方向的外边距，用法和padding一样

margin会影响到盒子实际占用空间

/* margin-top: 100px;
   margin-left: 100px;
   margin-bottom: 100px; */

   margin-bottom: 100px;
/* margin-top: -100px; */
   margin-left: -100px; 
/* margin-bottom: -100px; */

/* margin-right: 0px; */

  margin: 100px;

块元素的盒子模型

盒子的水平布局

.outer{
   width: 800px;
   height: 200px;
   border: 10px red solid;
 }

.inner{
/* width: auto;  width的值默认就是auto*/
   width: 200px;
   height: 200px;
   background-color: #bfa;
   margin-right: auto;
   margin-left: auto;
            /* margin-left: 100px;
            margin-right: 400px */
            /* 
 元素的水平方向的布局：
     元素在其父元素中水平方向的位置由以下几个属性共同决定“
    ···················
     1   margin-left  1
     1   border-left  1
     1   padding-left 1
     1   width        1
     1   padding-right1
     1   border-right 1
     1   margin-right 1
    ·····················
     一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）
#################################################
         0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
         0 + 0 + 0 + 200 + 0 + 0 + 600 = 800

         100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
         100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
 ###################################################   
   - 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
    - 调整的情况：
          - 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足
    
    
    - 这七个值中有三个值可以设置为auto
        *******************************
        *                       优先级 *
        *  width                 1000 *
        *  margin-left           100  *
        *  maring-right          100  *
        *******************************
    - 如果某个值为auto，则会自动调整为auto的那个值以使等式成立
    
    ￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥
           0 + 0 + 0 + auto + 0 + 0 + 0 = 800  auto = 800
           0 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 600
           200 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 400
           auto + 0 + 0 + 200 + 0 + 0 + 200 = 800  auto = 400
           auto + 0 + 0 + 200 + 0 + 0 + auto = 800  auto = 300
    ￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥
   - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
   - 如果将三个值都设置为auto，则外边距都是0，宽度最大
   - 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
        所以我们经常利用这个特点来使一个元素在其父元素中水平居中
           示例：
              width:(xxx)px;
              margin:0 auto;
             */
  }

盒子的垂直布局

.outer{
    background-color: #bfa;
    height: 600px;
 /* 
     默认情况下父元素的高度被内容撑开
 */
  }
 .inner{
    width: 100px;
    background-color: yellow;
    height: 100px;
    margin-bottom: 100px;  
 }

 .box1{
    width: 200px;
    height: 200px;
    background-color: #bfa;
  /* 
  子元素是在父元素的内容区中排列的，
       如果子元素的大小超过了父元素，则子元素会从父元素中溢出
       使用 *| overflow |* 属性来设置父元素如何处理溢出的子元素
     
       overflow:
            属性：
                visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
                hidden 溢出内容将会被裁剪不会显示
                scroll 生成两个滚动条，通过滚动条来查看完整的内容
                auto 根据需要生成滚动条

                overflow-x: 处理水平方向
                overflow-y: 处理垂直方向
             */
     overflow: auto;   
 }

.box2{
   width: 100px;
   height: 400px;
   background-color: orange;
}

外边距的折叠

相邻的垂直方向外边距会发生重叠现象

兄弟元素

        兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）

        特殊情况：

                如果相邻的外边距一正一负，则取两者的和

                如果相邻的外边距都是负值，则取两者中绝对值较大的

  兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

父子元素

父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

父子外边距的折叠会影响到页面的布局，必须要进行处理

解决方式

.clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }

行内元素的盒子模型

行内元素的盒模型
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding、border、margin，垂直方向三者不会影响页面的布局

display

display 用来设置元素显示的类型
     可选值：
         inline 将元素设置为行内元素
         block 将元素设置为块元素
         inline-block 将元素设置为行内块元素 行内块，既可以设置宽度和高度又不会独占一行
         table 将元素设置为一个表格
         table-cell 将元素设置为单元格
         none 元素不在页面中显示

visibility 用来设置元素的显示状态
     可选值：
          visible 默认值，元素在页面中正常显示
          hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置

盒子的大小 box-sizing

 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
        
box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）           
        可选值：                 
                 content-box： 默认值，宽度和高度用来设置《内容区的大小》                 
                 border-box： 宽度和高度用来设置整个《盒子可见框的大小》，width 和 height             
指的是内容区 和 内边距 和 边框的总大小

.box1{
   width: 100px;
   height: 100px;
   background-color: #bfa;
   padding: 10px;
   border: 10px red solid;
 
          
         box-sizing: border-box;
}

练习

1、京东图片列表




    
    
    Document

2、网易新闻列表




    
    
    仿网易新闻列表
    
    


    
        
            
                财经
            
        
        
            
                
                瑞幸资本帝国雪崩倒计时
            
        
        
            
                清流|泰禾失信调查:或违规隐瞒巨额交易
            
            
                "三桶油"齐发声:接受"至暗时刻"的挑战
            
            
                蒋凡被除名阿里合伙人 对张大奕无利益输送
            
            
                李国庆否认抢当当公章：没有任何撕扯

轮廓&阴影&圆角

轮廓

outline 用来设置元素的轮廓线，用法和border一模一样，轮廓和边框不同的点，就是轮廓不会影响到可见框的大小

 outline: salmon 10px solid;
.box1{
            height: 200px;
            width: 200px;
            background-color: royalblue;
            outline: salmon 10px solid;
        }


    
    hello

阴影

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局

第一个值水平偏移量设置阴影的水平位置正值向右移动负值向左移动

第二个值垂直偏移量设置阴影的水平位置正值向下移动负值向上移动

第三个值阴影的模糊半径

第四个值阴影的颜色

 box-shadow: 20px 20px 50px rgba(0, 0, 0, .7);

.box1{
            height: 200px;
            width: 200px;
            background-color: royalblue;
            margin: 50px auto;
            box-shadow: 20px 20px 50px rgba(0, 0, 0, .7);
        }

圆角

border-radius: 用来设置圆角圆角设置的圆的半径大小
border-top-left-radius:10px          以10px为半径左上角画圆
border-top-right-radius：10px,50px   以x轴10px为半径，y轴50px为半径画椭圆
`border-bottom-left-radius:`
`border-bottom-right-radius:`
`border-top-left-radius:50px 100px;

border-radius:20px/40px  x轴 -----> 20px
                        y轴         40px
border-radius 可以分别指定四个角的圆角

顺时针旋转，

四个值左上右上右下左下

三个值左上右上/左下右下

两个值左上/右下右上/左下

border-radius: 50%;将元素设置为一个圆形

border-radius: 0px 60px 0px 60px;

.box1{
            height: 200px;
            width: 200px;
            background-color: royalblue;
            margin: 50px auto;
            border-radius: 0px 60px 0px 60px;
        }

图像边框

border-image，可以使用图片来创建边框。

border-image属性是一个简写属性，用于设置

–图片地址border-image-source

–图片切割border-image-slice

–图片宽度border-image-width

–图片外凸border-image-outset

–图片重复border-image-repeat

–如果省略，默认值为none、100%、1、0和stretch。

border-image-slice

border-image-slice不允许负值，设置负值和设置的值大于盒子的高度或宽度都被置为100%。
fill：保留图像的中间部分

该属性指定从上、右、下、左方位来切割图像，将图像分成4个角、4条边和中间区域共9份，俗称“九宫格”

border-image-outset

border-image-outset属性用于指定边框图像向外扩展的数值，如值为10px，表示图像在原来所在位置的基础上往外扩展10px显示。

简写

border-image:url("图片路径") 几个方向的切割值 /图片宽度图像拉伸

#border-image-1 {
    -webkit-border-image: url("images/border-image.png")  27 27 27 27 /14px stretch;
    -o-border-image: url("images/border-image.png")  27 27 27 27 /14px stretch;
    border-image: url("images/border-image.png")  27 27 27 27 /14px stretch;
}

//-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。
firefox(-moz)、opera(-o)、chrome/safari（-webkit)。

布局

float（浮动）

简介

通过浮动可以使一个元素向其父元素的左侧或右侧移动

使用 float 属性来设置于元素的浮动

可选值：

none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动

注意，

**元素设置浮动以后，水平布局的等式便不需要强制成立**
**元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，**
**所以元素下边的还在文档流中的元素会自动向上移动**

特点

浮动元素会完全脱离文档流，不再占据文档流中的位置
设置浮动以后元素会向父元素的左侧或右侧移动，
浮动元素默认不会从父元素中移出
浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果，单词太长，空间装不下，会跳行，需设置word-break:break all;
在设置浮动的情况下，要考虑优先级

clear

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响

clear

作用：清除浮动元素对当前元素所产生的影响
可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧

原理：
    设置清除浮动以后，浏览器会自动为元素添加一个上外边距，
 以使其位置不受其他元素的影响

####

简单总结

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局,有高度的盒子才能关住浮动

文档流

文档流（normal flow）

一、网页特点：       
       - 网页是一个多层的结构，一层摞着一层
        - 通过CSS可以分别为每一层来设置样式
        
        - 作为用户来讲只能看到最顶上一层
        - 这些层中，最底下的一层称为文档流，文档流是网页的基础（可以理解为ps中的图层）
        
二、元素所在网页的位置：        
        - 元素主要有两个状态:
            1,在文档流中(创建的元素默认都是在文档流中)
            2,不在文档流中（脱离文档流）
            
三、元素在文档流中的特点：
        - ①块元素
            - 块元素会在页面中独占一行(自上向下垂直排列)
            - 默认宽度是父元素的全部（会把父元素撑满）
            - 默认高度是被内容撑开（子元素）
            
           ②行内元素
            - 行内元素不会独占页面的一行，只占自身的大小
            - 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素， 则元素会换到第二行继续自左向右排列（书写习惯一致）
            - 行内元素的默认宽度和高度都是被内容撑开

元素脱离文档流后特点

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

块元素：
- 块元素不在独占页面的一行
- 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
行内元素：
- 行内元素脱离文档流以后会变成块元素，特点和块元素一样
脱离文档流以后，不需要再区分块和行内了

高度塌陷问题

效果：我们希望父元素的大小被子元素的内容撑开，父元素随着子元素大小的改变而改变

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！


        
 

 
.outer{
    border: 10px red solid;
 }

 .inner{
     width: 100px;
     height: 100px;
     background-color: #bfa;
     float: left;
}

结果效果

如何解决高度塌陷？

1、为父元素设置BFC（块元素格式化环境）

为父元素开启浮动，但是会产生重叠问题
在父元素中，设置display:inline-block;但是宽度会消失
overflow:hidden;

2、使用伪元素::after

3、使用clear

BFC解决方式

为父元素开启BFC来包裹浮动的子元素

官方文档：块格式化上下文 - Web 开发者指南 | MDN

BFC(Block Formatting Context) 块级格式化环境

BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域

元素开启BFC后的特点：

1.开启BFC的元素不会被浮动元素所覆盖

2.开启BFC的元素子元素和父元素外边距不会重叠

3.开启BFC的元素可以包含浮动的子元素

 - 可以通过一些特殊方式来开启元素的BFC：
 
 /*   1、设置元素的浮动<产生重叠>）

      2、将元素设置为行内块元素<宽度会消失>（不推荐）

      3、将元素的overflow设置为一个非visible的值
         - 常用的方式 为元素设置 **overflow:hidden** 开启其BFC 以使其可以包含浮动元素
*/
.outer{
     border: 10px red solid;
     overflow: hidden;
}
.inner{
     width: 100px;
     height: 100px;
     background-color: #bfa;
     float: left;
}

效果

after伪类解决方式

使用::after实现父元素的大小被子元素的内容撑开，父元素随着子元素大小的改变而改变

原理：在父元素里添加了一个空的块(block),并设置clear为其添加一个上外边距，从而以阻止其塌陷。

.box1{
            border: 5px solid #000000;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: skyblue;
            float: left;
        }
        .box1::after{
            content: '';
            display: block;
            clear: both;
        }

解决高度塌陷和外边距重叠

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

练习

仿w3c导航条




    
    
    Document
    
    


    
        HTML/CSS
        Bowser Side
        Server Side
        Programming
        XML
        WebBuilding
        Rederence

flex弹性盒子

是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
- flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
- 弹性容器
- 要使用弹性盒，必须先将一个元素设置为弹性容器
- 我们通过 display 来设置弹性容器
- display:flex 设置为块级弹性容器
- display:inline-flex 设置为行内的弹性容器
```
     - 弹性元素
         - 弹性容器的子元素是弹性元素（弹性项）
         - **弹性元素可以同时是弹性容器**
```

弹性容器

flex-direction 指定容器中弹性元素的排列方式

row 默认值，弹性元素在容器中水平排列（左向右）主轴自左向右
row-reverse 弹性元素在容器中反向水平排列（右向左）主轴自右向左
column 弹性元素纵向排列。主轴自上向下
column-reverse 弹性元素方向纵向排列。主轴自下向上

主轴： 弹性元素的排列方向称为主轴

侧轴： 与主轴垂直方向的称为侧轴

四种排列方式

flex-direction: row;

flex-wrap设置弹性元素是否在弹性容器中自动换行

设置弹性元素是否在弹性容器中自动换行，当弹性容器一行容纳不下子元素时，子元素会不会换到第二行.

nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

flex-flow简写属性

wrap 和 direction 的简写属性方向换行

flex-flow: row wrap;

justify-content主轴上的空白空间的分布

flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 每个项目两侧的间隔相等。
space-between 两端对齐，项目之间的间隔都相等。
space-evenly 元素之间和元素距离边距的距离都相等(兼容性不好，不推荐使用)

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-around;

justify-content: space-between;

justify-content: space-evenly;

测试代码

align-items元素在 辅轴上如何对齐

stretch 默认值，将元素的长度设置为相同的值
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐

测试代码

align-content:多轴线对齐方式

align-content:确定存在多行时，flex项目在侧轴的排列方式，必须要有flex-wrap:wrap才能触发

如果项目只有一根轴线，该属性不起作用。

flex-start 元素沿着辅轴起边排列
flex-end 元素沿着辅轴终边排列
center 元素居中排列
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
stretch 轴线占满整个交叉轴。(前提是子元素不能设置高度)

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-around;

align-content: space-between;

垂直水平居中

align-items: center;
justify-content: center;

弹性元素

flex-grow 指定弹性元素的伸展的系数

当父元素有多余空间的时，子元素如何伸展
父元素的剩余空间，会按照比例进行分配，数值越高，权重越高。0表示不伸展(默认为0)
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-grow: 1;

flex-shrink 指定弹性元素的收缩系数

当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩，数值越高，权重越高，0表示不收缩

flex-shrink: 1;

flex-basis 指定的是元素在主轴上的基础长度

如果主轴是横向的则该值指定的就是元素的宽度
如果主轴是纵向的则该值指定的是就是元素的高度
默认值是 auto，表示参考元素自身的高度或宽度
如果传递了一个具体的数值，则以该值为准

flex-basis: 20px;

简写属性flex

flex 可以设置弹性元素所有的三个样式

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

flex: 1 1 auto;

order设置弹性元素的排序顺序

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.box1{
            background-color:tomato;
            order: 4;
        }
        .box2{
            background-color: lightgreen;
            order: 3;
        }
        .box3{
            background-color: lightsalmon;
            order: 2;
        }
        .box4{
        background-color:mediumpurple;
        order: 1;
        }

align-self 用来覆盖当前弹性元素上的align-items

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可取6个值，除了auto，其他都与align-items属性完全一致。

flex-start,flex-end,center,strech,baseline

align-self: flex-end;

练习

仿淘宝分类

定位

定位（position）

定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位可选值： static 默认值，元素是静止的没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位

相对定位

相对定位：

当元素的position属性值设置为relative时则开启了元素的相对定位

相对定位的特点：

1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化

2.相对定位是参照于元素在文档流中的位置进行定位的

3.相对定位会提升元素的层级

4.相对定位不会使元素脱离文档流

5.相对定位不会改变元素的性质块还是块，行内还是行内

偏移量（OFFSET）	当元素开启了定位以后，可以通过偏移量来设置元素的位置
top	定位元素和定位位置上边的距离
bottom	定位元素和定位位置下边的距离
left	定位元素和定位位置的左侧距离
right	定位元素和定位位置的右侧距离

定位元素垂直方向的位置由top和bottom两个属性来控制
	通常情况下我们只会使用其中一

- top值越大，定位元素越向下移动
- bottom值越大，定位元素越向上移动
  
  ----------------------------------------------------- 

- 定位元素水平方向的位置由left和right两个属性控制
 	 通常情况下只会使用一个

- left越大元素越靠右
- right越大元素越靠左

.box1{
    height: 200px;
    width: 200px;
    background-color: springgreen;
 }

.box2{
    height: 200px;
    width: 200px;
    background-color:steelblue;
    position: relative;
    left: 200px;
    top: -200px;
}
.box3{
     height: 200px;
     width: 200px;
     background-color:tan;
}

绝对定位

当元素的position属性值设置为absolute时，则开启了元素的绝对定位

包含块( containing block )
   - 正常情况下：
         包含块就是离当前元素最近的祖先元素
         
绝对定位的包含块:
      	包含块就是**离它最近**的**开启了定位**的**祖先元素**，
        **如果所有的祖先元素都没有开启定位则根元素就是它的包含块**
        html（根元素、初始包含块）

绝对定位的特点：

1.开启绝对定位后，如果不设置偏移量元素的位置(相对于父元素的位置)不会发生变化

2.开启绝对定位后，元素会从文档流中脱离

3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

4.绝对定位会使元素提升一个层级

5.绝对定位元素是相对于其包含块进行定位的

1

    
        4
        
            5
            2
        
    
    3
body{
            font-size: 60px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            /* left: 0;
            top: 0; */
            bottom: 0;
            right: 0;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;

        }

        .box4{
            width: 400px;
            height: 400px;
            background-color: tomato;
            position: relative;
        }
      
        .box5{
            width: 300px;
            height: 300px;
            background-color: aliceblue;
            /* position: relative; */
        }

绝对定位的布局

水平布局
- 布局公式left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度**
- 当我们开启了绝对定位后: 水平方向的布局等式就需要添加left 和 right 两个值此时规则和之前一样只是多添加了两个值：当发生过度约束（即上面等式不成立）：如果9个值中没有 auto 则自动调整right值以使等式满足如果有auto，则自动调整auto的值以使等式满足，如果都是aotu调整顺序：宽高>偏移量>外边距
```
- 可设置auto的值
   margin width left right
   - 因为**left 和 right的值默认是auto**，所以如果不指定left和right则等式不满足时，会自动调整这两个值
```
  垂直方向布局的等式的也必须要满足 top + margin-top/bottom + padding-top/bottom + border-top/bottom +bottom = 包含块的高度


    

.box1{
    width: 500px;
    height: 500px;
    background-color: #bfa;

    position: relative;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;

    top: 0;
    bottom: 0;
}

固定定位

固定定位：

将元素的position属性设置为fixed则开启了元素的固定定位
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样唯一不同的是固定定位永远参照于浏览器的视口进行定位固定定位的元素不会随网页的滚动条滚动

1

    
        4
        
            5
            2

        
    

    3
body{
            font-size: 60px;
            height: 2000px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: fixed;
            left: 0;
            top: 0;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;

        }

        .box4{
            width: 400px;
            height: 400px;
            background-color: tomato;

        }
        .box5{
            width: 300px;
            height: 300px;
            background-color: aliceblue;
        }

粘滞定位

当元素的position属性设置为sticky时则开启了元素的粘滞定位一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
不推荐使用，兼容性不高


        
            HTML/CSS
        
        
            Browser Side
        
        
            Server Side
        
        
            Programming
        
        
            XML
        
        
            Web Building
        
        
            Reference
        
     
body{
            height: 3000px;
        }
      
        .nav{
            width: 1210px;
            height: 48px;
            background-color: #E8E7E3;
            margin:100px auto;
             position: sticky;
             top: 10px;

        }

        /* 设置nav中li */
        .nav li{
            float: left;
            line-height: 48px;

        }

        /* 设置a的样式 */
        .nav a{
            display: block;
            text-decoration: none;
            color: #777777;
            font-size: 18px;
            padding: 0 39px;
        }

        .nav li:last-child a{
            padding: 0 42px 0 41px;
        }

        /* 设置鼠标移入的效果 */
        .nav a:hover{
            background-color: #3F3F3F;
            color: #E8E7E3;
        }

元素的层级

对于开启了定位的元素，可以通过z-index属性来指定元素的层级， z-index需要一个整数作为参数，

值越大元素的层级越高元素的层级越高越优先显示

如果元素的层级一样，则优先显示靠下(代码段)的元素

祖先的元素的层级再高也不会盖住后代元素。

1
    2
    3
        4
    
body{
            font-size: 60px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: absolute;
                /* z-index: 3; */
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: rgba(255 , 0, 0, .3);
            position: absolute;
            top: 50px;
            left: 50px;
            /* z-index: 3; */

        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 3;

        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
        }

练习

仿京东

字体与文字

文字字体

字体相关的样式

				color 用来设置字体颜色
                font-size 字体的大小
                    和font-size相关的单位
                    em 相当于当前元素的一个font-size
                    rem 相对于根元素的一个font-size
                font-family 字体族（字体的格式）
                    可选值：
                        serif  衬线字体(字母有触角)
                        sans-serif 非衬线字体(H)
                        monospace 等宽字体(和衬线字体类似)
                        cursive 草书字体
                        fantasy 奇幻字体
                        - 指定字体的类别，浏览器会自动使用该类别下的字体

            - font-family 可以同时指定多个字体，多个字体间使用,隔开
                字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
font-family: 'Courier New', Courier, monospace;

使用网络字体

@font-face可以将服务器中的字体直接提供给用户去使用

好处：字体不会失真

问题： 1.加载速度 2.版权 3.字体格式

@font-face {
/* 指定字体的名字 */
            font-family:'myfont' ;
/* url 服务器中字体的路径   format 指定字体格式*/
            src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
    		font-weight:bold;
    		font-style:italic;
}

//引用
p {
            font-family:'myfont' ;
}

hello world

字体格式

字体格式类型主要有：TrueType、.eot、.otf、.wff、.svg

–TrueType：Windows和Mac系统使用的字体格式，由数学模式进行定义基于轮廓的字体。

–Embedded Open Type（.eot）：EOT是嵌入式字体，由微软开发允许OpenType字体用@font-face嵌入到网页。

–WebOpen Font Format（.woff）：WOFF是专门为Web设计的字体格式标准，实际上是对TrueType和OpenType等字体格式的封装，字体文件被压缩，以便于网络传输。

–SVG（Scalable Vector Graphics）Fonts（.svg）：SVG是W3C制定的开放标准图形格式。SVG字体使用SVG技术呈现，还有一种gzip压缩格式的SVG字体。

图标字体

图标字体（iconfont）

在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活

(1、图片太大容易失真，2、不容易调节大小)
所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入
这样我们就可以通过使用字体的形式来使用图标

Font Awesome 使用步骤

		1.下载 https://fontawesome.com/
        2.解压
        3.将css和webfonts移动到项目中
        4.将all.css引入到网页中
        5.使用图标字体

图标字体的使用方式

1，直接通过类名来使用图标字体

A1	B1	C1	D1
A2	B2	C2	D2
A3	B3	C3	D2
A4	B4	C4

背景的图片 < 元素背景图片自动在元素中平铺铺满
背景的图片 > 元素背景图片有一部分不会显示
背景的图片 = 元素正常显示

行高
直接指定一个大小（px em）
直接为行高设置一个整数(行高是字体的指定倍数)

line-height:默认值1.333(是字体的1.333倍)

账单
日期	收入	支出	合计
2000.1.1	500	200	300
2000.1.1	500	200	300
		合计	300

DISPLAY:TABLE-CELL
指让标签元素以表格单元格的形式呈现
display：table-cell属性会被float，position：absolute等属性破坏效果，应避免同时使用。