ArcherWong博客
首页
博客
css一些知识总结
作者:ArcherWong
分类:css
时间:2019-01-04 10:33:01
阅读:385
# 1. margin和padding 如果边界画一条线,则margin的属于边界外,padding属于边界内 1. 当我们给元素背景色时,margin区域不会被着色,而padding区域会被着色。 2. 当上下两个块元素,一个设置margin-bottom:10px,下面的设置margin-top:20px,两个块元素的距离不是30 而是20。 而padding则是相加的情况 3. margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离” # 2. 外边距塌陷 定义:块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距 1、相邻的兄弟姐妹元素 ``` <p style="margin-bottom: 10px;">上面的段落</p> <p style="margin-top: 20px;">下面的段落</p> ``` 两者的边距不是两者和30,而是二者较大的20. 2、块元素与其第一个或者最后一个子元素 ``` <style> .my-title{ margin:0; background-color: #808080; } .parent{ margin-top:35px; background-color: #00FF00; } .children-first{ margin-top:20px; margin-bottom:40px; } .children-second{ margin-top:20px; } </style> ``` ``` <div class="my-title"> my title </div> <div class="parent"> <div class="children-first"> children </div> <div class="children-second"> children </div> </div> ``` # 3. 定位position position 这个属性决定了元素将如何定位。它的值大概有以下五种: position 值 |如何定位 ---------|--- static | **position的默认值**。元素将定位到它的正常位置(上文提到过),其实也就相当于没有定位。元素在页面上**占据位置**。不能使用 top right bottom left 移动元素位置。 relative | 相对定位,相对于元素的正常位置来进行定位。元素在页面**占据位置**。可以使用 top right bottom left 移动元素位置。 absolute | 绝对定位,相对于最近一级的 **定位不是 static 的父元素来进行定位**。元素在页面**不占据位置**。 可以使用 top right bottom left 移动元素位置。 fixed | 绝对定位,相对**于浏览器窗口**来进行定位。其余和 absolute 一样,相当于一种特殊的 absolute。 inherit | 从父元素继承 position 属性的值。 # 其它 1. 对于块级元素,子元素的宽度默认为父元素的100%, 父元素宽度 = 子元素宽度 + padding + margin 2. 当时img这种元素时,不管我们怎么设置父元素的宽度和高度,而不设置img的宽和高时,img总是表现为其原始的宽和高。当宽和高设置一个时,另一个则等比例缩放。当宽和高都100%时则铺满这个父元素 3. 同为块元素,脱离文档流时候,以浮动为例当父元素有宽度,子元素没有宽度,子元素浮动后,注意子元素大小;当子元素有宽度,父元素没有宽度,子元素浮动后,注意父元素大小
标签:
上一篇:
没有上一篇了
下一篇:
灵活的两列布局
文章分类
css
elasticsearch
git
golang
guacamole
javascript
letsencrypt
linux
nginx
other
php
python
vue
web
阅读排行
centos7.3配置guacamole
golang笔记---关联数组(map)
letsencrypt证书-管理工具certbot
golang笔记---template模板语法
详解网络连接
友情链接
node文件
laravel-vue
ArcherWong的博客园