正在加载…
请使用更现代的浏览器并启用 JavaScript 以获得最佳浏览体验。
加载论坛时出错,请强制刷新页面重试。
css
mufen
CSS 浮动
1、浮动元素脱离标准流
2、浮动元素会在一行内显示并且元素在顶部对齐
3、浮动的元素会具有行内块元素的特性
语法
代码登录后可见
属性
描述
none
无
left
左
right
右
设置 float 重要特征:
1、脱离标准流
2、浮动盒子不再保留原先位置
3、 浮动盒子是互相贴在一起的(无缝隙)如果父级宽度装不下盒子,多处的文字就会另起一行对齐
注 :任何元素都可以添加浮动,添加之后具有行内元素的特点,块级元素没有设置高度,默认和父级元素一样,之后根据内容变化宽度。
约束浮动元素位置:有标准流的父元素排列位置上下位置,之后内部子元素采取浮动排列左右位置。
注:
1 、浮动和标准流的父盒子搭配
2、一个元素浮动了,其他元素也要浮动(浮动盒子只影响浮动盒子后面的标准流)
清除浮动
代码登录后可见
属性
描述
both
同时
left
左
right
右
1、 额外标签法(隔墙法)
块元素可以不能行内元素
在浮动元素末尾添加一个空标签
2、父级添加 overflow:hidden auto scroll
3、after 伪元素
4、双伪元素清除浮动
注:2、3、4都是给父级元素添加
图片分类
1、 jpg:对色彩的信息保留较好,高清,颜色多
2、gif:保存透明的背景和动画效果
3、png:保持背景透明
4、psd:从上面复制文字,获得图片,测量大小和距离
css 书写顺序
1、 布局定位 display/float/position/ clear/ overflow
2、自身定位 width/height/margin/padding/border/background
3、文本定位 color/font/text-decoration/text-align
4、其它定位 content/cursor/border-radius/box-shadow
导航栏注:
1、在实际开发中,不会直接用链接 a 而是用 li 包含链接(li+a)的做法
2、让导航栏在一行显示,给 li 加浮动