CSS教程
css-浮动及页面布局
行高作用：让文字垂直居中！
/*line-height: 300px;*/(等于盒子的高度）
/*1、数字+px*/
/*2、数字+em 1em = font-size
谷歌浏览器一般默认的文字大小：16px
/*line-height: 2em;*/
/*3、百分数
百分数*font-size = 200% * 16px = 32px
/*line-height: 200%;*/
/*4、单纯的数字（倍数）
倍数*font-size = 2 * 16px = 32px;
/*line-height: 2;*/
/* line-height: 300px;
font: italic 700 20px '楷体';*/
font属性连写的完整形态：
font：style weight size/line-height family；
/*font: italic 700 20px/300px '楷体';*/
注意点：
如果需要同时设置font的连写和line-height的属性
1、要么把line-height写在连写的下面
2、要么把line-height写在font连写的里面
margin的合并现象：
当盒子是水平布局的时候：左右的margin会叠加-》两个盒子之间的距离为margin的和
当盒子是垂直布局的时候：上下的margin会合并-》两个盒子之间的距离为两者margin的最大值
解决方法：避免就好
margin的塌陷现象：嵌套的块级元素
互相嵌套的块级元素，如果此时给子元素设置margin-top，此时父元素会一起往下移动！
解决方法：
1、给父元素设置一个border-top
(相当于给老父亲添加一块钢板)
2、给父元素设置一个padding-top
(相当于给老父亲添加一层泡沫)
3、给父盒子设置一个overflow：hidden =》 触发了父盒子的BFC（块级格式化上下文） =》相当于变成了一个铁盒子！！
4、设置 float：left
5、转换inline-block
.father {
width: 400px;
height: 400px;
background-color: pink;
border-top: 1px solid #000;
padding-top: 1px;
overflow: hidden;
float: left;
display: inline-block;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
浮动：让原来垂直布局的盒子变成水平布局（一个在左，一个在右）
代码：
1、float：left 左浮动
2、float：right 右浮动
.red {
background-color: red;
float: left;
}
.green {
background-color: green;
float: right;
}
标准流：浏览器默认摆放盒子的顺序（从上往下、从左往右）
浮动的特点:
1、浮动的元素会脱离标准流（脱标）
-》相当于飘起来了
-》在标准流中不占位置了！！！
2、浮动之后的元素会覆盖在标准流中的元素之上（覆盖）
浮动之后的元素比标准流中的元素高出半个级别
3、浮动找浮动，不浮动找不浮动（浮找浮）
4、浮动之后的元素只能影响下面的元素（浮动之后只影后）
浮动之后的元素受到边界的影响
5、浮动之后的元素有特殊的显示效果（一行多个，可设置宽高）
1、一行可以显示多个
2、可以设置宽高（如a标签）
类似于是行内块元素的显示方式！！
注意：不要把浮动之后的元素当做是行内块元素来使用！！
页面布局练习：
* {
margin: 0;
padding: 0;
}
.top {
/*width: */
height: 80px;
background-color: pink;
}
.nav {
/*width: 1000px;*/
height: 80px;
background-color: orange;
/*margin: 0 auto;*/
}
.banner {
width: 1000px;
height: 600px;
background-color: yellow;
/*margin: 0 auto;*/
}
.banner .left {
width: 400px;
height: 600px;
background-color: red;
float: left;
}
.banner .right {
width: 600px;
height: 600px;
background-color: green;
float: right;
}
/*把宽度固定并且水平居中的代码抽取出一个类*/
.w {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="nav w"></div>
<div class="banner w">
<div class="left"></div>
<div class="right"></div>
</div>
seo页面导航：
/*1、清除默认的margin和padding*/
* {
margin: 0;
padding: 0;
}
/*2、找到ul，去除小圆点*/
ul {
list-style: none;
}
/*3、给li标签设置float：left 让li标签在一行中显示*/
ul li {
float: left;
}
/*4、给a标签设置宽高*/
ul li a {
width: 80px;
height: 60px;
background-color: pink;
/*要给a标签设置宽高*/
/* display: inline-block; */
/*display: block;*/
float: left;
text-decoration: none;
text-align: center;
line-height: 60px;
color: #fff;
}
ul li a:hover {
background-color: green;
}
.red {
width: 1000px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- ul>li*8>a[#]{新闻$} -->
<ul>
<li><a href="#">新闻1</a></li>
<li><a href="#">新闻2</a></li>
<li><a href="#">新闻3</a></li>
<li><a href="#">新闻4</a></li>
<li><a href="#">新闻5</a></li>
<li><a href="#">新闻6</a></li>
<li><a href="#">新闻7</a></li>
<li><a href="#">新闻8</a></li>
</ul>
<div class="red"></div>
清楚浮动：清除浮动带来的影响
影响：当父元素没有设置高度，此时由子元素撑开的！！！
如果此时子元素浮动了（相当于飘起来了-》在标准流中不占位置），此时不能把父元素撑开！
如何清除浮动：
1、额外标签法 ( 最后 块级 )
1、在父元素里面的最后的添加一个块级元素
2、给添加的块级元素设置清除浮动的核心代码clear:both;
缺点：需要添加额外的标签，会让页面的结构变得很复杂！！！
2、直接给父元素设置overflow:hidden;
3、伪元素清除法
伪元素：其实就是由css设置的元素
::before 在...之前
::after 在...之后
::的写法是css3所规定的
伪元素 ::
伪类选择器 :hover
在css3之前的伪元素的写法 :after
如果要让css3之前的浏览器上显示伪元素，应该写几个:????
:after
本质上和额外标签法是一样！！！
伪元素默认是行内元素！！！
4、简单粗暴的方法：直接给父元素设置高度！！！
.clearfix::after {
/*必加的属性：content*/
content: '';
/*转换为块级元素*/
display: block;
/*清除浮动的核心代码*/
clear: both;
/*其实有上面三个属性已经可以生效了，但是可能在开发的时候，会有额外的几个属性！！*/
/*目的：在页面中看不到伪元素*/
height: 0;
line-height: 0;
visibility: hidden;
}
.clear {
clear: both;
}
.red {
width: 600px;
height: 600px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<!-- <div class="clear"></div> -->
</div>
<!-- <div class="red"></div> -->
</body>
浮动最开始的作用：图文环绕
现在：页面的布局（让原来垂直布局的盒子变成水平布局）
img {
float: left;
}
网页头部案例：
<style>
* {
margin: 0;
padding: 0;
}
.top {
width: 760px;
height: 150px;
background: url(images/banner_bg.jpg);
}
ul {
list-style: none;
background: url(images/button1_bg.jpg);
width: 760px;
}
ul li {
float: left;
}
ul li a {
width: 80px;
height: 32px;
background-color: pink;
float: left;
text-decoration: none;
text-align: center;
line-height: 32px;
color: red;
font-size: 12px;
background: url(images/button1.jpg);
}
ul li a:hover {
background: url(images/button2.jpg);
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="top">
<img src="images/banner1.jpg" alt="">
</div>
<ul class="clearfix">
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
</ul>
</body>
行内元素内外边距失效的情况：
先分析：margin
左右的margin：能生效的！！！
上下的margin：是失效的！！没有作用的！！！
分析padding：
左右的padding：能生效的！！
上下的padding：是失效的！！下padding看起来有效果，但是其实没有作用的！！！！
* {
margin: 0;
padding: 0;
}
span {
background-color: red;
/*margin-bottom: 100px;*/
padding-bottom: 100px;
}
浮动之后的元素是在父元素的content中：
.father {
width: 400px;
height: 400px;
background-color: pink;
border: 1px solid #000;
padding: 20px;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
float: right;
}
<div class="father">
<div class="son"></div>
overflow:设置内容溢出部分的显示效果
取值：
1、visible：溢出部分可见！！！
2、hidden：溢出部分隐藏（内容！！！！！）
3、scroll：显示滚动条（无论内容有多少，都会显示滚动条）
4、auto：自动根据内容的多少，显示或者隐藏滚动条
overflow: auto; <div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
css三种隐藏方式：
1、overflow：hidden：让超出部分的内容隐藏
2、visibility: hidden 让元素本身隐藏（看不见）！！-》仍然是占位置！！！
3、display：none；让元素本身隐藏（看不到！！）-》不占位置！！！
/*overflow: hidden;*/
/*visibility: hidden;*/
-
uniapp动态设置不同的css有哪些方法？-icode9专业技术文章分享12-07
-
UniApp 中，怎么通过 CSS 设置 view 组件的水平居中效果？-icode9专业技术文章分享12-07
-
TailwindCSS开发入门教程12-06
-
TailwindCSS项目实战：从入门到上手12-06
-
TailwindCss项目实战：初学者指南12-06
-
TailwindCSS入门指南：轻松上手实用教程12-05
-
TailwindCss入门指南：轻松上手实用技巧12-05
-
Tailwind.css入门：简洁高效的设计利器12-04
-
Tailwind.css学习：从入门到实战的全面指南12-03
-
Tailwind.css入门指南：快速上手实用教程11-29
-
CSS-Module学习：轻松入门指南11-14
-
CSS9资料入门指南11-12
-
CSS浮动资料详解：初学者指南11-12
-
CSS选择器资料详解与实战教程11-12
-
CSS样式资料：初学者必备指南11-12
