css中的一些属性解析

1、inline-block

存在问题:inline-block的相互间距,元素之间会有一个左右2px的margin一样产生

           请看中间的空隙。

为什么会产生这个空隙呢??

怎么解决呢?

方案1:使子元素在html中无缝排列

<ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
</ul>

<!---变成下面的---->
<ul>
      <li>one</li><li>two</li><li>three</li>
</ul>

方案2:将父元素字号设置为0;然后在li元素上恢复字号大小

ul {
    font-size: 0;
}
li {
    font-size: 12px;
}

2、iconfont字体

3、margin值:

负值:margin 设置负值需要根据设置的方向以及元素是否浮动以及其定位方式来判断最终的行为

---------------------参考https://gold.xitu.io/post/58037f4a0bd1d000580dccd8-------------------

  a、无浮动,无定位:

           top 或者 left: 元素会按照设置的方向移动相应的距离  (margin-left: -100px;。 那么,元素会往左移动 100px)

           bottom 或者 right:元素本身并不会移动,元素后面的其他元素会往该元素的方向移动相应的距离,并且覆盖在该元素上面 (设置 margin-right: -100px;。那么,元素本身并不会移动,后面的元素会向左移动 100px 到该元素上)

   b、无浮动,position 为 relative:   同a

  c、无浮动,position 为 absolute:   top 或者 left同a     bottom 或者 right 脱离文档流对后面的无影响

   d、有float浮动:

          float方向  同  margin的负方向  (float: right; margin-right: -100px;都是right)   元素会往对应的方向(right)移动对应的距离

          float方向  反  margin的负方向  (float: right; margin-left: -100px;都是right)   则元素本身不动,元素之前或者之后的元素会向该元素的方向移动相应的距离(该元素左边的元素则会向右移动 100px,同时覆盖在该元素上)

  e、两个元素都有float(许多经典布局的案例):这种行为与没有既没有设置浮动也没有设置定位的表现类似

          案例:  一列定宽的两列流式布局  两边固定,中间自适应的三列布局(双飞翼布局)

4、float:

浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素(向漂浮起来左右移动的气球)

对多个元素设置浮动,可以实现类似inline-block的效果;但是如果每个元素的高度不一致,会出现“卡住”的情况。

浮动的负面作用就是:高度塌陷,那么就用到了清除浮动(1、clear  2、BFC)

5、clear:

不允许使用clear的元素  左边/右边/两侧(left/right/both)挨着浮动元素,底层原理是在被清除浮动的元素(使用clear的元素)上边或者下边添加足够的清除空间

     简单而言就是  它不和浮动同流合污,哪怕自己掉下一层,委屈自己

                 

<!--- 引入了一个空的div元素    不建议 ---->

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div style="clear:both;"></div>
</div>

最新版通用模式:

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

(总结:float是魔鬼,会影响其他相邻元素;但是clear是小白,其只会影响自身,不会对其他相邻元素造成影响!”)

6、position:

7、border-radius:圆角

语法:border-radius: [左上] [右上] [右下] [左下],

原理:给元素的四个角用一个相应位置尺寸(比如左上,就是左上尺寸为半径的圆)的圆去内切此元素。

8、::after和::before中的content

1、可以取空字符串,任意字符串   content: “”   content: “\e804”

2、还可以取一些属性:content: attr(id)  去dom中的attr属性

时间: 2024-11-25 00:52:53

css中的一些属性解析的相关文章

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

CSS中的!important属性用法

关于CSS的运用技巧有很多, 今天主要探讨一下CSS中 !important 这个属性的用法.在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题. 由于IE并不严格执行W3C标准, 而又几乎垄断了浏览器市场. 所以作为一名合格的网站制作人员, 必须要针对不同的浏览器进行微调. 实现不同浏览器之间兼容的方法有很多, 比如利用JS探测用户的浏览器类型,从而调用不同的样式表. 或者就是利用!important 属性来实现微调的效果. 下面是具体的例子. 下面是一段普通的 DIV 代码: 下面

深入理解css中的margin属性

转载自  http://www.cnblogs.com/zhuzhenwei918/p/6124263.html 深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些"坑".这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间

css中之margin属性

css中之margin属性 css中的margin属性看似简单,但是有时稍有不慎,就会造成错误.这篇博文我会和大家分享将margin属性用在父元素和子元素之间可能出现的状况. 例1: 效果如下所示: 对于这样的结果毫无疑问,可是如果我们希望绿色的div可以靠下面一些,即上边不要紧贴着红色div.既然是两个div的间距,我们可以在绿色div上使用margin-top来使之分离吗?看下面的例子. 例2 我们在上面(例1)的代码中加margin-top:50px;于绿色div的css中,效果如下所示:

CSS中的Position属性和Float属性

Css中的position很重要,常用有以下几个值:static,relative,absolute,fixed.Inherit. Static:静态定位.如果你没有设置position属性,那么缺省就是static.top.left.right.bottom等 属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一. Relative:相对定位.元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍会分 配给他,他两边的元素不会向它靠近来填

css中background背景属性概

css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径)  no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径)  no-repeat right top;/*不重复背景图片右上方显示*

css中background背景属性概述

background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径) no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径) no-repeat right top;/*不重复背景图片右上方显示*/ background:url(背景图片路径)

Css中Position定位属性与层级关系

今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css中Position定位属性与层级关系</title> 6 <style type="text/css"> 7 #W{ 8

css中的border-collapse属性如何设置表格边框线?(代码示例)

css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来了解一下css border-collapse属性是什么?它的作用. border-collapse 属性:设置表格的边框是否被合并为一个单一的边框,即:用于设置表格边框是合并显示还是分开显示. border-collapse 属