两天学会css基础(二)
接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位。
第三部分:元素的浮动与清除
这部分的内容之前的博客已总结过。请查看css中的浮动与三种清除浮动的方法这篇文章。
浮动在网页中也用的和普遍,特别要注意清除浮动的方法。
第四部分:元素的定位
元素的定位在实际开发中会经常用到,特别是涉及到精确定位的时候。
默认情况下元素的position属性值为static
static:
对象遵循常规流。此时4个定位偏移属性不会被应用。
relative:
对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这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基础(二)的更多相关文章
- 两天学会css基础(一)
什么是css?css的作用是什么? CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等. 学 ...
- 我与前端之间不得说的三天两夜之css基础
前端基础之CSS CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... ...
- css基础二
1,文本 文本颜色: <style> body {color:red;} /*为body的所有字体设置字体颜色为红色*/ h1 {color:#00ff00;} /*为h1元素设置字体颜色 ...
- css基础总结一
最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- CSS 基础(二)
本节内容: 文本 字体 链接 列表 表格 一.文本 文本颜色 颜色属性被用来设置文字的颜色. 三种方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的 ...
- 【进阶之路】Redis基础知识两篇就满足(二)
导言 大家好,我是南橘,一名练习时常两年半的java练习生,这是我在博客园的第二篇文章,当然,都是要从别处搬运过来的,不过以后新的文章也会在博客园同步发布,希望大家能多多支持^_^ 这篇文章的出现,首 ...
- 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
[图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
随机推荐
- Golang聊天室
一.前期准备 前期准备 需要 import "net"包 IP 类型,其中一个重要的方法是 IP.ParseIP(ipaddr string)来判断是否是合法的 IP 地址 TCP ...
- 【深入JavaScript】一种JS的继承方法
这些天读了John Resig的<Secrets of JavaScript Ninja>,其中讨论到JS中实现继承的方案,非常有趣,自己探索了一下,形成了笔记,放到这里. 这个方案在Re ...
- SSIS教程:创建简单的ETL包 -- 6. 对项目部署模型使用参数(Using Parameters with the Project Deployment Model)
在本课中,将修改在第 5 课: 添加包部署模型的包配置中创建的包,以便使用项目部署模型.您将使用一个参数替换该配置值,以便指定示例数据位置.还可以复制本教程附带的已完成的 Lesson 5 包. 使用 ...
- Command操作数据
Command常用属性 CommandText 要下达至数据源的命令 CommandTimeout 出错时等待时间 //定义一个变量来存储对数据库操作的字符串 ...
- java EE 新手入门了解
郑重申明:本文转载至https://blog.csdn.net/Neuf_Soleil/article/details/80962686,在此深表感谢! 为什么选择java? 想必有很多初学者会像我一 ...
- C#获取AD域中计算机和用户的信息
如果你的计算机加入了某个AD域,则可以获取该域中所有的计算机和用户的信息. 所用程序集,需要.Net Framework 4. 添加程序集引用 System.DirectoryServices.Acc ...
- C#学习笔记(基础知识回顾)之值类型和引用类型
一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...
- django框架中form表单Post方法无法提交 Forbidden (403) CSRF verification failed. Request aborted.
问题如图: 解决方法: 在视图函数中引入并使用装饰器 from django.views.decorators.csrf import csrf_exempt @csrf_exempt
- sql按中文数字排序
有表4张 建表和插入数据sql DECLARE @p_Building TABLE ( id INT , BidName ) ); DECLARE @p_Room TABLE ( id INT , R ...
- python单下划线、双下划线、头尾双下划线说明:
单下划线.双下划线.头尾双下划线说明: __foo__: 定义的是特殊方法,一般是系统定义名字 ,类似 __init__() 之类的. _foo: 以单下划线开头的表示的是 protected 类 ...