CSS基础

css历史

李爵士的同事赖先生提出CSS

css层叠样式表

样式层叠 选择器层叠 文件层叠

小贴士

目前世界上最广泛使用的CSS是CSS2.1版本

语法样式

语法一

  1. 选择器 {
  3.  属性名: 属性值;
  5.  /*注释*/
  7. }

注意事项

  1. 所有符号都是英文符号，如果写错了，浏览器会警告
  2. 区分大小写，a 和 A 是不同的东西
  3. 没有 // 注释
  4. 最后一个分号可以省略，但建议不要省略
  5. 任何地方写错了，都不会报错，浏览器会直接忽略

语法二 at语法

  1. @charset "UTF-8";
  2. @import url(2.css);
  3. @media (min-width: 100px) and (max-width: 200px) {
  4.   语法一
  5. }

注意事项

  1. @charset 必须放在第一行
  2. 前两个 at 语法必须以分号 ; 结尾
  3. @media 语法会单独教学
  4. charset 是字符集的意思，但 UTF-8 是字符编码 encoding，这是历史遗留问题

border调试法

在每一行代码中添加boder属性去查看代码是否有错 outline这个标签不占里面的像素

文档流（元素流动的方向）

解释：”文档流”或”流式布局”是在对布局进行任何更改之前，在页面上显示”块”和”内联”元素的方式。 这个”流”本质上是一系列的事物，它们都在你的布局中一起工作，并且互相了解。 一旦某部分脱离了”流”，它就会独立地工作。

inline 内联元素

用做链接a 的元素、 span、 em以及strong

左到右排列 到达最右边换行 它不能设置高宽 他的高宽与内部元素的宽度加起来 和line-height 的高度有关。

  1. 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味
  2. 盒子会和父容器一样宽
  3. 每个盒子都会换行
  4. width 和 height 属性可以发挥作用
  5. 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

block 块级元素

标题(h1等)和段落(p)默认情况下都是块级的盒子。

默认宽度是auto 可以设置高宽 永远不要写宽度100%。

  1. 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味
  2. 盒子会和父容器一样宽
  3. 每个盒子都会换行
  4. width 和 height 属性可以发挥作用
  5. 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

inline-block 行内块元素

既有inline元素的特点 也有 block元素的特点 但是不会把元素分为2部分换行。

小贴士

不能在内联元素里面用块级元素

  1. <style>
  2.         .btn {
  3.             border: 1px solid red;
  4.         }
  6.         .he {
  7.             border: 1px solid green;
  8.             /* <!-- 实际高度没有撑开 --> */
  9.             padding: 20px 10px;
  10.             /* span 最终高度是100px 实际高度和字体有关  */
  11.             line-height: 100px;
  12.         }
  13. </style>
  15.     <div class="btn">
  16.         <span class="he">
  17.     你好
  18.         </span>
  19.     </div>

定位可以脱离文档流

内容超过元素高度可以用：overflow来操作。

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 
  1.     <style>
  2.         .div01 {
  3.             border: 2px solid red;
  4.             height: 200px;
  5.             overflow: auto;
  6.         }
  7.     </style>
  9.    <div class="div01">
  10.         <!-- 把屏幕缩小 里面的文字只会显示在第一屏 -->
  11.         这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  12.         <div style="border: 1px solid blue; width: 1000px;">你好</div>
  13.         <span style="border: 1px solid pink;">123</span>
  14.     </div>

脱离文档流

  1.     <!-- /* 这是显示脱离文档的第一个方法 */-->
  2.     <style>
  3.         .div01 {
  4.             border: 1px solid red;
  5.         }
  7.         .div02 {
  8.             border: 1px solid green;
  9.         }
  11.         span {
  12.             position: absolute;
  13.       /*第二种脱离文档流 让他浮动*/ 
  14.             float:left;
  15.         }
  16.     </style>
  18.     <div class="div01">
  19.         <div class="div02">
  20.             <span>你好</span>
  21.         </div>
  22.     </div>

盒模型

CSS盒模型是将所有元素表示为一个个矩形的盒子。由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。

SS盒模型有2种

一种是：content-box 标准模型

content-box 的宽度 width 表示内容区的宽度，不包含 padding 和 border。

一种是：border-box

border-box 的宽度 width 表示内容区 + padding + border 的总和。

这两种都没有将margin算入盒子大小内 。

