day53

（1）字体属性
（2）文本属性
（3）背景属性
（4）盒子模型
（5）边框
（6）内外边距
（7）内容居中与盒子居中
（8）防止文字溢出

https://www.cnblogs.com/linhaifeng/articles/9011138.html

字体属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        p {
            /*font-weight: bolder;        !*font-weight 字体宽度*!*/
            /*font-style: italic;         !*字体样式*!*/
            /*font-size: 50px;            !*字体大小*!*/
            /*font-family: "Microsoft YaHei UI Light";        !*字体*!*/
            /*以上四个属性可简写*/   /*按顺序font: weight style size family;*/
            font: bolder italic 50px "Microsoft YaHei UI Light";
            /*color: rgb(100,77,233);   !*red,green,blue比例调色（范围0~255）*!*/
            color: rgba(100,77,233,0.6);    /*最后一个参数为字体透明度*/
        }
    </style>
</head>
<body>
<p>世界</p>
</body>
</html>


文本属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            text-align: center;       /*水平对齐*/
            line-height: 200px;     /*行高*/

            /*text-decoration: underline;   下划线*/
            /*text-decoration: overline;      上方线*/
            /*text-decoration: line-through;   横穿线*/
            text-indent: 10px;              /*首行缩进*/
        }
    </style>
</head>
<body>

<div>
    世界
</div>
</body>
</html>


背景属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        .box1 {
            width: 780px;           /*盒子必须设置宽高*/
            height: 500px;
            background-color: rgba(255, 0, 3, 0.5);
            background-image: url("preview.jpg");   /*背景图片*/
            background-size: 780px 500px;           /*背景图片大小*/
            background-repeat: no-repeat;      /*不重复*/
            /*background-repeat: repeat-x;      !*沿x轴重复*!*/
            background-position: center center;     /*水平方向 垂直方向位置*/

            /*background-attachment: fixed;   !*默认scroll，图片位置固定，不会跟随页面滑动；fixed图片跟随页面滑动，但不会超出盒子范围*!*/
        }
        .box2 {
            width: 780px;
            height: 500px;
            background-image: url("IMG_1340.PNG");
            background-size: 100px 100px;
            background-position: center bottom;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

<div class="box1">
    <div class="box2"></div>
</div>

</body>
</html>


盒子模型
    HTML文档中的每个元素都被比喻成矩形盒子， 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如果把一个盒子比喻成一个壁挂相片，那么
    #外边距margin ===== 一个相框与另外一个相框之间的距离
    #边框border ====== 边框指的就是相框
    #内边距padding ===== 内容/相片与边框的距离
    #宽度width/高度height ===== 指定可以存放内容/相片的区域
    提示：可以通过谷歌开发者工具查看盒子的各部分属性

#1、内容的宽度和高度
    通过标签的width和height属性设置
#2、元素/盒子模型的宽度和高度
    宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度
#3、元素/盒子模型空间的宽度和高度
    宽度= 左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距

CSS显示模式：块级、行内、行内块级
在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
#1、HTML中容器级与文本级
    容器级标签：可以嵌套其他的所有标签
    div、h、ul>li、ol>li、dl>dt+dd
    文本级标签：只能嵌套文字、图片、超链接
    span、p、buis、strong、em、ins、del
#2、CSS中块级与行内
    块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
    div、h、ul、ol、dl、li、dt、dd   还有标签p
    行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
    span、buis、strong、em、ins、del
#3、块级元素与行内元素的区别
    1、块级元素block
        独占一行
        可以设置宽高
        若没有设置宽度，那么默认和父元素一样宽
        若没有设置宽高，那么就按照设置的来显示
    2、行内元素inline
        不会独占一行
        不可以设置宽高
        盒子宽高默认和内容一样
    3、行内块级元素inline-block
        不会独占一行
        可以设置宽高

CSS显示模式转换


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .box1 {
            width: 100%;        /*盒子默认宽度100%*/
            height: 100%;       /*必须设置高度，如果想把高度设为100%，需要先把其所有的父级盒子高度设为100%*/
            background-color: red;
        }
        .sp1 {
            width: 200px;
            height: 200px;
            background-color: red;
            display: inline-block;      /*display转换显示模式，inline-block行内块级*/
            /*display: none;      !*不显示，也不占空间*!*/
            /*visibility: hidden;     !*隐藏，但仍然占空间*!*/
        }
        .sp2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            display: inline-block;
       }
    </style>
</head>
<body>
<!--<div class="box1"></div>-->

<span class="sp1">
    世界
</span>
<span class="sp2">
    世界
</span>
</body>
</html>


