HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，

最新推荐文章于 2021-06-21 22:58:45 发布

san.hang

最新推荐文章于 2021-06-21 22:58:45 发布

阅读量222

点赞数

原文链接：http://www.cnblogs.com/yimian/p/6681844.html

版权

１标签包含规范

◆div可以包含所有的标签。

◆p标签不能包含div h1等标签。

◆h1可以包含p，div等标签。

◆行内元素尽量包含行内元素，行内元素不要包含块元素。

2 规避脱标流

◆尽量使用标准流。

◆标准流解决不了的使用浮动。

◆浮动解决不了的使用定位。

使得绿色盒子跑到右边

    <style type="text/css">
         .father{
             width:500px;
             height:500px;
             background:red;
         }
         .son{
             width:100px;
             height:100px;
             background:green;
             float:right;
         }
 
    </style>
</head>
<body>
    <div class="father">
         <div class="son"></div>
    </div>
</body>

    <style type="text/css">
         .father{
             width:500px;
             height:500px;
             background:red;
         }
         .son{
             width:100px;
             height:100px;
             background:green;
             float:right;       
         }
 
    </style>
</head>
<body>
    <div class="father">
         <div class="son"></div>
    </div>
</body>

         .son{
             width:100px;
             height:100px;
             background:green;
           margin-left:auto;
         }

设置盒子左外边距为auto，将盒子往右边冲

margin:0 auto ; 盒子左右边一直冲，居中

3 图片和文字垂直居中对齐

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;

4 Css可见性

visibility:hidden; 隐藏元素隐藏之后还占据原来的位置。

    <style type="text/css">
    .red{
        width: 300px;
        height: 300px;
        background:red;
        visibility:hidden;
    }
     .green{
         width: 300px;
         height: 300px;
         background:green;
     }
    </style>
</head>
<body>
 <div class="red"></div>
 <div class="green"></div>
</body>

display:none; 隐藏元素隐藏之后不占据原来的位置

转载于:https://www.cnblogs.com/yimian/p/6681844.html

san.hang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，

１标签包含规范◆div可以包含所有的标签。◆p标签不能包含div h1等标签。◆h1可以包含p，div等标签。◆行内元素尽量包含行内元素，行内元素不要包含块元素。2 规避脱标流◆尽量使用标准流。◆标准流解决不了的使用浮动。◆浮动解决不了的使用定位。使得绿色盒子跑到右边 <style type="text/css">...
复制链接

扫一扫