css提升篇

最新推荐文章于 2024-09-09 10:37:31 发布

Windstormm

最新推荐文章于 2024-09-09 10:37:31 发布

阅读量71

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_58833537/article/details/119115208

版权

盒子模型 === 》把html所有的元素看作是一个盒子

margin（外边距）元素之间距离 + padding（内边距）边框跟内容距离 + border（边框） + 内容

注：父元素的高度是根据子元素的内容的高度而确定的也就是上面一行的

的高度

div{

margin：a b c d ===》
a=>margin-top
b=>margin-right
c=>margin-bottom
d=>margin-left

margin:a,b
a=>margin-top margin-bottom
b=>margin-right margin-left

margin:a,b,c
a=>margin-top
b=>margin-right,margin-left
c=>margin-bottom

margin:a
a=>margin-top,margin-right,margin-left,margin-bottom
}

正常文档流：从上到下从左至右

CSS浮动脱离文档流
float：left/right

如果父元素没有高度  ，一旦子元素浮动  ===》浮动塌陷  （内容）
1.找它兄弟  给一个样式clear：both/left/right

CSS定位
静态定位（.html的亲儿子）默认值是附加
position:static 没有以下四个值 top left right bottom

相对定位 top left right bottom
position:relative
基点：自己

绝对定位脱离文档流 (不占位置)
position:absolute top left right bottom
基点：爸爸（如果是静态定位） … 祖宗

固定定位脱离文档流 (不占位置)
position:fixed top left right bottom
基点：可视窗口

ResetCSS（重置样式）
自适应学习阶段不要公司里去用（因为业务不同）
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘’;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

代码实操如下：

<!DOCTYPE html>
<!--根元素-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

      .div1,.div2,.div3{
            width: 200px;
            height: 200px;
        }
        .div1{
            background: red;
            position: fixed;
            top: 0;
            left: 0;
        }
        .div2{
            border: 1px solid red;
            float:right ;
            background: green;
            position: absolute;
            right: 100px;
            top: 100px;
        }
        .div3{
            background: blue;
            position: relative;
            top:20px;
        }

    </style>
</head>
<body>
<div class="div1"></div>
    <div style="background: black;position: relative;height: 500px" >
        <div class="div2"></div>
        <div style="clear: both"></div>
    </div>
<div class="div3"></div>
</body>
</html>

Windstormm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css提升篇

盒子模型 === 》把html所有的元素看作是一个盒子margin（外边距）元素之间距离 + padding（内边距）边框跟内容距离 + border（边框） + 内容注：父元素的高度是根据子元素的内容的高度而确定的也就是上面一行的的高度div{margin：a b c d ===》a=>margin-topb=>margin-rightc=>margin-bottomd=>margin-leftmargin:a,ba=>margin-t
复制链接

扫一扫