《CSS世界》笔记

CSS世界

1. 概念

  1. 三种盒子

    display: block;  外在的“块级盒子”和内在的“块级容器盒子”
    display: inline-block;   外在的"内联盒子"和内在的"块级容器盒子"
    display: inlinel;    内外都是“内联盒子”
    
    理解:
    display: block; => display: block-block;
    display: table; => display: block-table;
    
  2. 两种尺寸

    内在尺寸:尺寸由内部元素决定
    外在尺寸:尺寸由外部元素决定
    
  3. "鑫三无"准则

    无宽度:少了代码,少了计算,少了维护
    无图片
    无浮动
    
  4. 格式化宽度

    position:absolute 和 position:fixed 中的left/right 和 top/bottom 同时存在的时候
    
    定位祖先元素宽度:1000px,设置子级top: 20px; left: 20px;则子级宽度1000-20-20=960
    
  5. 自定义滚动两种原理

    借助原生滚动:scrollLeft/scrollTop
    根据内部元素尺寸和容器关系,修改内部元素的位置实现滚动效果
    
  6. 浏览器渲染的原理

    下载文档内容
    加载头部的样式的资源
    从上而下,自外而内的顺序渲染DOM
    
  7. 替换元素和非替换元素

    替换元素:内容可以被替换
     案例:<img src="1.jpg"> 1.jpg被替换为2.jpg
     包含:img,video,audio,iframre,input,textarea,object
     特性:
     1. 内容的外观不受页面上CSS的影响,如果更改,需要appearance或者浏览器暴露的一些样式接口::ms-check{}等
     2. 有自己的尺寸:默认300*150
    
  8. margin和padding特性

    针对内联元素,设置padding,会增大padding的样式空间,但是不会占据空间
    比如
    a {
        padding: 50px;
        background: red;
    }
    a标签的红色范围增大了,但是不会影响到布局结构
    
    使用:
    1. 登录 | 注册,使用padding+border设置分隔符,能控制边框厚度大小
    2. 针对非替换元素的内联元素,margin,padding,border都不计算高度,但是会发生渲染
    3. 针对padding:padding百分比(无论水平和垂直)都是针对宽度计算
     原因:height大多数计算值为0,跟摆设无区别,再加上CSS默认是水平流,计算值会一直有效
    4. 内置padding的标签
     input,textarea,button,select
    案例:
    1. 首页头图固定高度,在大屏OK,小屏幕显大,使用padding进行控制(实现5:1的头图)
    .box {
        padding: 10% 50%;
        position: relative;
    }
    .box > img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    
    2. 使用padding实现三横和双层圆效果
    .icon-menu {
        display: inline-block;
        width: 140px;
        height: 10px;
        padding: 35px 0;
        border-top: 10px solid;
        border-bottom: 10px solid;
        background-color: currentColor;
        background-clip: content-box;
    }
    
    .icon-dot {
        display: inline-block;
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 10px solid;
     border-radius: 50%;
        background-color: currentColor;
        background-clip: content-box;
    }
    
  9. margin概念

    // 1. margin支持负值
    // 2. 两端对齐:不用nth-of-type方式
    ul {
        margin-right: -20px;
    }
    li {
        margin-right: 20px;
    }
    // 3. margin合并
     块级元素,不包括浮动和绝对定位元素
     只发生在垂直方向:不考虑writing-mode的情况
    // 4. 阻止margin-top合并
     父元素设置为块状格式化上下文元素
     父元素设置border-top值
     父元素设置padding-top值
     父元素和第一个子元素之间添加内联元素进行隔离
    // 5. 阻止margin-bottom合并
     父元素设置为块状格式化上下文元素
     父元素设置border-bottom
     父元素设置padding-bottom
     父元素和最后一个子元素之间添加内联元素进行隔离
     父元素设置height/min-height/max-height
    // 6. 为什么有margin合并
     <p>第一行</p>
     <p></p>
     <p></p>
     <p>第N行</p>
     
     <p>第一行</p>
     <p>第N行</p>
     
     上述效果一样,如果没有margin合并,则第一个案例中间会出现很多空行,很丑
    // 7. 如果让一个div到右侧,不用浮动
     margin-left: auto;  // 右对齐
     margin-right: auto; // 左对齐
     margin: 0 auto;     // 居中
    // 8. 对于内联替换元素,垂直margin有效,并且没有margin合并问题(图片无合并情况)
    
  10. border属性

    1. border-color默认颜色就是color色值(outline,box-shadow,text-shadow同理)
    2. 
    
    
    案例:
    1. 鼠标移入文字(文字有边框),鼠标移入,改变文字和边框颜色,可以利用上述第一个特点
        只设置边框厚度,样式,不设置颜色,设置color颜色,这样鼠标移上去,改变color,字体和边框颜色一起改变
    
  11. 内联元素与流

    1. 不同的字体在行内盒子中的位置是不一样的
    

