盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中的多个盒子排列规则
视觉格式化模型,大体上将页面中的盒子的排列分为三种方式:
常规流,文档流,普通文档流,常规文档流
所有元素,在默认情况下,都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列
包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子活动的范围
绝大部分的情况下,盒子的包含块,为其父元素的内容块
块盒
宽度的默认值是auto
margin的取值也可以是auto,默认值0
auto:将剩余空间吸收掉
width的吸收能力强于margin
若宽度、边框、外边框、内边框计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收
在常规流中,块盒在其包含块中居中,可以定宽,然后左右margin-left,margin-right设置为auto
height:auto,适应内容的高度
margin:auto,表示0
padding,宽,margin可以取值为百分比
所有百分比相对于包含块的宽度
高度的百分比:
1)包含块的高度是否取决于子元素的高度,设置高度无效
2)包含块的高度不取决于子元素的高度,百分比相对于父元素高度
两个常规流块盒,上下外边距相邻,会进行合并
两个外边距取最大值
修改float属性值为:
-left:左浮动,元素靠上靠左
-right:右浮动,元素靠上靠右
默认值为:none(常规流)
1)当一个元素浮动后,元素必定为块盒
2)浮动元素的包含块,和常规流一样,为父元素的内容盒
只有在常规流盒子中才会发生外边距合并
如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒。
高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子
浮动盒子脱离了常规流,因此在常规流盒子在计算高度的时候不会考虑浮动盒子
解决这个问题的方法是清除浮动:
涉及Css属性:clear
clear:默认值为none
-left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
-right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
-both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
解决方法
.clearfix::after{
content:“”;
display: block;
clear:both;}
注意伪元素的里面必须加上content
设置行高可以line-height等于文字的大小
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>Documenttitle>
<style>
.container{
width:500px;
height:500px;
background:lightblue;
}
.container div{
height:100px;
background:#008c8c;
margin:auto;
}
.container .left{
float:left;
}
.container .right{
float:right;
}
style>
head>
<body>
<div class="container">
<div class="left">Lorem ipsum dolor sit amet.div>
<div class="right">Lorem.div>
div>
body>
html>
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>Documenttitle>
<style>
.container{
background:lightblue;
padding:30px;
}
.item{
width:200px;
height:200px;
background:#008c8c;
margin:6px;
float:left;
}
/* .clearfix{
height: 60px;
background: blue;
clear:both;} */
.clearfix::after{
content:"";
display: block;
clear:both;
}
style>
head>
<body>
<div class="container clearfix" >
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
div>
body>
html>
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>正在热映--猫眼电影title>
<link rel="stylesheet" href="../定位/css/reset.css">
<link rel="stylesheet" href="../浮动/movie.css">
<link rel="stylesheet" href="../浮动/common.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-area">
<div class="choose-item clearfix">
<div class="left">类型:div>
<div class="right">
<ul class="clearfix">
<li class="select"><a href="">全部a>li>
<li><a href="">爱情a>li>
<li><a href="">喜剧a>li>
<li><a href="">动画a>li>
<li><a href="">剧情a>li>
<li><a href="">恐怖a>li>
<li><a href="">惊悚a>li>
<li><a href="">科幻a>li>
<li><a href="">动作a>li>
<li><a href="">悬疑a>li>
<li><a href="">犯罪a>li>
<li><a href="">冒险a>li>
<li><a href="">战争a>li>
<li><a href="">奇幻a>li>
<li><a href="">运动a>li>
<li><a href="">家庭a>li>
<li><a href="">古装a>li>
<li><a href="">武侠a>li>
<li><a href="">西部a>li>
<li><a href="">历史a>li>
ul>
div>
div>
<div class="choose-item clearfix">
<div class="left">地区:div>
<div class="right">
<ul class="clearfix">
<li><a href="">全部a>li>
<li><a href="">大陆a>li>
<li class="select"><a href="">美国a>li>
<li><a href="">韩国a>li>
<li><a href="">日本a>li>
<li><a href="">中国香港a>li>
<li><a href="">中国台湾a>li>
<li><a href="">泰国a>li>
<li><a href="">印度a>li>
<li><a href="">英国a>li>
<li><a href="">意大利a>li>
<li><a href="">澳大利亚a>li>
<li><a href="">西班牙a>li>
<li><a href="">德国a>li>
<li><a href="">法国a>li>
<li><a href="">葡萄牙a>li>
<li><a href="">伊朗a>li>
<li><a href="">俄罗斯a>li>
<li><a href="">朝鲜a>li>
<li><a href="">其他a>li>
ul>
div>
div>
<div class="choose-item clearfix no-line">
<div class="left">年代:div>
<div class="right">
<ul class="clearfix">
<li class="select"><a href="">全部a>li>
<li><a href="">2021a>li>
<li><a href="">2020a>li>
<li><a href="">2019a>li>
<li><a href="">2018a>li>
<li><a href="">2017a>li>
<li><a href="">2016a>li>
<li><a href="">2015a>li>
<li><a href="">2014a>li>
<li><a href="">2013a>li>
<li><a href="">2012a>li>
<li><a href="">2011a>li>
<li><a href="">2010a>li>
<li><a href="">2009a>li>
<li><a href="">2008a>li>
<li><a href="">2007a>li>
<li><a href="">2006a>li>
<li><a href="">2005a>li>
<li><a href="">2004a>li>
<li><a href="">2003以前a>li>
ul>
div>
div>
div>
<div class="movies clearfix">
<div class="movie-item">
<div class="poster">
<a href="">
<img class="photo" src="./长津湖.webp" alt="">
a>
div>
<div class="name">
<a href="">
长津湖
a>
div>
<div class="score">
9.4
div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>
<div class="movie-item">
<div class="poster"><a href=""><img class="photo" src="./长津湖.webp" alt="">a>div>
<div class="name"><a href="">长津湖a>div>
<div class="score">9.4div>
div>