CSS属性和盒子模型

CSS-属性

1.字体，文本

  • color：文本颜色
  • font-size：字体大小
  • text-align：对齐方式
  • line-height：行高

2.背景

  • backgronund：设置背景图
    • url(" ")：图片路径
    • no-repeat：不允许重复
    • top，center，bottom，left，center，right 方位词

3.边框

  • border：设置边框，符合属性

4.尺寸

  • width：宽度
  • height：高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS属性</title>
    <style>
        p{/*元素选择器*/
            color: red;/*文本颜色*/
            font-size: 30px;/*字体大小*/
            text-align: center;/*对齐方式*/
            line-height: 200px;/*高度*/
            border: 1px solid red/*边框*/
        }
        div{
            border: 1px solid red;/*边框*/
            width: 200px;/*宽度*/
            height: 200px;/*高度*/
            /*
                背景
            */
            background: url("image1/logo.jpg") no-repeat center;
        }
    </style>
</head>
<body>

    <p>郭伟明大老婆</p>

    <div>
        我的同志是二臂
    </div>
</body>
</html>

 

 

CSS-属性-盒子模型

盒子模型：控制布局

 

 

 属性：

  • margin：外边距
    • 移动属性：
      • margin：在一个声明中设置所有外边距属性
      • margin-bottom：设置元素的下外边距
      • margin-left：设置元素的左外边距
      • margin-right：设置元素的右外边距
      • margin-top：设置元素的上外边距
  • padding：内边距
    • 移动属性：
      • padding：在一个声明中设置所有填充属性
      • padding-bottom：设置元素的底填充
      • padding-left：设置元素的左填充
      • padding-right：设置元素的右填充
      • padding-top：设置元素的顶部填充

 

默认情况下内边距会影响整个盒子的大小：

　　　　　　box-sizing: border-box；：设置盒子的属性,让width和height就是最终盒子的大小

  • float：浮动属性
    • left：左浮动
    • right：右浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子属性</title>
    <style>
        div{/*类选择器*/
            border: 1px solid red;/*边框*/
            width: 100px;/*宽度*/
        }
        .div1{/*类选择器*/
            width: 50px;/*宽度*/
            height: 50px;/*高度*/
            margin-top: 65px;/*外边框 上外边距*/
            margin-left: 65px;/*外边框 左外边距*/
        }
        .div2{/*类选择器*/
            width: 200px;/*宽度*/
            height: 200px;/*高度*/
            padding: 50px;/*内边框*/
            box-sizing: border-box;/*设置盒子的属性,让width和height就是最终盒子的大小*/
        }
        .div3{/*类选择器*/
            float: left;/*左浮动*/
        }
        .div4{
            float: left;/*左浮动*/
        }
        .div5{
            float: right;/*右浮动*/
        }
    </style>
</head>
<body>

    <div class="div2">
        <div class="div1"></div>
    </div>

    <div class="div3">aaa</div>
    <div class="div4">bbb</div>
    <div class="div5">ccc</div>

</body>
</html>

 

posted @ 2022-10-26 15:07  monkey大佬  阅读(55)  评论(0)    收藏  举报