HTML最全笔记（第二弹）

21.高级选择器

1.后代选择器

2.交集选择器

3.子选择器

4.并集选择器

22.div（块状标签）

独占一行

画一个矩形的格子

<div class="box"></div>

​
.box {
  width: 200px;
  height: 100px;
  background-color: purple;
}

22.padding（顺时针的顺序）（上右下左）

修饰div 矩形的内边距

div{
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

23.box-sizing

鉴 第七章 7.2 盒模型--padding

content-box

border-box

24.border(边框线)

.box {
  /* 设置矩形大小 */
  width: 200px;
  height: 30px;
  /* 设置边框线 */
  border-width: 2px;
  border-color: grey;
  border-style: solid;
}

简写：

.box {
  border: 2px solid blue;
}

solid 实线

dashed 虚线

不显示样式：none

.box {
  border-bottom: none;
}

圆角：border-radius

.box {
  width: 200px;
  height: 200px;
  background-color: violet;
  border-top-left-radius: 5px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 15px;
}

阴影： box-shadow

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #c4c4c4;
  /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}

25.margin （外边距）

和padding 类似

.box{
    /*总写*/
    margin: 20px;
    /*分开写*/
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
}

穿透问题：

因为margin会发生穿透问题，当你不设置边框的时候，相当于你的子元素的边界和你的父元素的边界是同一个，那么你在子元素设置margin会作用到父元素身上，这就是margin的穿透现象，那你现在给子元素设置了边框之后，就相当于把那个边界隔离开啦，就可以了

26.display:block/none

dispaly:block

display:none ( 用来控制隐藏元素)

• 块元素默认的display属性的值是block

• 行内元素默认的display属性的值是inline

  块状元素可以设置属性，但行内元素不行（但可以转换）

这是一个span标签  .demo { /将span标签转换成块元素/ display: block; width: 300px; height: 100px; background-color: #fff2cc; }

27.上下居中/左右居中

上下居中：line-height 和height值一致即可

左右居中：text-align:center

28.display:inline/inline-block

1. 行内元素不能设置宽、高；

2.行内元素可以设置padding；

1. 行内元素可以设置左右margin，但是不能设置上下

inline-block既具有block的性质，还具有inline的性质，可以简单的理解为，inline-block就是一个可以在同一行显示的块元素。

29.去除两个盒子之间的空白

1.去除回车

<!-- 将div标签写在一行 -->
<div class="box1"></div><div class="box2"></div>

2.给父元素添加word-spacing属性

.father {
  word-spacing: -50px;
}

3.给父元素设置font-size:0px

.father {
  font-size: 0px;
}

30.list-style:none

list-style: none;属性是为了去除li标签前面默认的小圆点