菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: CSS学习_陈佳乐_20230208 [打印本页]

作者: StandBmCR 时间: 2023-2-8 23:44
标题: CSS学习_陈佳乐_20230208
学习内容 8:00-20:00
一.CSS背景
1.背景图片
属性background-image
2.背景平铺
/* 默认值就是平铺，横向纵向都平铺 */
background-repeat: repeat;
/* 不平铺 */
background-repeat: no-repeat;
/* 横向平铺 */
background-repeat: repeat-x;
/* 纵向平铺 */
background-repeat: repeat-y;
3.背景定位
属性background-position
/* 顶部中间对齐 */
background-position: top center;
/* 右下角显示 */
background-position: right bottom;
/* 方位名词可随意变换位置 */
background-position: bottom right;
/* 只写一个方位名词，那么另一个方位名词是center */
background-position: bottom ;
background-position: right;
/* 让背景图片在盒子水平垂直居中 */
background-position: center;
/* 精确单位,写一个值另一个默认为center */
background-position: 100px 200px;
background-position: 300px;
background-position: center 300px;
4.背景图片滚动
属性 background-attachment
/* 默认值，背景随屏幕滚动 */
background-attachment: scroll;
/* 背景不随屏幕滚动 */
background-attachment: fixed;
5.背景的复合写法
属性：background
/* background: 背景颜色背景图片背景平铺背景图片滚动背景图片位置 */
background: skyblue url(../素材/bg1.png) no-repeat fixed center
6.背景半透明
属性 background: rgba(0, 0, 0, 0.2);
7.背景缩放
属性background-size
/* 精确单位来控制,第一个是宽度,第二个是高度 */
background-size: 300px 200px;
/* 使用百分比控制 */
background-size: 80% 50%;
/* 一个值只控制宽度的缩放，高度自适应 */
background-size: 80%;
/* 宽度和高度适配到覆盖整个盒子大小为止 */
background-size: cover;    [ˈkʌvə(r)]掩盖
/* 背景图片缩放到宽度或者高度任意一项到达盒子的宽度或高度就停止缩放 */
background-size: contain;

二.CSS的三大特性
1.层叠性
如果选择器相同，此时新的样式会覆盖掉旧的样式
2.继承性
子元素会继承父元素的某些样式，比如文本或者字体相关样式等。
子元素能继承的父元素的样式：text-、font-、line-等属性以及 color属性。
3.优先级（权重问题）
如果为同一个元素指定多个选择器时，就会出现优先级的情况。
如果选择器相同，执行层叠性
如果选择器不同，按照权重来执行
各种情况的权重表
继承或者 *
权重是 0,0,0,0
元素选择器
权重是 0,0,0,1
类选择器/伪类选择器
权重是 0,0,1,0
ID选择器
权重是 0,1,0,0
行内样式
权重是 1,0,0,0
!important
权重是 ∞（无穷大）

三.CSS的盒子模型
盒子模型的组成
1.边框
属性名：border
border: border-width  border-style border-color；（属性是没有顺序的，推荐这样去写）
border-style的值
dotted：点线边框
dashed：虚线边框
solid：实线边框
2.表格的细线边框
border-collapse: collapse;
collapse是合并的意思，表示相邻的边框合在一起。
3.内边距
盒子的内容和盒子边框之间的距离
属性
padding-left  左内边距
padding-right 右内边距
padding-bottom 下内边距
padding-top 上内边距
4.外边距
margin属性控制盒子和盒子之间的距离
属性
margin-top上外边距
margin-left  左外边距
margin-right 右外边距
margin-bottom 下外边距
5.margin的复合属性（和padding完全一致）
margin：10px;  上下左右的外边距都是10px
margin: 20px 30px;  上下外边距是20px  左右的外边距是30px
margin: 30px 40px 50px；  上外边距是30px  左右是40px  下是50px
margin:10px 20px 30px 40px;  上右下左外边距分别是  10px 20px 30px 40px
6.外边距合并
相邻的块元素垂直外边距会出现合并的情况
如果上面块元素有下外边距，下面的盒子有上外边距，那么就使用两者中较大的外边距值。
7.解决外边距塌陷的三种方法
给父元素添加上内边距
给父元素添加上边框
给父元素添加overflow:hidden；属性
清除内外边距
网页中很多的元素有自己默认自带的内外边距，而且不同浏览器可能不一致，所以要在写网页之前讲元素自带的内外边距给清除掉。

四.CSS的圆角边框
属性 border-radius  设置圆角边框
属性值指的是圆的半径
注意点
参数值可以是数值或者是百分比
如果想画一个正圆，就将宽高设置成一致，将属性值设置为50%
如果想要单独设置四个角的圆角边框，可以使用
border-top-right-radius(右上角)
border-bottom-right-radius(右下角)
border-top-left-radius(左上角)
border-bottom-left-radius(右上角)

2.学习内容 21:00-23:30
1.当天内容复习
2.作业提交

3.遇到的问题
代码太多,编写时容易忘记

4.如何解决
利用空闲时间多练多背

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)