CSS第二天

发表于2023-08-21更新于2023-09-01

背景属性以及复合写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
background-size                                //控制背景图片大小
background-color                              //背景颜色（默认透明  transparent）
background-image ：url（）                     //背景图片
background-repeat：
repeat（平铺）no-repeat（不平铺）
repeat-x（x轴平铺）repeat-y（y轴）
background-position ：x  y；                 //改变图片背景位置
（可以是上下左右和居中的方位名词如top填入无顺序关系）只填一个第二个默认居中
  也可以直接跟xy的px值          也可以混合使用xy有顺序
background-attachment：scroll（随内容滚动 默认）fixed（背景固定）        //背景固定  
background：背景颜色  背景图片地址 背景平铺 背景图片滚动 背景图片位置
background ：rgba（0，0，0，0.3）                                   //半透明背景色


background:linear-gradient(起始方向,颜色1,颜色2,...);          //背景色渐变
(得加上浏览器私有前缀)
-moz-:代表火狐私有前缀
-ms-:代表ie浏览器私有前缀
-webkit-: 代表safari ,谷歌私有属性
-o-:代表Opera私有属性

盒子模型

1. 边框 border

1
2
3
4
5
6
7
8
9
10
11
border-width                                                    //边框粗细
border- style （solid 实线) （dashed 虚线）（dottde 点线）   //  边框样式
border-color                                               //边框颜色
border：粗细 样式 颜色    （无顺序）                      //复合写法
border-（top ） （下） （左） （右）                      //每条边框
border-collapse ：collapse                              //表格细线边框
边框图片(切图九宫格)
border-image-source                                   //图片路径
border-image-slice                                   //切割尺寸(不带单位)
border-image-width                                   //图片边框的宽度(带单位)
border-image-repeat                                 // 图片平铺/铺满/拉伸(默认

2. 内外边距的使用

1
2
3
4
5
6
7
8
9
padding:     （会改变盒子大小）                          //内边距
（如果盒子本身没有宽高值择不会撑开盒子）
复合写法
padding:5px;                           //一个值时上下左右全部都加5的内边距
padding:5px 15px                         //上下5px  左右15px
padding: 5px 15px 25px                  //上5px  左右15px 下25px
padding: 5px 15px 25px 35px              //上 5px 右15px 下25px 左35px
margin:   （简写和padding一样）                       //外边距
margin：0  auto;                                      //块元素水平居中

3. 解决两个块元素的嵌套坍陷问题

1
2
3
4
5
对于两个嵌套关系的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素
会坍陷较大的外边距值解决方法如下
可为父元素定义上边框
可为父元素定义上内边距
可为父元素添加overflow：hidden;

4. 盒子的其他常用属性

1
2
3
4
5
6
7
8
9
10
11
border-radius:                      //圆角边框正方形变圆设置50%  圆角 矩形设置成高度一半

box-shadow:                        //盒子阴影
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);   好用的盒子阴影格式
text-shadow:                       //文字阴影（和盒子类似）
h-shadod       必须      水平阴影位置
v-shadow      必须       垂直阴影位置
blou          可选       模糊距离                          //阴影不占空间位置
spread        可选       阴影尺寸
color         可选      阴影颜色
inset         可选      内外阴影 默认外阴影（outset）

5. 关于盒子模型

1
2
3
4
5
6
box-sizeing:content-box;       //标准盒子模型
工作中，标准盒模型，需要自己计算，减去border和padding
box-sizeing: border-box;       //c3新增盒模型不用自己计算
box-sizing :border-box               // 盒子模型（不会应为边框和内边距改变width）
filter：blur（5px）；                          //图片模糊  里面数值越大越模糊
width：calc（100%-30px）                     //计算盒子宽度

浮动float

1. 浮动

1
2
3
4
5
6

float:none; left tight                     //浮动
不浮动简称标准流
浮动只会影响后面的标准流不会改变前面标准流
当浮动父元素不方便加高度时但是盒子浮动又不占有位置最好父元素高度为0
就会影响下面标准流盒子所以要清除浮动

2.清除浮动

1. 使用带clear属性的空元素(额外标签法)

1
2
3
4
5
6
7
8
9
再末尾添加一个空标签加上下面这个属性（块元素）
clear：both           //清除浮动影响

<div class="clear"></div>
    .clear{
        clear:both;
    }
优点：简单，代码少，浏览器兼容性好。
缺点：不太适合语义化，代码不够优雅，后期不容易维护。

2. 使用CSS的overflow 属性

1
2
3
4
5
6
7
8
9
10
11
12
 给父级添加overflow：（hidden auto scroll  都可以）
 <div calss= box>
 <p> 1  </p>
 <p> 1  </p>
 </div>
 
 .box{
 overflow:'hidden';
}
 p{
     float:left
}

3.使用CSS的::after 伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
.clearfix给要清除浮动的盒子加上这个类名
   .clearfix:after{
　　　　　　content:"";//设置内容为空
　　　　　　height:0;//高度为0
　　　　　　line-height:0;//行高为0
　　　　　　display:block;//将文本转为块级元素
　　　　　　visibility:hidden;//将元素隐藏
　　　　　　clear:both//清除浮动
　　　　　}

　　　　.clearfix{
　　　　　　zoom:1;为了兼容IE
　　　　}