css3详细

CSS

css三大属性

层叠性

• 一个标签可以有多个css样式
• 浏览器处理冲突的能力，如果一个属性通过两个相同的选择器设置到这个元素上，会根据样式的层叠规则。
• 样式的层叠规则——按照样式的声明顺序来层叠的【就近原则】
• 选择器必须是同一种
• 样式不冲突不会层叠

继承性

子标签会继承父标签的某些样式，比如文本颜色和字号

优先级

权重:

1. 继承的权重是0——最低
2. 行内样式的权重是100
3. 权重相同的——就近原则
4. ！important命令——无限大
5. css权重公式——贡献值
6. 继承、*——0000
7. 标签选择器——0001
8. 类、伪类选择器——0010
9. id选择器——0100
10. 行内样式——1000
11. ！important——无穷大
12. width，height——大于无穷大
13. 权重不能被继承
14. 贡献值是没有进位的
15. 如果同时有！important与max-width，max-height
16. ！important是不管用的

常用单位

px像素：最常用
em：绝对单位，由父类的字号决定，比如父级的字号是16px，可以设置成2em（32px）
rem：绝对单位，由整个html的字号决定的，页面的字号也会发生变化
百分比：相对于父元素的比例

字体大小

​font-size: 20px;
​/* 字体样式 /
​font-style: italic;
​/ 字体粗细 /
​font-weight: bold;
​/ 字体修饰 /
​text-decoration:line-through;
​/ 字体 /
​font-family: monospace;
​/ 复合属性 */
​font: 130px italic bolder ;

背景

一般情况下不要既有背景颜色又有背景图片

/* background-color: rgba(255,255,0); /
​/ 设置颜色可以用——英语、十六进制、如果部、rgb、rgba /
​width: 1200px;
​height: 1200px;
​/ 背景图片 /
​background-image: url(…/…/2022-8-22/morning/img/a.webp);
​/ 背景大小 /
​background-size: 1200px;
​/ 背景图片不重复 /
​background-repeat:no-repeat;
​/ 背景的位置 */
​background-position: center;

列表

list-style-type:lower-greek;
       ​list-style-image: url(../../2022-8-22/morning/img/a.webp);

圆角

        ​width: 200px;
       ​height: 200px;
       ​background-color: yellow;
       ​/* 圆角 */
       ​border-radius:15px;
       ​/* 左下圆角 */
       ​border-bottom-left-radius: 68px;
       ​/* 虚线 */
       ​border-style: dashed;

区块属性

盒子模型

        ​width: 300px;
       ​height: 300px;
       ​background: rgb(238, 107, 107);
       ​/* 外边距 */
       ​margin : 100px;
       ​/* 盒子的边框线宽度,颜色,边框线 */
       ​border: 10px blueviolet solid;
       ​/* 内边距 */
       ​padding-top: 10px;
       ​/* 保证盒子的大小是300*300 盒子的外边距是 不包括的 */
       ​box-sizing: border-box;
       ​/* 保证当前div的尺寸是300*300 不包含内边距和边框线 */
       ​box-sizing: content-box;

定位

文档流

在网页中将窗体自上到下的分成多行
在每一行从左到右的顺序排列元素——即为文档流
网页默认的布局方式
定位position

• static：文档流，默认的
• absolute：绝对定位

相对于一个父元素的绝对定位
当设置了绝对定位之后，原来的元素脱离了文档流。会在页面上浮起来。

• relative：相对定位

相对于上一个元素的位置的定位

• fixed：固定定位

        ​/* 居中 */
       ​margin: center;
       ​/* 固定定位 */
       ​position: fixed;
       ​/* z轴的索引 */
       ​z-index:1080;

子绝父相

子元素是绝对定位
父元素是相对定位

定位left与盒子模型margin-left有什么区别

定位left是相对于父元素的位置，margin是相对于自己的位置
left是定位的属性
可见性

visibility：

        ​visibility: hidden; /*隐藏*/

溢出策略

overflow:scroll;
div{
width: 50px;
height: 500px;
overflow: hidden;
display: inline-block;
}
    div:hover{
        overflow:visible;
        width:885px;
    }

