CSS特性&浮动 | 青训营笔记

MATCHA
147 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第3天

CSS中比较常见的属性

CSS三大特性

1. 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

  • 样式冲突，遵循的原则是就近原则,哪个样式离结构近，就执行哪个样式。
  • 样式不冲突，不会层叠。 image.png

2. 继承性

现实中的继承我们继承了父亲的姓
CSS中的继承子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是:子承父业。 image.png

  • 恰当地使用继承可以简化代码，降低CSS样式的复杂性
  • 子元素可以继承父元素的样式(text-，font-，line-这些元素开头的可以继承，以及color属性)
  • 继承性口诀:龙生龙，凤生凤，老鼠生的孩子会打洞\

行高继承性

body{
    font:12px/1.5 Microsoft YaHei;
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为1.5
  • 此时子元素的行高是:当前子元素的文字大小*1.5
  • body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3. 优先级

选择器权重 image.png

继承的属性权重为0，如果元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

<head>
    <style>
        /*父亲的权重是100*/
        #father{
            color:red;
        }
        /*p继承的属性权重为0*/
        p{
            color:pink;
        }
        body{
            color:red;
        }
        /*a链接浏览器默认制定了一个样式 蓝色的 有下划线 a{color:blue;}*/
    </style>
</head>
<body>
    <div id="father">
        <p>11</p> //粉色
    </div>
    <a href="#">22</a> //蓝色
</body>

浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
选择器{float:属性值;}

image.png

浮动特性——脱标

  1. 脱离标准普通流的控制移动到指定位置（俗称脱标）
  2. 浮动的盒子不再保留原先的位置 image.png 加了浮动的盒子会往我们面前移动

对齐上边缘

如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列 image.png 注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些盒子，多出的会另起一行对齐
如果浏览器变窄，则盒子自动换行

具有行内块元素特点

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

  • 如果块级盒子没有设置宽度 ，默认宽度和父级样宽，但是添加浮动后,它的大小根据内容来决定
  • 浮动的盒子中间是没有缝隙的 ，是紧挨着一起的
  • 行内元素同理

搭配标准流的父盒子使用

为了约束浮动元素位置我们网页布局般采取的策略是:

  • 先用标准流的父元素排列上下位置之后内部子元素采取浮动排列左右位置符合网页布局第一准则。
  • 这样不会太free,可以限制浮动子盒子的浮动范围

image.png

清除浮动

为什么要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位过，最后父级盒子高度为0时，就会影响下面的标准流盒子。 image.png

  • 由于浮动元素不再占用原文档流的位置 ，所以它会对后面的元素排版产生影响

（1）额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法。
额外标签法会在浮动元素未尾添加一个空的标签。例如 < div style=" clear:both" >< /div > ，或者其他标签(如< br/>等)。

  • 优点:通俗易懂，书写方便
  • 缺点:添加许多无意义的标签，结构化较差

注意:要求这个新的空标签必须是块级元素，不能是行内元素。

<div class="box">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="clear"></div>
    <!--这个新的空标签必须是块级元素，不能是行内元素-->
    <!--<span class="clear"></span>-->
    
</div>

（2）为父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
子不教，父之过，注意是给父元素添加代码

  • 优点:代码简洁
  • 缺点: 无法显示溢出的部分

（3）:after伪元素

:after方式是额外标签法的升级版。也是给父元素添加

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{  /* IE6\7专有 */
    *zoom: 1;
}
  • 优点：没有添加标签，结构更简单
  • 缺点：照顾低版本浏览器

（4）双伪元素

也是给父元素添加

.clearfix:before, .clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{  
    *zoom: 1;
}
  • 优点：代码更简洁
  • 缺点：照顾低版本浏览器
avatar
文章
阅读
粉丝