CSS 知识点总结(持续更新)

最新推荐文章于 2022-10-03 21:32:54 发布

「已注销」

最新推荐文章于 2022-10-03 21:32:54 发布

阅读量194

点赞数

分类专栏： JavaScript知识点总结 CSS学习知识点管理

本文链接：https://blog.csdn.net/gl767077147/article/details/79364873

版权

CSS学习知识点管理同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript知识点总结

7 篇文章 0 订阅

订阅专栏

CSS盒子模型？

IE盒子模型，标准W3C盒子模型，IE的content 部分包括了border和padding
盒模型：content padding border margin

CSS哪些属性可以继承?优先级如何计算？

可继承样式： font-size font-family color
优先级就近原则，同权重情况下定义最近者为准
优先级为: !important > id > class > tag

如何居中div？如何居中一个浮动元素？

居中普通div元素

<style>
        #container{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>

居中浮动元素

1）为元素设置宽度 2）position：relative 3）浮动方向偏移量为50% 4）margin值为负宽度的一半

<style>
        .content{
            float: left;
            position: relative;
            width: 100px;
            height:100px;
            background-color: #000;
            left: 50%;
            margin-left: -50px;
        }
    </style>

</head>
<body>
    <div class="content">

    </div>

居中绝对定位元素

1）为元素设置宽度 2）左右偏移量都为0 3）左右外边距为 auto

<style>
        #container{
            width: 400px;
            height: 400px;
            position: relative;
            border: 1px solid red;
        }
        #content{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #000;
            margin:  0 auto;
            left: 0;
            right: 0;
        }
    </style>

</head>
<body>
    <div id="container">
        <div id="content"></div>
    </div>
</body>
</html>

垂直水平居中

适用于盒子高宽不定

position:relative/absolute；left:50%；top:50%；transform:translate(-50%,-50%)

link 和@import 的区别？

link是html方式 import是css方式
link最大限度支持并行下载，@import过多嵌套导致串行下载

CSS hack

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack：1）属性hack。2）选择器hack。3）IE条件注释

IE条件注释：适用于[IE5, IE9]常见格式如下
  
选择器hack：不同浏览器对选择器的支持不一样
属性hack：不同浏览器解析bug或方法

这里写图片描述

CSS兼容方案

a标签的CSS顺序？

link
visited
hover
active

IE6双边距

行内属性设置了块级属性（display: block;）后，会产生双倍边距。
解决方案是在添加一个 display: inline; 或者 display: table;

双倍margin

浮动元素设置了margin在IE6下会产生双倍margin。
只要给浮动元素设置 display: inline;就可以了。或者说使用IE6的hack：_margin；

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 知识点总结(持续更新)

CSS盒子模型？IE盒子模型，标准W3C盒子模型，IE的content 部分包括了border和padding 盒模型：content padding border marginCSS哪些属性可以继承?优先级如何计算？可继承样式： font-size font-family color 优先级就近原则，同权重情况下定义最近者为准优先级为: !important &gt;...
复制链接

扫一扫