day46

Posted on 2019-11-19 10:37 猪宝店幼儿园阅读(95) 评论(0) 编辑收藏举报

设置长宽

给标签设置长宽, 只有块级标签才能设置,
行内标签设置了也没有任何作用, 仅仅只取决于内部文本大小

    <style>
        div {
            width: 200px;
            height: 400px;
        }

        span {
            width: 400px;
            height: 200px;
        }
    </style>

<div>div标签长宽</div>
<span>span标签长宽</span>

设置字体属性

字体类型
字体大小
字体粗细
字体颜色及透明度

    <style>
        p {
            font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
            font-size: 24px;
            font-weight: bolder;  /*lighter: 变细, bolder: 加粗*/
            color: rgba(128, 128, 128, 0.3); /*数字范围0~255, 0.3表示透明度, 数字越小透明度越高*/
            /*color: red;*/
        }
    </style>

<p>设置字体属性!</p>

设置文字属性

文字对齐方式
文字装饰: 上划线, 下划线, 删除线, none
首行缩进

    <style>
        p {
            text-align: center;  /*center: 居中对齐, left: 左对齐, right: 右对齐*/
            text-decoration: line-through;  /*over/underline: 上/下划线, line-through: 删除线*/
            text-decoration: none;  /*用来去除a标签默认的下划线*/
            text-indent: 48px;
        }

        a {
            text-decoration: none;
        }
    </style>

<a href="https://www.qq.com">点我点我</a>
<p>设置文字属性!</p>

设置背景属性

背景颜色

背景图片默认铺满整个区域
通常一个页面上的一个个小图标并不是单独的,
而是一张非常大的图片上有网页所需要用到的所有的小图标
通过position参数控制div背景图片的位置显示不同的图标样式
现在技术更高端, 把图片转换成代码, 根据代码动态解析出图片

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: green;
            background-image: url("背景图片.png");
            background-repeat: no-repeat; /*no-repeat: 不平铺, repeat-x: 水平方向平铺*/
            background-position: center center; /*第一个参数作用于x轴, 第二个参数作用于y轴*/
            /*background: url("背景图片.png") yellow no-repeat center center;*/
        }
    </style>

<div>设置背景属性!</div>

背景图片示例

    <style>
        #d1 {
            height: 600px;
            background: url("背景图片.png");
            background-attachment: fixed;  /*背景图片不会随着页面的滚动而滚动*/
        }
    </style>

<div style="height: 400px; background-color: red"></div>
<div style="height: 400px; background-color: green"></div>
<div id="d1"></div>
<div style="height: 400px; background-color: blue"></div>

设置边框

boder后面写三个参数: 粗细, 颜色, 样式
可以单独设置某一边的边框样式,
也可以简写成统一的设置

        p {
            border-top: 3px solid red;
            border-left: 2px dotted green;
            border-bottom: 4px dashed blue;
            /*border: 1px solid aqua;*/
        }

<p>设置边框!</p>

画圆, 将border-radius设置为长或高的一半

    <style>
        div {
            border: 1px solid black;
            background-color: red;
            height: 400px;
            width: 400px;
            /*border-radius: 200px;*/
            /*border-radius: 50%;*/
            border-radius: 50px; /*设置圆角度*/
        }
    </style>

<div></div>

display属性

inline:

将块级标签变成行内标签,
变成行内标签后不再受width和height参数影响, 仅取决于文本内容大小

        .c1 {
            width: 50px;
            height: 50px;
            background-color: red;
            border: 1px solid green;
            display: inline;  /*将块级标签变成行内标签*/
        }

<div class = "c1">display参数中的inline参数值!</div>

block

将行内标签变成块级标签,
变成块级标签后独占一行, 并且可以通过width和height参数设置长宽

    <style>
        .c1 {
            border: 5px solid red;
            display: block;
            width: 400px;
            height: 400px;
        }

    </style>

<span class = "c1">display参数中的block参数值!</span>

inline-block

标签既可以设置长宽, 也能够全部在一行显示, 同时具有块级标签和行内标签的特点

    <style>
        .c1 {
            border: 5px solid red;
            display: inline-block;
            width: 200px;
            height: 100px;
        }

        .c2 {
            border: 5px solid green;
            display: inline-block;
            width: 100px;
            height: 200px;
        }
    </style>

<span class = "c1">display参数中的inline-block参数值!</span>
<span class = "c2">display参数中的inline-block参数值!</span>

display参数中的none参数值和visibility参数中的hidden参数值
- display: none 隐藏标签, 并且标签原来占的位置也没有了
- visibility: hidden 隐藏标签, 但是标签原来的位置还在
```
<div style="display: none">display参数中的none参数值!</div>
<div style="visibility: hidden">visibility参数中的hidden参数值!</div>
<div>div标签!</div>
```

盒子模型---每个标签(元素)都有盒子模型

以快递盒为例:

