04-CSS核心属性

A. 浮动属性

在网页布局中经常看见很多标签默认是从上到下显示的，需要改变默认的排序方式可以使用浮动属性。

1. 概念：使用浮动属性可以改变元素的位置（默认从上到下改为从左到右/从右到左）

2. 属性：float 使xx漂浮/浮动

3. 属性值：left / right / none（默认值，表示不浮动）

4. 浮动的特点

   • 从浮动的属性上进行观察就可以得出结论，浮动只能控制元素在水平方向上移动
   • 给元素设置了浮动属性之后，当前元素会脱离文档流
   • 浮动元素漂浮停止的条件
     • 碰到父级包含框（父级的边框）的时候就会停止浮动
     • 碰到前面一个浮动属性也会停止浮动
   • 特殊情况：当浮动的子级元素宽度大于父级容器时，最后一个子级元素会往下移动直到找到足够的空间。

   拓展“流”的概念

   1. 文档流/普通流：指的就是网页的正常布局
   2. 浮动流/浮动层：会出现在正常网页的上方（看不见的）

---

B. 标准盒模型

1. 作用：每个标签都是一个盒子，设置元素与元素之间的位置关系（间距）
2. 组成
   • content 内容区域：元素自己的大小（宽高）
   • padding 内边距：父级和子级之间的间距
   • border 边框
   • margin 外边距：同级元素之间的间距

一、外边距margin

1. 作用：设置同级元素之间的位置关系（哪个元素移动就给哪个元素设置即可）

2. 属性：margin

3. 特点

   • 既然是设置间距的，所以外边距的属性值需要数值加单位
   • 关于margin属性值个数的使用（多个属性值之间需要使用空格隔开）
     • 一个属性值的时候：上下左右都是一样的
     • 两个属性值的时候：上下、左右
     • 三个属性值的时候：上、左右、下
     • 四个属性值的时候：上、右、下、左（顺时针）
   • 还可以设置某一个方向：margin-方向值（top|right|bottom|left）

4. 总结关于margin外边距常见的设置

   • *{margin:0;padding:0} 清除浏览器的默认间距
   • 版心的选择器{margin:0 auto} 版心居中

5. 越好用的属性，bug越多，兼容性差

   1. 当两个盒子上下排列的时候，分别设置margin-top/bottom 解析的时候会解析之间的最大值

   2. 在父级元素中只有一个子级元素的时候，子级元素设置margin-top会错误解析到父级元素

      解决方法：

      • 子级设置浮动
      • 给父级设置边框
      • 文本溢出属性
      • 内边距

二、内边距padding

1. 作用：可以设置父级元素和子级元素之间的位置关系
2. 属性：padding
3. 特点
   • padding的属性值需要设置数值和单位
   • 关于padding的设置位置（特点）
     • 父级元素：会撑大当前容器的大小，为了保证页面不受影响，在初始的宽高上减去相应的padding值（控制所有子级）
     • 子级元素：单独控制某一个子级元素，子级元素也会被撑大，是否需要减去根据需求定
   • 关于padding属性值个数的使用（多个属性值之间需要使用空格隔开）
     • 一个属性值的时候：上下左右都是一样的
     • 两个属性值的时候：上下、左右
     • 三个属性值的时候：上、左右、下
     • 四个属性值的时候：上、右、下、左（顺时针）
   • 还可以设置某一个方向：padding-方向值（top|right|bottom|left）
4. 注意：内外边距可不可以使用负值？
   • 外边距可以使用，内边距不行

三、边框属性border

1. 边框属性组成

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

2. 属性值

   • 边框的宽度：px为单位
   • 边框的样式：
     • solid（实线）、dashed（虚线）、dotted（点线）、double（双实线）
   • 边框的颜色：英文单词 / #

3. 边框的简写/复合属性

   • 属性：border
   • 属性值：border-width border-style border-color
   • 当一个属性有多个属性的时候是可以不区分先后顺序的
   • 每个属性值之间使用空格隔开即可

4. 常见需求引出边框的其他用法

   • 改变某个方向上边框颜色

     border-top-color:red;
     

   • 改变某个方向上所有样式

     border-right:10px double blue;
     

   • 清除某个标签的默认边框样式

     border:none;
     border:0;
     

5. 哪些标签自带边框

   input、testarea（多行文本域）、select（下拉菜单）

6. 三角形的绘制

   div{
       border: 50px transparent solid ;
       border-bottom-color: green;
       height: 0px;
       width: 0px;
           }
   

四、总结

1. 作用：设置元素与元素之间的间距

2. 组成：content/padding/margin/border

3. 计算方式

   div{
       width: 100px;
       height: 100px;
       border: 10px solid black;
       padding: 20px;
       margin: 30px;
           }
   

   Q：这个盒子的大小是多少？

   A：

   1. 自身大小：100px + 20px*2 + 10px*2 = 160px
   2. 真实大小：160px +30px*2 = 220px

   盒子的自身大小：content + padding + border

   盒子的真实大小：content + padding + border + margin

4. 盒模型的分类：box-sizing

   1. 标准盒模型：content-box（默认值）
   2. 怪异盒模型（IE盒模型 border-box：当文档丢失了文档声明的时候会触发这样的计算方式）
      • 特点：padding和border不会撑大盒子的大小
      • 计算
        • 自身大小：content（包含padding和border）
        • 真实大小：content（包含padding和border）+margin

---

C. 文本属性

一、 文本大小

