css完整总结:第一篇(定位和布局)

这次对CSS中所有的语法进行一次综合性的总结,后续的文章,将侧重与JavaScript和PHP,微信开发(小程序),以及Linux运维方面。css中设计到定位,布局,尺寸,外补白,内补白,边框,背景,颜色,字体,文本,文本装饰,书写模式,伸缩盒,装换,过渡,动画,媒体查询,伪类等等。我会集中对上述所说的方面进行详细的书写和说明,结合实例,让大家更好更快的掌握css3.0.那下面我们闲话少啥,拿起键盘就是敲.

1.定位属性:主要针对position,z-index,,top,right,bottom,left,clip讲述关于定位的知识点

2.position的使用.这个属性的取值有static,relative,absolute,fixed,center,page,sticky等.

从书面的定义上,我们知道对于定位最多的描述就是文档流的叙述。static表述的就是遵循常规流。static: 对象遵循常规流。此时4个定位偏移属性(top,bottom,left,right)不会被应用。 relative: 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 absolute: 对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。

盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。 fixed: 与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。 center: 与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)

page: 与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)

sticky: 对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。

该属性的表现是现实中你见到的吸附效果。(CSS3)

当position的属性为非常规流,其层叠级别就可以通过z-index属性定义。 

一般定位的属性在居中布局和排版运用的还是十分广泛的。父亲相对定位,孩子绝对定位,这样的使用方式在项目中是使用最多. 

3. z-index的使用,对于非常规流的元素使用,可以实现层叠显示。同一个层叠上下文中,层叠级别大的显示在上面,反之显示在下面。 

同一个层叠上下文中,层叠级别相同的两个元素,依据它们在HTML文档流中的顺序,写在后面的将会覆盖前面的。后面级别的大小是根据数字的大小进行判断的。 

4. 方向上的四个属性,top,left,right,bottom,指定四个方向的距离。 

5. clip 属性剪裁绝对定位元素。唯一合法的形状值是:rect (top, right, bottom, left),目前只支持正方形的裁剪,在对应的位置写入数字,即裁剪尺寸,如果写入0或者auto,默认不裁剪。 

6. 布局主要集中在display和浮动,overflow,visibility等属性。 

7. display的属性比较多,主要集中在


对于display的使用,主要针对行内和块级元素的转化。在布局中是使用比较频繁的一种样式。

8. float取值为如下:


float在绝对定位和display为 none的时候不生效。浮动在布局中主要用于将块级元素变为行内元素。改变布局的方式。不过对于浮动的使用,容易造成父元素的塌陷,所以这个时候就延伸出清除浮动的方法。对于浮动的方法,我们可以有很多,不过我推荐四种,最推荐的就是使用伪类来处理。


visibility主要针对可见性的使用:取值为如下


overflow处理溢出隐藏的,对于内容超出对象宽度和高度的情况。取值主要为:


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,697评论 1 92
  • 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:浮动元素不在普通的文档流中...
    在乎者也阅读 4,973评论 0 1
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,933评论 0 6
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 4,994评论 0 6
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,366评论 0 5

友情链接更多精彩内容