CSS学习笔记之定位

Lavender 发布于2019-08-28 18:02 / 676人阅读

摘要：的盒子及相关盒子基础，，版式边框。可以设置盒子内容区与边框的间距。将其设为则其空间可以被复用。把图片调整到像素宽，像素高。拉大图片，使其完全填满背景区保持宽高比。简写简写后可以添加多张背景图片，用，隔开，最先添加的在上层

CSS的盒子及相关 盒子基础

postion，float，display——版式
 边框（border）。可以设置边框的宽窄、样式和颜色。
 内边距（padding）。可以设置盒子内容区与边框的间距。
 外边距（margin）。可以设置盒子与相邻元素的间距。

简写——上右下左，缺省取对边值

较宽的外边距决定了元素间的距离

没有设置width，其width为父元素width

盒子的width是其内容区的宽度，增加边距使整个盒子变得更大

浮动和清除

为父元素添加overflow：hidden属性强制包围浮动元素，该属性真正左右是防止包含元素被内容撑大

在父元素中添加非浮动元素，或者通过clearfix添加，例子如下，content必须要有





It"s fun to float.



 Here is the footer element…

```CSS
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

- 对于子元素通过上面的clearfix处理也可以，在上例中就是给p加标记

####定位
- position：static，relative，absolute，fixed
- fixed与absolute的区别在于fixed时不随屏幕滚动而改变，换句话说，它是对当前屏幕定位，而absolute是对于整个页面定位
- 只有当position不为static时，top，bottom，left，right属性才发挥作用
####显示属性
块级元素（段落，标题等）堆叠显示，行内元素（a，img，span）则并排显示，直到这一行没有空间才显示到下一行，通过改display为inline，block可以调整。将其设为none则其空间可以被复用。
####背景

![1.jpg](http://upload-images.jianshu.io/upload_images/80283-5baf1fb4ebd2d37f.jpg)

 background-color
 background-image
 background-repeat
 background-position
 background-size
 background-attachment
 background（简写属性）
-  比元素小的背景图片会在水平和垂直方向上重复出现，直至填满整个背景空间，使用background-repeat可以调整，有repeat，repeat-x，repeat-y，no-repeat，round（调整图片大小），space（空白填充）
- background-position 属性同时设定元素和图片的原点，默认top，left，可用百分比设置，默认顺序为水平，垂直。
- back-ground-size：
 50%：缩放图片，使其填充背景区的一半。
 100px 50px：把图片调整到 100 像素宽，50 像素高。
 cover：拉大图片，使其完全填满背景区；保持宽高比。
 contain：缩放图片，使其恰好适合背景区；保持宽高比。
- 简写
```CSS
body {
    background-image:url(images/watermark.png);
    background-position:center;
    background-color:#fff;
    background-repeat:no-repeat;
    background-size:contain;
    background-attachment:fixed;
}

简写后

body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

可以添加多张背景图片，用，隔开，最先添加的在上层

云服务器 GPU云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110972.html

【学习笔记】CSS深入理解之absolute

摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。《张鑫旭的CSS深入理解之absolute》学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代绝对定位的行为表现无依赖绝对...

Anleb 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之relative

摘要：张鑫旭的深入理解之对绝对定位元素的限制限制定位限制层次限制，原本对绝对定位元素无效，容器设置的情况下生效的定位特性相对于自身无侵入，不会对其他元素的布局产生影响与与同时存在时，忽视的层叠特性可以提高层叠上下文为具体数值时，限制内部绝对定位张鑫旭的CSS深入理解之relative relative对绝对定位元素的限制限制定位限制层次限制overflow，overflow原本对绝...

nanfeiyan 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之z-index

摘要：张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级，离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。张鑫旭的CSS深入理解之z-index学习笔记层叠上下文什么是层叠上下文？在z轴上延伸出一个层级，离父级层叠上下文的顶部更近。如何产生层叠上下文？根元素具有根层叠上下文 z-index不为auto的定位元素一个 z-index 值不为 ...

Steven 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之border

摘要：张鑫旭的深入理解之学习笔记不支持百分比，原因是边框本身具有宽度固定的意义，不同设备的边框不会因设备宽度而等比改变。可以利用该特性实现图标变色的效果与定位不计算区域，只限于以内的盒子。张鑫旭的CSS深入理解之border学习笔记 border-width border-width不支持百分比，原因是边框本身具有宽度固定的意义，不同设备的边框不会因设备宽度而等比改变。因此从语义上来说，...

he_xd 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之overflow

摘要：张鑫旭的深入理解之学习笔记基本属性属性介绍默认当与值相同时，等同于当与值不相同时，其中一个值被赋予时，若另一个值为，那这个会被重置为作用前提元素非对应方位的尺寸限制拉伸对于单元格等需要为状态才可以与滚动条页面默认滚动条来自与无《张鑫旭的CSS深入理解之overflow》学习笔记 overflow基本属性 overflow属性介绍 overflow: visible(默认)|hidd...

Ali_ 2019-08-30 15:54 评论0 收藏0