HTML巩固（二）

接上一篇

1、选择器

①、标签选择器

例：
div{background-color:""}

②、类选择器（class）

.top{background-color: antiquewhite;}
  <div class="top"></div>

cclass选择器的执行顺序：按照style中的代码顺序

③、id选择器

#top{background-color: antiquewhite;}
 <div id="top"></div>

④、通配选择器

margin：外边距
padding：内边距

*{margin: 0;padding:0;}

⑤、群组和后代选择器

群组
优点：提供公共代码，节约代码量

后代选择器（包含）

div p{}

⑥、伪类选择器

顺序：link—visited—hover—active
link，visited可以

⑦、选择器的权重

ID选择器>class>元素选择器

2、属性

①、文本

英文字体间距：word-spacing

字体：
字体粗细：100细体，400正常，700加粗，900更加粗

②、列表

③、背景

平铺：
repeat：默认平铺
repeat-x：x轴
repeat-y：y轴
no-repeat：不平铺

复合写法:
1、用个空格隔开
2、顺序可以换
3、可只取一个值，放在后面的覆盖前面的

div{background:url(img/.jpg) no-repeat center fixed yellow;}

④、浮动

清浮动：

1、写固定高度
2、清浮动
3、当前浮动元素后面补一个盒子，不设置宽高，clear：both
4、overflow:hidden让浮动元素计算高度

3、盒子模型

①、内边距

padding：内边距
1个值，4个方向相同
2个值，上下，左右
3个值，上，左右，下
4个值 ，上，右，下，左（顺时针）

注：
1、背景色可以蔓延到内边距
2、可以设置单一方向
通过：padding-top/left/right/bottom

②、边框

border：边框

border:10px(粗细) solid(样式) red

样式：solid，double，dashed，dotted

注：
1、背景色可以蔓延到边框
2、可以设置单一方向
通过：
①、border-top/left/right/bottom
②、border-width，border-style，border-color
三个属性的方向顺序与内边距相同

③、外边距

margin：属性

margin:10px 20px 30px 40px;
*{margin:0;}

注：
1、可以设置单一方向
通过：margin-top/left/right/bottom
2、背景色不可以蔓延到外边距
3、外边距支持负值
4、居中:margin:0 auto;
5、垂直方向上外边距取最大值，水平方向上外边距进行合并处理
6、给子加外边距，但作用于父身上，如何让解决
①、子margin-top转为父padding-top(注意高度计算)
②、各父盒子设置边框
③、加浮动
④、利用给父盒子加上overflow:hidden