RGB以及文档流

继承

<!DOCTYPE html> <html lang=en> <head>     <meta charset=UTF-8>     <meta name=viewport content=width=device-width, initial-scale=1.0>     <title>Document</title>     <style>         body{             font-size: 30px;         }         p{             /*              为一个元素设置样式同样会应用到他的后代元素             继承是发生在祖先元素和后代元素中的             方便我们开发，利用继承可以将一些通用样式统一设置到同一个祖先元素中              并不是所有样式都会继承，比如背景相关和样式相关的             */             color: red;             background-color: aqua;         }     </style> </head> <body>     <p>         <!--P元素中不能放任何块元素  -->         我是一个p元素         <span>我是p元素中的span</span>     </p>      <span>我是p元素外面的p元素</span> </body> </html>

选择器的权重

样式的权重

 <!DOCTYPE html> <html lang=en> <head>     <meta charset=UTF-8>     <meta name=viewport content=width=device-width, initial-scale=1.0>     <title>Document</title>     <style>         #box1{             color: blue;         }         div{             color: red;         }          .red{             color: aqua !important;         }         /*          样式冲突，取决于选择器的权重/优先级决定         选择器的权重             内联样式  1000 div里面的style=color:             id选择器  100             类和为类选择器 10             元素选择器 1             通配选择器 0             继承样式 无优先级              比较优先级时，需要将所有的选择器优先级进行相加计算，最后优先级越高，越先显示             选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器             如果优先级相等则优先显示最下方的样式             在开发中!important慎用 能不用就不用         */          div#box1{             color: brown;         }          div{             font-size: 20px;         }          *{             font-size: 50px;         }     </style> </head> <body>     <div id=box1 class=red >我是一个div         <span>我是div中的span</span>     </div> </body> </html>

像素与百分比以及长度单位em rem

查看代码

 <!DOCTYPE html> <html lang=en> <head>     <meta charset=UTF-8>     <meta name=viewport content=width=device-width, initial-scale=1.0>     <title>Document</title>     <style>          html{             font-size: 50px;         }         .box1{             /*              长度单位                 像素                     屏幕实际是由一个一个小方块构成的                     不同屏幕的像素大小不一样                     像素越小显示的越清晰                     同样的300像素在不同的设备下显示效果不一样                      百分比                         百分比可以设置属性相对父元素属性的百分比                         设置百分比可以使子元素跟随父元素的改变而改变                       em                         em是相对自身元素的字体大小计算的                         1em=1font-size                         em会根据字体大小改变而改变                      rem                         rem是相对于根元素的字体大小             */             width: 200px;             height: 200px;             background-color: orange;         }          .box2{             width: 50%;             height: 50%;             background-color: aqua;         }          .box3{             font-size: 20px;             width: 10rem;             height: 10rem;             background-color: greenyellow;         }     </style> </head> <body>     <!-- 快捷  div.box1或者直接.box1-->     <div class=box1>         <div class=box2></div>     </div>     <div class=box3></div> </body> </html>

RGB

 <!DOCTYPE html> <html lang=en> <head>     <meta charset=UTF-8>     <meta name=viewport content=width=device-width, initial-scale=1.0>     <title>Document</title>     <style>         .box1{             width: 100px;             height: 100px;             /*                  颜色单位                     CSS中直接使用颜色名字来设置颜色                         不方便，所以不常用                         主要用的方式为RGB值                     RGB值                         通过三种颜色的不同浓度来调配颜色                         0-255                         语法：RGB(红色，绿色，蓝色)                     RGBA值                         A透明效果                         1表示完全不透明                         0.5表示半透明                         0表示全透明                     十六进制RGB                         #红绿蓝                         00-ff                         如果颜色两位两位重复可以进行简写             */             background-color: red;             background-color: rgb(255, 0, 0);             background-color: rgba(255, 0, 0,0.5);             background-color: #ff0000;             background-color: #f00;         }     </style> </head> <body>     <div class=box1>      </div> </body> </html>

文档流

文档流创建的元素默认都是在文档流中进行排列元素主要有两个状态在文档流里和不在
元素在文档流的特点块元素在页面中独占一行，垂直排列默认宽度是父元素的全部默认高度是文字的高度行内元素行内元素不会独占一行，是自左向右水平排列如果一行中满了，则会换到第二行默认宽度和高度都是文字的宽高