T-CSS基础-day03-框模型、背景、渐变

最新推荐文章于 2024-07-19 15:50:46 发布

奋斗胖

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量156

点赞数

分类专栏： + CSS 文章标签： css css3

本文链接：https://blog.csdn.net/Mr_JinChang/article/details/105463392

版权

+ CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

五.框模型(又叫盒子模型)
六.背景
七.渐变（gradient）
初学者写样式步骤

五.框模型(又叫盒子模型)

框模型----元素在页面上实际占地空间的计算方式(计算公式)

默认的盒子模型：
元素实际占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素实际占地高度=上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

外边距（行内元素上下外边距无效）
改变外边距，元素会发生位移效果，做元素位置微调的时候可以使用外边距，外边距是透明的
注意：当4个方向外边距发生了冲突，保证左和上准确
1. 语法
  margin:v1; 同时设置4个方向外边距
  设置单独四个方向：
  margin-top:
  margin-right
  margin-bottom
  margin-left
  取值：
  ①以px为单位的数字；
  ②% 以父元素的宽度的百分比；
  ③auto 使上下外边距无效
  margin:auto;：让块级元素（行内块也不行）水平居中（块级元素必须定义了宽度）
  margin:auto;等价于margin-left:auto;margin-right:auto;
2. 简写方式
  margin:v1; ：同时设置4个方向外边距
  margin:v1 v2; ：v1:设置上下 v2:设置左右；衍生写法：margin:0 auto; margin:20px auto;
  margin:v1 v2 v3; ：v1:上 v2:左右 v3:下
  margin:v1 v2 v3 v4; ：上右下左
  margin的使用时机：元素位置的微调
  练习
  04_ex.html
  创建两个div，尺寸都是300px*300px,背景颜色区分开
  设置两个div之间的间距为50px.尝试以下三个方案
  方案1.给上边div设置50
  方案2.给下边div设置50
  方案3.两个div设置的和是50

外边距的特殊情况

外边距的合并
两个垂直外边距相遇时，会合并成一个
值以大的为准
解决方案：设计的时候规避（单方面的设置）

练习
05_ex.html
两个div,宽高200px，设置不同背景色--------块级
为两个div设置4个方向外边距，f12观察效果
两个span，内容随意-------------------------行内
为两个span设置4个方向外边距，f12观察效果
两个input -----------------------------------行内块
为两个input设置4个方向外边距，f12观察效果

完整的块级元素，行内块，行内元素的区别

块级	行内	行内块
单独成行	与其他行内和行内块共用一行	与其他行内和行内块共用一行
可以设置宽高	设置宽高无效	可以设置宽高
不设置宽高；宽是父元素宽度100%；高靠内容撑开	不设置宽高；宽高都靠内容撑开	不设置宽高；不同浏览器默认给不同的宽高
4个方向外边距都生效	上下外边距失效	4个方向外边距都生效，设置一个行内块的上外边距，会带着当前行的其他行内块和行内元素一起移动

默认自带外边距的元素
body(8px) ，h1~h6 ，p ，ul ，ol

练习
06_ex.html
两个div，#d1和#d2 尺寸200200，设置不同背景色
在d2添加一个div#d3，100100，设置不同背景色
给#d3添加上外边距，观察效果
外边距的溢出
外边距溢出是怎么发生的
在特殊的情况下，为子元素设置上外边距，会作用到父元素
1. 特殊情况：
  1. 父元素没有上边框
  2. 子元素内容区域的上边沿，与父元素内容区域的上边沿重合（不严谨说法：为第一个子元素设置上外边距时，会发生上外边距溢出）
2. 解决方案：
  1. 给父元素添加上边框，弊端：增加了父元素的实际占地高度
  2. 给父元素添加一个上内边距，弊端：增加了父元素的实际占地高度
  3. 给父元素添加overflow:hidden/auto;，弊端：如果想要溢出部分可见，就不能用了
  4. 完美的解决方案，在父元素第一个儿子的位置，添加一个空table元素（table不属于块级，行内，行内块）

内边距
边框到内容区域之间的距离
改变内边距，视觉上是改变元素大小，但是元素的尺寸并没有改变。内边距的颜色，就是元素的背景色
内边距的使用场合：撑开元素
padding没有auto
padding:v1; 设置4个方向内边
padding-top
padding-right
padding-bottom
padding-left
简写方式：
padding:v1;
padding:v1 v2; ：v1上下，v2左右
padding:v1 v2 v3;：v1上，v2左右，v3下
padding:v1 v2 v3 v4;：v1上，v2右，v3下，v4左
设置框模型计算方式
默认：
元素实际占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
改变框模型的计算方式：
box-sizing:content-box;：默认的框模型计算方式；
box-sizing:border-box;：设置width包含：内容区+padding+border
即：元素实际占地宽度=设置width+左右外边距
当内部元素的尺寸使用百分比设置的时候，一般都要使用border-box

