HTML/CSS - 随笔分类(第4页) - 澎湃_L

摘要：阅读全文

posted @ 2018-04-10 13:57 澎湃_L 阅读(399) 评论(0) 推荐(0)

摘要：情景：给脱标（使用了浮动或者定位）的元素增加了一个父级元素，但是又不方便给高度的情况下（父盒子给高度也是一个解决方法，但是大多数情况下，因为盒子的内容会经常改变，父盒子高度固定，需要每次去调整） <body> <div class='box'> <div class="red"></div> <d 阅读全文

posted @ 2018-04-08 16:49 澎湃_L 阅读(295) 评论(0) 推荐(0)

定位的盒子叠放顺序z-index

摘要：1.正常情况，按照顺序，最后的盒子在最上面，默认z-index为02.当使用z-index，数字越大，越优先显示在上面3.注意，只要定位的盒子才可以使用该方法 <body> <div class="box1">注意，只要定位的盒子才可以使用该方法</div> <div class="box2">当使阅读全文

posted @ 2018-04-08 16:19 澎湃_L 阅读(489) 评论(0) 推荐(0)

浮动的同级盒子顶对齐

摘要：情景：四个盒子如下图布局，使用浮动，可以看到3和4是顶对齐的此时会看到出现bug，4盒子上不去，解决方法是把4盒子放到2盒子和3盒子中间阅读全文

posted @ 2018-04-08 16:15 澎湃_L 阅读(293) 评论(0) 推荐(0)

子绝父相布局

摘要：子绝父相布局经常使用，是一种比较经典的定位布局父盒子使用相对定位：占位置，不会对下面的同级盒子产生影响；基准点，子盒子以父盒子左上角为基准点进行移动子盒子使用绝对定位：不占位置，完全脱标，不会对兄弟元素产生影响阅读全文

posted @ 2018-04-08 16:05 澎湃_L 阅读(764) 评论(0) 推荐(0)

浮动和定位脱标的不同（文本文字滞留问题）

摘要：阅读全文

posted @ 2018-04-08 16:01 澎湃_L 阅读(141) 评论(0) 推荐(0)

相对定位，绝对定位和固定定位

摘要：一、相对定位： 1.脱标，但是保留原来位置（下面的盒子上不来，也可以说是半脱标） 2.偏移从以自己标准流中的位置为原点二、绝对定位 1.完全脱标，不保留原来位置 2.父元素没有定位的情况，子盒子以当前屏幕为基准点进行移动 3.父元素有定位（相对，固定，绝对）的情况，子盒子以父元素（有定位的最近祖元阅读全文

posted @ 2018-04-08 15:54 澎湃_L 阅读(338) 评论(0) 推荐(0)

嵌套的定位盒子如何居中？

摘要：<div class="father"> <div class="son"></div> </div> <style> .father { width: 300px; height: 300px; border: 1px solid #000; position: relative; } .son 阅读全文

posted @ 2018-04-08 15:34 澎湃_L 阅读(441) 评论(0) 推荐(0)

常见的div布局

摘要：1、一列固定宽度且居中 2、两列左窄右宽 3、通栏平均分布阅读全文

posted @ 2018-04-08 15:25 澎湃_L 阅读(1130) 评论(0) 推荐(0)

使用浮动隐式转换为行内块元素

摘要：情景：块元素和行内元素使用浮动以后，模式会发生什么变化？结论：块元素使用浮动，会默认转换成行内块元素，行内元素使用浮动，会默认转换成行内块元素。【注意】通过以上的设置，可以实现为行内非替换元素设置宽高及内外边距。但是替换时，还需要注意转换为块级元素只是float副作用，他们本身的作用还会干扰布局阅读全文

posted @ 2018-04-04 11:13 澎湃_L 阅读(1157) 评论(0) 推荐(0)

两个盒子外边距取较大值

摘要：情景：两个盒子，第一个盒子设置100px的下外边距，第二个盒子设置200px的上外边距，试问两个盒子相差多少px？最终的答案是200px，取较大值，而不是想加等于300。阅读全文

posted @ 2018-04-03 15:31 澎湃_L 阅读(188) 评论(0) 推荐(0)

高度剩余法

摘要：有两个div，里面各有文字1和文字2，如何实现文字1和文字2的距离，可以使用高度剩余法。阅读全文

posted @ 2018-04-03 15:24 澎湃_L 阅读(258) 评论(0) 推荐(0)

让盒子里的文字居中的几种方法

摘要：问题：大盒子div下面有一段小盒子span标签包含的文字，怎么使其居中显示？第一种方法大盒子text-align: center 第二种方法大盒子box 用 padding-left/padding-right,同时调整大盒子宽度，使大盒子宽度不变注：50px是随便取得值，具体的值需计算。第三阅读全文

posted @ 2018-04-03 09:50 澎湃_L 阅读(13570) 评论(0) 推荐(0)

外边距塌陷如何解决？

摘要：问题：子盒子设置上外边距，父盒子会随着子盒子塌陷，嵌套块元素垂直外边距合并 <style> *{ padding: 0; margin: 0; } .father { height: 500px; width: 500px; background: rgb(184, 184, 167); } .so 阅读全文

posted @ 2018-04-01 18:06 澎湃_L 阅读(4651) 评论(0) 推荐(0)

CSS背景属性

摘要：★方位值只写一个的时候，另外一个值默认居中 ★写2个方位值的时候，顺序没有要求。 ★写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。 5、Background-attachment 背景是否滚动 scroll | fixed 阅读全文

posted @ 2018-03-20 00:34 澎湃_L 阅读(212) 评论(0) 推荐(0)

CSS链接伪类：超链接的状态

摘要：一、状态：二、注意点： a:link{属性:值;} a{属性:值}效果是一样的。样式的书写最好按照一定顺序阅读全文

posted @ 2018-03-20 00:30 澎湃_L 阅读(1314) 评论(0) 推荐(0)

CSS三大特性

摘要：一、层叠性当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。二、继承性继承性发生的前提是包含（嵌套关系）继承性发生的前提是包含（嵌套关系）总结：文字的所有属性都可以继承。文字颜色color可以继承；文字阅读全文

posted @ 2018-03-20 00:28 澎湃_L 阅读(156) 评论(0) 推荐(0)

CSS块元素、行内元素、行内块元素的转换

摘要：一、块元素转行内元素：display:inline 二、行内元素转块元素：display:block 三、块和行内元素转行内块元素：display:inline-block 阅读全文

posted @ 2018-03-20 00:24 澎湃_L 阅读(3882) 评论(0) 推荐(0)

CSS行内块元素(内联元素)

摘要：一、典型代表 input img 二、特点：在一行上显示可以设置宽高补充:行内块与行内块之间的空隙：如果两个span在HTML这样放置,会出现空隙,使用浮动可以去除这种间隙. 如果两个span一列排列,则之间会有2px的边框,变细可以使用负的margin值(具体可以参考另一篇文章：鼠标经过提高阅读全文

posted @ 2018-03-20 00:21 澎湃_L 阅读(342) 评论(0) 推荐(0)

CSS行内元素

摘要：一、典型代表 span a ,strong em del, ins 二、特点：在一行上显示不能直接设置宽高元素的宽和高就是内容撑开的宽高。阅读全文

posted @ 2018-03-20 00:20 澎湃_L 阅读(185) 评论(0) 推荐(0)

Loading

澎湃_L

随笔分类 - HTML/CSS

公告