开头很简单,最难的是坚持。|

一条长江

园龄:2年5个月粉丝:0关注:1

2022-11-04 21:54阅读: 88评论: 0推荐: 0

【 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



    本文作者:一条长江

    本文链接:https://www.cnblogs.com/Qmoo/p/16856233.html

    版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

    posted @   一条长江  阅读(88)  评论(0编辑  收藏  举报
    点击右上角即可分享
    微信分享提示
    评论
    收藏
    关注
    推荐
    深色
    回顶
    收起