六.背景

背景颜色
background-color：合法颜色值包含：transparent（全透明）
背景图片
background-image: url(09.png);：资源加双引号，单引号，不加引号都正确
背景图片的平铺
background-repeat: repeat;：repeat默认值，平铺
其他属性：①no-repeat：不平铺；②repeat-x：x轴平铺；③repeat-y：y轴平铺
背景图片的定位
background-position:
取值：①. x，y以px为单位的数字；②. x%，y%；③. 关键字 x：left/center/right y：top/center/bottom
PS.例，当background-postion:20%：当只取一个值，意为只设置x轴位置，默认y轴center
设置背景图片的尺寸
background-size: 500px;
取值：
①1个值：同时设置x,y轴大小；
②2个值：分别设置x,y轴大小；
③以px为单位的数字
④%
其他的取值：
⑤cover 背景图片等比例缩放，完全充满容器，背景图有可能显示不完整
⑥contain背景图等比例缩小，让容器显示一张完整的背景图，容器可能有空白
背景图片的固定
background-attachment:
scroll;：默认值，背景图随着页面滚动条，滚动
fixed;：背景图相对于body固定，不随着页面滚动条滚动。只会显示在本容器中，当图片进行定位时，相对于body去定位
简写方式
background：color url() repeat attachment position;
注意，简写方式中没有size
最简方式：background:color或background:url()
使用简写方式哟注意，谨慎用简写方式去替换之前的部分样式，可能发生覆盖

七.渐变（gradient）

什么是渐变
渐变是指多种颜色，平缓变化的一种效果
渐变的主要因素
色标：包含一种颜色和这种颜色出现的位置（如果不写位置，默认平均分配区域）
一个渐变至少两个色标
渐变的分类
1. 线性渐变（必须掌握）：以直线的方式填充渐变色
2. 径向渐变：以圆的方式填充渐变色
3. 重复渐变：将线性，径向，反复的实现
线性渐变
属性：background-image:
取值：linear-gradient(方向,色标1,色标2,...)
方向：
1. 关键字：写终点 to top ↑ ；to right →；to bottom ↓；to left ←。
2. 角度值：0deg=to top；90deg=to right；180deg=to bottom；270deg=to left；
径向渐变
background-image: radial-gradient(半径 at 圆心x轴坐标圆心y轴坐标，色标1，色标2，...);
半径：以px为单位的数字
圆心：
1.关键字：x:left/center/right y:top/center/bottom
2.以px为单位的数字
3.%
色标：
1.位置使用%，是半径的百分比
2.位置使用px，使用px跟半径没关系了（即：只有色标位置使用%，半径才有意义，若使用px则半径无意义）
重复渐变
1. 重复的线性
  background-image: repeating-linear-gradient(方向,色标1,色标2,...)
2. 重复的径向
  background-image: repeating-radial-gradient(半径at 圆心x轴坐标圆心y轴坐标,色标1,色标2,... )
线性渐变的浏览器兼容性问题（IE8.0以下不考虑）
写css兼容的行为，叫做写css hack
在代码中添加，代表内核的前缀
-webkit-：chrome/safari浏览器
-moz-：firefox浏览器
-o-：opera浏览器
-ms-：IE浏览器
如果线性渐变，添加了前缀做兼容，方向一定写起点（不能有to），不能写终点；不添加前缀，方向要加to，写终点。如果要想做兼容，至少写4套
```
/* 写兼容 */
background: -moz-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%); 
background: -webkit-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%)
;background: -o-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
background: -ms-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
/* 不写兼容 */
background: linear-gradient(to top, #27b0f6 0%, #0aa1ed 100%); 
```

初学者写样式步骤

找到要写样式的元素
1. 先写外，在写内，从外往里写
2. 先写上，在写下，从上往下写
3. 先写左，在写右，从左往右写
写样式步骤
1. 先写宽高，大体位置
2. 边框，背景色
3. 文本所有样式
4. 微调

奋斗胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
T-CSS基础-day03-框模型、背景、渐变

文章目录五.框模型(又叫盒子模型)六.背景七.渐变（gradient）初学者写样式步骤五.框模型(又叫盒子模型)框模型----元素在页面上实际占地空间的计算方式(计算公式)默认的盒子模型：元素实际占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距元素实际占地高度=上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距外边距（行内元素上下外...
复制链接

扫一扫