CSS基础-盒模型

最新推荐文章于 2023-05-16 22:28:13 发布

拾光璇影

最新推荐文章于 2023-05-16 22:28:13 发布

阅读量284

点赞数

本文链接：https://blog.csdn.net/xuaner1996/article/details/79126057

版权

上联：为需求而生，为用户而死，为浏览器奋斗一辈子！下联：吃CSS亏，上JS的当，最后死在兼容上！横批：前端人生

一、盒模型

1.内边距 padding

上下左右的内边距都是20px

<head>
  <style>
    div{
    width:300px;
    height:200px;
    padding:20px;
    }
  </style>
</head>

<body>
  <div>Hello CSS!</div>
</body>

单独设置某一个边的边内距

<head>
  <style>
    div{
    width:300px;
    height:200px;
    padding-left:10px;
    padding-right:20px;
    padding-top:30px;
    padding-bottom:40px;
    }
  </style>
</head>

<body>
  <div>Hello CSS!</div>
</body>

可以混写，规则如下：
padding: 20px 30px 20px 40px; /上右下左/
padding: 20px 30px 40px; /上右左下/
padding: 20px 30px; /上下右左 /

2.外边距margin

同padding

3.边框border

上下左右的边框都是20px

<head>
  <style>
    div{
    border:20px solid #f00;
    }
  </style>
</head>

<body>
  <div>Hello CSS!</div>
</body>

将属性分开单独写

<head>
  <style>
     div{
     border-width:20px;
     border-style:solid;
     border-color:#f00;
     }
  </style>
</head>

<body>
  <div>Hello CSS!</div>
</body>

单独控制每个边的各个属性

<head>
  <style>
    div{
    border-left-width:10px;
    border-right-style:solid;
    border-top-color:#f00;
    }
  </style>
</head>

<body>
  <div>Hello CSS!</div>
</body>

用代码写出三角形
保留左侧边框的颜色，其余三边的颜色均设为 transparent（透明）。

  <head>
    <style>
    p{
    display:inline-block;
    border-width:40px;
    border-style:solid;
    border-left-color:#f00;
    border-right-color:transparent;
    border-top-color:transparent;
    border-bottom-color:transparent;
    }
    </style>
  </head>

  <body>
    <p></p>
  </body>

4.两种盒模型

显示宽度 = width + padding + border(box-sizing:content-box)
显示宽度 = width(box-sizing:border-box)

二、display

1.display:inline 内联元素

不是独占一行，不能直接设置宽高

2.display:block 块级元素

独占一行，可以设置宽高

3.display:inline-block 内联元素（内联块级元素）

不是独占一行，但是可以设置宽高

4.display:none 隐藏

三、伪类

鼠标移入移出

<head>
  <style>
    .box p{display:none;}
    .box:hover p{display:block;}
  </style>
</head>

<body>
  <div class="box">
    <h3>标题</h3>
    <p>段落文字</p>
  </div>
</body>

鼠标按下抬起

<head>
  <style>
    .bar p{display:none;}
    .bar:active p{display:block;}
  </style>
</head>

<body>
  <div class="bar">
    <h3>标题</h3>
    <p>段落文字</p>
  </div>
</body>

四、font

字体大小font-size:90px;
字体颜色color:#00f;
设置字体font-family:"宋体";
字体粗细font-weight:800;
字体样式font-style:italic;
字间距letter-spacing:40px;
行高line-height:200px;
居中对齐text-align:center;
左对齐text-align:left;
右对齐text-align:right;
首行缩进text-indent:32px;
没有下划线text-decoration:none;
下划线text-decoration:underline;
上划线text-decoration:overline;
删除线text-decoration:line-through;

五、background

背景色background-color:#f00;
背景图片background-image:url(图片路径);
背景位置background-position: center;
背景不重复background-repeat:no-repeat;
背景重复background-repeat:repeat;
X轴方向重复background-repeat:repeat-x;
Y轴方向重复background-repeat:repeat-y;
背景图片大小
具体尺寸：background-size: 400px 300px;
设置百分比：background-size: 100% 50%;
填充：background-size: cover;
适应：background-size: contain;
是否随着页面滚动
固定：background-attachment: fixed;
滚动：background-attachment: scroll;

六、float

左浮动：`float:left;`

右浮动：`float:right;`

清除浮动

设置高度
父级元素浮动
溢出:隐藏overflow: hidden/auto/scroll;
在子元素后添加空元素，设置其属性为clear:both/clear:left/clear:right
clearfix

<head>
  <style>
    .clearfix:after{
    content:"; display:block; height:0; visibility:hidden; clear:both; } </style>
</head>

<body class="clearfix">
</body>

position:absolute/fixed

拾光璇影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS基础-盒模型

上联：为需求而生，为用户而死，为浏览器奋斗一辈子！下联：吃CSS亏，上JS的当，最后死在兼容上！横批：前端人生一、盒模型1.内边距 padding上下左右的内边距都是20pxhead&gt; style&gt; div{ width:300px; height:200px; padding:20px; } style&gt;head&gt;
复制链接

扫一扫