CSS零碎知识点记录

CSS零碎知识点记录

  • 1. CSS属性书写顺序
  • 2.padding不会撑开盒子的情况
  • 3.行内块元素之间默认有缝隙
  • 4.将按钮固定在版心右侧位置
  • 5. 粘性定位
  • 6.定位水平垂直居中的方法
  • 7.网页布局总结

1. CSS属性书写顺序

CSS零碎知识点记录_第1张图片

2.padding不会撑开盒子的情况

若盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

例:只指定高度,不指定宽度,则padding只会撑开高度,不会撑开宽度

CSS零碎知识点记录_第2张图片
对于在div中的p元素来说,既不指定宽度也不指定高度,只给padding,会撑高盒子,但是不会撑宽盒子。
CSS零碎知识点记录_第3张图片

疑问:若对p不指定宽高和padding,那么p的宽度为父元素的宽度,高度为0,为什么指定了padding会改变p的高度,前提不是不指定高度,就不会撑开高度吗???

3.行内块元素之间默认有缝隙

行内块元素(表单元素,单元格、img)之间默认有空白缝隙
解决办法:
1.给两个盒子都加浮动,浮动的盒子之间没有缝隙

例子:
页面中只放入input和button标签,可以看到有缝隙
CSS零碎知识点记录_第4张图片

4.将按钮固定在版心右侧位置

例如
CSS零碎知识点记录_第5张图片
CSS零碎知识点记录_第6张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .w {
            width: 1200px;
            height: 1500px;
            background-color: pink;
            margin: 0 auto;
        }
        .fix {
            position: fixed;
            /* 1.走浏览器宽度的一半 */
            left: 50%;
            top: 700px;
            /* 2.利用margin走版心盒子宽度的一半距离 */
            margin-left: 605px;
            width: 50px;
            height: 50px;
            background-color: blue;
        }
       
    </style>
</head>
<body>
    <div class="fix"></div>
    <div class="w"></div>
</body>
</html>

5. 粘性定位

CSS零碎知识点记录_第7张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 1200px;
        }
        .fix {
            position: sticky;
            top: 10px;
            width: 50px;
            height: 50px;
            margin: 100px auto;
            background-color: blue;
        }
       
    </style>
</head>
<body>
    <div class="fix"></div>
</body>
</html>

6.定位水平垂直居中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位水平垂直居中</title>
    <style>
        body {
            height: 1200px;
        }
        /* 方式一 */
        /* .box {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: auto auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        } */
        
        /* 方式二 */
        .box {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* 1.left走50% 为父容器宽度的一半 */
            left: 50%;
            /* 2.margin-left设为负值,往左边走自己盒子宽度的一半 */
            margin-left: -100px;

            /* 1.top走50% 为父容器高度的一半 */
            top: 50%;
            /* 2.margin-top设为负值,往上边走自己盒子高度的一半 */
            margin-top: -100px;
        } 
       
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

7.网页布局总结

CSS零碎知识点记录_第8张图片

你可能感兴趣的:(#,CSS,css,css3,html)