CSS进阶 【1】常用样式控制

Vue.js进阶文章列表

CSS样式穿透/deep/

css3自适应布局单位vw,vh你知道多少?

Vue.js绑定内置CSS Style 

Vue.js动态获取浏览器高度并进行实时修改DOM元素高度

CSS margin详解 

当 margin 为 margin:10px 时,表示 top,right,bottom,left (逆时针)方向都是10px;

当 margin 为 margin:10px 20px 时,表示上下方向为10px,左右方向为20px;

当 margin 为 margin:10px 20px 5px 时,表示top方向为10px,左右方向为20px,bottom方向为5px;

当 margin 为 margin:1px 2px 3px 4px 时,表示top方向为1px,right方向为2px,bottom方向为3px,left方向为4px。

margin含义
10px上下左右
10px 20px上下10   左右20
10px 20px 30px上10 左右20 下30
10px 20px 30px 40px上 下 左 右

 CSS margin(外边距)

div位置控制

<div class="backGround_star">

.backGround_star {
      width: 100%;
      height: 100%;
      opacity: 1;
      background: url(../../assets/image/backGround_star.png) no-repeat center;
      background-size: 30% 30%;
      background-position: 10% 90%;
    }

说明:

background-position:30%70%;的设置,使得背景图片的中心点在水平方向上处于30%的位置,在竖直方向上则位于70%的位置。 此时,如果改变了浏览器窗口的大小,背景图片也会进行相应的调整,但是,始终位于水平方向上30%和竖直方向上70%的位置。

背景图片设置

同上

相对定位与绝对定位

绝对定位:相对于屏幕左上角,不受父亲容器的影响

position: absolute;

How to display HTML5 Video Tag in Circle shape?

Html5的video标签自动填充满父div的大小

蓝色下划线鼠标移动上去显示手势

.loginButton {
        color: rgb(89, 133, 232);
        font-size: 24px;
        font-family: "MicrosoftYaHei Regular";
        text-decoration: underline;
        cursor: pointer;
      }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

C++程序员Carea

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值