HTML、CSS-一些常见的注意事项

1、块元素和行内元素

对于行内元素，不仅width、height设置无效，而且margin-top属性也无效

<span>行内元素</span>

span {
            /* 生效 */
            margin-left: 20px; 
            /* 无效 */
            margin-top: 20px;
            padding-top: 20px;
            padding-left: 20px;
        }

2、display

设置display为inline-block，可以与行内元素同行

<span>行内元素</span>
<p>段落一</p>

p {
            display: inline-block;
  }

3、弹性盒子模型（flex box）

弹性盒子是一种布局方式，弹性盒子只定义了弹性子元素如何在弹性容器内布局，开启后默认子元素是横向（水平）排列。

最常用的属性是justify-content和align-items，设置两项属性为center后可让子元素或弹性容器文本水平垂直居中，flex-direction 属性指定了弹性子元素在父容器中的位置（排列方式）。

子元素属性flex根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。如果设置则宽度不在生效。

    <div class="flex-container">
        <div class="flex-items flex-item1">子元素1</div>
        <div class="flex-items flex-item2">子元素2</div>
        <div class="flex-items flex-item3">子元素3</div>
    </div>

 .flex-container {
            width: 400px;
            height: 400px;
            /* 开启弹性盒子 */
            display: flex;
            background-color: aquamarine;
            /* 水平居中 */
            justify-content: center;
            /*  垂直居中*/
            align-items: center;
        }

        .flex-items {
            height: 100px;
        }

        .flex-item1 {
            /* 无效 */
            width: 300px;
            flex: 1;
            background-color: red;
        }

        .flex-item2 {
            flex: 2;
            background-color: green;
        }

        .flex-item3 {
            flex: 1;
            background-color: blue;
        }

 4、绘制特殊图形

主要原理：设置width、height、border属性根据距离、颜色达到想要的图形

如图所示

三角形：箭头指向的border颜色为透明

 <div class="triangle"></div>

 .triangle {
            width: 0;
            height: 0;
            border-top: 20px solid black;
            border-bottom: 20px solid transparent;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

梯形：

 <div class="trapezium"></div>

 .trapezium {
            width: 100px;
            height: 0;
            border-bottom: 80px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

等等

如有错误欢迎指正！！！