CSS_属性_hehe.employment.over.8.4

8.10 CSS_属性

  • 字体、文本:
    • font-size字体大小
    • color文本颜色
    • text-align对其方式
    • line-height行高
  • 背景:
    • background: 背景,可以是图片、颜色
  • 边框:
    • border设置边框,符合属性
  • 尺寸:
    • width宽度
    • height高度
  • 示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性title>
    <style>
        p{
      
            /*字体*/
            color: #FF0000;
            font-size: 10px;
            text-align: center;
            line-height: 300px;
            /*
                border 边框
             */
            border: 1px solid red;
            /*p标签尺寸*/
            width:500px;
            height:600px;
            /*
               背景
            */
            background: url("img/logo.jpg") no-repeat center;

        }
    style>
head>
<body>
    <p>fdfp>
body>
html>

8.11 CSS_属性_盒子模型

  • 盒子模型:控制布局
    • margin: 外边距 ,相对来说
    • padding: 内边距 ,相对来说
      • 默认情况下内边距会影响整个盒子的大小
      • box-sizing: border-box;: 设置盒子的属性,让width和height就是最终盒子的大小。
    • float: 浮动
      • left
      • right
  • note: CSS_属性_hehe.employment.over.8.4_第1张图片
  • 示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性title>


    <style>
        div{
      
            border: 1px solid red;
            width: 100px;
        }
        .div1{
      
            width: 100px;
            height: 100px;
            /*外边距*/
            /* margin: 50px; */
        }
        .div2{
      
            width: 200px;
            height: 200px;
            padding: 50px;
            /*
                设置盒子的属性,让width和height就是最终盒子的大小
             */
            box-sizing: border-box;
        }

        .div3{
      
            float: left;
        }

        .div4{
      
            float: left;
        }

        .div5{
      
            float: right;
        }

    style>
head>
<body>

    <div  class="div2">
        <div class="div1">div>
    
    div>
    
    <div class="div3">aaaadiv>
    <div class="div4">bbbbbdiv>
    <div class="div5">ccccdiv>
body>
html>

你可能感兴趣的:(#,间接,over,css)