>  기사  >  웹 프론트엔드  >  瓶颈_html/css_WEB-ITnose

瓶颈_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:44:561145검색

很喜欢张鑫旭大大的博客,一直看了很长世间,最近状态有点不对,又回去看了他的说说CSS学习中的瓶颈这篇博客。

个人体会

先说说个人体会吧。前端最基础的就是html、css和js,个人的理解是html是骨骼,css是衣服,js是动作。所以写好html结构是最最基础的。而css的入门也是很容易的

  • position的relative,absolute,
  • 浮动,清除浮动,
  • 盒子模型,弹性盒子
  • css精灵
  • 刚开始做前端的时候感觉每天都是新的,每天都在接触新的知识,到后来每个月都是新的,看一些别人写的效果,框架,自己来使用。到现在觉得有点浮躁了,没有以前那么快的学习到新的东西了。

    大大的观点

    回到大大的这篇博客中,自己现在的情况大概就是大大所说瓶颈1吧。。。这篇文章真的很值得一看,我自己很久没有写东西了,所以表达能力现在都不行了,现在在努力的写博客中。

    言归正传,现在来回答下大大提的几个问题:

    dl, dt, dd三个标签浏览器默认margin值多少?是否有标签默认文字粗体?

    dl {display: block;-webkit-margin-before: 1em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;}dt {display: block;}dd {display: block;-webkit-margin-start: 40px;}

    这是自己写的一个demo在chrome里面复制粘贴的,其实dt是没有默认的margin值得,这些东西自己真的没有去关注过,惭愧。。。


    line-height:150%和line-height:1.5的区别是?

    <!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    div{ font-size:16px;line-height: 150%;}    p{        font-size: 30px;    }    </style></head><body>    <div>        <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>    </div></body></html>

    line-height

    1. line-height:15px  父元素设置以px为单位的line-heigh,子元素继承其line-height,不会随着自身font-size改变而改变
    2. line-height:150% 父元素设置百分比的line-height,子元素的line-height=父元素的font-size*父元素line-height的值,不会随着子元素font-size的改变而改变
    3. line-height:1.5     父元素设置数值的line-height,子元素的line-height=子元素的font-size*父元素的line-height,会随着子元素font-size的改变而改变

    可以改变上面demo的line-height看效果

    float为何会让外部容器高度塌陷?这是bug?

    一丝大大的那些年我们一起清除过的浮动

    p.s.这好像是上个星期还是上上星期的东西了,写了一半没写完,然后放一边了,先发出来吧,还有“ vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同?其中的渲染机制是?”这个问题没写,下次补。

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.