深入解析CSS笔记

最新推荐文章于 2022-04-01 11:14:19 发布

小钢炮vv

最新推荐文章于 2022-04-01 11:14:19 发布

阅读量576

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_36754767/article/details/107388764

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

层叠、优先级和继承

可以被继承的属性：
与文本相关的属性
color、font、font分解属性、line-height、letter-spacing、text-aligh、text-indent、text-transform、white-space、word-spacing
列表属性
list-style、list-style-type、list-style-position、list-style-image
表格边框属性
border-collapse、border-spacing

第二章相对单位

:root{
            font-size: 0.75em;
        }
@media only screen and (min-width: 800px) {
    :root{
        font-size: 0.875em;
    }
}
@media only screen and (min-width: 1200px){
    :root{
        font-size: 1em;
    }
}

屏幕越大，字体越大，在开发的时候尽量使用如下规则：
font-size使用rem，border使用绝对值px，其他属性使用em单位

视口相对单位

vw：视口宽度的1/100
vh：视口高度的1/100
vmin：视口宽度和高度较小的一方1/100
vmax：视口宽度和高度较大的一方1/100
使用vw和calc也可以实现达到定义字号的目的，并且平滑过渡

 :root {
            font-size: calc(0.5em + 1vw);
        }

CSS变量

CSS原生已经支持了变量，使用方法

        :root {
            font-size: calc(0.5em + 1vw);
            --my-color:red
        }

        h1 {
            color: var(--my-color);
        }

变量也可以被继承，也可以重写，在父元素上重写

第三章盒模型

目前普遍做法是在项目开始将所有容器盒模型设置为border-box

        *,::before,::after{
            box-sizing: inherit;
        }
        :root{
            box-sizing: border-box;
        }

之所以没有直接将所有模型的box-sizing直接设置为border-box是因为可能有一些第三方CSS库最开始并没有注意这个问题，可能会使用默认的content-box进行编写，使用继承的形式，可以在遇见这种情况的时候在父容器中设置border-box:content-box即可

负外边距

设置左边和上边的负外边距，元素会向相应方向移动，设置右边和底部的负外边距元素不会移动，会将其后边的元素拉入。
猫头鹰选择器.demo + .demo会选择除第一个外的兄弟元素，在多个元素间产生间距时很有用
外边距折叠问题解决办法
over-flow非visibility、flex、table-cell、浮动、定位、添加padding或者border进行隔离。清楚浮动基本上也是这些解决方法（上下文隔离）

第四章理解浮动

页面外容器居中布局

    <style>
        :root{
            box-sizing: border-box;
        }
        *,::before,::after{
            box-sizing: inherit;
        }
        .container{
            max-width: 1080px;
            margin: 0 auto;
            height: 2em;
            background-color: red;
        }
    </style>
    <div class="container"></div>

使用max-width保证在小容器上占满，比如小屏幕上沾满这个屏幕

浮动不会增加高度的原因在于设计初衷浮动是用来为改变嵌入图片的位置的，如果在段落中图片浮动能够增加高度，那么就会造成段落高度变大，接下来的文字不会形成围绕图片的形式
浮动理论上是在浮动元素上方设置足够大的margin来达到包含浮动元素的目的

网格系统

        :root{
            box-sizing: border-box;
        }
        *,::before,::after{
            box-sizing: inherit;
            margin: 0;
            padding: 0;
        }
        .row::after{
            content: '';
            display: block;
            clear: both;
        }
        [class*='column-']{
            float: left;
        }
        .column-1{width: 8.3333%;}
        .column-2{width: 16.6667%;}
        .column-3{width: 25%;}
        .column-4{width: 33.3333%;}
        .column-5{width: 41.6667%;}
        .column-6{width: 50%;}
        .column-7{width: 58.3333%;}
        .column-8{width: 66.6667%;}
        .column-9{width: 75%;}
        .column-10{width: 83.3333%;}
        .column-11{width: 91.6667%;}
        .column-12{width: 100%;}

第五章 Flexbox

flex元素向有余下空间的一方的反方向设置margin-left(right):auto元素会向该方向移动占据空间

第七章定位和层叠上下文

粘性定位（目前处于实验阶段），position:sticky元素会处于当前位置，当滚动条到底元素后元素会处于设置一直处于设置所在的位置

第八章响应式设计

小屏幕上table无法换行的一种解决方法

 table{
    width: 100%;
    border-spacing: 0;
}
@media screen and (max-width: 50em){

    /* 变为块元素竖直排列 */
    table,thead,tr,td,th{
        display: block;
    }
    /* 将表头移除 */
    thead tr{
        position: absolute;
        top: -999px;
        left: -999px;
    }
    /* 每个行之间添加间隔 */
    tr{
        margin-bottom: 1em;
    }
}

img标签src对于不同分辨率使用不同图片可以使用srcset属性实现

    <img 
        src="cat-small.jpg" 
        srcset="cat-small.jpg  560w,
                cat-medium.jpg 800w,
                cat-big.jpg    1280w 
        " alt="小猫">

第十二章对比、颜色和间距

标题、段落等内容高度是由行高决定的，所以内容盒子高度是大于字号高度的，网页中的默认行高是1.4，从<body>继承

小钢炮vv

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
深入解析CSS笔记

第二章相对单位:root{ font-size: 0.75em; }@media only screen and (min-width: 800px) { :root{ font-size: 0.875em; }}@media only screen and (min-width: 1200px){ :root{ font-size: 1em; }}屏幕越大，字体越大，在开发的时候尽量使用
复制链接

扫一扫