HTML&&CSS复习（八）

设置box-sizing:border-box;

让宽高=border+width/height+padding+content;

颜色的alpha

alpha表示了颜色的透明度,0完全透明,1完全不透明

透明写法

• rgba(0,0,0,0.1);

• rgb(0 0 0/50%);

• #00000000

• background:red; opacity:0.8;(这种会把文字也半透明)

尺寸的百分比

百分比相对单位,其相对于参考系

• 普通元素的参考系相对于父元素的内容区域

• 绝对定位元素的参考系为父元素中第一个定位元素(有position属性)的padding区域(padding+content)

  常见的百分比情况

  CSS属性 百分比相对 备注

  width 参考系 宽度

  height 参考系 高度 参考系受本身高度影响时设置无效(父元素要有稳定高度)

  padding 参考系 宽度

  border 参考系 宽度

  margin 参考系 宽度

最大最小宽高

• 最大宽度 max-width 最大高度 max-height

• 最小宽度min-width 最小高度min-height

当一个元素会自动变化的时候设置最大最小宽高,可以让它不至于变得过大或过小.

• 实际开发 为pc端设置最小宽度，通常此高度为设计稿宽度

• 为图片设置一个最大宽度，让其不至于超过容器宽度

布尔属性

只有两种状态 true（写这个属性）或者false（不写这个属性）

如checked 和selected

label关联

点击文字也能选中选择框

方法一：
<input type="radio" id="male"></input>  
<label for="male"></label>
方法二：
<label>
<input type="radio"></input>    
<span ></span>
</label>

相邻的元素都是行盒或者行块盒，行上出现不对齐的情况使用 vertical-align: ;

元素~ (选中所有指定的兄弟元素)

元素+（选中下一个兄弟元素）