CSS碎片

1.外边距不会应用到行内非替换元素的顶端和底端,因为不会改变它的行高,所有没有视觉效果。

 而行内非替换元素上下内边距虽然也不改变行高,但却能延伸背景,所有背景可见,可能会重叠其他行。

1 span{margin-top:10px;}//无效
2
span{margin-bottom:10px;}//无效

2.垂直对齐vertical-align(可应用于所有元素)的百分数值相对于元素的line-height计算

1 p{line-height:18px;}
2 img{vertical-align:50%;}
3 <p><img></p>//这使得图像上升18*50% = 9个像素。而不是相对于图像本身的高度

3.行内非替换元素没有width,height属性。可以设置其dispaly:为block显示为块级元素或inline-block显示为行内块级元素(作为行内替换元素)使其拥有width,height属性。

4.水平对齐text-align属性只应用与块级元素

5.百分数的外边距margin内边距padding都是相对于父元素的width计算的,例子中的外边距和内边距值:300px*10% = 30px

    <div style="width:300px;border:1px dotted black;">
        <p style="margin:10%;">Lorem ipsuos cupiditate unde delectus!</lore></p>
    </div>
    <div style="width:300px;border:1px dotted black;">
        <p style="padding:10%;">Lorem ipsuos cupiditate unde delectus!</lore></p>
    </div>

6.正常流中,垂直相邻外边距会合并,两正取最大,两负取最小,一正一负相加。浮动元素周围的外边距不会合并。

7.浮动元素的左右外边界(除非设置负外边距,以及大于其包含块宽度)不能超出起包含块的左右内边界。

  下边可能会超出,但如果设置其包含块也为浮动,就可以把浮动元素超出部分也包含在父元素中,父元素扩大以包含所有内容。

8.浮动元素与其他元素发生重叠时,行内元素会完全覆盖浮动元素(背景,边框,内容)。块级元素只将内容显示在浮动元素之上,背景和边框都在浮动元素之下显示。

8.清除浮动,clear:left/right/both/none。确保清除元素的同一行上有没有浮动元素。其实就是增加清除元素的上外边距,所以显示设置的上边距可能会被忽略。

  如果需要在浮动元素和清除元素之间增加一些空白,可以设置浮动元素的下边距达到效果。

9.float:left/right浮动元素和position : absolute绝对定位,会将元素的display显示类型就会自动变为以 display:inline-block,行内块级。

10.鼠标样式css

.hoverStyle:hover{
  cursor:pointer;
}

11.包裹性:

按钮就是CSS世界中极具代表性的inline-block元素,可谓展示“包裹性”最好的例子,具体表现为:按钮文字越多宽度越宽(内部尺寸特性),但如果文字足够多,则会在容器的宽度处自动换行(自适应特性)。除了inline-block元素,浮动元素以及绝对定位元素都具有包裹性。

请看这个需求:页面某个模块的文字内容是动态的,可能是几个字,也可能是一句话。然后,希望文字少的时候居中显示,文字超过一行的时候居左显示。该如何实现?

.box {
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}

12.CSS居中:

//水平居中--行内元素:
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center
//水平居中--定宽块级元素
.centerDiv{
    width: 200px;
    background:red;
    margin: 0 auto;
}
//水平居中--不定宽块级元素,不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多)
1.加入 table 标签或者设置display:table;
     display:table;
     margin:0 auto;
2.设置 display: inline 方法:与第一种类似,改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center
3.设置 浮动 和 相对定位 来实现。通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
 父元素整个框向右移动50%,父元素的左外边界刚好在屏幕的中点;
子元素又在父元素的基础上向左移动父元素宽度的50%,这就使得子元素的右外边界刚好在定位后父元素的中点,这时子元素的中点就刚好在屏幕的中点了,实现居中效果。   <div class="wrap"> <div class="wrap-center">我们来学习一下这种方法。</div> </div> .wrap{ float:left; position:relative; left:50%; } .wrap-center{ background:#ccc; position:relative; left:-50%; }

  //垂直居中--父元素高度确定的单行文本,设置父元素的 height 和line-height高度一致来实现的。

<div class="container">
    hello World
</div>
.container{
    height:100px;
    line-height:100px;
}

  //垂直居中--父元素高度确定的多行文本、图片等的竖直居中的方法有两种:

1.使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了
2.在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差。
.container{
    height:300px;
background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ }

3.

*{margin:0;padding:0;}

.box{
height:200px;
width:300px;
background:pink;
margin:30px auto;
line-height: 200px;
}

.text{
display: inline-block;
height: auto;
font-size:16px;
line-height: normal;
vertical-align: middle;/* 保证文字垂直居中 */
}

<div class="box">
    <p class="text">
        多行 文本 未知高度垂直居中-by

        一丝多行文本未知高度垂直居中-by

        一丝多行文本未知高度垂直居中-by 一丝
    </p>
</div>


4.

.box{
height:200px;
width:300px;
background:pink;
margin:30px auto;
font-size:0;//看不见备胎
}
.box:before{
content: '我是那个备胎元素';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
.text{
display: inline-block;
font-size:16px;
vertical-align: middle;/* 保证文字垂直居中 */
}

  




/*浮动元素居中*/
.floatCenter{
    width:500px;height: 300px;
    float: left;
    background:pink;

    margin-left:-250px;
    position:relative;         
    left:50%;
 }
/*绝对定位元素居中*/
.absoluteCenter{
    position: absolute;
    background:pink;
    width: 200px;
    left:50%;
    margin-left: -100px;
}

/*垂直居中*/

posted on 2017-09-20 14:58  screamo  阅读(254)  评论(0编辑  收藏  举报

导航