【CSS】CSS基础知识

选择器

• element
  直接选择全部的元素
  如：div，选择所有的div元素

• #id
  选择某一id的元素
  如：#title，选择id为title的元素
  

• .class
  选择包含某个class的部分元素
  如：.item，选择class为item的元素（以下三个全选）
  
  .item 选择class包含item的元素（以下三个全选）
  

• 同时满足
  .item.blue 选择class为item及blue的元素（1和3）
  div.blue 选择class为blue的div元素（1和3）
  

• 父子关系
  .item div （中间有空格）选择class为item的元素的所有div子元素（不只是第一层儿子是所有的子元素）
  .item >div 选择class为item的元素的第一层div子元素

大小

height/width：设置高度/宽度
可以设置数值也可以设置百分比（相对于父元素大小的百分比，若父元素没有设置高度，则相对于父元素的父元素设置）

宽度默认填满页面
父元素高度默认为子元素高度之和

父元素高度小于子元素高度之和

• overflow
  • hidden：隐藏多余元素
    
• scroll：添加滚动条
  

缩进

margin：边框到父元素的距离
border：元素的边框
padding：元素到边框的距离

元素高度 = height + padding-top + padding-bottom + 2 * border（上下两个边框）

元素宽度 = width + padding-left + padding-right + 2 * border

如下示例

margin-left: 50px; 左边界与父元素的距离
border: 2px solid; 元素边界宽度
padding-left: 50px 元素与左边界距离
height: 100px;元素高度
padding-top: 50px; 元素与上边界距离
margin-top: 50px; 上边界与父元素的距离

元素高度为 height + padding-top + 2 * border = 154
元素宽度为 width + padding-left + 2 * border = 510
Ps：这里的width没有设置，是根据子元素得来的

• box-sizing: border-box
  设置之后元素的高度/宽度直接等于height/width
  （对元素本身的高度进行调整以使得最终高度等于height）
  

位置

top\bottom\left\right 与 position 组合使用

• position
  • relative：原位置不会被顶替，相对于原位置进行位移
  • absolute：原位置会被顶替，相对于页面进行位移，会因为滚动条而滚出页面
  • fixed：原位置会被顶替，相对于页面进行位移，不会因为滚动条而滚出页面

将父元素设置为position:relative，子元素设置为position:absolute，可以将子元素相对父元素设置

文本样式

font-size：设置大小
font-family：设置字体
font-style：设置斜体
font-weight：设置粗体
color：设置颜色

text-align：文字对齐

折行
white-space:nowrap：超出宽度不换行
overflow:hidden：超出部分隐藏
text-overflow:ellipsis：超出部分省略号截断

flex布局

flex是一种布局方法

• display
  • flex 设置为flex布局
• flex-direction
  • column 竖向排列
  • column-reverse 反向竖排
  • row 横向排列（默认）
  • row-reverse 反向横排

以竖排为例

• align-items 设置横向的对齐（垂直于排列方向，若元素横向排列则设置纵向对齐）

  • stretch 横向拉伸填满
  • center 横向居中
    

• justify-content 设置竖向的对齐

  • space-around 元素之间的距离为上下距离的二倍
    

  • space-between 上下距离为零元素之间距离相等
    

  • space-evenly 上下及元素之间的距离都相等
    

flex可以嵌套使用

• align-self 设置自身的对齐
  align-center 设置儿子元素的对齐