Html5与Css3元素可见性、浮动、定位、对齐(九)
来源:互联网 发布:首席网络运营官 编辑:程序博客网 时间:2024/05/14 10:09
控制元素的显示类型
块级元素
dispaly:block;
行内元素(显示设置设置宽度、高度不起作用)
display:inline;
1.不接受padding设置,但padding-top和padding-bottom会越界进入相邻元素的区域,而不是局限于该元素本身的空间
2.可以通过设置行高改变行内元素框的高度
3.可以通过设置水平边框、内边距、外边距改变行内元素框的宽度
混合显示:该元素与其他元素出现在同一行,同时也具有块级元素的功能(可设置高度)
display:inline-block;
隐藏元素:不显示且不占任何视觉空间
display:none;
对于table有
display:inline-table;
非list元素变成list的形式
display:list-item;
控制元素可见性
隐藏元素:隐藏后,原来的位置会出现空白区域
visibility:hidden;
盒子容纳不下的内容显示
overflow
hidden
scroll
auto
visible
overflow-x
overflow-y
元素周围外边距
1.相互接触的两个margin,仅使用较大的(上下)外边距,另一个外边距叠加。左右外边距不叠加。
2.使主题内容在浏览器里居中。为内容容器添加width,左右外边距为auto
.page{ width:960px; margin:0 auto;}
3.em值用于内边距和外边距,它的值是相对于元素字体大小,而不是相对于父元素字体大小
p{ font-size:14px; padding:.5em; <!--7/14=0.5-->}
4.对内边距和外边距使用百分数,通常不会将它们用于上下边距的值,因为这个值是基于其包含块的宽度的
使元素浮动
1.使文字环绕在图片周围,将图片设置为左浮动
.post-photo{ float:left;}
2.将main与sidebar分栏,左边为左浮动,右边为右浮动
为什么中间会有页脚?
因为浮动元素不占据空间
<!--左浮动和右浮动,高度为0,页面页脚直接显示在容器下面-->main{ float:left;}.sidebar{ float:right;}
3.(1)黄色部分取决与文字的高度
(2)章节section页脚,需要清除浮动,在图的下方显示
<!--与post-photo一个父元素-->.post-footer{ clear:left;}
3.解决页面页脚
(1)同时清除左、右浮动 clear:both;
(2)当无法影响容器高度、浮动或不浮动的元素
(3)解决高度为0,不能显示背景颜色的问题
父元素自清除:在样式表中引入.clearfix的规则,并为浮动元素的父元素添加clearfix类
如何运用?(待补充)<!--与main和sidebar不是同一个父元素-->.clearfix:before,.clearfix:after{ content:" "; display:table;}.clearfix:after{ clear:both;}.clearfix{ *zoom:1;}
<div class="container" clearfix> <main role="main"> ... </main> <div class="sidebar"> ... </div></div>
父元素自清除:或者用overflow代替上两步(慎用)
<!--会将内容截断-->.container{ overflow:hidden; //会将内容截断}<!--会出现滚动条-->.container{ overflow:hidden; }
元素定位
绝对定位
.example{ position:relative; top:20px; left:20px;}
相对定位
.masthead{ position:relative;}//相对于relative的位置.masthead .social-sites{ position:absolute; top:10px; right:0;}
固定定位
但对于移动设备慎用
position:fixed; //固定
栈中定位元素
div{ position:absolute; width:200px; border:1px solid #000;}.box1{ z-index:120;}.box2{ z-index:200; <!--n越大,重叠位置最高-->}.box3{ position:static; <!--覆盖规则,没有任何效果--> z-index:200;}
处理溢出
溢出问题:
1.图像比容器宽
2.使用负的外边距或绝对定位处于盒子外面
3.对元素设置了显式高度,内容太高无法装入盒子
overflow属性
1.visible(默认):所有内容都可见
2.hidden:隐藏盒子容纳不了的内容
3.scroll:无论是否需要,都加滚动条
4.auto:滚动条仅在溢出内容时出现
垂直对齐元素
vertical-align属性
1.baseline:元素基准线对齐父元素的基准线
2.middle:元素位于父元素中央
3.sub:下标
4.super:上标
5.text-top:元素顶部对齐父元素的顶部
6.text-bottom:元素底部对齐父元素的底部
7.top:使元素的顶部对齐当前行里最高元素顶部顶部
8.bottom:使元素的底部对齐当前行里最高元素顶部底部
9.行高百分比某个值:正负都可以
修改鼠标指针
cursor
cursor:default;
- Html5与Css3元素可见性、浮动、定位、对齐(九)
- 浮动与定位,浮动定位(html5技术)
- css元素定位与浮动
- 元素的定位与浮动
- clearfix--清楚浮动(来源:HTML5与CSS3基础教程)
- CSS元素定位--浮动(float)与清楚(clear)
- CSS ——浮动与定位元素
- css3-定位和浮动
- Html5与Css3元素和属性(一)
- 绝对定位与浮动定位(随笔)
- CSS3浮动与清除浮动
- 浮动元素的两端对齐
- 浮动元素的两端对齐
- 浮动元素的两端对齐
- 如何居中一个元素(正常、绝对定位、浮动元素)
- CSS布局——元素浮动与定位篇
- 浮动定位与清理浮动
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
- 数据压缩实验六 MPEG音频压缩编码
- 剑指Offer----变态跳台阶
- CNN参数
- 快速寻找控件的id
- 8.3 Hibernate:一对多单向关联(unidirectional)
- Html5与Css3元素可见性、浮动、定位、对齐(九)
- python_(7.9)
- GDOI2017小结
- jzoj1154【GDOI2003】购物(树形dp)
- VM虚拟机下安装Centos7.0图文教程
- 在建DB块时候应该注意的问题
- OpenCV自学笔记16. 卡尔曼滤波器小例子
- Fetch
- [bzoj4870] [Shoi2017]组合数问题