目录
一 浮动
浮动布局
div:nth-of-type(1) {
background-color: red;
float: left;
}
div:nth-of-type(2) {
background-color: green;
float: left;
}
div:nth-of-type(3) {
background-color: blue;
float: left;
}
利用float设置浮动
二 浮动布局影响解决
h3 {
/* clear: left; */
/* 清除浮动对排版的影响 */
clear: both;
}
/* 父级元素添加伪类 */
未加clear:both如图所示:
添加clear:both时,修复高度塌陷问题,如图所示:
三、浮动标签父级高度塌陷的问题
设置5px外边距,box宽度设置让其3个排在一行。
方法一 解决父级元素高度塌陷问题
#box::after{
content:'630px';
display:block;
clear:both;
}
设置不影响后面的排版。
clear:both起了决定性作用:
效果前:
高度塌陷问题:
加
#box::after{
content:'630px';
display:block;
clear:both;
}
后:
再加:
<div id="box">
<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>9</div>
</div>
clear:both起了决定性作用:自动修复高度塌陷问题。
四、before、after标签的使用
代码:
<body>
<p>我是中间的文字</p>
</body>
在style里面添加:
p::before {
content: '前面增加的文字';
color: red;
}
p::after {
content: '后面增加的文字';
color: green;
font-size: 20px;
}
效果如图所示:
列表的制作
bored-radius设置圆角
li::before将其转化为行内块元素
调节外边距margin
效果如图所示:
五、overflow属性的使用
overflow:hidden;
p{
width: 500px;
height: 100px;
border: 1px solid red;
line-height: 26px;
margin: 50px auto;
overflow: hidden;
}
效果如图所示:
p{
width: 500px;
height: 150px;
border: 1px solid red;
line-height: 26px;
margin: 50px auto;
/* 溢出时出现滚动条 */
overflow: scroll;
}
效果如图所示:
p{
width: 500px;
height: 300px;
border: 1px solid red;
line-height: 26px;
margin: 50px auto;
/* 有溢出时出现滚动条 否者不出现滚动条 */
overflow: auto;
}
当高度调至300px,不会出现滚动条
如图所示: