HTML5-VScode-常用标签的样式以及复合写法

最新推荐文章于 2024-08-14 21:07:25 发布

临时工老六

最新推荐文章于 2024-08-14 21:07:25 发布

阅读量1.5k

点赞数

分类专栏： html5 文章标签： html5 vscode

本文链接：https://blog.csdn.net/weixin_45967378/article/details/124866580

版权

本文介绍了HTML5中常见的标签样式和复合写法，包括CSS属性顺序、块元素、行元素、行内块元素的用法，以及元素模式转换、样式设置、显示与隐藏的技巧。特别讨论了浮动元素及其清除方法，帮助开发者更好地理解和应用HTML5样式。

摘要由CSDN通过智能技术生成

文章目录

HTML5的元素和标签都是一个东西 : 带尖括号的 <div>  </div>  </br> 放在<body>里</body>
HTML5的属性指的是css样式里的"样式属性"(例如下面的章节一) 放在<head><style>里</style></head>

1.CSS属性书写顺序

布局定位: display / position / float / clear / visibility / overflow
自身属性: width / height / margin / padding / border / background
文本属性: color / font / text-decoration / text-align / vertical=align / whit-space / break-word
其他属性CSS3: content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

2.块元素 : h1~h6 / p / div / ul / ol / li / form / table

加粗样式块元素可以设置宽高,内外边距,宽度默认父级宽度100%.
里面可以放行内元素 / 块元素 .
注意 : 文字类的块级元素 p 和 h1~h6 不能放其他块级元素

ul>li 无序列表

ol>li 有序列表

li

li里面的内容上下左右居中对齐

css添加:
height: 50px;
line-height: 50px;    /* 上下居中对齐  , 行高 等于 ul / ol / li 的高度 */
text-align: center;	/* 左右居中对齐 */
list-style: none;	/* 去掉前面的小圆点 */

一行多个li的宽度(width/margin-left)设置

方法一: 对 该行最后一个li标签 进行 单独的样式修改 margin-left: 0;
方法二: 将li的父标签(ul/ol)设置一个具体的宽度(让其包含 该行中所有li标签 的 width/margin-left 的值)
例如: 主体宽度是1000px, 一行三个li标签(width: 300px;margin-left: 50px), 总长度:1050px, 
那么第三个li标签就会被"挤"到第二行, 此时只要将li标签的父元素的width设置为1050px,就刚好放下三个li

清除浮动(看文章最后面的"浮动(清除浮动的4种方式)")

当父盒子ul/ol里有N个浮动的子盒子li , 此时父盒子ul/ol的高度将无法确定,从而导致父盒子ul/ol下面的div元素无法准确排布
解决方法:给li的父元素ul/ol添加双伪元素样式:

<head>
    <style>
        .clearfix:before,
        .clearfix:after {
     
            content: "";
            display: table;
        }
        .clearfix:after {
     
            clear: both;
        }
        .clearfix {
     
            *zoom: 1;/* IE6,7专用 */
        }
    </style>
</head>
<body>
    <ul class="clearfix">
        <li></li>
        <li></li>
        <li></li>
    </ul>