学学CSS时遇见的难点总括

学学CSS时遇见的难点总括

css代码

点击下箭头⤵️变上箭头⬆️来回切换的三种格局,箭头三种形式

自己所知晓的常用的就这三种。

首先种:表达1(Wissu)下我用的是fontawesome字体,首先要去官方网站下载来用

   <i class='fa fa-angle-down'></i>
   <i class='fa fa-angle-up hidden'></i>

本人用的是bootstrap,所以hidden是自带的,上边的启幕状态正是下箭头angle-down是显得的,然后上箭头angle-up是hidden的.

上js代码:

    $('.btn-more').click(function(ev){

        $(this).children('.fa-angle-down').toggleClass('hidden');
        $(this).children('.fa-angle-up').toggleClass('hidden');
    })

就这么,上下箭头就能够来回切换了,一般的话正是呈现内容的时候大概会用到啊

其次种艺术正是,html代码

                       <li class="sub-item">
                                <a href="javascript:;">


                                </a>


                            </li>

css代码

.arrow:before {
    float: right;
    width: 20px;
    text-align: center;
    display: inline;
    font-size: 16px;
    font-family: FontAwesome;
    height: auto;
    content: "\f104";
    font-weight: 300;
    text-shadow: none;
    position: absolute;
    top: 4px;
    right: 14px;
    color: #990;
}
.arrow.open:before{
content: '\f107';
}

js代码正是

$('.nav-item>a').click(function(){
$(this).children('.arrow').toggleClass('open')
})

第二种艺术首要便是经过增多1个class来覆盖此前的10分content,同样是fonawesome的书体哈

 

作者所精晓的常用的就那三种。
第2种:说美赞臣下自家用的是fontawesome字体,…

自己所知晓的常用的就那二种。

行内成分上下未有margin,左右有,设置上下padding,视觉有功力,但作者中度不改变。

图片 1

  • 代码:http://js.jirengu.com/xedam/1/edit?html,css,output

就这么,上下箭头就足以来回切换了,一般的话即是显示内容的时候可能会用到啊

第二种办法就是,html代码

怎么font-family:Arial;字体就可以化为Arial字体?

<body>
<style>
h1{
font-family:Arial;
}
</style>
<h1>字体</h1>
</body>

在标签h一写上字体两字的时候,保存的时候会保留成utf-八的编码情势,
分析的时候会分析成Unicode。
<h一>字体</h1>中的字体假如写成\u5b57\u4f53\u000d\u000a同样能够分辨,当浏览器渲染页面包车型地铁时候,他会把你保存的编码格局调换到Unicode,然后会找到您的font-family,那一年会从您的系统个中找对应的字体库,找到之后然后拿对应的Unicode码查询他的多个字体样式,这一年把体制得到显示到页面上。


.arrow:before {
    float: right;
    width: 20px;
    text-align: center;
    display: inline;
    font-size: 16px;
    font-family: FontAwesome;
    height: auto;
    content: "\f104";
    font-weight: 300;
    text-shadow: none;
    position: absolute;
    top: 4px;
    right: 14px;
    color: #990;
}
.arrow.open:before{
content: '\f107';
}

自家用的是bootstrap,所以hidden是自带的,下面的始发状态正是下箭头angle-down是展现的,然后上箭头angle-up是hidden的.

借使3个要素既有left,又有right,它的left起效果,一般这种情状是你想后者CSS样式覆盖前者,可是尚未效果的时候,就要思量到这种状态


小编所明白的常用的就那二种。

js代码就是

怎么是异乡距合并(也叫外边距塌陷)?怎样消除异地距合并?

块的顶端外边距和尾部外边距一时被整合(折叠)为单个外边距,其大小是构成到内部的最大外边距,这种作为称作外边距塌陷(margin
collapsing),有的地点翻译为外地距合并。

  • 相邻的兄弟姐妹成分

<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>
  • 块级父成分与其首先个/尾数子元素
  • 空块成分

<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>

<div style="margin-top: 20px; margin-bottom: 20px;"></div>

<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
  • BFC会阻止成非常边距合并。
  • 参照他事他说加以调查资料:壹.MDN
    外边距合并2.
    CSS
    trick

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图