Day44

最新推荐文章于 2024-08-05 18:36:07 发布

真的要穿格子衫吗

最新推荐文章于 2024-08-05 18:36:07 发布

阅读量77

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/hsee2006/article/details/105259884

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Day44

*CSS部分（二）

I. 块级元素和行内元素

块级元素可以指定宽高，行内元素的宽高是根据内容而定的，指定宽高无效

1）特殊的p标签：

p标签中可以放行内元素，但是不能放任何块级元素（包括他自己）

2）特殊的img标签

img标签是一个行内元素，但是可以设置宽高，业界有时会说img是行内块级元素

3）显示模式的转换

display：inline；转为行内元素

display：block；转为块级元素

display：inline-block；行内块级元素

行内块级元素会有一个问题，每个元素之间有一个空白的间隙

/* 解决方式有两种：
1.在body上设置font-size：0  但这样设计 每个盒子就必须要指定字体大小
2.使用一个注释的小技巧
*/
<div>电脑</div><!--
--><div>手机</div><!--
--><div>平板</div>

在这里插入图片描述
II. 单行文本垂直显示

让文字的行高等于盒子的高度就可以实现

    <style>
        div{
           height: 200px;
            width: 200px;
            background-color: red;
            line-height: 200px; /* 将行高设置为盒子的高度，就可以垂直居中 */
        }
    </style>
<body>
    <div>
        这是一行文字
    </div>
</body>

在这里插入图片描述

III. 背景：不仅可以有颜色，还可以用图片平铺

    <style>
        div{
            display: inline-block;
        }
        div{
            height: 300px;
            width: 800px;
            background-image: url("images/图标.png");
            background-color: pink;
            /*background-repeat: repeat-x;!* 只在水平方向平铺 *!*/
            /*background-repeat: repeat-y;!* 只在垂直方向平铺 *!*/
            background-repeat: no-repeat;/* 哪个方向都不平铺 */
            /*
                这里面的两个值的意思：
                第一个：水平方向(x轴)：left  center  right （也可以用像素）
                第二个：垂直方向(y轴)：top   center  bottom （也可以用像素）
             */
            background-position: 50px 20px;
        }

    </style>

IV. CSS的三大特性

1）层叠性

       div{
            height: 100px;
            width: 100px;
            background-color: #51b7ec;
        }
        div{
            background-color: red;
        }

2）继承性

text- 、font- 、line- 、color 都可以实现继承

a标签的color无法继承

3）权重（重点）

    <style>
        /* id,class,标签
        分别代表个数，比较时从id开始比起，谁大谁权重最高
        若id一样则比较class，以此类推
        当权重相同时，则采取就近原则
         */
        div .box2 #box3{ /* 1,1,1 */
            color: blue;
        }
        .box1 .box2 .box3{ /* 0,3,0 */
            color: red;
        }
        div .box2 .box3{ /* 0,2,1 */
            color: orange;
        }
    </style>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3" id="box3">文字</div>
        </div>
    </div>

V. 盒子模型：

在这里插入图片描述

	.box{
            height: 200px;
            width: 200px;
            background-color: pink;
            /* 20px solid brown 分别表示线宽，实线，线的颜色 */
            border: 20px solid brown;/* 边框 */
            /* padding 内边距：
            4个值 上右下左
            3个值 上 左右 下
            2个值 上下 左右
            1个值 所有都一样
             */
            padding: 20px 5px;
            /* margin 外边距:跟外边距一样 */
            margin: 100px;
        }

真的要穿格子衫吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day44

Day44*CSS部分（二） I. 块级元素和行内元素块级元素可以指定宽高，行内元素的宽高是根据内容而定的，指定宽高无效 1）特殊的p标签： p标签中可以放行内元素，但是不能放任何块级元素（包括他自己） 2）特殊的img标签 img标签是一个行内元素，但是可以设置宽高，业界有时会说img是行内块级元素 3）显示模式的转换 display：inlin...
复制链接

扫一扫

专栏目录