两个快递盒之间的距离, 外边距, margin
快递盒盒子的厚度, 边框, border
快递盒中的物品距离内边框的距离, 内边距/内填充, padding
物品的大小, 文本内容大小, content

    <style>
        body { 
            margin: 0; /*只写一个参数, 上下左右全是0*/
        } /*去除body与浏览器之间的页边空白*/

        .c1 {
            border: 1px solid red;
            margin-bottom: 10px;
            padding-top: 20px;
        }

        .c2 {
            border: 1px solid green;
            padding: 30px;
        }

        .c3 {
            width: 50px;
            height: 50px;
            border: 1px solid aqua;
            margin: 0 auto;  /*只能左右居中, 不能上下居中*/
        }
    </style>

<div class="c1">盒子模型!
    <div class="c3">div中的div!</div>
</div>
<div class="c2">盒子模型!</div>

浮动

在CSS中任何元素都可以浮动, float
浮动的元素是脱离正常文档流的, 原先占据的位置会让出来

但是浏览器会优先展示文本内容

    <style>
        .c1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .c2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: right;
        }
    </style>

<div class="c1">浮动!</div>
<div class="c2">浮动!</div>
<div class="c3" style="background-color: pink; width: 100px; height: 100px">浮动!</div>

浮动带来的负面影响

会造成父标签塌陷, 类似于口袋瘪了

    <style>
        .c1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .c2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: right;
        }

        #d1 {
            border: 10px dotted aqua;
        }
    </style>

<div id = "d1">div父标签!
    <div class="c1">浮动!</div>
    <div class="c2">浮动!</div>
</div>

解决浮动造成父标签塌陷的问题: 哪个父标签塌陷了, 就给它添加clear_fix这个类属性值

    <style>
        .c1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .c2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: right;
        }

        #d1 {
            border: 10px dotted aqua;
        }

        /*公共样式*/
        .clear_fix:after {
            content: '';
            clear: both; /*左右两边都不能有浮动元素*/
            display: block;
        }
    </style>

<div id="d1" class="clear_fix">div父标签!
    <div class="c1">浮动!</div>
    <div class="c2">浮动!</div>
</div>

溢出属性

    <style>
        div {
            height: 50px;
            width: 50px;
            border: 3px dashed green;
            overflow: hidden; /*溢出的内容直接隐藏*/
            /*overflow: scroll;*/
            /*overflow: auto;*/
        }
    </style>

<div>溢出属性!溢出属性!</div>

圆形头像示例

    <style>
        div {
            height: 200px;
            width: 200px;
            border: 5px dashed green;
            border-radius: 50%;
            overflow: hidden;
        }

        img {
            width: 100%;
        }
    </style>

<div>
    <img src="圆形头像示例.jpg" alt="女生刘亦菲不见了">
</div>

定位

所有的标签默认都是静态的, 无法改变位置, position: static, 要想定位必须先将静态状态修改成定位状态

相对定位(了解): relative, 相对于标签原来的位置移动

    <style>
        .c1 {
            width: 100px;
            height: 100px;
            background-color: gold;
            position: relative;
            left: 100px;
            top: 100px;
        }
    </style>

<div class="c1"></div>

绝对定位(小米的购物车), absolute, 相对于已经定位过的父标签(只要不是static), 再做定位

    <style>
        .c1 {
            width: 50px;
            height: 50px;
            background-color: gold;
            position: absolute;
            top: 100px;
            left: 100px;
        }

        #d1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative; /*将d1从一个不是定位的标签变成已经定位的标签*/
        }
    </style>

<div id="d1">绝对定位中的父标签!
    <div class="c1"></div>
</div>

固定定位(回到顶部), fixed, 相对于浏览器窗口, 固定在某个位置不动

    <style>
        #d1 {
            width: 80px;
            height: 20px;
            position: fixed;
            bottom: 30px;
            right: 50px;
            border: aqua 5px solid;
        }
    </style>

<div style = "height: 500px; background-color: red"></div>
<div style = "height: 500px; background-color: green"></div>
<div style = "height: 500px; background-color: blue"></div>
<div id = "d1">固定定位!</div>

位置的变化是否脱离文档流
1. 不脱离文档流: 相对定位
2. 脱离文档流: 浮动的元素, 绝对定位, 固定定位

z-index控制z轴

    <style>
        #d1 {
            width: 200px;
            height: 200px;
            background-color: green;
            position: fixed;
            top: 50%;
            left: 50%;
            margin: -100px -100px;
        }

        #d2 {
            width: 100%;
            height: 1000px;
            background-color: aqua;
        }
    </style>

<div id = "d1">z-index上层页面</div>
<div id = "d2">z-index下层页面</div>

透明度

    <style>
        #d1 {
            background-color: rgba(220, 80, 70, 0.3); /*调节背景色透明度*/
        }

        #d2 {
            background-color: aqua;
            opacity: 0.3; /*调节全标签透明度*/
        }
    </style>

<div id="d1">背景色透明度</div>
<div id="d2">全标签透明度</div>

会员力量，点亮园子希望

刷新页面返回顶部

xwjhyy