Loading

2018年4月10日
垂直对齐vertical-align
摘要： 1、图片和文字是默认基线（baseline）对齐，这样会导致图片下方出现3px的空隙 2、解决方法是使用其他的对齐方式，比如middle，top等等 3、使用浮动使文字环绕似乎更美观 注意：vertical-align大多是行内块和文字的对齐方式，比如img和input 阅读全文
posted @ 2018-04-10 14:49 澎湃_L 阅读(265) 评论(0) 推荐(0) 编辑
表单初始化
摘要： <body> <input type="text" name="" id=""> <textarea name="" id="" cols="30" rows="10"></textarea> </body> <style> input { outline: none;/* 取消默认的表单轮廓线 * 阅读全文
posted @ 2018-04-10 14:37 澎湃_L 阅读(368) 评论(0) 推荐(0) 编辑
使用定位隐式转换为行内块元素
摘要： 【注意】 通过以上的设置，可以实现为行内非替换元素设置宽高及内外边距。但是替换时，还需要注意转换为块级元素只是，position的副作用，他们本身的作用还会干扰布局效果。 块级元素的宽度会继承其父元素。但是，只有为行内元素设置display:block;才会有这样的效果，其他转换之后并不会默认带来这 阅读全文
posted @ 2018-04-10 14:12 澎湃_L 阅读(741) 评论(0) 推荐(0) 编辑
鼠标常用样式(cursor)
摘要： 阅读全文
posted @ 2018-04-10 13:57 澎湃_L 阅读(387) 评论(0) 推荐(0) 编辑
2018年4月8日
清除浮动的方法
摘要： 情景：给脱标（使用了浮动或者定位）的元素增加了一个父级元素，但是又不方便给高度的情况下 （父盒子给高度也是一个解决方法，但是大多数情况下，因为盒子的内容会经常改变，父盒子高度固定，需要每次去调整） <body> <div class='box'> <div class="red"></div> <d 阅读全文
posted @ 2018-04-08 16:49 澎湃_L 阅读(271) 评论(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 阅读(470) 评论(0) 推荐(0) 编辑
浮动的同级盒子顶对齐
摘要： 情景：四个盒子如下图布局，使用浮动，可以看到3和4是顶对齐的 此时会看到出现bug，4盒子上不去，解决方法是把4盒子放到2盒子和3盒子中间 阅读全文
posted @ 2018-04-08 16:15 澎湃_L 阅读(280) 评论(0) 推荐(0) 编辑
子绝父相布局
摘要： 子绝父相布局经常使用，是一种比较经典的定位布局 父盒子使用相对定位：占位置，不会对下面的同级盒子产生影响；基准点，子盒子以父盒子左上角为基准点进行移动 子盒子使用绝对定位：不占位置，完全脱标，不会对兄弟元素产生影响 阅读全文
posted @ 2018-04-08 16:05 澎湃_L 阅读(565) 评论(0) 推荐(0) 编辑
浮动和定位脱标的不同（文本文字滞留问题）
摘要： 阅读全文
posted @ 2018-04-08 16:01 澎湃_L 阅读(133) 评论(0) 推荐(0) 编辑
相对定位，绝对定位和固定定位
摘要： 一、相对定位： 1.脱标，但是保留原来位置（下面的盒子上不来，也可以说是半脱标） 2.偏移从以自己标准流中的位置为原点 二、绝对定位 1.完全脱标，不保留原来位置 2.父元素没有定位的情况，子盒子以当前屏幕为基准点进行移动 3.父元素有定位（相对，固定，绝对）的情况，子盒子以父元素（有定位的最近祖元 阅读全文
posted @ 2018-04-08 15:54 澎湃_L 阅读(329) 评论(0) 推荐(0) 编辑