css-盒子等样式学习-Toy模板网

这篇具有很好参考价值的文章主要介绍了css-盒子等样式学习。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

css-盒子等样式学习,css,学习,前端

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

css-盒子等样式学习,css,学习,前端兼容性（border-box）将边框收到盒子内部

css-盒子等样式学习,css,学习,前端初始化div 不用管box-setting

css-盒子等样式学习,css,学习,前端 content-box 还原

css-盒子等样式学习,css,学习,前端创建为一个类，让所有需要还原的类进行继承

css-盒子等样式学习,css,学习,前端

padding 用法表示 css-盒子等样式学习,css,学习,前端 margin上下左右边距

css-盒子等样式学习,css,学习,前端

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

css-盒子等样式学习,css,学习,前端

css-盒子等样式学习,css,学习,前端常规项目设计定位方式

css-盒子等样式学习,css,学习,前端

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

css-盒子等样式学习,css,学习,前端

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

css-盒子等样式学习,css,学习,前端 z轴处理图层问题

css-盒子等样式学习,css,学习,前端页面自适应2栏布局

overflow-y 让其失去滚动条

css-盒子等样式学习,css,学习,前端左边自适应,html,body要同时继承以上属性，不然就没有效果

css-盒子等样式学习,css,学习,前端

float能将图片浮动在文字中

css-盒子等样式学习,css,学习,前端

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

float 以后就变成内联块元素

css-盒子等样式学习,css,学习,前端

必须两边都加上浮动

css-盒子等样式学习,css,学习,前端

：伪类用法

:：伪元素 css-盒子等样式学习,css,学习,前端 content 必须有 inline-block 可以变成块级元素

css-盒子等样式学习,css,学习,前端清楚浮动的方法

css-盒子等样式学习,css,学习,前端将边框收进元素中

css-盒子等样式学习,css,学习,前端动态获取数据

css-盒子等样式学习,css,学习,前端

css-盒子等样式学习,css,学习,前端向里扩散

css-盒子等样式学习,css,学习,前端

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

css-盒子等样式学习,css,学习,前端浏览器兼容性

css-盒子等样式学习,css,学习,前端纯园 50% 半圆角 height/2 +px 圆角直接用px

css-盒子等样式学习,css,学习,前端

css-盒子等样式学习,css,学习,前端保持图片缩放(位置)不变

css-盒子等样式学习,css,学习,前端图片自适应

contian同样达到如此效果

css-盒子等样式学习,css,学习,前端

背景图片设置不滚动

css-盒子等样式学习,css,学习,前端复合使用

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

css-盒子等样式学习,css,学习,前端

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

css-盒子等样式学习,css,学习,前端

保持宽度一致

css-盒子等样式学习,css,学习,前端

css-盒子等样式学习,css,学习,前端解决浮动撑开的问题 BFC特性

可解决该问题。

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

css-盒子等样式学习,css,学习,前端 css 样式基本顺序

css-盒子等样式学习,css,学习,前端

css-盒子等样式学习,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>

文章来源地址https://www.toymoban.com/news/detail-813123.html

到了这里，关于css-盒子等样式学习的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！