Fork me on GitHub

随笔分类 - css

css一些知识总结

# 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. 同为块元素,脱离文档流时候,以浮动为例当父元素有宽度,子元素没有宽度,子元素浮动后,注意子元素大小;当子元素有宽度,父元素没有宽度,子元素浮动后,注意父元素大小

灵活的两列布局

# 方案1 ``` <style type="text/css"> #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-left:300px;} #main-left {margin-left:-300px;width:300px;min-height:400px;background:#98FF1A;} #main-right {min-height:400px;background:#7CC0FF;} .float {float:left;} .clear{clear:both: height : 0; line-height:0; font-size:0;} </style> <div id="main"> <div id="main-left" class="float"> 这个是左边部分,宽度确定 </div> <div id="main-right"> 这个是右边部分,宽度自动扩展 </div> <div class="clear"></div> </div> ``` 父元素padding-left:300px,每行留给子元素的宽度=父元素宽度-300px; 这时让左侧元素宽度为300px,并且设置左边距为-300px,则左侧块与父元素左边距重合了。 右侧元素宽度百分之百自适应父元素宽度。 # 方案2 圣杯和双飞翼布局 https://github.com/rccoder/blog/issues/6 ``` <div class="head">head</div> <div class="content"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> <div class="foot">foot</div> ``` 圣杯主要思想 ``` .left, .right, .main { float: left; } .left { width: 40px; height: 60px; background-color: #B9E078; margin-left: -100%; } .right { width: 60px; height: 80px; background-color: #FF9900; margin-left: -60px; } .main { background-color: crimson; width: 100%; } .content { padding: 0 60px 0 40px; } ``` 关键点1: main, left, right 我们都可以看做是在一个浮动流中,依次的顺序也是 main left right。目前是因为 main 占了100% 从而导致 left 与 right 不能和 main 浮在同一行了,这个时候我们可以利用负边距来让 left 向前移动 (即 **margin-left 为正的时候就是和左边的盒子的外边距,那么为负的时候就是像前移动了**)。 关键点2: 给content一个内边距,这样就不会出现left和main,以及right和main的重叠了 双飞翼布局主要思想 ``` <div class="head">head</div> <div class="content cleanfix"> <div class="main"> <div class="wrap">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> <div class="foot">foot</div> ``` 双飞翼布局和圣杯布局很像,区别是在 main 里面再添加一个 div, 然后对这个 div 进行 margin-left 和 margin-right,而不是给content一个padding。 ``` .wrap { background-color: darkmagenta; margin-left: 40px; margin-right: 60px; } ```