css总结

最新推荐文章于 2025-05-05 14:03:20 发布

Cons_Step_By_Step

最新推荐文章于 2025-05-05 14:03:20 发布

阅读量361

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Cons_Step_By_Step/article/details/77774078

css 专栏收录该内容

5 篇文章

订阅专栏

1.盒模型
margin->border->padding->context;
其中width和height默认设置的是context的大小，box-sizing:border-box;就是专门设置width和height指什么距离。

<body style="margin:0px">
    <div style="top:100px;left:400px;position:absolute;width: 200px;height: 200px;background-color: rgb(255,255,0)">容器1<br/>设置了position:absolute之后该容器就脱离父容器管理了。页面成了它的父容器</div>

    <div style="border: 10px solid rgb(250,0,255);margin-top:50px;padding-bottom:50px;width: 200px;height: 200px;background-color:black;color: red;">
        <p style="box-sizing:border-box;overflow:hidden;margin:0px;width:100%;height:100%;border: 10px solid rgb(0,0,255);">color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦color在这里生效哦</p>
    </div>

    <div style="margin-top:100px;width: 200px;height: 200px;background-color: rgb(0,255,255)">容器3<br/></div>
</body>

这里写图片描述

2.display

HTML 的元素可以分为两种：

块级元素（block level element）
内联元素（inline element 有的人也叫它行内元素）

两者的区别在于以下三点：
块级元素会独占一行（即无法与其他元素显示在同一行内，除非你显式修改元素的 display 属性），而内联元素则都会在一行内显示。
块级元素可以设置 width、height 属性，而内联元素设置无效。
块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

最常见块级元素应该是<p><section> <div>
内联元素有 <span> <a><img>

display为inline-block的情况下
因为字符间有距离，所有inline-block之间是有距离的。
暂时的解决方案就是先设置父元素font-size:0，然后没有元素再把font-size设置回来。

<body style="margin:0px">

    <div style="font-size: 0">
        <div style="font-size: 16;display:inline;background-color: rgb(255,0,0); width: 100px;height: 100px">我是inline设置宽高无效</div>

<div style="margin:0 10px;font-size: 16;display:inline-block;background-color: rgb(0,0,255); width: 100px;height: 100px;overflow: hidden;">我是inline-block,可以和inline在一行,设置宽高有效哦</div>

<div style="font-size: 16;display:inline-block;background-color: rgb(0,0,255); width: 100px;height: 100px;overflow: hidden;">我是inline-block,可以和inline在一行,设置宽高有效哦</div>

<div style="font-size: 16;display:inline-block;background-color: rgb(0,0,255); width: 100px;height: 100px;overflow: hidden;">我是inline-block,可以和inline在一行,设置宽高有效哦</div>

<div style="font-size: 16;display:block;background-color: rgb(0,255,0); width: 100px;height: 100px">我是block,设置宽高有效哦</div>

</div>

这里写图片描述

3.距离表示

表示	含义
%	百分比
in	英寸
cm	厘米
mm	毫米
em	1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)

4.position