1、新建一个html文件,命名为test.html。
2、在test.html文件内,使用div标签创建一个div,同时设置其class属性为con,主要用于下面通过该类名进行样式的设置。
3、在test.html文件内,在div内使用p标签创建一段测试文字的显示。
4、在test.html文件内,在div内,再使用div标签创建一个类名为ff的div,用于作为悬浮的div。
5、在test.html文件内,在css标签内,使用“*”初始化元素样式,设置外边距和内边距都为0。同时,设置类名为con的div的样式,设置其背景颜色为灰色,居中对齐,宽度为640px,高度为1000px。
6、在css标签内,再设置类名为ff的样式,设置其高宽都为100px,背景颜色为红色,使用position定位属性设置div在页面的绝对位置,距离页面顶部为20px,距离页面左边为0px,从而实现div悬浮在页面中。
7、在浏览器打开test.html文件,查看实现的效果。
属性值
float 是最开始出现的一种布局方式,主要解决:文本在图像周围环绕,也即应用于图像。但是在css中,任何元素都可以浮动, 浮动元素会生成一个块级框 ,而不论它本身是何种元素。
元素一般是处于普通流中,也即块级元素独占一行,从上往下依次显示布局。行级元素可以在一行显示多个,按照顺序进行显示布局。
而添加了 float 布局的元素则会脱离原来所在的文档流。并 ‘漂浮’ 在当前所在的文档流的位置(如果前一个元素没有添加 float 布局的情况下),由于当前元素文档流实际上没有被元素占用,因此当前元素之后的元素会按照普通流布局的方式,占用当前元素的文档流。表现为: 丢失空间
也即:
此时由于第一个元素添加了 float:left ,则脱离了原来的文档流,后面元素会向上移动,占用第一个元素的空间。
如果第二个元素也添加了 float ,那么可以这样去思考,由于第一个元素的原因,第二个元素所处的文档流变成了第一个元素所处的文档流,此时再给第二个元素添加 float ,那么也会像第一个元素一样,脱离当前的文档流,使得当前元素和第一个元素一样处于 '漂浮' 状态,并紧跟着第一个元素显示一排。
同样,如果第二个元素后面还有其他元素,那么也会向上移动,改变原来所处的文档流位置。
注意:添加了 float 的元素,只是在会脱离当前所在的文档流,但是仍然漂浮在当前文档流 上一层 ,而不是说直接脱离整个文档流,跑到所有文档流的最顶部 。
从上面案例可以看出,添加了浮动的元素会影响其后元素的布局。此外由于元素脱离原来的文档流,且父盒子没有添加高度属性,那么父盒子无法感知到子盒子的存在,因此父盒子不会被撑开。
知道了 float 带来的不好的地方,则需要去清除浮动带来的影响。
方法一:采用css clear 属性
将该属性添加在被浮动影响的后面元素,即可以清除浮动
则受浮动影响的元素就可以正常显示了
因此在受浮动影响的父元素,就可以利用此方法,在浮动元素之后新增加一个元素,使新增加的元素清除浮动,这样新增加的元素的位置就在浮动元素的下面,使得在一定程度上实现了撑开盒子的作用。
方法二:BFC
其次还可以采用BFC,使得父元素形成独立的空间,也即可以感知子元素的高度和宽度,在一定程度上也不会影响外面的元素的布局。
浮动元素边界不能超过父元素的padding
元素浮动后会变为块元素包括行元素如 span ,所以浮动后的元素可以设置宽高。
通过形状浮动可以让内容围绕图片,类似于我们在word 中的环绕排版。要求图片是有透明度的PNG格式。
shape-outside 定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。默认情况下,内联内容包围其边框, shape-outside 提供了一种自定义此包装的方法,可以将文本包装在复杂对象周围而不是简单的框中。
理解:使用形状值来定义浮动区域的浮动,这将使得内联内容会环绕着形状,而不是产生浮动的边框。
关键字属性值
函数值属性
url值
文字通过给定的图片,并且通过计算图片的透明度后获取的形状区域进行围绕,这里需要注意的是此效果必须在服务器端预览,本地预览会报图片跨域问题,给定的图片必须是有透明区域的图片
渐变值
按照给定的渐变通过计算排除透明通道后得到的形状,然后文字按照此形状的边缘进行环绕
最后:函数值/url/linear-gradient可以和关键字属性值搭配使用,此时关键字属性作为基本形状提供相应的参考框盒。
clip-path 使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。且此方式原来的区域仍然存在,只是显不显示的问题。裁剪之后只有规定的区域可以显示。
基本语法
其中:
.tl {
width: 240px
height: 193px
position: absolute/*这里一定要设置*/
z-index: 999999/*这里是该元素与显示屏的距离,据说越大越好,因为没有它也是可以的*/
margin-top: 20%
margin-left: -209px
background-image :url("/ship_three/images/tl.png")
-webkit-transition: .5s ease-in-out/* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */
-moz-transition: .5s ease-in-out/*这里为了兼容其他浏览器*/
-o-transition: .5s ease-in-out
background-image: url("/ship_three/images/tl.png")
}
可以,没问题CSS代码就是上面的。
扩展资料:div中style使用css代码
div中可以直接写CSS样式代码,只需要DIV代码(标签)中使用style属性即可直接写CSS样式。
DIV代码:
<div style="color:#F00border:1px solid #000width:300pxheight:100px">你好 DIVCSS5</div>
完整案例代码与效果截图:
完整HTML案例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>DIV直接写CSS DIVCSS5案例</title>
</head>
<body>
<div style="color:#F00border:1px solid #000width:300pxheight:100px">你好 DIVCSS5</div>
</body>
</html>
div标签内常用属性列表
1、style 设置css样式(扩展了解style标签)
2、align 设置div盒子内的内容居中、居左、居右
3、id 引人外部对应#(井号)选择符号样式
4、class 引人外部对应.(句号)选择符号样式
5、title 设置div(标题)鼠标经过时显示文字(扩展了解 title标签)
参考资料来源:DIV-百度百科