【 CSS 】样式属性

CSS 样式属性

  • 边框（border)

    • border

    • border:2px solid red；---宽度、样式、颜色
    view code 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div style="border:1px solid red">anyway!!!</div>
	<div style="border:1px dotted green">anyway!!!</div>
</body>
</html>

  • 它类属性：height、width、line-height color font-size font-weight

    • 它类：

    • height: 100px;---标签高度
    • width: 200px; ---标签宽度
    • font-size: 24px; ---字体大小
    • text-align: center; ---文字左右居中
    • line-height: 100px; ---垂直高度根据标签高度
    • color: mediumvioletred; ---字体颜色
    • font-weight: bold; ---字体加错
    view code 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div style="
	height: 100px;/*标签高度*/
	width: 200px;/*标签宽度*/
	font-size: 24px;/*字体大小*/
	text-align: center;/*文字左右居中*/
	line-height: 100px;/*垂直高度根据标签高度*/
	color: mediumvioletred;/*字体颜色*/
	font-weight: bold; /*字体加错*/
	border:1px dotted red;">anyway!!!</div>
</body>
</html>

  • 浮动（float）

    • float

    • float: left;---左浮动
    • float: right;---右浮动
    view code 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0 0;
        }
    </style>
</head>
<body>
	<div style="background-color:red;width:50%;float: left">left</div>
	<div style="background-color:orangered;width:50%;float: right">right</div>
</body>
</html>

  • 显示（display）
    • 元素 描述
    块级元素(block) 块元素是一个元素，占用了全部宽度，在前后都是换行符;总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
    内联元素(inline) 内联元素只需要必要的宽度，不强制换行;和相邻的内联元素在同一行

    display

    • display: none; ---让标签消失
    • display: inline; ---此元素会被显示为内联元素，元素前后没有换行符
    • display: block; ---此元素将显示为块级元素，此元素前后会带有换行符
    • display: inline-block; ---行内块元素
    view code 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0 auto">
<span style="display: inline-block;background-color: orange;height: 100px;width: 100px">anyway!!!</span>
<a style="background-color: orange">爱我中华</a>

</body>
</html>

  • 边距（margin、padding）

    • margin（外边距）

    • 'margin-top'、'margin-right'、'margin-bottom'、'margin-left',按照顺时针方向罗列的.

    padding（内边距）

    • 'padding-top'、'padding-right'、'padding-bottom'、'padding-left',按照顺时针方向罗列的.
    view code 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0 0">
<div style="border: 1px solid red;height: 200px; width: 400px;margin: 0 auto">margin
    <div style="border: 1px solid blue;margin: 50px auto;padding-left: 100px; padding-top: 30px">
        padding
    </div>
</div>
</body>
</html>

    示意图：
    image


    posted @ 2022-11-04 21:54  一条长江  阅读(97)  评论(0)    收藏  举报