CSS----基础入门（03）

1. 盒模型 组成以及用法
2. 背景属性
3. 语义化理解
4. 选择器进阶 ，优先级计算

外边距margin

使用： 上外边距可以使盒子向下移动 左外边距可以使盒子向右移动 右下外边距不能使盒子发生移动 只能将这个盒子与其他盒子的距离拉开 外边距可以设置负值

margin:10px;

margin: 0 auto ;水平居中（1.块类型 2.明确可以计算的宽度）

*{

margin:0;

padding:0;

}

内边距padding

使用：上下左右内边距全部有用 移动内容位置

加了内边距必定会增大盒模型 做内减计算 减在有效内容宽高

边框border

内外分割线

border:1px solid springgreen;

1px 边框宽度
solid 边框的形式 实线  dashed虚线  dotted小圆点  double双实线 

颜色  #677777  rgba()  rgb() 

边型必须写 ！！！其他两个可以省略！

          border-width:10px;
          border-style:solid; 
          border-color:yellow;



         border-width:10px 0px 0px 40px; 上10px 右0px 下0px 左40px
         border-style:solid double dashed dotted;
         border-color:red yellow blue orange;

边框也可以撑开盒子！！！！需要内减计算

用法：实线三角形

边框交界形成分割线

       .box {
            width: 0px;
            height: 0px;
            /* transparent 透明色 */
            /* border-top:50px solid red;
            border-left:50px solid rgba(0,0,0,0);
            border-right:50px solid rgba(0,0,0,0); */
            /* border-bottom:50px solid rgba(0,0,0,0); */


            /* 上有下左顺时针 */

            border-width:50px 50px 0px 50px;
            border-style: solid;
            border-color:red transparent transparent transparent ;
        }

width,height

width:100px/100%/20rem/20em;

width:auto; 自动的 当你不写盒子宽度的时候就是auto 
height:auto ;自动的 当你不写盒子高度的时候就是auto 内容撑开 

width:100%和 width:auto的区别

width:100% 取父盒子有效宽度为自己的宽度 盒子有内边距时可能会发生溢出
width:auto 浏览器有一个默认行为 会自动的把内边距和边框算到width里 ---》不溢出

外边距塌陷（了解）

浏览器默认问题，只发生块类型元素的上下外边距

父子嵌套塌陷

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-srwUHewY-1607447655477)(media/父子关系塌陷.png)]

兄弟上下塌陷

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-doCQNPcZ-1607447655480)(media/兄弟关系塌陷.png)]

背景属性

插入图片 img src ,css 属性插入图片

div {
   
    width:100px;
    height:100px;
    //背景属性
    background:
    
}

background:图片路径url()  是否平铺   位置/尺寸   是否随着滚动条滚动 背景颜色;


图片路径 background-image:url(./image/a.jpg);
是否平铺 background-repeat:no-repeat不平铺/repeat 平铺（默认） /repeat-x 水平/repeat-y垂直;

位置 background-position:npx mpx/n% m% / right bottom or left top or center center ;


尺寸 background-size:wpx hpx /w% h% 相对于背景盒子;

是否随着滚动条滚动:
background-attachment:scroll(默认)/fixed;
fixed: 图片固定在背景盒子上 不随内容滚动  改变了背景图参考对象 变为浏览器的可视区域

背景颜色background-color:rgba()/rgb()/#ffacdc


面试题：img插入图片和背景图片插入的区别
先打印html结构后打印css属性，，img标签图片太大，会使后面的页面留白
img加载图片顺序优先于背景属性 大的广告图都会用背景属性  与数据相关的一些小图片会用img

背景案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kdFsJiqO-1607447655483)(media/jd_bg01.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fwngegut-1607447655486)(media/背景案例02.png)]

css选择器进阶

基础选择器 * tagName class id

父子关系选择器

后代选择器

E F {
    
} 匹配的是E的后代元素  类型为F类型
.box span {
    
}

子代选择器

E > F {
    
}匹配的是E元素的直接子代 类型为F类型

适应场所：多级列表嵌套时

兄弟关系选择器

兄弟选择器

E ~ F {}匹配的是E的相邻的下面的兄弟元素 类型为F类型

相邻选择器

E + F {}匹配的是E 的紧紧相邻的下面的兄弟元素 类型为F类型

数学关系选e择器

交集选择器

EF {} 匹配的是既是E类型又是F类型的元素 
.a {}
div.a {}
p.a {}

并集选择器

E ,F ,C ,D .... {}匹配的是既是E 还有F 还有C 还有D... 

选择器优先级

选择器类型	优先级（权重）	写法
行内样式	1000
id选择器	100	#id值{}
class	10	.class值{}
TagName标签名	1	tagName {}
* 全局	0	* {}
继承属性，默认分配	无	text-(除了text-decoration),font-,line-,color,list-

复合选择器应该怎么计算优先级值?

复合选择器 = 基础选择器的和（不计算关系符号）;

.a .b {

}优先级 10+10

.a > .b {

}优先级 10+10

语义化

em,strong,ins,del,h1~h6…

什么是语义化？用合适的标签表示合适的内容

作用？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8mNPXIJ-1607447655488)(media/语义化.png)]

   | text-(除了text-decoration),font-,line-,color,list- |

复合选择器应该怎么计算优先级值?

复合选择器 = 基础选择器的和（不计算关系符号）;

.a .b {

}优先级 10+10

.a > .b {

}优先级 10+10

语义化

em,strong,ins,del,h1~h6…

什么是语义化？用合适的标签表示合适的内容

作用？

[外链图片转存中…(img-u8mNPXIJ-1607447655488)]