1. 属性：font-size
2. 属性值：常规的属性值/法定的属性值
   • 可以使用数值和单位表示文本的大小
   • 在浏览器中，默认的字体大小是16px，设置字体的时候建议设置为偶数
   • 由于浏览器之间存在差异，规定浏览器最小字体是12px（设计图字体最小12px）
   • web中px单位是最常用的，另外还有pt、em等（12pt=16px 1em=16px）
     • pt 磅，常用与一些硬件设备（打印机）
     • em 相对单位，相对于父级元素计算（首行缩进）

二、文本类型

word、ppt字体。商用注意版权问题。

1. 属性：font-family

2. 属性值

   • 中文：当属性值是中文的时候建议加引号

   • 英文：当属性值有多个英文单词的时候需要加引号，只有一个不需要加引号

   • 如果有多个备用字体用逗号隔开

     font-family: 'Courier New', Courier, monospace;
     

   • 在浏览器中默认的字体类型是微软雅黑，更改字体需要在本地有字体包

   • 在windows系统下中文汉字是宋体/新宋体，英文是arial

三、加粗和倾斜属性

1. 加粗属性：font-weight

   1. 100-900 整百数 表示加粗程度，没有px单位

      100-500表示正常字体，600-900表示加粗字体

   2. bold 加粗的 / bolder 更粗的

   3. normal 正常的/清除加粗标签的默认样式

      b,strong{
      	font-weight:normal;
      }
      

2. 倾斜属性：font-style

   1. italic 倾斜的 / obliuqe 更倾斜的

   2. normal 正常的/清除倾斜标签的默认样式

      i,em{
      	font-style:normal;
      }
      

---

D. 对齐方式

一、水平方向对齐

1. 属性：text-align
2. 属性值
   • left / right / center
   • justify 两端对齐（不常用）

二、垂直方向对齐

1. 属性：line-height
2. 特点：当行高和容器高度相等的时候，就会垂直方向居中显示。

补充：

marquee 滚动样式（官方不推荐，很多浏览器逐渐遗弃使用）

<marquee>欢迎光临</marquee>

三、总结

文本属性总结

1. font-size 文本大小
2. font-family 文本类型
3. font-weight 文本加粗
4. font-style 文本倾斜
5. text-align 水平对齐
6. line-height 垂直对齐

简写方式

1. 属性：font
2. 属性值：font-weight font-style font-size/line-height font-family
3. 说明
   • font-weight font-style没有需求可以不写并且可以互换位置
   • font-size/line-height 固定的不可以互换位置
   • font-family无论有没有需求都要写

div{
    font:bolder oblique 20px/50px "微软雅黑";
    font:20px/50px "楷体"    
}

---

E. 字体颜色

1. 属性：color（切记不可以写成font-color）

2. 属性值

   • 英语单词：green、pink、red

   • 十六进制：

     • 用法：以#开头，后面有6位字符任意组成（a-f,0-9）

     • 常见的颜色：#ffffff,#000000,#cccccc（当后面的6位字符是相同的时候，可以简写成3位）

       例如#00ccaa => #0ca

     • 获取设计图的颜色方式：ps的吸管工具/getColor软件

     • rgb(red,green,blue) / rgba(red,green,blue,alpha)

       alpha – 透明度 取值0-1

     拓展：透明度的写法 opacity:0-1

---

F. 文本操作

一、文本修饰属性

1. 属性：text-decoration（修饰/描述）

2. 属性值

   • underline 下划线

   • overline 上划线

   • line-through 删除线

   • none 没有/清除下划线

     /* 清除下划线a标签的默认样式 */
     a{
         text-decoration: none;
     }
     

二、首行缩进

1. 属性：text-indent
2. 属性值：数值加单位（px、em）
3. 可以设置负值
4. 只针对第一行文本起作用
5. 注意：只能在块级元素中使用（能设置宽高大小）

三、文字间距

属性：letter-spacing

---

G. 列表属性

列表属性的使用只针对于有序和无序列表

1. 属性：list-style-type

2. 简写：list-style

3. 属性值：none 表示将列表的默认符号清除掉（兼容问题）

   /* 清除列表的默认样式 */
   ul,li,ol{
       list-style: none;
   }
   

---

H. 背景属性的使用

一、背景颜色的使用

1. 属性：background-color/简写background
2. 属性值：与css中的颜色用法一样（边框颜色、背景颜色、文字颜色），英文单词/十六进制/rgba

二、 背景图片的使用

1. 属性：background-image
2. 属性值：url(图片的路径地址)
3. 注意：关于img和背景图片的区别
   • img是结构默认只会显示一张并且是占位置的
   • 背景图片是不占位置的并且默认会铺满整个容器

三、背景平铺属性

1. 属性：background-repeat
2. 属性值
   • no-repeat 不平铺，只会显示一张图
   • repeat 平铺，默认值
   • repeat-x
   • repeat-y

四、背景定位属性

1. 属性：background-position（位置/定位）

2. 属性值

   • 坐标值 100px 100px

   • 方向值：top、right、bottom、left、center

   • 当水平方向和垂直方向相等的时候，可以简写成一个

     /* 右下角 */
     div{
         background-position:left bottom;
     }
     

五、背景固定属性

1. 属性：background-attachment
2. 属性值
   • scroll 默认值 滚动
   • fixed 固定

六、背景属性的简写方式

1. 属性：background
2. 属性值：颜色 图片 平铺 定位 固定