【CSS】CSS基础知识

CSS：Cascading Style Sheets 层叠式样式表

原始示例代码：

<div>
    <div>租辆酷车</div>
    <div>css教学</div>
</div>
<div>
    <div>
        <div>中关村到天安门</div>
        <div>价格: 120元</div>
    </div>
    <div>
        <div>陆家嘴到迪士尼</div>
        <div>价格: 50元</div>
    </div>
    <div>
        <div>天河体育中心到广州塔</div>
        <div>价格: 80元</div>
    </div>
</div>

在代码后添加如下片段即可修改所有div元素的字体

<style>
    div{
        font-size: xx-large;
    }
</style>

选择器

• 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：设置高度/宽度，可以设置数值也可以设置百分比（相对于父元素大小的百分比，若父元素没有设置高度，则相对于父元素的父元素设置）

宽度默认填满页面，父元素高度默认为子元素高度之和（display: block;）

• 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，默认情况的宽高只针对元素本身，最终宽高还要加上padding和border
  

位置

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

• position

  • relative：原位置不会被顶替，相对于原位置进行位移
    

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

  • fixed：原位置会被顶替，相对于页面进行位移，不会因为滚动条而滚出页面，始终固定在同一位置
    

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

小练习：在陆家嘴到迪士尼的右上角添加一个小方框

1. 在陆家嘴中新建一个div，class设置为star
2. 将陆家嘴position设置为relative
3. 设置star大小和颜色
4. 将star的positon设置为absolute使其飘在上面而不占据空间
5. 将right和top设置为0就移动到右上角了
   .item {
   border: 2px solid;
   position: relative;
   }
   .star {
   width: 20px;
   height: 20px;
   background-color: red;
   position: absolute;
   right: 0px;
   top: 0px;
   }
   

文本样式

font-size：设置大小
font-family：设置字体
font-style：设置斜体
font-weight：设置粗体
color：设置颜色
text-align：文字对齐

折行
默认情况超宽换行

white-space:nowrap：超出宽度不换行

overflow:hidden：超出部分隐藏 （与前一个结合使用）

text-overflow:ellipsis：超出部分省略号截断（与前两个结合使用）

word-break：英文换行按照字母/单词

---

flex布局

flex是一种布局方法

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

以竖排为例

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

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

• justify-content 设置竖向的对齐

  • flex-end：竖向末尾 (与flex-direction配合，如果flex-direction为reverse那么flex-end就是开头)

  • flex-start：竖向开头

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

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

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

flex可以嵌套使用

• align-item：设置内部元素的对齐
• align-self：设置自身的对齐

小程序

微信小程序中的大小使用rpx相对像素
不管机型大小，宽度都是750rpx（高度750rpx，宽度100%，在任何机型上都是正方形，高度可能不同）

rpx最初是根据iphone6来的，750rpx对应750/2=375像素