美文网首页
随手记CSS的一些常用技巧

随手记CSS的一些常用技巧

作者: 大笑_876c | 来源:发表于2018-03-29 17:57 被阅读0次

    CSS的四种引入方式
    1.style属性 内联style属性
    2.style标签 内联标签样式
    3.link标签 外联样式
    4.@import 在CSS文件中引入另一个CSS文件

    利用浮动进行布局时都会有bug,解决办法是给浮动元素的父级元素设置一个clearfix类名。
    在CSS中写入如下代码:
    .clearfix::after{
    content: "";
    dispaly: block;
    clear: both;
    }

    块级元素的高度是由其内部文档流元素的高度总和决定的。

    当一个内联元素元素加了border边框属性,当页面宽度不够时,边框会另起一行却没有分裂开。
    效果如下图:


    image.png

    当输入一段英文字母过长却没有用空格分开时,浏览器会把它当成一个单词,所以不会拆开它,当页面宽度不够时也不会另起一行。
    可以通过CSS设置word-break: break-all;解决这个问题。

    内联元素的特性:
    1,不能设置width和height;
    2,多个行内元素排成一行,直到一行排不下,才会换新一行;
    3,只可以设置水平方向的边距,如:margin-left,margin-right,padding-left,padding-right.
    内联元素的高度是由建议行高和一些字体的设计得到的,无法确定内联元素的高度。

    块级元素不到迫不得已不要设置height属性,会有bug,应该由内部的文档流撑开。
    块级元素的width设置100%也会有bug,如果设置了内边距,当前元素就会超出父级元素的宽度。

    max-width可以设置最大宽度,当窗口宽度大于最大值时,元素的宽度就是设置的最大值,当缩小窗口小于设置的最大宽度时,会实现自适应的效果。

    当给子元素设置绝对定位时,记得给父级元素设置上相对定位。

    相关文章

      网友评论

          本文标题:随手记CSS的一些常用技巧

          本文链接:https://www.haomeiwen.com/subject/muqvcftx.html