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

最新推荐文章于 2022-07-27 15:59:28 发布

XCharazz

最新推荐文章于 2022-07-27 15:59:28 发布

阅读量123

点赞数

分类专栏： web学习知识点文章标签： css html

本文链接：https://blog.csdn.net/zxq144/article/details/110914520

版权

web学习知识点专栏收录该内容

36 篇文章 1 订阅

订阅专栏

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

外边距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)]