css浮动

最新推荐文章于 2024-08-16 20:24:29 发布

E___V___E

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量346

点赞数 10

文章标签： css 前端

本文链接：https://blog.csdn.net/E___V___E/article/details/135935075

版权

ps基本操作

视图菜单中有标尺 CTRL+r

ctrl+加号放大，那么减号就是缩小

产品模块实战

<style>/*笔记本设置里面默认文本缩放是%125，截出的图片都偏大*/
    a{
        color:#333;
        text-decoration:none;
}
    *{
        margin:0;
        padding:0;
}
    .box{
        width:298px;
        height:415px;
        background-color:pink;
        margin:100px auto;
}
    .box.img{
        width=100px;
}
    .review{
        margin-top:30px;
        padding:0 28px;/*p盒子没有width，padding是无妨的*/
        font-size:14px;
        
}
    .info{
        font-size:14px;
        margin-top:15px;
        padding:0 28px;
}
    .info h4{
        display:inline-block;
        font-weight:400;
}
    .info span{
        color:#ff6700;
} 
    .info em{
        font-style:normal;
        margin:0 6px 0 15px;
}

</style>
</head>
<body>
    <div class="box">
    <img src="images/img.jpg" alt="">
    <p class="review">离转正还差一点点继续答题</p>
    <div class="appraise">1080p高清选集字幕1.5x</div>
    <div class="info">
            <h4><a herf="#">redmi</h4>
            <em>|</em>
            <span>99.9yuan</span></div>
    </div>
</body>

标签都是有语义的，标题用h。

我本来学这里的时候也是一脸懵逼，学完JavaScript，然后学JavaScript高级，本来打算学vue的，回来复习下css之前不懂得现在豁然开朗，还是要多敲，多练习，练得多了自然就明白了

圆角边框

border-radius：30px；

border-radius：30px 10px 20px；左上右上右下左下

图片阴影

box-shadow：水平垂直模糊距离阴影尺寸阴影颜色外改内inset

文字阴影

text-shadow：水平垂直模糊距离

上面是废话

CSS浮动

纵向排列标准流

如何使用左右两个盒子对齐，用

浮动

float用于创建浮动框，直到边缘触及边缘，无边框

选择器{float 属性值}right

浮动特性

脱离标准普通流的移动到指定位置
浮动盒子不在保留原先位置

如果多个盒子设置浮动，会在一行显示顶端对齐

浮动元素具有行内块特性，经常在居中的盒子里放置浮动的盒子

........
<style>
    .box{
        width:1200px;
        height:460px;
        margin:0 auto;
        background-color:red;

}
    .left{
        width:230px;    
        float:left;
        height:460px;
}
    .right{

        width:970px;
        background-color:skyblue;
        height:460px;
}
</style>
</head>
<body>
    <div class="box">
        <div class="left">LEFTLEFT</div>
        <div class="right">RIGHTRIGHT</div>
    </div>
</body>

<style>
    *{
        margin:0;
        padding:0;

}
    li{
        list-style:none;
        
}
    .box{
        width:1226px;
        height:285px;
}
    .box.last{
        margin-right:0;

}
</style>
</head>
<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>    
        <li>3</li>   
        <li class="last">4</li>   
  
</body>/*半成品*/

<style>
    .box{
        background-color:pink;
        width:;
        height:;
        margin:0 auto;
}    
    .left{
        
        
        
        
}
    .right>div{
        float:left;
        width:234px;

        
        weight:300px;       
        margin-left:14px;
        margin-bottom:14px;
}
/*这里小盒子的margin已经被挤出去了留在大盒子里的恰好是内容部分*/
</style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class"right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>

        </div>
     
    </div>
</body>

浮动布局注意点：有父元素再浮动子元素，对于标准浮动标准会形成

标准

浮动*标准

对于浮动标准浮动会形成

浮动*标准

浮动

/*因为浮动是水平铺的，第一个浮动了，第三个再左浮动就只能贴着第一个边缘，又因为第二个盒子标准流上移了，第三个盒子在垂直方向上只能在第二个盒子的下方*/

浮动的盒子只会影响浮动后面的标准流，不会影响前面的标准流

对于不定高度的父盒子，也就是jd商品栏无穷无尽，让子盒子撑开，父元素的高度为0，对下一个父元素排版产生影响；

那么就要清除浮动，父盒子根据子盒子自动调整高度

选择器{clear：属性值；}both是左右闭合浮动

清除浮动

1.额外标签

在最后一个浮动的盒子后面加一个块级<div class="clear"></div>

2.父级overflow

设置为overflow：hidden；auto scroll也可以，但是这样无法显示溢出的部分

3.：after伪元素

.clearfix:after{ 
content: ""; 
display: block;
 height: 0;
 clear: both; 
visibility: hidden;
}
.clearfix { 
*zoom: 1;
}

同样清除浮动很好的，因为你可以省去计算父容器高度的时间

最后设置可见性visibility为隐藏hidden就可以了，这个元素的内容为空，是个块级元素，高度为零，加了clear属性限制浮动元素了，从字面上理解就是标准流元素层面在父元素后面（after）加了一个元素

4.双伪元素清除浮动

.clearfix:before, .clearfix:after {
content: ""; 
display:table;
}
.clearfix:after{
clear :both;
}
.clearfix{
*zoom: 1;
}

就是在大盒子前后各加一个盒子

E___V___E

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
css浮动

ps基本操作视图菜单中有标尺 CTRL+rctrl+加号放大，那么减号就是缩小产品模块实战标签都是有语义的，标题用h。
复制链接

扫一扫