接上一篇博客,还有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. 决策树遇到sklearn.exceptions.NotFittedError: XXX instance is not fitted yet. Call 'fit' with appropriate arguments before using this method.的解决方案

    1.异常信息: C:\Python36\python36.exe "E:/python_project/ImoocDataAnalysisMiningModeling/第6章 挖掘建模/6- ...

  2. 【Echo】实验 -- 实现 C/C++下UDP, 服务器/客户端 通讯

    本次实验利用UDP协议, 语言环境为 C/C++ 利用套接字Socket编程,实现Server/CLient 之间简单的通讯. 结果应为类似所示: 下面贴上代码(参考参考...) Server 部分: ...

  3. IOS9网络请求报错:The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.

    今天下载Xcode7试了下,运行项目时报上面的错误,网上查了下原来iOS9引入了新特性App Transport Security (ATS).详情:App Transport Security (A ...

  4. Delphi下OpenGL2d绘图(06)-画图(多窗口、多视图、多个DC)

    一.前言 在学习OpenGL的过程中,发现很多函数都是全局的.前面几章中都是在一个窗口DC中画图,那么要在多个窗口画图,需要怎么处理呢?网上方法有多种,这里采用其中一种,利用wglMakeCurren ...

  5. 微信小程序初体验

    小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxado ...

  6. 从Eclipse切换到IDEA工具,哎~真香!

    从Eclipse切换到IDEA工具,哎~真香!(图) 个人观点:IDEA工具用了就回不去了!!!对比很多人写,我就不赘述了.我在这里主要介绍一下IDEA工具的一些使用上的技巧,毕竟我开始学习java的 ...

  7. HDU 2578(二分查找)

    686MS #include <iostream> #include <cstdlib> #include <cstdio> #include <algori ...

  8. lumen配置日志daily模式

    默认的日志保存模式是single 也就是单文件模式 要想改成每日的daily模式可以在bootstrap/app.php下添加: /* * 配置日志文件为每日 */ $app->configur ...

  9. Java 基础:数组

    一.数组声明: int[] x; int x[]; 在Java中一般使用前者,机把int[]看做一个类型,C++中只能后者 二.数组初始化: 直接提供值: int[] x = {1, 3, 4}; i ...

  10. js生成qq客服在线代码

    说到QQ客服在线代码,随便那么百度谷歌一下就会出来,一般都是 <a target="blank" href="http://wpa.qq.com/msgrd?V=1 ...