浮动

在视觉格式化模型中，页面中盒子的排列方式分为三种：

1. 常规流

2. 浮动

3. 定位

浮动的基本特点：

当一个元素浮动后，该元素一定会成为块盒（display为block）;

例子：

a元素是一个inline，行盒。

当设置浮动后，float: left；在浏览器的开发工具中查看，它的display属性已经从inline(行盒)，变成了block(块盒)。

a {
    float: left;
  }

浮动盒子的排列方式：

• none: 默认值，不浮动，为常规流

• left: 靠上靠左排列

• right: 靠上靠右排列

浮动盒子向左或向右移动，直到它外边框碰到父元素的padding或者碰到另一个浮动盒子的边框为止

动画 css3兼容性的问题

/*延迟*/
div{
/* 针对于火狐浏览器 /
/ -moz-transform: ; /
/ 针对于Safari 和Google /
/ -webkit-transform: ; /
/ 针对于Opera /
/ -o-transform: ; */

        /* Transition -延迟转换*/
        width: 100px;
        height: 100px;
        background-color: orange;
        transition: width 1s  3s,height 3s ease-in,background-color ease-out 3s;
    }
    div:hover{
        width: 500px;
        height: 500px;
        background-color: aqua;
    }

transition与animate的区别

transition只能通过固定的属性来开始与结束值
animate可以一帧一帧的去实现效果

案例

    ​.size {
       ​width: 200px;
       ​height: 200px;
       ​border-top-right-radius: 65px;
       ​border-bottom-left-radius: 65px;
       ​background-color: green;
       ​position: relative;
       ​left: 100px;
       ​top: 100px;
   ​}

   ​.size1 {
       ​width: 200px;
       ​height: 200px;
       ​border-bottom-right-radius: 65px;
       ​border-top-left-radius: 65px;
       ​background-color: orange;
       ​position: relative;
       ​left: 100px;
       ​
   ​}

   ​.size2 {
       ​width: 200px;
       ​height: 200px;
       ​border-bottom-right-radius: 65px;
       ​border-top-left-radius: 65px;
       ​background-color: blue;
       ​position: relative;
       ​right: 0px;
       ​top: 100px;
   ​}

   ​.size3 {
       ​width: 200px;
       ​height: 200px;
       ​border-top-right-radius: 65px;
       ​border-bottom-left-radius: 65px;
       ​background-color: red;
   ​}

   ​.a {
       ​width: 300px;
       ​height: 300px;
       ​background: rgb(5, 230, 5);
       ​border-top-left-radius: 50px;
   ​}

   ​.b {
       ​width: 300px;
       ​height: 300px;
       ​background: rgb(12, 101, 235);
       ​border-top-right-radius: 50px;
   ​}

   ​.c {
       ​width: 300px;
       ​height: 300px;
       ​background: rgb(246, 136, 33);
       ​border-bottom-left-radius: 50px;
   ​}

   ​.d {
       ​width: 300px;
       ​height: 300px;
       ​background: rgb(238, 107, 107);
       ​border-bottom-right-radius: 50px;
   ​}
​<table border="0" cellspacing="0px">
   ​<tr>
       ​<td>
           ​<div class="a">
               ​<div class="size back"></div>
           ​</div>

       ​</td>
       ​<td>
           ​<div class="b">
               ​<div class="size2 back"></div>
           ​</div>
       ​</td>
   ​</tr>
   ​<tr>
       ​<td>
           ​<div class="c">
               ​<div class="size1 back"></div>
           ​</div>
       ​</td>
       ​<td>
           ​<div class="d">
               ​<div class="size3 back"></div>
           ​</div>

       ​</td>
   ​</tr>

后端必须掌握

1. 选择器【十分重要】
2. css三大特征：层叠性，继承性，优先级
3. 盒子模型
4. 定位
5. 浮动，清除浮动（****）
6. 常见的属性——字体，背景，列表，边框等等
7. 元素的隐藏，元素内容的溢出，【overflow，fisplay，visibility】
8. 【开发中，推荐使用外部引入的方式】