web浮动学习笔记07

最新推荐文章于 2024-07-12 01:09:29 发布

EIHH

最新推荐文章于 2024-07-12 01:09:29 发布

阅读量212

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/weixin_47281509/article/details/127103416

版权

浮动

应用场景

文字环绕
横向排列

浮动的基本特点

修改float属性值为:

left:左浮动,元素靠上靠左
right:右浮动.元素靠上靠右

默认值none

当一个元素浮动后,元素必定为块盒(更改display属性威威block)
浮动元素的包含块盒常规流一样为父元素的内容盒

盒子尺寸

宽度为auto时,适应内容宽度()
高度为auto时与常规流一致,适应内容高度
margin无论什么方向为auto时,不吸收剩余空间
边框内边距百分比设置与常规流一样

盒子排列

左浮动的盒子靠上靠左排列
右浮动的盒子靠上靠右排列
浮动盒子在包含块中排列时会避开常规流盒子
常规流块盒在并列时,无视浮动盒子
行盒在排列时,会避开浮动盒子
外边距合并不会发生

如果文字没有在行盒中浏览器会自动生成一个行盒来包裹文字该行盒叫做匿名行盒.

高度坍塌

高度坍塌的根源:常规流盒子的自动高度,在计算时不会考虑浮动盒子.
清除浮动,涉及css属性:clear

默认值:none
left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
right:清除左浮动,该元素必须出现在前面所有右浮动盒子的下方
booth:清除左右浮动,出现在盒子的下方

//reset.css

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

 vertical-align: baseline;

}



/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

 display: block;

}



body {
  line-height: 1;

}



ol, ul {
 list-style: none;

}



blockquote, q {
 quotes: none;

}



blockquote:before, blockquote:after,

q:before, q:after {

 content: '';
 content: none;

}



table {

  border-collapse:collapse;
  border-spacing: 0;

}
a{
    text-decoration: none;
    color: inherit;
}

//text.css
body{
    color: #333;
}
.clearfix::after{
    content: " ";
    display: block;
    clear: both;
}
.main{
    line-height: 1.5;
}
.main .nav{
    height: 60px;
    background: #47464a;
    color: #999;
    text-align: center;
    line-height: 60px;
}
.main .nav a{
    margin: 0 38px;
}
.main .nav a:hover{
    color: #fff;
}
.main .nav a.select{
    color: #ef4283;
}
.main .container{
    width: 1120px;
    margin: 0 auto;
}
.main .container .choose{
    border: 1px solid #e5e5e5;
    margin: 40px 0;
    font-size: 14px;
    line-height: 30px;
    padding: 0 30px;
}
.main .container .choose .choose-item{
    margin: 1em 0;
    border-bottom: 1px dotted #e5e5e5;

}
.main .container .choose .choose-item .no-line{
    border: none;  
}
.main .container .choose .choose-item .left{
    float: left;
    color: #999;
}
.main .container .choose .choose-item .right{
    float:left;
    width:1020px;
}
.main .container .choose .choose-item .right li{
    float: left;
    margin: 0 9px;
    padding: 0 6px;
}
.main .container .choose .choose-item .right li:hover{
    color: red;
}
.main .container .choose .choose-item .right li.select{
    background: #ef4283;
    color: #fff;
    border-radius: 25px;
}
.main .container .movies .movie-item{
    float: left;
    width: 160px;
    margin:10px 32px 10px 0;
}
.main .container .movies .movie-item:nth-child(6n){
    margin-right: 0;
}
.main .container .movies .movie-item .poster img{
    width: 160px;
    height:220px;
}
.main .container .movies .movie-item .name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
    text-align: center;
}
.main .container .movies .movie-item .score{
    color: #ffb400;
    text-align: center;
    line-height: 2.5;
    font-style: italic;
}
.main .container .movies .movie-item .score::first-letter{
    font-size: 1.5em;
}

.pager{
    margin: 2em 0;
    text-align: center;
    clear: both;
}
.pager a{
    border: 1px solid #d8d8d8;
    padding: 5px 10px;
}
.pager a:hover{
    border-color: red;
}

//测试代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/text.css">
</head>
<body>
    <div class="main">
              <nav class="nav">
                <a href="" class="select">正在热映</a>
                <a href="">即将上映</a>
                <a href="">经典影片</a>
              </nav>

              <div class="container">
                   <div class="choose">
                        <div class="choose-item clearfix">
                             <div class="