css02

最新推荐文章于 2022-02-10 16:36:41 发布

Synga

最新推荐文章于 2022-02-10 16:36:41 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/Synga/article/details/89203819

版权

盒模型
概念：ccs盒模型本质上是一个盒子，封装周围的html标签，他包括：边距，边框，填充和实际内容
盒模型的宽高：margin+padding+content+border

border边框

border: 边宽 样式 颜色
border: 1px; 边宽
border-style:  solid(实线) dashed(虚线) double(双实线) dotted(点) 
border-color:  颜色 transparent（透明） inherit（继承父元素）
单独设置各边写法
border-top: 设置所有上边框的属性
border-top-color： 设置上边框颜色
border-top-style：设置上边框样式
border-top-width： 设置上边框宽度
取值为1-4个值时的不同写法	
border-width： 1px; 表示四个边
border-width： 1px 1px；表示上下，左右
border-width： 1px 1px 1px； 表示 上 左右 下
border-width： 1px 1px 1px； 表示 上 右 下 左

由边宽构成的盒子模型形成的小三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            .triangle {
                width: 0;
                height: 0;
                border-top: 100px solid transparent;
                border-right: 100px solid transparent;
                border-bottom: 100px solid red;
                border-left: 100px solid transparent;
            }
    </style>
</head>
<body>
    <div class="triangle">

    </div>
</body>
</html>

content区域
文本内容默认左上对齐
通过width和height设置内容区域的大小
·auto 默认值，浏览器可计算出实际的宽度
·length 使用px，cm等单位定义宽度
·%定义基于包含块（父标签）宽高的百分比

padding内边距
指边框与内容之间的距离

padding： 1px; 表示四个边
padding： 1px 1px；表示上下，左右
padding： 1px 1px 1px； 表示 上 左右 下
padding： 1px 1px 1px； 表示 上 右 下 左

margin外边距

margin： 1px; 表示四个边
margin： 1px 1px；表示上下，左右
margin： 1px 1px 1px； 表示 上 左右 下
margin： 1px 1px 1px； 表示 上 右 下 左

外边距传递和塌陷
原理：父子嵌套标签在垂直方向的margin，父子标签是结合在一起的，他们两个的margin会取其中最大值。
正常情况下，父标签应相对浏览器进行定位，子级相对父级定位
但由于margin的塌陷，父级相对浏览器定位。而子级没有相对父级定位，就像坍陷一样。

margin塌陷解决方法

·给父级设置边框或内边距
·触发BFC(块级格式上下文)，改变父级的渲染规则
改变父级的渲染规则有以下四种方法：
1 position：absolute/fixed
2 display: inline-block
3 float: left/right
4 overflow: hidden

溢出隐藏（触发BFC）
overflow: hidden;
溢出： overflow
有效内容滚动条 scroll
隐藏溢出内容 hidden
自动 auto

设置盒子居中
背景属性
background-color：设置背景颜色
常用值：
·color name 如：red
·16进制值如： #ffffff
·rbg代码如： rgb（255， 255， 255）
transparent 默认。背景颜色为透明

background-img
背景图像

background-image: url("图像路径")；

背景图像默认位于标签的左上角，并在水平和垂直方向上重复
常用值
·url (“图像路径”)
·none 不显示背景图像

background-repeat
设置是否或如何重复背景图像
常用的值：
·repeat 默认。背景图像将在垂直方向和水平方向重复
·repaet-x 背景图像将在水平方向重复
·repeat-y 背景图像将在垂直方向重复
·no-repeat 背景图像将仅显示一次

background-position
设置背景图像的起始位置
语法：
background-position： xps yps；

background简写形式

background： red url（路径） no-repat top；
顺序可改变

Synga

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