css02

盒模型
概念: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;
顺序可改变
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值