框模型
框模型
- 定义元素框出来元素内容 内边距 边框和外边框的方式
-
标签是由border（边框），padding（标签内容到边框的距离）
contant （最外面）
三部分组成！
框模型基本样子.PNG
- width 和 height 内容区域的宽度和高度
- 增加内边距、边框和外边距不会影响内容区域的尺寸，但 是会增加元素框的总尺寸.
实际宽度.PNG
边框的重叠
body下的div+id.PNG
head下的CSS渲染div正方形样式.PNG
渲染效果.PNG
外边距 margin
- margin （外边距）不属于标签，它只设置外边距，边框距离父标签contant边界的距离，或者距离同级标签边框的距离。
margin 纵向取大的值,横向值相加 - 外边距：与下一个元素之间的空间量
margin:value
单边设置
margin-top(上)right(右)bottom(下)left(左):value
margin可以取值auto实现水平居中的效果
margin:auto
外边距简写方法：
margin:value(四个方向相同)
margin:value(上下)value(左右)
margin:value(上)value(左右)value(下)
margin:value(上)value(右)value(下)value(左)
- display 转化标签的属性，
将行标签转化我块标签，将块转化为行，或者将块转化为内联块。
- 注意坑点
父子之间用padding，兄弟之间用margin，如果父子之间想用margin，就必需将子标签转化为inline-block；负责margin的参照系会变成父标签的兄弟。
内边距
- 内边距：内容与边框之间的距离
padding:value - 简写方法和margin一致，方向一致。
随堂笔记
-transparent 有边框但是是透明的。不可见，但是源代码可以查到。
- 背景默然包含 border padding content。
- background-clip 规定背景的绘制区域
取值border-box：边框被裁减，为默认值
padding-box：内边距被裁减
content-box：被裁减到内容框
- 背景图片不撑开高度
background-image:url(7.jpg);
- background-repeat 默认的背景图片是重复的，可以设置
repeat 默认为重复
repeat-x 仅水平重复
repeat-y 仅垂直重复
no-repeat 仅把图片显示一次
- background-size 设置背景尺寸
只有一个参数的时候，默认是宽
两个参数分别是宽高
如果设置单位百分比，默认以本标签作为参照物
如果是cover必须保证将本标签全部覆盖
contain 只是放大到浏览器认为的最大尺寸的合理值
- background-attachment：fixed背景图片固定
scroll 跟着标签滚动
fixed 固定背景图片
- background-position 背景定位
两个参数时，表示横向和纵向的偏移量
百分比 % % 第一水平 第二个垂直
left：在左边显示
center：居中
right：右边
top:顶部
bottom：底部
只有之歌参数另个默认center
- background-origin 主要针对背景图片的位置
border-box：背景图像相对与边框定位
padding-box：相对于内边距来定位
content-box：相对于内容框来定位
- background 背景属性
语法结构：background：color url repeat attachment position.
渐变属性、
- 渐变语法：background-image
取值：linear-gradient：线性渐变
radial-gradient:径向渐变
repeating-linear-gradient:重复线性渐变
repeating-linear-gradient:重复径向渐变
- 线性渐变 linear-gradient(angle,color-point1,color-point2,...)
默认从上到下渐变，angle:
第一个参数传to 方向即
to top(0deg),
to right(90deg),
to bottom(180deg),
to left(270deg).
color-point:表示颜色的起始点，中间点或者结束点，取值颜色还有位置的组合，如：red 0%,green 50%
- 径向渐变
radial-gradient(size at position,color-point1,color-point2,...)
position:为第一参数，制定圆心位置，默认值为center;可以取值为数值 百分比 或者关键字
color-point：取值颜色和位置的组合，如：red 0%,green 50%
- 重复渐变
网友评论