如果算上margin就是在算盒子位置的大小。
00 CSS基础、盒模型 - 图1

  1.     <style>
  2.         .content-box {
  3.             margin: 25px;
  4.             border: 5px solid red;
  5.             padding: 15px;
  6.             box-sizing: content-box;
  7.             width: 100px;
  8.         }
  10.         .boder-box {
  11.             margin: 25px;
  12.             border: 5px solid red;
  13.             padding: 15px;
  14.             box-sizing: border-box;
  15.             width: 100px;
  16.         }
  17.     </style>
  18. <body>
  19.     <div class="content-box">content-box</div>
  20.     <div class="boder-box">boder-box</div>
  21. </body>

margin合并（外边距重叠）

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。

注意：注意有设定float和position=absolute的元素不会产生外边距重叠行为。

只存在上下合并 有三种情况会形成外边距重叠：

第一种情况：

同一层相邻元素之间。

  1. <style>
  2. p:nth-child(1){
  3.   margin-bottom: 13px;
  4. }
  5. p:nth-child(2){
  6.   margin-top: 87px;
  7. }
  8. </style>
  10. <p>下边界范围会...</p>
  11. <p>...会跟这个元素的上边界范围重叠。</p>

相邻的两个元素之间的外边距重叠，除非后一个元素加上clear-fix清除浮动。

clear-fix清除浮动也就是下面代码：

  1. #container::after {
  2.   content: "";
  3.   display: block;
  4.   clear: both;
  5. }

没有内容将父元素和后代元素分开：

  1.        <style>
  2.         .div03 {
  3.             background-color: antiquewhite;
  4.             /* 外边距合并 复合子和子盒子的外边距会合并 那个高留那个的外边距 */
  5.             /* 方法一 加 边框 border */
  6.             /* 方法二 加 padding */
  7.             /* 方法三  加 overflow: hidden; */
  8.             margin: 50px;
  9.         }
  11.         .div04 {
  12.             border: 2px solid green;
  13.             margin: 30px 0;
  14.         }
  16.         .div05 {
  17.             border: 2px solid yellow;
  18.             /* 外边距合并2 兄弟合并 一个盒子的底外边距 和 相邻盒子的上外边距会合并  
  19.             那个margin值大留那个的外边距  */
  20.             /* 兄弟合并 用 width: 100%; display: inline-block; */
  21.             margin-top: 50px;
  22.         }
  23.     </style>
  25.     <div class="div03">
  26.         <div class="div04">盒子01</div>
  27.         <div class="div05">盒子02</div>
  28.         <div class="div05">盒子02</div>
  30.     </div>

空的块级元素:

当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border、内边距paddng、高度height、最小高度min-height 、最大高度max-height 、内容设定为inline或是加上clear-fix的时候。

  1.     <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         p {
  9.             margin-bottom: 13px;
  10.             background-color: rgb(255, 164, 164);
  11.         }
  13.         div {
  14.             margin-top: 13px;
  15.             margin-bottom: 87px;
  16.             background-color: rgb(104, 182, 255);
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <p>下边界范围是 87 ...</p>
  23.     <div></div>
  24.     <p>... 上边界范围是 87</p>
  25. </body>

基本单位

长度单位

  1. px 像素
  2. em 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小
  3. 百分数
  4. 整数
  5. rem：等你把 em 滚瓜烂熟了再问 rem
  6. vw 和 vh （ 视窗宽度的1%/视窗高度的1%）
  7. 其他长度单位都用得很少，不用了解

颜色

  1. 十六进制 #FF6600 或者 #F60

00 CSS基础、盒模型 - 图2
2. RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)
00 CSS基础、盒模型 - 图3

  1. hsl 颜色 hsl(360,100%,100%)
    00 CSS基础、盒模型 - 图4

rgba与opacity的区别

opacity默认是继承父元素opacity属性，所以子元素会继承父元素的opacity属性值，从而产生相同的效果。也就整体变色。

例子：

  1.      <div class="opacity" style="opacity: 0; width: 200px; height: 50px; background-color: black;">
  2.         <p style="opacity: 1; color: aliceblue;">pd的opacity是1</p>
  3.     </div>

rgba只会对元素本身产生影响，因为无法继承，所以不会对子元素产生影响。

  1.         <div style=" width: 200px; height: 50px; background-color: rgba(0, 0,0, 0.5);">
  2.         <p>pd的opacity是1</p>
  3.     </div>

资料来源：饥人谷

本文为贰贰的原创文章，著作权归本人和饥人谷所有，转载务必注明来源