HTML基础知识点（二）

最新推荐文章于 2021-08-12 09:15:21 发布

vun，

最新推荐文章于 2021-08-12 09:15:21 发布

阅读量214

点赞数 1

分类专栏： HTML 文章标签： HTML CSS

本文链接：https://blog.csdn.net/a_xixi/article/details/86636973

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

三角形，居中，缩进，盒模型，层模型（position），两栏布局，margin塌陷，margin合并，浮动

1.画三角形
定义一个div标签，如下设置样式：

  div{
      width: 0px;
      height: 0px;
      border: 100px solid ;
      border-top-color: transparent;/*透明色 */
      border-right-color: transparent;
      border-bottom-color: aquamarine;
      border-left-color: aquamarine ;
  }

2.单行文本垂直居中 height 和 line-height 设置相同的值

块级元素在页面居中

/*第一种方法*/
div {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px; /*1/2width*/
    margin-top: -50px; /*1/2height*/
}
/*第二种方法 写在要居中元素的父级*/
.wrapper{
    display: flex;
    vertical-align: center;
    justify-items: center
}

3.首行缩进

div{
    text-indent: 2em; /*1em=1font-size*/
}

4.行级元素(inline)：内容决定元素位置，不可以通过CSS改变宽高 span,del,em,a,strong

块级元素(block)：独占一行，可以通过CSS改变宽高 div,p,uo,ol,li,form,adress

行级块元素(inline-block) img(宽高只用一个，另一个会等比例缩放)

5.图片和图片之间会有空隙<凡是带有inline的元素，都有文字特性，所以img之间会有空隙>

解决办法：font-size:0

6.盒模型：=margin + border + padding + content ( width + height )

可视宽 realWidth:border + padding + width 可用于远视图

7.body有默认的margin=8px;

8.层模型

absolute----1.脱离原来位置进行定位2.相对于最近的有定位父级进行定位，如果没有，则相对于body进行定位。

relative ----1.保留原来位置进行定位2.相对于自己原来位置进行定位以relative为参照absolute来定位

fixed ---- 固定定位

static --- 静态

9.z-index需要与position 一起使用

10.两栏布局：

<div class="right"></div>
<div class="left"></div>

.right {
    position: absolute;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: #fcc;
    opacity: 0.5;

}

.left {
    height: 100px;
    margin-right: 100px;
    background-color: dimgrey;
}

11.两个经典bug：margin塌陷--bfc同是也会引入新问题，选择使用

<html lang="en">
<head>
    <title>Document</title>
    <style>
        .wrapper {
            margin: 100px;
            width: 200px;
            height: 200px;
            background-color: black;
            /* overflow: hidden;  */
            /* position: absolute;  */
            /* display: inline-block; */
            float: left;
        }
        .content {
            width: 50px;
            height: 50px;
            background-color: green;
            margin-left: 100px;
            margin-top: 50px;
            /* 1.可以在父级加border-top:1px solid,一般不使用 */
            /* 2. bfc(block format content)
            如何触发一个盒子的bfc?
            overflow: hidden; 
            position: absolute; 
            display: inline-block;
            float: left/right;*/
            /*3.给父级设置padding*/
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body>
</html>

margin合并---兄弟元素垂直方向的margin

*.可以通过bfc解决，一般选择不解决

12.浮动模型

利用伪元素清除浮动
设置position:absolute或者float:left

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .wrapper {
            /* 3.设置position: absolute;或者float: left;
            设置了position:absolute或者float:left/right在内部会把元素转换为inline-block */
            border: 1px solid salmon;
        }
        .content {
            float: left;
            width: 100px;
            height: 100px;
            background-color: sandybrown;
        }
        /* 2.  利用伪元素清除浮动 ::after  */
        /*  .wrapper::after {
            content: '';
            clear: both;
            能清楚浮动的必须是块级元素
            display: block;
        } */
    </style>
</head>
<body>
    <!-- ***浮动元素产生浮动流
    所有产生浮动流的元素，块级元素看不到他们
    产生bfc的元素和文本类属性的元素以及文本都能看到浮动元素 -->
    <div class="wrapper">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <!--1. 会破坏原本结构，不推荐使用 -->
        <!-- <p></p>    //p{clear:both} -->
    </div>
</body>
</html>

13.实现文字环绕图片

img{
    float:left;
    margin-right:10px;
    width:100px;
}

vun，

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录