css布局


控制元素的显示类型和可见性

块级元素

dispaly:block;

行内元素(不能设置宽度)

display:inline;

不接受padding设置,但padding-top和padding-bottom会越界进入相邻元素的区域,而不是局限于该元素本身的空间

混合显示:该元素与其他元素出现在同一行,同时也具有块级元素的功能(可设置高度)

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知识点拾遗(九)的更多相关文章

  1. Html5与Css3知识点拾遗(二)

    页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别. 2.不用 ...

  2. Html5与Css3知识点拾遗(八)

    css5新增的元素与属性 表单内元素的属性 1. form属性 之前必须书写在表单内部.而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定表 ...

  3. Html5与Css3知识点拾遗(七)

    布局 实例:规范的命名和编排 <body> <div class="page"><!--page开始--> <header class=& ...

  4. Html5与Css3知识点拾遗(六)

    web字号 px() 百分比(较常用) em(最常用):一般1em=16px,相对单位.以父元素作参照系,父元素大小是不确定的 body{ font-size:100%; /*父元素默认为16px*/ ...

  5. Html5与Css3知识点拾遗(五)

    css3更新的颜色 RGBA:红.绿.蓝.不透明度 rgba(89,0,127,0.4); HSL和HSLA:色相.饱和度.亮度.不透明度 hsl(282,100%,25%); hsl(282,100 ...

  6. Html5与Css3知识点拾遗(四)

    web图像 JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识.重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且 ...

  7. Html5与Css3知识点拾遗(三)

    文本 small:包括免责申明.注意事项.法律限制.版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字.不传达任何额外的语气.文档摘要关键词.评论中的产品名. ...

  8. Html5与Css3知识点拾遗(一)

    1.元素 空元素: 可选的空格空格和斜杠 <img src="x.jpg" width="300" alt="pic" /> & ...

  9. HTML5与CSS3知识点总结

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...

随机推荐

  1. 团队第二次 # scrum meeting

    github 本此会议项目由PM召开,召开时间为4-3日晚上9点 召开时长15分钟 任务表格 袁勤 学习SpringBoot https://github.com/buaa-2016/phyweb/i ...

  2. #161: 给定n*n由0和1组成的矩阵,如果矩阵的每一行和每一列的1的数量都是偶数,则认为符合条件。 你的任务就是检测矩阵是否符合条件

    试题描述 给定n*n由0和1组成的矩阵,如果矩阵的每一行和每一列的1的数量都是偶数,则认为符合条件. 你的任务就是检测矩阵是否符合条件,或者在仅改变一个矩阵元素的情况下能否符合条件. "改变 ...

  3. pandas 存取数据小笔记

    import pandas as pd 1.   读取和保存 csv文件 #读 df = pd.read_csv(read_file_path, header=0) # 其中read_file_pat ...

  4. 纯Java——简易高并发框架

    转自:https://blog.csdn.net/MonkeyDCoding/article/details/81369610 0.源代码github-简易高并发框架 注:本篇博客知识来自于网课. 1 ...

  5. 初学JSON和AJAX心得透过解惑去学习

    虽然复制代码再改参数,也能正常运作.但是看懂里面语法,就可以客制成适合你自己程序.例如录制Excel巨集,会有一些赘句,这时候整合就是很重要工作. [大纲] 时间分配 AJAX Markdown教学及 ...

  6. python,opencv,imread,imwrite,存储,读取图像像素不一致,这种情况是label使用jpg格式

    最近在做图像分割,需要使用一些分割图片的label,但是发现存储的分割label感觉被平滑过了,即使使用 image = cv2.imread(info['path'],cv2.IMREAD_UNCH ...

  7. idea2017启动ssm项目卡在build阶段后报outofmemory

    如上图,设置build process heap size(Mbytes)(构建过程堆大小(单位MB))为4000,即约4GB.之前设置的是700,修改之后问题解决. 补充:导入新项目后,此参数会初始 ...

  8. Linux进程的原理及与信号的联系

    第1节 程序.进程.守护进程.僵尸进程的区别 程序.进程.守护进程.僵尸进程: 程序:c/php/java,代码文件,静态的,放在磁盘里的数据. 进程:正在内存中运行的程序,进程是动态的,会申请和使用 ...

  9. CO-产地证--需要的国家以及操作流程。

    需要产地证的国家一般是与中国有合作的亚非拉国家,比如: 巴基斯坦.智利.以色列.韩国.土耳其.越南.澳大利亚. 流程: 1.在海关官网上填报信息. 2.提交,客户在他国家的官网上确认. 3.确认无误后 ...

  10. AI大道理头尾标识

    标题 点击上方“AI大道理”,选择“置顶”公众号 重磅干货,深入讲解AI大道理 —————— 正文 —————— 浅谈则止,深入理解AI大道理 扫描下方“AI大道理”,选择“关注”公众号 欢迎加入!