边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background: yellow;
            text-align: center;
            line-height: 200px;
            border: 1px dotted red;     /*border边框  (边框宽度 边框格式 边框颜色)*/
            /*border-width: 1px 2px 3px 4px;      !*设置宽度，按照上右下左的顺序*!*/
            /*border-style: solid dotted dashed double;*/
            /*border-color: red blue green purple;*/
            border-radius: 50%;     /*radius弧度*/
            /*border-radius: 20px 10px 10px 20px;   !* 顺时针顺序：上左 上右 下左 下右*!*/
            /* 椭圆圆弧设置 */
            /*border-radius: 25%/50%; !* 前面一个值代表水平方向的半径占总宽度的，后面一个值代表垂直方向 *!*/
        }
    </style>
</head>
<body>

<div class="box1">世界</div>

</body>
</html>


内外边距
内边距
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距padding</title>
    <style>
        * {
            padding: 0;     /*清除默认边距*/
            margin: 0;
        }
        div {
            width: 150px;
            height: 150px;
        }

        .box1 {
            /*height: 100px;*/
            box-sizing: border-box;     /*固定盒子的大小，防止其因为设置边距而被拉伸*/

            border: 1px solid red;
            padding-top: 50px;          /*上边距*/
        }
        .box2 {
            width: 100px;
            border: 1px solid green;
            padding-left: 50px;
        }
        .box3 {
            border: 1px solid blue;
            padding-right: 50px;
        }
        .box4 {
            border: 1px solid yellow;
            padding-bottom: 50px;
        }

        .box5 {
            /*width: 50px;*/
            /*height: 50px;*/
            box-sizing: border-box;
            border: 1px solid aqua;
            padding: 50px;
        }

        .boxx {
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="boxx"></div>
</div>
<hr>
<div class="box2">
    2222
</div>
<hr>
<div class="box3">
    3333
</div>
<hr>
<div class="box4">
    4444
</div>
<hr>
<div class="box5">
    5555
</div>
</body>
</html>


外边距
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距margin</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 150px;
            height: 150px;
        }

        .box1 {
            border: 1px solid red;
            /*margin-top: 100px;*/
            /*margin-left: 100px;*/
            margin-bottom: 70px;

            padding-top: 30px;
            padding-left: 30px;
            box-sizing: border-box;
        }
        .box2 {
            border: 1px solid green;
            margin-top: 60px;           /*垂直方向margin不会叠加，取最大值，box2与box1边距为box1的70px*/
        }
        .box3 {
            border: 1px solid blue;
            display: inline-block;
            margin-right: 50px;         /*水平方向的margin与垂直方向不同，会叠加*/
        }
        .box4 {
            border: 1px solid yellow;
            display: inline-block;
            margin-left: 50px;
        }

        .box5 {
            border: 1px solid grey;
        }

        .boxx {
            width: 20px;
            height: 20px;
            background-color: red;

            /*margin-top: 30px;*/
            /*margin-left: 30px;*/
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="boxx"></div>
</div>
<div class="box2">
    22222
</div>
<div class="box3">
    333
</div>
<div class="box4">
    4444
</div>
<div class="box5">
    5555
</div>
</body>
</html>
#1、在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离
       应该首先考虑padding
       其次再考虑margin
       margin本质上是用于控制兄弟直接的关系的，padding本质才是控制父子关系的关系 
#2、如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，那么外面一个盒子也会被顶下来
       如果外面的盒子不想被遗弃顶下来，那么可以给外面的盒子设置一个边框属性。


内容居中与盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容居中与盒子居中</title>
    <style>
        .box1 {
            width: 200px;
            height: 600px;
            background-color: red;

            text-align: center;
            line-height: 25px;          /*多行内容，设置每行的行高，再计算出上下内边距*/
            padding-top: 250px;
            padding-bottom: 250px;
            box-sizing: border-box;

            margin: 0 auto;     /*盒子居中*/
        }
    </style>
</head>
<body>
<div class="box1">
    你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
</div>
</body>
</html>

防止文字溢出
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>防止文字溢出</title>
    <style type="text/css">

        div {
            width: 200px;
            height: 200px;
            /*汉字溢出会自动换行；字母、数字溢出，可以用下列属性控制自动换行：允许在单词内换行。
            http://www.w3school.com.cn/cssref/pr_word-break.asp
            */
            word-break: break-all;      /*防止文字溢出*/
        }

        .box1 {
            background-color: red;


        }
        .box2 {
            background-color: green;
        }

        .box3 {
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>asdfasdfsadfasdfasdfasdfad sfasdfsadasDSfafsafaasdfasdfasfdqwerqwerwqersdfqerwrsdf你好我的啊啊啊啊啊啊啊啊啊啊啊啊</p>

</div>

<div class="box2">
黑云蔽日燃尽天空，长夜漫漫永劫无期
</div>

<div class="box3">我是12312312312312312312312312312312312312312312312312312312312我</div>
</body>
</html>

 

posted @ 2020-09-21 18:25  板鸭没有腿  阅读(151)  评论(0)    收藏  举报