接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位。

第三部分:元素的浮动与清除

这部分的内容之前的博客已总结过。请查看css中的浮动与三种清除浮动的方法这篇文章。

浮动在网页中也用的和普遍,特别要注意清除浮动的方法。

第四部分:元素的定位

元素的定位在实际开发中会经常用到,特别是涉及到精确定位的时候。

默认情况下元素的position属性值为static

static:

对象遵循常规流。此时4个定位偏移属性不会被应用。

relative:

对象遵循常规流,并且参照自身在常规流中的位置通过toprightbottomleft这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

absolute:

对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

对一些div盒子做精确定位的时候会经常用到。

fixed:

与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

页面中见到的一些固定导航条就用到了这个属性。

当position的值为非static时,其层叠级别通过z-index属性定义。Z-index取值范围为大于等于1的整数。

到此,浮动与定位的知识已经讲解完毕。浮动与定位主要解决了页面上元素的摆放位置的问题。

补充:

Css布局常见问题。

1,如何让元素居中?

方法1:设置元素的margin属性为margin:0 auto;则其相对于父元素居中显示。

方法2:将元素设置为绝对定位,父元素为相对定位,left值为父元素宽度的一半,margin-left值为自身的一半且为负值,元素水平居中。

2,如何让文本居中?

设置text-align:center;使文本水平居中。设置line-height属性值等于元素个高度。使其上下居中。

本篇只对css基础部分做以总结,对于css3加入的新特性,后续会单独总结。

两天学会css基础(二)的更多相关文章

  1. 两天学会css基础(一)

    什么是css?css的作用是什么? CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等. 学 ...

  2. 我与前端之间不得说的三天两夜之css基础

    前端基础之CSS CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... ...

  3. css基础二

    1,文本 文本颜色: <style> body {color:red;} /*为body的所有字体设置字体颜色为红色*/ h1 {color:#00ff00;} /*为h1元素设置字体颜色 ...

  4. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  5. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  6. CSS 基础(二)

    本节内容: 文本 字体 链接 列表 表格 一.文本 文本颜色 颜色属性被用来设置文字的颜色. 三种方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的 ...

  7. 【进阶之路】Redis基础知识两篇就满足(二)

    导言 大家好,我是南橘,一名练习时常两年半的java练习生,这是我在博客园的第二篇文章,当然,都是要从别处搬运过来的,不过以后新的文章也会在博客园同步发布,希望大家能多多支持^_^ 这篇文章的出现,首 ...

  8. 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

    [图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...

  9. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

随机推荐

  1. 记一次C#面试

    最近参加了工作后的第一次面试,虽然最终没谈成,但是收获还是不少,不管是技术还是面试经验还是得多多积累呀. 这一次面试与在学校时候参加过的面试区别还是挺大的.校园招聘的面试问的问题似乎都比较具体,直接针 ...

  2. 最新sublime Text3 注册激活码

    sublime build 3103注册码 Enter License -- BEGIN LICENSE --Ryan ClarkSingle User LicenseEA7E-8124792158A ...

  3. Java代码生成图片验证码

    1.jsp页面显示验证码,src跳转到Controller里的:getImg_validate,reloadImg()作用是点击验证码就会换一张(重新请求getImg_validate) <ul ...

  4. SpringMVC拦截器的实现单方登陆

    过滤器跟拦截器的区别 ①拦截器是基于java的反射机制的,而过滤器是基于函数回调.②拦截器不依赖与servlet容器,过滤器依赖与servlet容器.③拦截器只能对action请求起作用,而过滤器则可 ...

  5. Server 2008 r2 多用户远程桌面配置

    参考资料链接: http://blog.163.com/fan_yishan/blog/static/476922132013018594951/ 按照以上链接的博文一步步进行配置,因为我是英文操作系 ...

  6. spss C# 二次开发 学习笔记(四)——Spss授权

    Spss的授权方式有两种,单机版和网络版. Spss的激活,在联网的情况下,通过20位的激活码激活,在未联网的情况下,Spss根据机器获取一个类似4-XXXX的锁定码,然后由激活码和锁定码算出一个授权 ...

  7. [HNOI2006]最短母串问题

    题目大意:给定一个字符串集,求一个最短字串,使得该集合内的串都是该串的一个子串 算法:AC自动机+最短路+状压DP 注意空间限制 #include"cstdio" #include ...

  8. HDU P2222 Keywords Search

    In the modern time, Search engine came into the life of everybody like Google, Baidu, etc.Wiskey als ...

  9. php 生成唯一id的几种解决方法(实例)

    php 生成唯一id,网上查了下,有很多的方法 1.md5(time() . mt_rand(1,1000000)); 这种方法有一定的概率会出现重复 2.php内置函数uniqid() uniqid ...

  10. 01Jenkins环境准备

    01.硬件环境 Linux 64位(windows环境类似) 02.安装JDK a) 标题链接到Oracle官网下载jdk-8u144-linux-x64.rpm b) 将jdk拷贝到Linux的/t ...