css-盒子等样式学习

霸王龙不吃芹菜

已于 2024-01-19 14:08:29 修改

阅读量611

点赞数 7

文章标签： css 学习前端

于 2024-01-17 16:10:29 首次发布

本文链接：https://blog.csdn.net/Steven_yang_1/article/details/135625599

版权

盒子居中，继承外层盒子的宽高

兼容性（border-box）将边框收到盒子内部

初始化div 不用管box-setting

content-box 还原

创建为一个类，让所有需要还原的类进行继承

padding 用法表示margin上下左右边距

body 外边距（IE8 默认上下16px,左右8px） (IE7 上下11px 。。。。)各个浏览器不同

常规项目设计定位方式

relative 数据非定位元素 position 数据定位元素

position 创建新图层，box2 还在原来的图层所以橘色再黑色下面

z轴处理图层问题

页面自适应2栏布局

overflow-y 让其失去滚动条

左边自适应,html,body要同时继承以上属性，不然就没有效果

float能将图片浮动在文字中

清除浮动方法一（将span变为p）span { clear:both}

float 以后就变成内联块元素

必须两边都加上浮动

：伪类用法

:：伪元素content 必须有 inline-block 可以变成块级元素

清楚浮动的方法

将边框收进元素中

动态获取数据

向里扩散

将阴影遮挡去掉，可以将header 网上移动用relative + z-index

浏览器兼容性

纯园 50% 半圆角 height/2 +px 圆角直接用px

保持图片缩放(位置)不变

图片自适应

contian同样达到如此效果

背景图片设置不滚动

复合使用

log 配置，如果没有网速则显示字符实际是将logo-hd 变为块级然后图片设置logo 同样的高度和宽度利用overflow hidden 达到效果

border='1' 有单元格与 style 没有单元格的区别

保持宽度一致

解决浮动撑开的问题 BFC特性

可解决该问题。

父级元素出发BFC也能解决margin塌陷

css 样式基本顺序

命名规范

学习链接 fontawesome、矢量图标、雪碧图、腾讯课堂案例_哔哩哔哩_bilibili

图片滚动动画

<style> 
    .parent{
        /* position: relative; */
        width: 889px;
        height: 500px;
        border: 2px solid red;
        overflow: hidden;
        margin-left: 200px;
    }
    .parent .child{
        width: 3556px;
        height: 500px;
        animation: mypic 10s;
        animation-iteration-count: infinite;

    }
    .parent .child img{
        float: right;
    }

    @keyframes mypic {
        25%{
            margin-left: 0px;
        }
        50% {
            margin-left: -889px;
        }
        75%{
            margin-left: -1778px;
        }
        100%{
            margin-left: -2667px;
        }
    }
</style>
</head>
<body>

<div class="parent">
    <div class="child"> 
        <img src="./demo1.jpg" alt="">
        <img src="./demo2.jpg" alt="">
        <img src="./demo3.jpg" alt="">
        <img src="./demo4.jpg" alt="">
    </div>
</div>
</body>
</html>

霸王龙不吃芹菜

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css-盒子等样式学习

实际是将logo-hd 变为块级然后图片设置logo 同样的高度和宽度利用overflow hidden 达到效果。body 外边距（IE8 默认上下16px,左右8px） (IE7 上下11px。将阴影遮挡去掉，可以将header 网上移动用relative + z-index。清除浮动方法一（将span变为p）span { clear:both}左边自适应,html,body要同时继承以上属性，不然就没有效果。兼容性（border-box）将边框收到盒子内部。
复制链接

扫一扫