2. 技巧

  1. 文字少=>居中 ,文字多=>居左显示

    <div class="box">
     <p class="content"></p>
    </div>
    
    .box {
        text-align: center;
    }
    .content {
        display: inline-block;
        text-align: left;
    }
    
  2. 宽度分离原则

    // no
    .box { width: 100px, border: 1px solid red; }
    .box { width: 100px; margin: 10px; padding: 10px; }
    
    // yes
    .parent { width: 150px; }
    .child { margin: 10px; padding: 10px; border: 1px solid red; }
    
    优点:自动计算宽度,可维护
    缺点:增加HTML标签嵌套,增加页面渲染和维护成本
    
    解决宽度分离的原则:
    box-sizing: border-box;
    缺点:
    1. 不喜欢这种风格,程序员的尿性
    2. 产生没必要的消耗:对于普通内联元素,box-sizing对他们无影响,对于search类型的input搜索框也是没有必要的消耗(待验证)
    3. 不能解决所有的问题:当元素没有水平margin的时候,box-sizing才能真正无计算
    
    总结:box-sizing: border-box解决替换元素高度自适应问题
    input, textarea, img, video, object {
        box-sizing: border-box; 
    }
    
  3. 高度100%

    1. 普通
    html, body { height: 100%; }
    .box { height: 100% }
    注意:.box的100%是针对body的content box计算
    
    2. absolute/fixed定位
    .box {
        position: absolute;
        height: 100%;
    }
    注意:.box的100%是针对父级的padding box计算
    
  1. min-width/min-height和max-width/max-height的tips

    min-width/min-height: 初始值auto
    max-width/max-height: 初始值none
    
    特殊规则:
    1. 超越!important:max-width会覆盖width(即使width后有!important)
    2. min-width和max-width同时存在,且min-width>max-width的时候,以min-width为准
    
    技巧:
    问题:用css实现向下滑动的效果的时候,由于下滑元素的高度动态生成,无法确定,从0到auto的计算无法形成动画效果和过渡效果
    解决:使用max-height
     将max-width设置到足够大,那么当滑动到真实高度的时候,动画也能停止,按真实高度停止
     注意事项:设置高度足够安全的最小值,防止延迟
    
  2. 针对图片异步加载的tips

    <img>    // 注意:此处不写src属性,写了之后在某些浏览器下依然有请求
    
    img {visiblity: hidden;}
    img[src] {visiblity: visible;}
    
    针对图片进行全局设置:
    img {
        display: inline-block;
    }
    
    在css的世界,图片资源的固有尺寸是无法改变的,你能看到改变,其实是因为设置了CSS属性,现在CSS3有了object-fill属性,那是后续在研究的内容
    
  3. 正在加载中...

    正在加载中<dot>...</dot>
    
    dot {
        display: inline-block;
        height: 1em;
        line-height: 1;
        text-ailgn: left;
        vertical-align: -.25em;
        overflow: hidden;
    }
    dot::before {
        display: block;
        content: '...\A..\A.';
        white-space: pre-wrap;
        animation: dot 3s infinite step-start both;
    }
    
    @Keyframes dot {
        33% {
            transform: translateY(-2em);
        }
        66% {
            transform: translateY(-1em);
        }
    }
    
    注意:
    1. 为什么用dot:
     dot在IE8-直接展示,
    2. ::before设置display: block;在高版本浏览器下原来的3个点推倒最下面,不影响3行内容展示,::after难实现
    3. 3个点在第一行的目的兼容IE9浏览器,IE9识别dot,但是不支持animation
    
    \A换行不区分大小写,\D也可以换行
    
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,640评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,254评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,011评论 0 355
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,755评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,774评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,610评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,352评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,257评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,717评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,894评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,021评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,735评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,354评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,936评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,054评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,224评论 3 371
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,974评论 2 355

推荐阅读更多精彩内容

  • 一出门就赞叹了,可以一直走一直晒太阳的好日子。 你不得不感叹大自然的神奇造化。树木、阳光、蓝天、白云,山川、河流都...
    安喜喜阅读 370评论 0 0