1.CSS布局三种机制
2.CSS浮动
3.CSS浮动特点
4.CSS清除浮动
扩展css3属性
圆角边框
矩形 -- 包含正方形和长方形。
正方形变成圆 ---- border-radius:宽高的一半(50%)。
矩形变成椭圆 ---- border-radius值:高度的一半。
.radius {
width: 200px;
height: 120px;
background-color: pink;
/* 四个值遵循顺时针,从上左角开始数 */
border-radius: 0px 40px 0 40px;
}
3. 可以设置不同的圆角:
<div class="radius"></div>
/*圆形的大头贴*/
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
<img src="./img.jpg" alt="">
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影(默认,但是不要写这个值);
注意:水平阴影和垂直阴影是必须书写,不能省略。
双阴影的写法,如下:
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .6),
8px 10px 9px -3px yellow;
}
<div></div>
文字阴影
text-shadow:水平(必须) 垂直(必须) 模糊距离 阴影颜色。
文字也可以双阴影,基本不用
text-shadow: 5px 2px 3px rgb(100, 12, 88), 6px 6px 5px rgb(90, 100, 0);
css布局三种机制
三种机制 -- 普通流(标准流) 浮动 定位
普通流
- 块级元素会独占一行,从上向下排列
- 常见的块级标签:div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序从左到右顺序排列,碰到父元素边缘自动换行
- 常用元素:span、a、i、em等
为什么需要浮动
网页布局要求,标准流不能满足我们的需要了,因此我们需要浮动来完成网页布局。
举例子:
前面学过行内块,行内块可以一排显示;但是中间会有缝隙,所以不能满足我们的开发需求。
认识浮动
选择器{float:属性值;} 值:none(没有) left(左浮动) right(右浮动)
注意:标准流占有位置。
浮动的特点(重点!)
- 浮动特点1 --- 脱离标准流,不占位置(自己原来的位置漏给后面的标流)
- 浮动特点2 --- 浮动的元素一排显示,如果父亲装不下了,默认另起一行显示。浮动的元素之间默认无缝隙。
- 浮动特点3 -- 任何元素都可以添加浮动,无论它是块元素还是行内元素,浮动后可以直接设置宽高,默认类似于行内块特性,不需要display转换。
权重复习:
*和继承 0000
标签 0001
类选择器(伪类) 0010
ID选择器 0100
行内样式 1000
!important 无穷大
浮动排版注意点
- 一个技巧:一般一个标流的父亲,里面一个孩子浮动了,其他的孩子也都浮动。
浮动与兄弟盒子的关系(重点)
标准流--占有位置 浮动--- 不占位置(脱标)
浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流。
浮动元素与父盒子的关系(重点)
- 浮动的元素压不住父亲的边框
- 浮动的元素压不过父亲的padding
- 后面学的定位可以随便压
清除浮动(理解)
- 清除浮动不是真的把浮动清除,而是清除加了浮动带给后面的标流的影响。
如果子盒子是标流,因为标流占有位置,所以父亲能检测到高度。
子盒子浮动了,不占有位置,又因为父亲高度为零;所以父亲检测不到高度。
清除浮动的本质
清除前面的盒子设置浮动后,带给后面盒子的影响。
额外标签法(不推荐使用)
- 在最后一个加了浮动元素的末尾添加一个块级别的空标签。
<div style="clear:both;"></div>
--- 这个空标签一定是块元素.
缺点:结构容易乱。
给浮动元素的父亲添加overflow属性方法(也不是很推荐)
overflow:hidden;
缺点:内容增多的时候导致内容被剪贴掉,无法显示需要溢出的内容。
after伪元素清除浮动(推荐)
.clearfix:after {
/* 使用伪元素必须添加content属性 */
content: "";
/* 因为伪元素是行内元素,所以需要转换成块元素 */
display: block;
/* 兼容 */
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
双伪元素清除浮动(推荐)
.clearfix::before,
.clearfix::after {
/* 要想使用伪元素,必须写上content属性 */
content: "";
/* 这里写成block也是没有问题的,为什么使用table,这是老的写法,兼容老版本浏览器 */
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
什么时候清除浮动?
1.父亲没有高度。
2.子盒子又浮动。
3.因为浮动影响了后面的布局。